import { createFileRoute, Outlet, useNavigate, Link, useRouter } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Shield, Users, LayoutDashboard, LogOut, Calendar, ClipboardCheck, QrCode, MapPin, Menu, Sun, Moon, CalendarDays, BarChart3, Wallet, Package, AlertTriangle, Bike, UserCog, Settings as SettingsIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/sonner";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from "@/components/ui/sheet";
import { useTheme } from "@/hooks/use-theme";
import { useRoles, type AppRole } from "@/hooks/use-roles";
import { useI18n } from "@/hooks/use-i18n";
import { useAppLogo } from "@/hooks/use-app-logo";
import { useAppName } from "@/hooks/use-app-name";

export const Route = createFileRoute("/_authenticated")({
  ssr: false,
  component: AuthLayout,
});

function AuthLayout() {
  const navigate = useNavigate();
  const router = useRouter();
  const [ready, setReady] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const { theme, toggle } = useTheme();
  const { hasAny, isLoading: rolesLoading } = useRoles();
  const { t, toggle: toggleLang, lang } = useI18n();
  const { logo } = useAppLogo();
  const { name: appName } = useAppName();

  useEffect(() => {
    const { data: sub } = supabase.auth.onAuthStateChange((_e, session) => {
      if (!session) navigate({ to: "/auth" });
    });
    supabase.auth.getSession().then(({ data }) => {
      if (!data.session) navigate({ to: "/auth" });
      else setReady(true);
    });
    return () => sub.subscription.unsubscribe();
  }, [navigate]);

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

  if (!ready) {
    return <div className="min-h-screen flex items-center justify-center text-muted-foreground">{t("Loading…")}</div>;
  }

  const ADMIN: AppRole[] = ["super_admin", "admin", "company_admin"];
  const OPS: AppRole[] = [...ADMIN, "ops_manager"];
  const SUP: AppRole[] = [...OPS, "supervisor", "security_officer"];
  const ALL: AppRole[] = [...SUP, "guard", "client"];
  const allNav: { to: string; label: string; Icon: typeof Users; roles: AppRole[] }[] = [
    { to: "/dashboard", label: "Dashboard", Icon: LayoutDashboard, roles: ALL },
    { to: "/guards", label: "Guards", Icon: Users, roles: OPS },
    { to: "/rosters", label: "Rosters", Icon: Calendar, roles: SUP },
    { to: "/attendance", label: "Attendance", Icon: ClipboardCheck, roles: SUP },
    { to: "/duty-posts", label: "Duty Posts", Icon: MapPin, roles: OPS },
    { to: "/qr-management", label: "QR Codes", Icon: QrCode, roles: OPS },
    { to: "/leaves", label: "Leaves", Icon: CalendarDays, roles: ALL },
    { to: "/reports", label: "Reports", Icon: BarChart3, roles: OPS },
    { to: "/salary", label: "Salary", Icon: Wallet, roles: ADMIN },
    { to: "/inventory", label: "Inventory", Icon: Package, roles: SUP },
    { to: "/incidents", label: "Incidents", Icon: AlertTriangle, roles: ALL },
    { to: "/patrols", label: "Patrols", Icon: Bike, roles: ALL },
    { to: "/roles", label: "User Roles", Icon: UserCog, roles: ADMIN },
    { to: "/settings", label: "Settings", Icon: SettingsIcon, roles: ALL },
  ];
  const navItems = rolesLoading ? allNav : allNav.filter((i) => hasAny(i.roles));

  return (
    <div className="min-h-screen bg-muted/30">
      <Toaster />
      <header className="bg-card/80 backdrop-blur-md border-b sticky top-0 z-40">
        <div className="container mx-auto px-4 h-16 flex items-center justify-between gap-2">
          <Link to="/dashboard" className="flex items-center gap-2 min-w-0">
            {logo ? (
              <img src={logo} alt="App logo" className="h-9 w-9 rounded-xl object-cover shadow-elegant shrink-0" />
            ) : (
              <div className="h-9 w-9 rounded-xl bg-gradient-primary grid place-items-center shadow-elegant shrink-0">
                <Shield className="h-5 w-5 text-primary-foreground" />
              </div>
            )}
            <span className="font-bold tracking-tight truncate">{appName}</span>
          </Link>
          <nav className="hidden lg:flex items-center gap-1">
            {navItems.map(({ to, label, Icon }) => (
              <Link
                key={to}
                to={to}
                className="px-3 py-2 text-sm rounded-md hover:bg-accent flex items-center gap-2"
                activeProps={{ className: "px-3 py-2 text-sm rounded-md bg-accent flex items-center gap-2 font-medium" }}
              >
                <Icon className="h-4 w-4" /> {t(label)}
              </Link>
            ))}
            <Button variant="ghost" size="sm" onClick={toggleLang} aria-label="Toggle language">
              {lang === "en" ? "বাংলা" : "English"}
            </Button>
            <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle theme">
              {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </Button>
            <Button variant="ghost" size="sm" onClick={signOut}>
              <LogOut className="h-4 w-4 mr-1" /> {t("Sign out")}
            </Button>
          </nav>
          <div className="flex items-center gap-1 lg:hidden">
            <Button variant="ghost" size="sm" onClick={toggleLang} aria-label="Toggle language">
              {lang === "en" ? "বাং" : "EN"}
            </Button>
            <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle theme">
              {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
            </Button>
          <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" aria-label="Open menu">
                <Menu className="h-5 w-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-72">
              <SheetHeader>
                <SheetTitle className="flex items-center gap-2">
                  <Shield className="h-5 w-5 text-primary" /> {appName}
                </SheetTitle>
              </SheetHeader>
              <nav className="mt-6 flex flex-col gap-1 px-2">
                {navItems.map(({ to, label, Icon }) => (
                  <SheetClose asChild key={to}>
                    <Link
                      to={to}
                      className="px-3 py-2 text-sm rounded-md hover:bg-accent flex items-center gap-2"
                      activeProps={{ className: "px-3 py-2 text-sm rounded-md bg-accent flex items-center gap-2 font-medium" }}
                    >
                      <Icon className="h-4 w-4" /> {t(label)}
                    </Link>
                  </SheetClose>
                ))}
                <Button variant="ghost" className="justify-start mt-2" onClick={() => { setMenuOpen(false); signOut(); }}>
                  <LogOut className="h-4 w-4 mr-2" /> {t("Sign out")}
                </Button>
              </nav>
            </SheetContent>
          </Sheet>
          </div>
        </div>
      </header>
      <main className="container mx-auto px-4 py-6 sm:py-8">
        <Outlet />
      </main>
    </div>
  );
}