// HUD — identity, status, live readouts, detail panel

const Cursor = () => {
  const ringRef = useRef(null);
  const dotRef = useRef(null);
  const textRef = useRef(null);
  const wrapRef = useRef(null);
  useEffect(() => {
    let rx = window.innerWidth / 2, ry = window.innerHeight / 2;
    let tx = rx, ty = ry;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const down = () => wrapRef.current?.classList.add('pressed');
    const up = () => wrapRef.current?.classList.remove('pressed');
    const over = (e) => {
      const el = e.target;
      const interactive = el.closest('a, button, .palette-item, input, [data-interactive]');
      wrapRef.current?.classList.toggle('hover', !!interactive);
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mousemove', over);
    window.addEventListener('mousedown', down);
    window.addEventListener('mouseup', up);
    let raf;
    const loop = () => {
      rx += (tx - rx) * 0.28;
      ry += (ty - ry) * 0.28;
      if (wrapRef.current) {
        wrapRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      }
      if (textRef.current) {
        textRef.current.textContent = `${tx.toString().padStart(4, '0')} · ${ty.toString().padStart(4, '0')}`;
      }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mousemove', over);
      window.removeEventListener('mousedown', down);
      window.removeEventListener('mouseup', up);
    };
  }, []);
  return (
    <div className="cursor" ref={wrapRef} aria-hidden="true">
      <div className="cursor-ring" ref={ringRef} />
      <div className="cursor-dot" ref={dotRef} />
      <div className="cursor-coord" ref={textRef}>0000 · 0000</div>
    </div>
  );
};

const HUD = () => {
  const [time, setTime] = useState(new Date());
  const [mode, setMode] = useState('SIGNAL');
  useEffect(() => {
    const i = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(i);
  }, []);
  // modes rotate subtly to suggest the system is "scanning"
  useEffect(() => {
    const modes = ['SIGNAL', 'TRANSMIT', 'OBSERVE'];
    let j = 0;
    const i = setInterval(() => {
      j = (j + 1) % modes.length;
      setMode(modes[j]);
    }, 6400);
    return () => clearInterval(i);
  }, []);
  // Berlin time (UTC+2 in April — CEST)
  const berlin = new Date(time.getTime() + 2 * 60 * 60 * 1000);
  const t = berlin.toISOString().slice(11, 19);

  return (
    <>
      <div className="hud">
        <div className="hud-top">
          <div className="identity">
            <div className="mark"><span className="glyph" /> ORBITMETRICS</div>
            <div>JOHN DAHMS · DATA & AI</div>
            <div className="sub">OBS 01 · BERLIN 52.52N</div>
          </div>
          <div className="status">
            <div className="row"><span className="dot" /> <span>LIVE · NOMINAL</span></div>
            <div className="time">{t} CEST</div>
            <div>SYNTHETIC MART · v2.6</div>
          </div>
        </div>

        <div className="mode">
          <div className={`item ${mode === 'SIGNAL' ? 'on' : ''}`}>SIGNAL</div>
          <div className={`item ${mode === 'TRANSMIT' ? 'on' : ''}`}>TRANSMIT</div>
          <div className={`item ${mode === 'OBSERVE' ? 'on' : ''}`}>OBSERVE</div>
        </div>

        <div className="hud-bottom">
          <div className="readout">
            <span className="key">FLOW RATE</span>
            <span className="val">2,048 <strong>EV/S</strong></span>
          </div>
          <div className="readout" style={{ alignItems: 'center', textAlign: 'center' }}>
            <span className="key">LAT Q1/Q99</span>
            <span className="val">18ms <strong>/</strong> 94ms</span>
          </div>
          <div className="readout" style={{ alignItems: 'flex-end' }}>
            <span className="key">BUILT FICTIONAL</span>
            <span className="val">NO PII · <strong>DEMO DATA</strong></span>
          </div>
        </div>
      </div>
      <Cursor />
    </>
  );
};

window.HUD = HUD;
window.Cursor = Cursor;