// Root — login gate, routing, sync animation.
// (useState/useEffect/useRef are declared globally in ui.jsx)

function Placeholder({ title, icon, note }) {
  return (
    <div className="screen-inner">
      <div className="card card-pad rise" style={{ textAlign:'center', padding:'56px 30px' }}>
        <span className="ic-chip" style={{ background:'var(--cream)', width:64, height:64, borderRadius:18, display:'grid', placeItems:'center', margin:'0 auto 16px' }}>
          <Icon name={icon} size={30} color="var(--gold-600)" />
        </span>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20 }}>{title}</div>
        <div style={{ fontSize:14, color:'var(--fg-2)', maxWidth:420, margin:'8px auto 0', lineHeight:1.5 }}>{note}</div>
      </div>
    </div>
  );
}

const TITLES = {
  overview:'Overview', chat:'AI Chat', mail:'Mail', bills:'Bills', banking:'Banking', people:'People', packages:'Packages',
  calendar:'Calendar', tasks:'Tasks', subs:'Subscriptions', notifications:'Notifications', settings:'Settings', bug:'Report a Bug',
};

function App() {
  // Embedded tour: boots straight into the dashboard (authed). Sign Out shows the
  // mock Login so the public /demo can show the whole flow; the real onboarding
  // welcome / setup screens live in the Next app (WorkspaceWelcome / WorkspaceSetup).
  const [authed, setAuthed] = useState(true);
  const [route, setRoute] = useState('overview');
  const [syncing, setSyncing] = useState(false);
  const [railed, setRailed] = useState(false);   // desktop collapsed rail
  const [navOpen, setNavOpen] = useState(false);  // mobile drawer
  const [bugOpen, setBugOpen] = useState(false);  // report-a-bug modal
  const [viewAccount, setViewAccount] = useState('all');  // global inbox filter from the account menu
  const [theme, setTheme] = useState(() => (typeof document !== 'undefined' && document.documentElement.dataset.theme) || 'light');
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem('zd-theme', theme); } catch (e) {}
  }, [theme]);
  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
  const D = window.ZD_DATA;

  const go = id => {
    setNavOpen(false);
    if (id === 'logout') { setAuthed(false); setRoute('overview'); return; }
    if (id === 'bug') { setBugOpen(true); return; }
    setRoute(id);
    const sc = document.querySelector('.screen'); if (sc) sc.scrollTop = 0;
  };
  const sync = () => { if (syncing) return; setSyncing(true); setTimeout(() => setSyncing(false), 1400); };
  const toggleNav = () => {
    if (window.matchMedia('(max-width: 860px)').matches) setNavOpen(v => !v);
    else setRailed(v => !v);
  };

  const screens = {
    overview: <Overview go={go} />, chat: <Chat />, mail: <MailCoverage go={go} />, bills: <Bills go={go} />, packages: <Packages />,
    calendar: <Calendar />, tasks: <Tasks />, subs: <Subscriptions go={go} />, notifications: <Notifications />,
    banking: <Banking go={go} />, people: <People />,
    settings: <Settings />,
  };

  if (!authed) return <Login onSignIn={() => { setAuthed(true); setRoute('overview'); }} />;

  return (
    <div className={`app ${railed ? 'railed' : ''} ${navOpen ? 'nav-open' : ''}`}>
      <Sidebar route={route} go={go} />
      <div className="nav-scrim" onClick={() => setNavOpen(false)} />
      <div className="main">
        <TopBar title={TITLES[route] || 'Zeranda'} user={D.user} onSync={sync} syncing={syncing}
          onToggleNav={toggleNav} theme={theme} onToggleTheme={toggleTheme}
          go={go} viewAccount={viewAccount} onViewAccount={setViewAccount} />
        <div className="screen zd-scroll">
          <SyncStatusBanner go={go} />
          {screens[route] || screens.overview}
        </div>
      </div>
      {bugOpen && <BugModal onClose={() => setBugOpen(false)} />}
    </div>
  );
}

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