// Top-level chrome: masthead + tabs + toast stack + live ticker + settings drawer.
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Masthead({ meta, lastSyncedRel, onOpenSettings }) {
  return (
    <header className="masthead">
      <div className="masthead-left">
        <div className="masthead-vol">Vol. III · No. 14 · {mastheadDate()}</div>
        <div className="masthead-pub">A LIVING DICTIONARY · seamenese.com</div>
      </div>
      <div>
        <h1 className="masthead-title serif">
          The Seamenese <span className="ampers">&amp;</span> Bonk Lexicon
        </h1>
        <div className="masthead-sub">Compiled, syndicated, & disputed since MMXXIV</div>
      </div>
      <div className="masthead-right">
        <span className="live-dot">Synced {lastSyncedRel}</span>
        <button className="gear-btn" onClick={onOpenSettings} title="Sync settings">
          <span style={{ fontSize: 13, lineHeight: 1 }}>⚙</span>
          <span>settings</span>
        </button>
      </div>
    </header>
  );
}

function Tabs({ tabs, active, onChange }) {
  return (
    <nav className="tabs" role="tablist">
      {tabs.map((t, i) => (
        <button
          key={t.id}
          role="tab"
          aria-selected={active === t.id}
          className={`tab ${active === t.id ? 'active' : ''}`}
          onClick={() => onChange(t.id)}
        >
          {!t.noNum && <span className="num">{String(i + 1).padStart(2, '0')}</span>}
          <span>{t.label}</span>
          {t.pill ? <span className="new-pill">{t.pill}</span> : null}
        </button>
      ))}
    </nav>
  );
}

function ToastStack({ toasts, onDismiss }) {
  return (
    <div className="toast-stack">
      {toasts.map(t => (
        <div key={t.id} className={`toast ${t.kind === 'confirmed' ? 'confirmed' : ''}`} onClick={() => onDismiss(t.id)}>
          <div style={{ flex: 1 }}>
            <div className="toast-title">{t.title}</div>
            <div className="toast-body">{t.body}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function LiveTicker({ items }) {
  if (!items || items.length === 0) return null;
  const items2 = items.concat(items);
  return (
    <div className="ticker-wrap">
      <span className="ticker-label">Wire</span>
      <div className="ticker-clip">
        <div className="ticker-track">
          {items2.map((it, i) => (
            <span className="ticker-item" key={i}>
              <span className="ticker-glyph">{TICKER_GLYPH[it.kind] || '·'}</span>
              <span className="ticker-word mono">{it.word}</span>
              <span className="ticker-note">{it.note}</span>
              <span className="ticker-time">{relTime(it.ts)}</span>
              <span className="ticker-dot">·</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function SettingsDrawer({ open, onClose }) {
  const [tokenInput, setTokenInput] = useState('');
  const [tokenSaved, setTokenSaved] = useState(false);
  const [adminOn, setAdminOn] = useState(isAdminMode());
  const isAuthed = hasAdminToken();

  function saveToken() {
    const t = tokenInput.trim();
    if (t) {
      localStorage.setItem(ADMIN_KEY, t);
      setTokenInput('');
      setTokenSaved(true);
      setTimeout(() => setTokenSaved(false), 2000);
    }
  }

  function clearToken() {
    localStorage.removeItem(ADMIN_KEY);
    setTokenInput('');
    setTokenSaved(false);
  }

  if (!open) return null;
  return (
    <div className="drawer-scrim" onClick={onClose}>
      <aside className="drawer" onClick={e => e.stopPropagation()}>
        <header className="drawer-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>Settings</div>
            <h3 className="serif" style={{ margin: '6px 0 0', fontSize: 22, fontWeight: 500 }}>Admin access</h3>
          </div>
          <button className="gear-btn" onClick={onClose}>close ✕</button>
        </header>
        <div className="drawer-body">
          <div>
            <div className="eyebrow"><span className="rule"></span>Admin access</div>
            <div className="drawer-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 10 }}>
              <div>
                <div className="drawer-label">Admin token</div>
                <div className="drawer-help" style={{ maxWidth: 'none' }}>
                  {isAuthed
                    ? 'Token set — you can edit entries and use AI corrections.'
                    : 'Enter a token to unlock entry editing and AI corrections.'}
                </div>
              </div>
              {isAuthed ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--conf-confirmed)' }}>● authenticated</span>
                  <button className="btn" onClick={clearToken}>revoke</button>
                </div>
              ) : (
                <div style={{ display: 'flex', gap: 8 }}>
                  <input
                    type="password"
                    className="field field-mono"
                    placeholder="paste token…"
                    value={tokenInput}
                    onChange={e => setTokenInput(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && saveToken()}
                    style={{ flex: 1 }}
                  />
                  <button className="btn btn-primary" onClick={saveToken} disabled={!tokenInput.trim()}>
                    {tokenSaved ? '✓' : 'save'}
                  </button>
                </div>
              )}
              {isAuthed && (
                <label className="drawer-row" style={{ borderTop: 'none', paddingTop: 4 }}>
                  <span>
                    <div className="drawer-label">Admin mode</div>
                    <div className="drawer-help" style={{ maxWidth: 'none' }}>Show edit buttons and AI correction tools on entries.</div>
                  </span>
                  <button
                    className={`switch ${adminOn ? 'on' : ''}`}
                    role="switch"
                    aria-checked={adminOn}
                    onClick={() => { const v = !adminOn; setAdminOn(v); setAdminMode(v); }}
                  >
                    <span className="switch-knob" />
                  </button>
                </label>
              )}
            </div>
          </div>

          <div className="drawer-foot" />
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { Masthead, Tabs, ToastStack, LiveTicker, SettingsDrawer });