/* App shell: login gate + tabbed dashboard */
(() => {
const { useEffect, useState } = React;

function App() {
  const [authChecked, setAuthChecked] = useState(false);
  const [authed, setAuthed] = useState(false);
  const [user, setUser] = useState(null);

  // App state
  const [tab, setTab] = useState('new');   // new | results | history
  const [activeKey, setActiveKey] = useState(null);

  useEffect(() => {
    api.me().then(({ authenticated, user }) => {
      setAuthed(authenticated); setUser(user);
    }).catch(() => setAuthed(false)).finally(() => setAuthChecked(true));
  }, []);

  async function logout() {
    await api.logout();
    setAuthed(false); setUser(null); setTab('new'); setActiveKey(null);
  }

  if (!authChecked) return <div className="min-h-screen flex items-center justify-center text-ink-4">Loading…</div>;
  if (!authed) return <Login onSuccess={() => { setAuthed(true); api.me().then(d => setUser(d.user)); }} />;

  function onCreated(ev) {
    setActiveKey(ev.public_key);
    setTab('results');
  }
  function openHistory(key) {
    setActiveKey(key);
    setTab('results');
  }
  function reset() {
    setActiveKey(null);
    setTab('new');
  }

  return (
    <div className="min-h-screen">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-5xl mx-auto px-6 py-3 flex items-center justify-between">
          <div className="flex items-baseline gap-2">
            <span className="font-bold text-ink">Tov Law</span>
            <span className="text-ink-5">/</span>
            <span className="text-ink-3">TCPA IQ <span className="text-brand font-bold">2</span></span>
            <span className="ml-2 text-[10px] uppercase tracking-wider bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded">BETA</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <span className="text-ink-4 text-xs hidden sm:inline">{user || ''}</span>
            <button onClick={logout} className="text-ink-3 hover:text-ink text-xs">Sign out</button>
          </div>
        </div>
        {/* Tabs */}
        <div className="max-w-5xl mx-auto px-6 flex gap-1">
          <Tab active={tab === 'new'}      onClick={reset}                  label="New Evaluation" />
          <Tab active={tab === 'history'}  onClick={() => setTab('history')} label="History" />
          {activeKey && <Tab active={tab === 'results'} onClick={() => setTab('results')} label={`Case ${activeKey}`} />}
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-6 py-8">
        {tab === 'new'     && <NewEvaluation intaker={user} onCreated={onCreated} />}
        {tab === 'history' && <History onOpen={openHistory} />}
        {tab === 'results' && activeKey && <Results publicKey={activeKey} onReset={reset} />}
      </main>

      <footer className="text-center text-xs text-ink-5 pb-8">
        &copy; 2026 Tov Law
      </footer>
    </div>
  );
}

function Tab({ active, onClick, label }) {
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 text-sm font-medium border-b-2 transition ${
        active ? 'text-brand border-brand' : 'text-ink-3 border-transparent hover:text-ink hover:border-gray-300'
      }`}
    >
      {label}
    </button>
  );
}

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