import { createFileRoute, Outlet, redirect, Link, useRouterState, useNavigate } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import {
  LayoutDashboard,
  Users,
  CreditCard,
  Settings2,
  Activity,
  FileText,
  ServerCog,
  LogOut,
  ShieldCheck,
  Loader2,
} from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { getMe } from "@/lib/dashboard.functions";
import { performSignOut } from "@/lib/auth-helpers";

export const Route = createFileRoute("/ebaybos/_panel")({
  ssr: false,
  beforeLoad: async () => {
    const { data, error } = await supabase.auth.getUser();
    if (error || !data.user) throw redirect({ to: "/ebaybos/banger" });
  },
  component: AdminPanel,
});

const links: Array<{
  to:
    | "/ebaybos/admin/dashboard"
    | "/ebaybos/admin/users"
    | "/ebaybos/admin/plans"
    | "/ebaybos/admin/settings"
    | "/ebaybos/admin/activity"
    | "/ebaybos/admin/audit"
    | "/ebaybos/admin/system";
  label: string;
  icon: typeof LayoutDashboard;
}> = [
  { to: "/ebaybos/admin/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { to: "/ebaybos/admin/users", label: "Users", icon: Users },
  { to: "/ebaybos/admin/plans", label: "Plans", icon: CreditCard },
  { to: "/ebaybos/admin/settings", label: "Settings", icon: Settings2 },
  { to: "/ebaybos/admin/activity", label: "Activity", icon: Activity },
  { to: "/ebaybos/admin/audit", label: "Audit", icon: FileText },
  { to: "/ebaybos/admin/system", label: "System", icon: ServerCog },
];

function AdminPanel() {
  const navigate = useNavigate();
  const qc = useQueryClient();
  const fetchMe = useServerFn(getMe);
  const me = useQuery({
    queryKey: ["me"],
    queryFn: () => fetchMe({ data: undefined as never }),
  });
  const path = useRouterState({ select: (r) => r.location.pathname });

  if (me.isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
      </div>
    );
  }
  if (!me.data?.isAdmin) {
    throw redirect({ to: "/ebaybos/banger" });
  }

  async function signOut() {
    await performSignOut(qc, () => navigate({ to: "/ebaybos/banger", replace: true }));
  }

  return (
    <div className="flex min-h-screen w-full bg-muted/30">
      <aside className="flex w-60 shrink-0 flex-col border-r bg-card">
        <div className="flex items-center gap-2 border-b px-4 py-4">
          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
            <ShieldCheck className="h-4 w-4" />
          </div>
          <div className="min-w-0">
            <div className="truncate text-sm font-semibold">eBay BOS</div>
            <div className="truncate text-[10px] uppercase tracking-wider text-muted-foreground">
              Administrator
            </div>
          </div>
        </div>
        <nav className="flex-1 space-y-0.5 p-2">
          {links.map((l) => {
            const active = path === l.to || path.startsWith(l.to + "/");
            return (
              <Link
                key={l.to}
                to={l.to}
                className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ${
                  active
                    ? "bg-primary text-primary-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
                }`}
              >
                <l.icon className="h-4 w-4" />
                {l.label}
              </Link>
            );
          })}
        </nav>
        <div className="border-t p-2">
          <button
            onClick={signOut}
            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            <LogOut className="h-4 w-4" />
            Sign out
          </button>
        </div>
      </aside>
      <main className="flex-1">
        <header className="flex h-14 items-center justify-between border-b bg-background/60 px-6 backdrop-blur">
          <div className="text-sm font-medium">
            {links.find((l) => path === l.to || path.startsWith(l.to + "/"))?.label ?? "Admin"}
          </div>
          <div className="text-xs text-muted-foreground">{me.data.email}</div>
        </header>
        <div className="mx-auto max-w-6xl px-6 py-8">
          <Outlet />
        </div>
      </main>
    </div>
  );
}