import { useState } from "react";
import { Link, Outlet, redirect } from "react-router";
import { auth } from "~/lib/auth.server";
import type { Route } from "./+types/admin";

import { isUserAdmin } from "~/models/user";
import { Button } from "~/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "~/components/ui/sheet";
import {
  LayoutDashboard,
  Trophy,
  Calendar,
  FolderKanban,
  RefreshCw,
  Award,
  Activity,
  Users,
  Menu,
  Shield,
  CalendarRange,
} from "lucide-react";

export function meta(): Route.MetaDescriptors {
  return [{ title: "Admin - Brackt" }];
}

export async function loader(args: Route.LoaderArgs) {
  const session = await auth.api.getSession({ headers: args.request.headers });
  const userId = session?.user.id ?? null;

  if (!userId) {
    throw redirect("/");
  }

  const isAdmin = await isUserAdmin(userId);
  if (!isAdmin) {
    throw redirect("/");
  }

  return { isAdmin };
}

function AdminNavLinks({ onNavigate }: { onNavigate?: () => void }) {
  return (
    <>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin">
          <LayoutDashboard className="mr-2 h-4 w-4" />
          Dashboard
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/leagues">
          <Shield className="mr-2 h-4 w-4" />
          Leagues
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/sports">
          <Trophy className="mr-2 h-4 w-4" />
          Sports
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/sports-seasons">
          <Calendar className="mr-2 h-4 w-4" />
          Sports Seasons
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/draft-schedule">
          <CalendarRange className="mr-2 h-4 w-4" />
          Draft Schedule
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/simulators">
          <Activity className="mr-2 h-4 w-4" />
          Simulators
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/tournaments">
          <Award className="mr-2 h-4 w-4" />
          Tournaments
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/templates">
          <FolderKanban className="mr-2 h-4 w-4" />
          Season Templates
        </Link>
      </Button>
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/users">
          <Users className="mr-2 h-4 w-4" />
          Users
        </Link>
      </Button>
      <div className="border-t my-2" />
      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
        <Link to="/admin/data-sync">
          <RefreshCw className="mr-2 h-4 w-4" />
          Data Sync
        </Link>
      </Button>
    </>
  );
}

export default function AdminLayout() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  return (
    <div className="flex min-h-screen">
      {/* Mobile top bar */}
      <div className="md:hidden fixed top-16 left-0 right-0 z-40 flex h-14 items-center border-b px-4 gap-3 bg-muted/40">
        <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="shrink-0">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Open menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-64 p-0">
            <SheetHeader className="border-b px-6 h-16 flex justify-center">
              <SheetTitle>Admin Panel</SheetTitle>
            </SheetHeader>
            <nav aria-label="Admin navigation" className="space-y-1 p-4">
              <AdminNavLinks onNavigate={() => setMobileMenuOpen(false)} />
            </nav>
          </SheetContent>
        </Sheet>
        <h2 className="text-lg font-semibold">Admin Panel</h2>
      </div>

      {/* Desktop sidebar */}
      <aside className="hidden md:block w-64 shrink-0 border-r bg-muted/40">
        <div className="flex h-16 items-center border-b px-6">
          <h2 className="text-lg font-semibold">Admin Panel</h2>
        </div>
        <nav aria-label="Admin navigation" className="space-y-1 p-4">
          <AdminNavLinks />
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 min-w-0 pt-14 md:pt-0">
        <Outlet />
      </main>
    </div>
  );
}