// App shell — composes everything

function App(){
  const [fleet, setFleet] = React.useState(FLEET);
  const [activeId, setActiveId] = React.useState('HX-01');
  const [toast, setToast] = React.useState(null);
  const [eStopOpen, setEStopOpen] = React.useState(false);

  const active = fleet.find(d => d.id === activeId) || fleet[0];

  // Simulated controller state (wobbles slightly)
  const t = useClock();
  const controller = {
    status: 'OK',
    model: 'Herelink HX-2',
    battery: 0.78,
    lx: Math.sin(t/1800)*0.3, ly: Math.cos(t/2200)*0.2,
    rx: Math.sin(t/1500+1)*0.25, ry: Math.cos(t/1700)*0.3
  };
  const starlink = {
    status: 'STRONG',
    latency: 38 + Math.round(Math.sin(t/800)*4),
    down: (210 + Math.sin(t/1200)*18).toFixed(0),
    up: (42 + Math.sin(t/900)*4).toFixed(0),
    snr: (11.2 + Math.sin(t/1000)*0.6).toFixed(1)
  };

  const showToast = (msg, tone='ok') => {
    setToast({ msg, tone, id: Date.now() });
    setTimeout(() => setToast(t => (t && t.msg === msg) ? null : t), 2600);
  };

  const onArmToggle = () => {
    setFleet(f => f.map(d => d.id === active.id ? { ...d, armed: !d.armed } : d));
    showToast(active.armed ? `${active.id} DISARMED` : `${active.id} ARMED · rotors nominal`);
  };
  const onMode = (mode) => {
    setFleet(f => f.map(d => d.id === active.id ? { ...d, mode } : d));
    showToast(`${active.id} mode → ${mode}`);
  };
  const onEStopConfirm = () => {
    setFleet(f => f.map(d => ({...d, armed: false, mode: d.link === 'LOST' ? 'OFFLINE' : 'RTL'})));
    setEStopOpen(false);
    showToast('EMERGENCY STOP broadcast — all drones RTL', 'warn');
  };

  return (
    <div style={as.root}>
      {/* Video fills everything under the top bar; rails overlay */}
      <div style={as.videoWrap}>
        <VideoFeed drone={active} showGrid={true} showCrosshair={true}/>
        {/* gradient vignettes for readability */}
        <div style={as.vignTop}/>
        <div style={as.vignLeft}/>
        <div style={as.vignRight}/>
        <div style={as.vignBottom}/>
      </div>

      <TopBar starlink={starlink} controller={controller} t={t} onEStop={()=>setEStopOpen(true)}/>
      <FleetRail fleet={fleet} activeId={activeId} onSelect={setActiveId}/>
      <RightColumn drone={active} onArmToggle={onArmToggle} onMode={onMode}/>
      <MiniMap fleet={fleet} activeId={activeId} onSelect={setActiveId}/>

      {/* Toast */}
      {toast && (
        <div key={toast.id} style={{...as.toast, borderLeftColor: toast.tone === 'warn' ? 'var(--warn)' : 'var(--accent)'}}>
          <span className="mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'.14em'}}>SYSTEM</span>
          <span style={{fontSize:13}}>{toast.msg}</span>
        </div>
      )}

      {/* E-Stop modal */}
      {eStopOpen && (
        <EStopModal fleet={fleet} onCancel={()=>setEStopOpen(false)} onConfirm={onEStopConfirm}/>
      )}
    </div>
  );
}

function EStopModal({ fleet, onCancel, onConfirm }){
  const active = fleet.filter(d => d.link !== 'LOST');
  const [holdPct, setHoldPct] = React.useState(0);
  const holdRef = React.useRef(null);
  const startHold = () => {
    const start = Date.now();
    const step = () => {
      const p = Math.min(1, (Date.now()-start)/1500);
      setHoldPct(p);
      if (p >= 1){ onConfirm(); setHoldPct(0); }
      else holdRef.current = requestAnimationFrame(step);
    };
    holdRef.current = requestAnimationFrame(step);
  };
  const cancelHold = () => { if (holdRef.current) cancelAnimationFrame(holdRef.current); setHoldPct(0); };

  return (
    <div style={as.modalBackdrop}>
      <div style={as.modal}>
        <div style={as.modalStripe}/>
        <div style={as.modalHead}>
          <div>
            <div className="mono" style={{fontSize:10, color:'var(--danger)', letterSpacing:'.22em', fontWeight:700}}>
              ● EMERGENCY PROTOCOL
            </div>
            <div style={{fontSize:22, fontWeight:500, marginTop:8, letterSpacing:'.02em'}}>Halt all active drones</div>
            <div style={{fontSize:13, color:'var(--ink-2)', marginTop:8, lineHeight:1.55}}>
              All armed aircraft will disarm if safe, or enter Return-To-Launch. This action cannot be cancelled
              individually and will be logged against your operator ID.
            </div>
          </div>
        </div>
        <div style={as.modalFleet}>
          {active.map(d => (
            <div key={d.id} style={as.modalFleetRow}>
              <span className="mono" style={{fontSize:11, color:'var(--ink-3)', width:60}}>{d.id}</span>
              <span style={{fontSize:12, fontWeight:500, flex:1}}>{d.call}</span>
              <span className="mono" style={{fontSize:10.5, color:'var(--warn)', letterSpacing:'.1em'}}>
                → {d.armed ? 'RTL' : 'HOLD'}
              </span>
            </div>
          ))}
        </div>
        <div style={as.modalActions}>
          <button style={as.modalCancel} onClick={onCancel}>CANCEL</button>
          <button
            style={as.modalConfirm}
            onMouseDown={startHold} onMouseUp={cancelHold} onMouseLeave={cancelHold}
            onTouchStart={startHold} onTouchEnd={cancelHold}
          >
            <div style={{...as.modalConfirmFill, width:`${holdPct*100}%`}}/>
            <span style={{position:'relative'}}>HOLD 1.5s — EXECUTE</span>
          </button>
        </div>
      </div>
    </div>
  );
}

const as = {
  root: { position:'relative', width:'100%', height:'100%', overflow:'hidden', background:'var(--bg)' },
  videoWrap: { position:'absolute', top:58, left:260, right:340, bottom:0, overflow:'hidden' },
  vignTop: { position:'absolute', top:0, left:0, right:0, height:80, background:'linear-gradient(rgba(0,0,0,.5), transparent)', pointerEvents:'none' },
  vignLeft:  { position:'absolute', top:0, bottom:0, left:0, width:80, background:'linear-gradient(90deg, rgba(0,0,0,.4), transparent)', pointerEvents:'none' },
  vignRight: { position:'absolute', top:0, bottom:0, right:0, width:80, background:'linear-gradient(-90deg, rgba(0,0,0,.4), transparent)', pointerEvents:'none' },
  vignBottom:{ position:'absolute', bottom:0, left:0, right:0, height:100, background:'linear-gradient(transparent, rgba(0,0,0,.55))', pointerEvents:'none' },

  toast: {
    position:'absolute', bottom:20, right:360, zIndex:30,
    background:'rgba(10,14,19,.92)', border:'1px solid var(--line-2)',
    borderLeft:'3px solid', padding:'10px 16px',
    display:'flex', flexDirection:'column', gap:3, minWidth:240,
    backdropFilter:'blur(6px)'
  },

  modalBackdrop: {
    position:'absolute', inset:0, background:'rgba(0,0,0,.55)', backdropFilter:'blur(4px)',
    display:'flex', alignItems:'center', justifyContent:'center', zIndex:100
  },
  modal: {
    position:'relative', width:520, background:'var(--panel-2)', border:'1px solid var(--line-2)',
    boxShadow:'0 20px 60px rgba(0,0,0,.6)'
  },
  modalStripe: {
    position:'absolute', top:0, left:0, right:0, height:2,
    background:'repeating-linear-gradient(90deg, var(--danger) 0 12px, #3a0a0a 12px 24px)'
  },
  modalHead: { padding:'28px 28px 18px' },
  modalFleet: { padding:'0 28px', display:'flex', flexDirection:'column', gap:6, maxHeight:180, overflowY:'auto' },
  modalFleetRow: {
    display:'flex', alignItems:'center', gap:12, padding:'8px 12px',
    background:'rgba(255,255,255,.02)', border:'1px solid var(--line)'
  },
  modalActions: { display:'flex', gap:10, padding:'22px 28px' },
  modalCancel: {
    flex:1, padding:'14px', fontFamily:'inherit', fontSize:12, fontWeight:600, letterSpacing:'.14em',
    border:'1px solid var(--line-2)', color:'var(--ink-2)'
  },
  modalConfirm: {
    position:'relative', flex:2, padding:'14px', fontFamily:'inherit', fontSize:12, fontWeight:700, letterSpacing:'.14em',
    border:'1px solid var(--danger)', color:'var(--danger)', background:'rgba(255,90,90,.04)',
    overflow:'hidden'
  },
  modalConfirmFill: { position:'absolute', left:0, top:0, bottom:0, background:'rgba(255,90,90,.25)' }
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);

// Edit-mode bridge
window.addEventListener('message', (e) => {
  if (!e.data) return;
  if (e.data.type === '__activate_edit_mode') document.body.setAttribute('data-edit', '1');
  if (e.data.type === '__deactivate_edit_mode') document.body.removeAttribute('data-edit');
});
window.parent.postMessage({type:'__edit_mode_available'}, '*');