import { useState } from "react";
import "./index.css";
import Login from "./Login";
import Stats from "./pages/Stats";
import Users from "./pages/Users";
import Drivers from "./pages/Drivers";
import Rides from "./pages/Rides";
import { clearToken, getToken } from "./lib/api";

type Page = "stats" | "users" | "drivers" | "rides";

const NAV: { key: Page; label: string }[] = [
  { key: "stats", label: "Overview" },
  { key: "users", label: "Users" },
  { key: "drivers", label: "Drivers & Fleet" },
  { key: "rides", label: "Rides & Payments" },
];

export default function App() {
  const [authed, setAuthed] = useState(Boolean(getToken()));
  const [page, setPage] = useState<Page>("stats");

  if (!authed) {
    return <Login onDone={() => setAuthed(true)} />;
  }

  return (
    <>
      <nav className="sidebar">
        <h1>Waseel Owner</h1>
        {NAV.map((item) => (
          <a
            key={item.key}
            href="#"
            className={page === item.key ? "active" : ""}
            onClick={(e) => {
              e.preventDefault();
              setPage(item.key);
            }}
          >
            {item.label}
          </a>
        ))}
        <a
          href="#"
          style={{ marginTop: "auto" }}
          onClick={(e) => {
            e.preventDefault();
            clearToken();
            setAuthed(false);
          }}
        >
          Sign out
        </a>
      </nav>
      <main className="main">
        {page === "stats" && <Stats />}
        {page === "users" && <Users />}
        {page === "drivers" && <Drivers />}
        {page === "rides" && <Rides />}
      </main>
    </>
  );
}
