/* App shell: sidebar + view router + top-level auth gate */
const { useState: useStateM, useEffect: useEffectM } = React;

const NAV = [
  { k: 'inicio', label: 'Início', icon: 'home' },
  { k: 'praticar', label: 'Praticar', icon: 'mic' },
  { k: 'historico', label: 'Histórico', icon: 'history' },
  { k: 'progresso', label: 'Progresso', icon: 'progress' },
  { k: 'plano', label: 'Plano', icon: 'plan' },
];

function Sidebar({ view, setView, onLogout, user }) {
  const initials = user?.name ? user.name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase() : '?';
  return (
    <aside className="sidebar">
      <div className="sidebar-brand"><Wordmark /></div>

      <div className="user-chip">
        <div className="avatar">{initials}</div>
        <div className="user-chip-meta">
          <strong>{user?.name || 'Usuário'}</strong>
          <span>Nível B1 · Mês 3</span>
        </div>
      </div>

      <nav className="nav">
        {NAV.map((n) => (
          <button key={n.k} className={'nav-item' + (view === n.k ? ' active' : '')} onClick={() => setView(n.k)}>
            <Icon name={n.icon} size={20} /> {n.label}
          </button>
        ))}
      </nav>

      <div className="sidebar-foot">
        <button className="nav-item"><Icon name="settings" size={20} /> Ajustes</button>
        <button className="nav-item" onClick={onLogout}><Icon name="logout" size={20} /> Sair</button>
      </div>
    </aside>
  );
}

function AppShell({ onLogout, user }) {
  const [view, setView] = useStateM('inicio');
  let content;
  if (view === 'inicio') content = <Dashboard onStartPractice={() => setView('praticar')} user={user} />;
  else if (view === 'praticar') content = <Practice />;
  else if (view === 'historico') content = <HistoryView />;
  else if (view === 'progresso') content = <ProgressView />;
  else if (view === 'plano') content = <PlanView user={user} />;

  return (
    <div className="shell">
      <Sidebar view={view} setView={setView} onLogout={onLogout} user={user} />
      <main className="main">
        <div className="main-scroll">{content}</div>
      </main>
    </div>
  );
}

function App() {
  const [authed, setAuthed] = useStateM(false);
  const [user, setUser] = useStateM(null);
  const [route, setRoute] = useStateM('login');
  const [checking, setChecking] = useStateM(true);

  useEffectM(() => {
    fetch('/api/me', { credentials: 'same-origin' })
      .then(res => res.ok ? res.json() : null)
      .then(data => {
        if (data?.user) { setUser(data.user); setAuthed(true); }
      })
      .catch(() => {})
      .finally(() => setChecking(false));
  }, []);

  const handleLogin = (u) => { setUser(u); setAuthed(true); };

  const handleLogout = async () => {
    try { await fetch('/api/logout', { method: 'POST', credentials: 'same-origin' }); } catch {}
    setUser(null);
    setAuthed(false);
    setRoute('login');
  };

  if (checking) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
          <Wordmark />
          <p style={{ color: 'var(--ink-faint)', fontSize: '14px' }}>Carregando...</p>
        </div>
      </div>
    );
  }

  if (!authed) {
    return <AuthFlow route={route} go={setRoute} onLogin={handleLogin} />;
  }

  return <AppShell key={user?.id} onLogout={handleLogout} user={user} />;
}

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