import { NavLink, Route, Routes } from 'react-router-dom';
import { useAuth } from './auth';
import { TopicListPage } from './pages/TopicList';
import { TopicDetailPage } from './pages/TopicDetail';
import { VerdictPage } from './pages/Verdict';
import { NotFoundPage } from './pages/NotFound';
import { OidcCallbackPage } from './pages/OidcCallback';
import './styles/app.css';

export function App() {
  const { user, loading, oidcEnabled, login, logout } = useAuth();
  return (
    <div className="app">
      <header className="app-header">
        <div className="app-header-inner">
          <a href="/" className="app-brand brand-d">
            dialectic
          </a>
          <nav className="app-nav">
            <NavLink to="/" end>
              topics
            </NavLink>
          </nav>
          <div className="app-user">
            {loading ? (
              <span className="eyebrow">loading…</span>
            ) : user ? (
              <span className="row" style={{ gap: 12 }}>
                <span className="eyebrow" title={user.email}>
                  {user.name}
                </span>
                <button onClick={logout} className="auth-btn">
                  logout
                </button>
              </span>
            ) : oidcEnabled ? (
              <button onClick={login} className="auth-btn auth-btn-primary">
                login
              </button>
            ) : (
              <span className="eyebrow" title="OIDC not configured — set up via dialectic-cli">
                anonymous · oidc not configured
              </span>
            )}
          </div>
        </div>
      </header>
      <main className="app-main">
        <Routes>
          <Route path="/" element={<TopicListPage />} />
          <Route path="/topics/:id" element={<TopicDetailPage />} />
          <Route path="/topics/:id/verdict" element={<VerdictPage />} />
          <Route path="/oidc/callback" element={<OidcCallbackPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
      <footer className="app-footer">
        <span className="eyebrow">hangman lab · dialectic v2</span>
      </footer>
    </div>
  );
}