import { createFileRoute, Outlet, redirect, Link, useNavigate, useRouterState } from "@tanstack/react-router";
import { supabase } from "@/integrations/supabase/client";
import { useServerFn } from "@tanstack/react-start";
import { amIAdmin } from "@/lib/admin.functions";
import { useQuery } from "@tanstack/react-query";
import { Shield, Users, Receipt, LogOut, Loader2, Menu, Bell, LayoutDashboard, Headphones, X, Settings, Signal, Settings2, IdCard } from "lucide-react";
import { useAppSettings } from "@/hooks/useAppSettings";
import { useState } from "react";
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetHeader } from "@/components/ui/sheet";

export const Route = createFileRoute("/admin")({
  ssr: false,
  beforeLoad: async ({ location }) => {
    const { data } = await supabase.auth.getUser();
    if (!data.user) {
      if (location.pathname !== "/admin/login") throw redirect({ to: "/admin/login" });
    }
  },
  component: AdminLayout,
});

function AdminLayout() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  if (pathname === "/admin/login") return <Outlet />;
  return <AdminShell />;
}

const NAV = [
  { to: "/admin", label: "ড্যাশবোর্ড", icon: LayoutDashboard, exact: true },
  { to: "/admin", label: "ইউজার", icon: Users, exact: true, hideDesktop: true },
  { to: "/admin/transactions", label: "লেনদেন", icon: Receipt },
  { to: "/admin/notifications", label: "নোটিফিকেশন", icon: Bell },
  { to: "/admin/support", label: "সাপোর্ট", icon: Headphones },
  { to: "/admin/kyc", label: "KYC", icon: IdCard },
  { to: "/admin/recharges", label: "রিচার্জ", icon: Signal },
  { to: "/admin/api", label: "API", icon: Settings },
  { to: "/admin/settings", label: "অ্যাপ সেটিংস", icon: Settings2 },
];

function AdminShell() {
  const check = useServerFn(amIAdmin);
  const navigate = useNavigate();
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const [open, setOpen] = useState(false);
  const q = useQuery({ queryKey: ["am-i-admin"], queryFn: () => check(), staleTime: 60_000 });
  const { settings } = useAppSettings();
  const brandName = `${settings.app_name} Admin`;

  if (q.isLoading) {
    return (
      <div className="min-h-screen grid place-items-center">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    );
  }
  if (!q.data?.isAdmin) {
    return (
      <div className="min-h-screen grid place-items-center p-6 text-center">
        <div>
          <Shield className="h-12 w-12 mx-auto text-destructive" />
          <h1 className="text-xl font-bold mt-3">অ্যাক্সেস নেই</h1>
          <p className="text-sm text-muted-foreground mt-1">এই অ্যাকাউন্টের অ্যাডমিন পারমিশন নেই।</p>
          <button
            onClick={async () => {
              await supabase.auth.signOut();
              navigate({ to: "/admin/login", replace: true });
            }}
            className="mt-4 px-4 h-10 rounded-full bg-primary text-primary-foreground font-semibold text-sm"
          >
            লগ আউট
          </button>
        </div>
      </div>
    );
  }

  const signOut = async () => {
    await supabase.auth.signOut();
    navigate({ to: "/admin/login", replace: true });
  };

  const renderNav = (onClick?: () => void) =>
    NAV.filter((n) => !(n.label === "ইউজার" && pathname === "/admin")).map((n) => {
      const active = n.exact ? pathname === n.to : pathname.startsWith(n.to);
      const Icon = n.icon;
      return (
        <Link
          key={n.label}
          to={n.to}
          onClick={onClick}
          className={`h-11 px-3 rounded-lg flex items-center gap-3 text-sm font-semibold transition ${
            active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted"
          }`}
        >
          <Icon className="h-4 w-4" />
          <span>{n.label}</span>
        </Link>
      );
    });

  return (
    <div className="min-h-screen bg-muted/30">
      <header className="bg-card border-b sticky top-0 z-20">
        <div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between gap-3">
          <div className="flex items-center gap-2 min-w-0">
            <Sheet open={open} onOpenChange={setOpen}>
              <SheetTrigger asChild>
                <button
                  className="h-9 w-9 rounded-lg grid place-items-center hover:bg-muted"
                  aria-label="Menu"
                >
                  <Menu className="h-5 w-5" />
                </button>
              </SheetTrigger>
              <SheetContent side="left" className="w-72 p-0">
                <SheetHeader className="p-4 border-b">
                  <SheetTitle className="flex items-center gap-2 text-left">
                    <div
                      className="h-9 w-9 rounded-lg grid place-items-center text-primary-foreground overflow-hidden"
                      style={{ background: settings.primary_color || "var(--gradient-primary)" }}
                    >
                      {settings.app_logo_url
                        ? <img src={settings.app_logo_url} alt="logo" className="h-full w-full object-cover" />
                        : <Shield className="h-4 w-4" />}
                    </div>
                    <div>
                      <p className="text-sm font-bold leading-tight">{brandName}</p>
                      <p className="text-[10px] text-muted-foreground leading-tight font-normal">
                        কন্ট্রোল প্যানেল
                      </p>
                    </div>
                  </SheetTitle>
                </SheetHeader>
                <nav className="p-2 flex flex-col gap-1">{renderNav(() => setOpen(false))}</nav>
                <div className="p-2 border-t mt-auto">
                  <button
                    onClick={() => {
                      setOpen(false);
                      signOut();
                    }}
                    className="w-full h-11 px-3 rounded-lg flex items-center gap-3 text-sm font-semibold text-destructive hover:bg-destructive/10"
                  >
                    <LogOut className="h-4 w-4" />
                    লগ আউট
                  </button>
                </div>
              </SheetContent>
            </Sheet>

            <div
              className="h-8 w-8 rounded-lg grid place-items-center text-primary-foreground shrink-0 overflow-hidden"
              style={{ background: settings.primary_color || "var(--gradient-primary)" }}
            >
              {settings.app_logo_url
                ? <img src={settings.app_logo_url} alt="logo" className="h-full w-full object-cover" />
                : <Shield className="h-4 w-4" />}
            </div>
            <div className="min-w-0">
              <p className="text-sm font-bold leading-tight truncate">{brandName}</p>
              <p className="text-[10px] text-muted-foreground leading-tight">কন্ট্রোল প্যানেল</p>
            </div>
          </div>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-1">
            {NAV.filter((n) => n.label !== "ইউজার").map((n) => {
              const active = n.exact ? pathname === n.to : pathname.startsWith(n.to);
              const Icon = n.icon;
              return (
                <Link
                  key={n.label}
                  to={n.to}
                  className={`h-9 px-3 rounded-lg flex items-center gap-1.5 text-sm font-semibold ${
                    active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted"
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  <span>{n.label}</span>
                </Link>
              );
            })}
            <button
              onClick={signOut}
              className="h-9 w-9 rounded-lg grid place-items-center hover:bg-muted ml-1"
              aria-label="Sign out"
            >
              <LogOut className="h-4 w-4" />
            </button>
          </nav>
        </div>
      </header>
      <main className="max-w-6xl mx-auto p-4">
        <Outlet />
      </main>
    </div>
  );
}