// FRAZIER Finance OS — entry point. Session bootstrap (fin_me), login gate,
// hash-based page routing (no router dependency — matches the "don't
// overengineer V1" principle), dark-mode default per fin-tokens.css.

function finPageFromHash() {
  const h = (location.hash || '').replace(/^#/, '');
  return FIN_NAV.some((n) => n.id === h) ? h : 'home';
}

function FinApp() {
  const [user, setUser] = React.useState(undefined); // undefined = loading, null = logged out
  const [page, setPage] = React.useState(finPageFromHash());
  const [jarvisQ, setJarvisQ] = React.useState(null);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', 'dark');
  }, []);

  React.useEffect(() => {
    let alive = true;
    finApi('fin_me').then((d) => { if (alive) setUser(d.user || null); }).catch(() => { if (alive) setUser(null); });
    return () => { alive = false; };
  }, []);

  React.useEffect(() => {
    const onHash = () => setPage(finPageFromHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (id, question) => {
    location.hash = id;
    setPage(id);
    if (id === 'jarvis' && question) setJarvisQ(question);
  };

  if (user === undefined) {
    return <div className="fin-boot" aria-busy="true"><span className="fin-boot-mark">F</span></div>;
  }
  if (!user) {
    return <FinLogin onLoggedIn={(u) => setUser(u)} />;
  }

  const logout = async () => { try { await finApi('fin_logout', { body: {} }); } catch (e) { /* ignore */ } setUser(null); };

  let body;
  switch (page) {
    case 'home':     body = <FinHome user={user} onNavigate={navigate} />; break;
    case 'jarvis':    body = <FinJarvis initialQuestion={jarvisQ} />; break;
    case 'invoices':  body = <FinInvoices user={user} />; break;
    case 'payroll':   body = <FinComingSoon icon="payroll"  title="Payroll"   phase={3} blurb="Upload attendance, review exceptions, approve monthly payroll." />; break;
    case 'forecast':  body = <FinComingSoon icon="forecast" title="Forecast"  phase={4} blurb="3 / 6 / 12-month cash projection and what-if scenarios." />; break;
    case 'files':     body = <FinComingSoon icon="files"    title="Files"     phase={6} blurb="Upload reference files; Jarvis anonymizes them into safe templates." />; break;
    default:          body = <FinHome user={user} onNavigate={navigate} />;
  }

  return (
    <FinShell page={page} onNavigate={navigate} user={user} onLogout={logout}>
      {body}
    </FinShell>
  );
}

const finRoot = ReactDOM.createRoot(document.getElementById('fin-root'));
finRoot.render(<FinApp />);