// Video feed + OSD overlay. The "video" is a CSS-rendered landscape to keep
// the design self-contained; replace with <video> in production.

function VideoFeed({ drone, showGrid, showCrosshair }){
  const t = useClock();
  // subtle parallax on the fake terrain so it looks live
  const pan = Math.sin(t / 4000) * 3;
  const tilt = Math.cos(t / 5500) * 1.5;

  return (
    <div style={vs.stage}>
      {/* Fake terrain render — horizon + ground grid */}
      <div style={{...vs.sky, transform:`translate(${pan}%, ${tilt}%)`}}>
        <div style={vs.sun} />
        <div style={vs.haze} />
      </div>
      <div style={{...vs.ground, transform:`translate(${-pan*0.8}%, ${-tilt*0.6}%)`}}>
        <div style={vs.groundGrid} />
        {/* A few landmark shapes */}
        <div style={{...vs.landmark, left:'22%', top:'28%', width:'8%', height:'14%'}} />
        <div style={{...vs.landmark, left:'58%', top:'18%', width:'14%', height:'8%', opacity:.55}} />
        <div style={{...vs.landmark, left:'74%', top:'36%', width:'6%', height:'10%', opacity:.7}} />
        <div style={{...vs.road, left:'10%', top:'48%', width:'90%'}} />
      </div>

      {/* Grain */}
      <div style={vs.grain} />
      {/* Scanlines */}
      <div style={vs.scan} />

      {/* OSD grid overlay */}
      {showGrid && <OSDGrid />}
      {showCrosshair && <OSDCrosshair />}

      {/* Corner OSD readouts */}
      <OSDCorners drone={drone} t={t} />

      {/* Recording tag */}
      <div style={vs.recTag} className="mono">
        <span style={vs.recDot} />
        REC · 04:12:33 · 4K60 · H.265
      </div>

      {/* Zoom ladder */}
      <div style={vs.zoomTag} className="mono">EO · ZOOM 4.2× · f/2.8</div>

      {/* Track box */}
      <div style={vs.trackBox}>
        <span style={vs.trackCorner('tl')} />
        <span style={vs.trackCorner('tr')} />
        <span style={vs.trackCorner('bl')} />
        <span style={vs.trackCorner('br')} />
        <div style={vs.trackLabel} className="mono">TGT · 1.2km · MOVING</div>
      </div>
    </div>
  );
}

function OSDGrid(){
  return (
    <svg style={vs.gridSvg} viewBox="0 0 100 56.25" preserveAspectRatio="none">
      {[1,2].map(i => (
        <line key={'v'+i} x1={i*33.33} y1="0" x2={i*33.33} y2="56.25" stroke="rgba(255,255,255,.08)" strokeWidth=".08" />
      ))}
      {[1,2].map(i => (
        <line key={'h'+i} x1="0" y1={i*18.75} x2="100" y2={i*18.75} stroke="rgba(255,255,255,.08)" strokeWidth=".08" />
      ))}
    </svg>
  );
}

function OSDCrosshair(){
  return (
    <svg style={vs.gridSvg} viewBox="0 0 100 56.25" preserveAspectRatio="none">
      <g stroke="rgba(110,242,196,.8)" strokeWidth=".12" fill="none">
        <circle cx="50" cy="28.12" r="1.6" />
        <line x1="50" y1="25.5" x2="50" y2="26.5" />
        <line x1="50" y1="29.7" x2="50" y2="30.7" />
        <line x1="47.5" y1="28.12" x2="48.5" y2="28.12" />
        <line x1="51.5" y1="28.12" x2="52.5" y2="28.12" />
      </g>
    </svg>
  );
}

// Top-left / top-right / bottom corners with essential telemetry
function OSDCorners({ drone, t }){
  const head = (drone.head + Math.sin(t/2000)*1.2).toFixed(0).padStart(3,'0');
  return (
    <>
      {/* Top-left: callsign + mode */}
      <div style={{...vs.corner, top:14, left:14}}>
        <div className="mono" style={vs.cornerLabel}>ACTIVE · {drone.id}</div>
        <div style={vs.cornerCall}>{drone.call}</div>
        <div className="mono" style={{...vs.cornerSub, color: drone.armed ? 'var(--accent)' : 'var(--ink-3)'}}>
          {drone.armed ? '● ARMED' : '○ DISARMED'} · {drone.mode}
        </div>
      </div>

      {/* Top-right: lat/lng + time */}
      <div style={{...vs.corner, top:14, right:14, textAlign:'right'}}>
        <div className="mono" style={vs.cornerLabel}>FEED TIME</div>
        <div className="mono" style={vs.cornerTime}>{fmtTime(t)}</div>
        <div className="mono" style={vs.cornerSub}>{drone.lat.toFixed(5)} · {drone.lng.toFixed(5)}</div>
      </div>

      {/* Bottom-left: attitude — pushed above the PiP map */}
      <div style={{...vs.corner, bottom:276, left:14}}>
        <div className="mono" style={vs.cornerLabel}>HDG</div>
        <div className="mono" style={vs.bigNum}>{head}°</div>
      </div>
      {/* Bottom-right: altitude + speed */}
      <div style={{...vs.corner, bottom:78, right:14, textAlign:'right'}}>
        <div style={{display:'flex', gap:24}}>
          <div>
            <div className="mono" style={vs.cornerLabel}>ALT MSL</div>
            <div className="mono" style={vs.bigNum}>{drone.alt}<span style={vs.unit}> m</span></div>
          </div>
          <div>
            <div className="mono" style={vs.cornerLabel}>SPD</div>
            <div className="mono" style={vs.bigNum}>{drone.spd.toFixed(1)}<span style={vs.unit}> m/s</span></div>
          </div>
        </div>
      </div>
    </>
  );
}

function useClock(){
  const [t, setT] = React.useState(Date.now());
  React.useEffect(()=>{
    const i = setInterval(()=>setT(Date.now()), 100);
    return ()=>clearInterval(i);
  },[]);
  return t;
}

function fmtTime(t){
  const d = new Date(t);
  const h = String(d.getUTCHours()).padStart(2,'0');
  const m = String(d.getUTCMinutes()).padStart(2,'0');
  const s = String(d.getUTCSeconds()).padStart(2,'0');
  return `${h}:${m}:${s}Z`;
}

const vs = {
  stage: { position:'absolute', inset:0, overflow:'hidden', background:'#05080b' },
  sky: {
    position:'absolute', left:'-5%', right:'-5%', top:'-5%', height:'55%',
    background: 'linear-gradient(#0d1622 0%, #1a2a3c 50%, #32465c 90%, #3f5570 100%)',
    transition:'transform .3s linear'
  },
  sun: {
    position:'absolute', right:'18%', top:'30%', width:'120px', height:'120px', borderRadius:'50%',
    background:'radial-gradient(circle, rgba(255,220,170,.5), rgba(255,220,170,0) 70%)', filter:'blur(6px)'
  },
  haze: {
    position:'absolute', left:0, right:0, bottom:0, height:'30%',
    background:'linear-gradient(rgba(90,110,130,0), rgba(150,170,190,.4))'
  },
  ground: {
    position:'absolute', left:'-5%', right:'-5%', top:'50%', bottom:'-5%',
    background:'linear-gradient(#1e2a1f 0%, #141c15 100%)',
    transition:'transform .3s linear'
  },
  groundGrid: {
    position:'absolute', inset:0,
    backgroundImage:
      'linear-gradient(rgba(110,242,196,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(110,242,196,.05) 1px, transparent 1px)',
    backgroundSize:'60px 60px, 60px 60px',
    transform:'perspective(600px) rotateX(65deg) translateY(-5%)',
    transformOrigin:'center top',
    maskImage:'linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0))'
  },
  landmark: {
    position:'absolute', background:'rgba(40,52,42,.9)',
    boxShadow:'inset 0 0 0 1px rgba(110,140,120,.3)'
  },
  road: {
    position:'absolute', height:'2px', background:'rgba(200,200,180,.2)',
    transform:'rotate(-2deg)'
  },
  grain: {
    position:'absolute', inset:0, pointerEvents:'none',
    backgroundImage:'radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px)',
    backgroundSize:'3px 3px', mixBlendMode:'overlay', opacity:.6
  },
  scan: {
    position:'absolute', inset:0, pointerEvents:'none',
    background:'repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px)',
    mixBlendMode:'multiply', opacity:.5
  },
  gridSvg: { position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none' },

  corner: { position:'absolute', color:'#fff', textShadow:'0 1px 2px rgba(0,0,0,.8)' },
  cornerLabel: { fontSize:10, color:'rgba(255,255,255,.6)', letterSpacing:'.14em', fontWeight:500 },
  cornerCall: { fontSize:22, fontWeight:600, letterSpacing:'.06em', marginTop:2 },
  cornerSub: { fontSize:11, color:'rgba(255,255,255,.85)', marginTop:2, fontWeight:500 },
  cornerTime: { fontSize:18, fontWeight:500, marginTop:2 },
  bigNum: { fontSize:28, fontWeight:500, lineHeight:1 },
  unit: { fontSize:13, color:'rgba(255,255,255,.6)', fontWeight:400 },

  recTag: {
    position:'absolute', top:14, left:'50%', transform:'translateX(-50%)',
    display:'flex', gap:10, alignItems:'center',
    padding:'6px 12px', background:'rgba(0,0,0,.55)', border:'1px solid rgba(255,255,255,.08)',
    borderRadius:2, fontSize:11, color:'#fff', letterSpacing:'.1em'
  },
  recDot: { width:8, height:8, borderRadius:'50%', background:'#ff4545', boxShadow:'0 0 8px #ff4545', animation:'blink 1.2s infinite' },
  zoomTag: {
    position:'absolute', bottom:14, left:'50%', transform:'translateX(-50%)',
    padding:'5px 10px', background:'rgba(0,0,0,.45)', borderRadius:2,
    fontSize:10.5, color:'rgba(255,255,255,.9)', letterSpacing:'.12em'
  },

  trackBox: {
    position:'absolute', left:'42%', top:'46%', width:'140px', height:'100px', pointerEvents:'none'
  },
  trackCorner: (pos) => {
    const s = { position:'absolute', width:14, height:14, borderColor:'#6ef2c4', borderStyle:'solid', borderWidth:0 };
    if (pos==='tl'){ s.top=0; s.left=0; s.borderTopWidth=1.5; s.borderLeftWidth=1.5; }
    if (pos==='tr'){ s.top=0; s.right=0; s.borderTopWidth=1.5; s.borderRightWidth=1.5; }
    if (pos==='bl'){ s.bottom=0; s.left=0; s.borderBottomWidth=1.5; s.borderLeftWidth=1.5; }
    if (pos==='br'){ s.bottom=0; s.right=0; s.borderBottomWidth=1.5; s.borderRightWidth=1.5; }
    return s;
  },
  trackLabel: {
    position:'absolute', bottom:-18, left:0, fontSize:10, color:'#6ef2c4', letterSpacing:'.1em'
  }
};

// animation keyframes injected once
if (!document.getElementById('vs-kf')){
  const s = document.createElement('style');
  s.id = 'vs-kf';
  s.textContent = `
    @keyframes blink { 50% { opacity: .3 } }
    @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
    @keyframes sweep { from { transform: rotate(0) } to { transform: rotate(360deg) } }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { VideoFeed, useClock, fmtTime });