import { useState } from "react";
import { NavLink, Navigate, Route, Routes } from "react-router-dom";
import { BRAND, hasToken, setToken } from "./api.js";
import { LoginPage } from "./pages/Login.js";
import { DashboardPage } from "./pages/Dashboard.js";
import { UsersPage } from "./pages/Users.js";
import { ModerationPage } from "./pages/Moderation.js";
import { FlagsPage } from "./pages/Flags.js";
import { SubscriptionsPage } from "./pages/Subscriptions.js";
import { AuditLogsPage } from "./pages/AuditLogs.js";
import { AnalyticsPage } from "./pages/Analytics.js";
import { ReleaseGatesPage } from "./pages/ReleaseGates.js";
import { WorkersPage } from "./pages/Workers.js";

export function App() {
  const [authed, setAuthed] = useState(hasToken());

  if (!authed) {
    return <LoginPage onLogin={() => setAuthed(true)} />;
  }

  return (
    <div className="layout">
      <nav className="sidebar">
        <h1>{BRAND.name} Admin</h1>
        <NavLink to="/" end>
          Översikt
        </NavLink>
        <NavLink to="/users">Användare</NavLink>
        <NavLink to="/moderation">Moderering</NavLink>
        <NavLink to="/flags">Feature flags</NavLink>
        <NavLink to="/subscriptions">Prenumerationer</NavLink>
        <NavLink to="/audit">Audit logs</NavLink>
        <NavLink to="/analytics">Analytics</NavLink>
        <NavLink to="/release-gates">Release gates</NavLink>
        <NavLink to="/workers">Workers</NavLink>
        <button
          onClick={() => {
            setToken(null);
            setAuthed(false);
          }}
        >
          Logga ut
        </button>
      </nav>
      <main className="main">
        <Routes>
          <Route path="/" element={<DashboardPage />} />
          <Route path="/users" element={<UsersPage />} />
          <Route path="/moderation" element={<ModerationPage />} />
          <Route path="/flags" element={<FlagsPage />} />
          <Route path="/subscriptions" element={<SubscriptionsPage />} />
          <Route path="/audit" element={<AuditLogsPage />} />
          <Route path="/analytics" element={<AnalyticsPage />} />
          <Route path="/release-gates" element={<ReleaseGatesPage />} />
          <Route path="/workers" element={<WorkersPage />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </main>
    </div>
  );
}