// A scrolling marquee bar + a command palette hidden at "/"
function MarqueeBar() {
  return (
    <div className="bg-ink" style={{ color: 'var(--paper)', padding: '10px 0', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', overflow: 'hidden', whiteSpace: 'nowrap' }}>
      <div className="ticker-track">
        {Array.from({length: 2}).map((_, k) => (
          <span key={k} className="grot" style={{ fontSize: 14, letterSpacing: '.25em', textTransform: 'uppercase', paddingRight: 40 }}>
            ⟡ DOSSIER 001 ⟡ Y. BADAOUI ⟡ ENGINEER-AT-LARGE ⟡ DDoS-PROOFED ⟡ HAND-BOUND ⟡ <span className="arabic" style={{ fontSize: 18, letterSpacing: 0 }}>يوسف بداوي</span> ⟡ NO BUZZWORDS ⟡ FULL-STACK ⟡ HOMELAB STEWARD ⟡ FIELD ACTIVE ⟡&nbsp;
          </span>
        ))}
      </div>
    </div>
  );
}

function CommandLine() {
  const [open, setOpen] = React.useState(false);
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === '/' && !['INPUT','TEXTAREA'].includes(document.activeElement?.tagName)) {
        e.preventDefault(); setOpen(true);
        setTimeout(() => inputRef.current?.focus(), 50);
      } else if (e.key === 'Escape') {
        setOpen(false);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const routes = {
    projects: '#projects',
    bestiary: '#projects',
    work: '#ledger',
    ledger: '#ledger',
    atelier: '#atelier',
    workshop: '#atelier',
    pantry: '#pantry',
    skills: '#pantry',
    almanac: '#almanac',
    log: '#almanac',
    gazetteer: '#gazetteer',
    map: '#gazetteer',
    marginalia: '#marginalia',
    notes: '#marginalia',
    now: '#now',
    oracle: '#oracle',
    ask: '#oracle',
    contact: '#post',
    post: '#post',
    afterword: '#afterword',
    end: '#afterword',
    email: 'mailto:me@youcef.io',
    github: 'https://github.com/YoucefBadaoui',
    linkedin: 'https://www.linkedin.com/in/youcef-badaoui/',
  };

  const submit = (e) => {
    e.preventDefault();
    const key = q.trim().toLowerCase();
    const url = routes[key];
    if (url) {
      if (url.startsWith('#')) document.querySelector(url)?.scrollIntoView();
      else window.open(url, '_blank');
      setOpen(false);
      setQ('');
    }
  };

  if (!open) {
    return (
      <div style={{ position: 'fixed', bottom: 14, right: 14, zIndex: 150 }}
           className="mono">
        <span className="kbd" style={{background:'var(--paper)'}}>/</span>
        <span style={{ marginLeft: 8, fontSize: 11, letterSpacing: '.15em', color: 'var(--ink-fade)' }}>COMMAND</span>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="cmdline">
      <span style={{ color: 'var(--stamp)' }}>❯</span>
      <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)}
        placeholder="try: atelier · pantry · almanac · oracle · map · post" />
      <span style={{ fontSize: 10, opacity: .6, letterSpacing: '.2em' }}>ESC</span>
    </form>
  );
}

Object.assign(window, { MarqueeBar, CommandLine });