"use client";

import { useRouter } from "next/navigation";
import { type ReactNode } from "react";
import { CommandPalette, type Command } from "@/components/ui/command-palette";
import { useToast } from "@/components/ui/toast";
import { useTheme } from "@/components/theme-provider";
import { IdleSessionGuard } from "./idle-session";
import {
  IconActivity,
  IconBuilding,
  IconBug,
  IconCreditCard,
  IconDashboard,
  IconFileText,
  IconLogOut,
  IconMonitor,
  IconMoon,
  IconScroll,
  IconShield,
  IconSun,
  IconTags,
  IconUsers,
} from "@/components/icons";

const NAV = [
  { href: "/dashboard", label: "Tableau de bord", icon: <IconDashboard size={14} /> },
  { href: "/tenants", label: "Tenants", icon: <IconBuilding size={14} /> },
  { href: "/billing", label: "Abonnements", icon: <IconCreditCard size={14} /> },
  { href: "/plans", label: "Plans", icon: <IconTags size={14} /> },
  { href: "/techniciens", label: "Techniciens", icon: <IconUsers size={14} /> },
  { href: "/report-templates", label: "Templates rapports", icon: <IconFileText size={14} /> },
  { href: "/monitoring", label: "Monitoring", icon: <IconActivity size={14} /> },
  { href: "/crashs-mobile", label: "Crashs mobile", icon: <IconBug size={14} /> },
  { href: "/activites", label: "Journal", icon: <IconScroll size={14} /> },
  { href: "/account/security", label: "Sécurité (2FA)", icon: <IconShield size={14} /> },
];

export function AdminShell({ children }: { children: ReactNode }) {
  const router = useRouter();
  const { toast } = useToast();
  const { theme, setTheme } = useTheme();

  const commands: Command[] = [
    ...NAV.map((n) => ({
      id: `nav-${n.href}`,
      group: "Navigation",
      label: n.label,
      icon: n.icon,
      hint: n.href,
      keywords: [n.href.replace("/", "")],
      action: () => router.push(n.href),
    })),
    {
      id: "theme-light",
      group: "Thème",
      label: "Thème clair",
      icon: <IconSun size={14} />,
      keywords: ["light", "clair", "jour", "blanc"],
      hint: theme === "light" ? "actif" : undefined,
      action: () => {
        setTheme("light");
        toast({ title: "Thème clair activé", tone: "info", duration: 1500 });
      },
    },
    {
      id: "theme-dark",
      group: "Thème",
      label: "Thème sombre",
      icon: <IconMoon size={14} />,
      keywords: ["dark", "sombre", "nuit", "noir"],
      hint: theme === "dark" ? "actif" : undefined,
      action: () => {
        setTheme("dark");
        toast({ title: "Thème sombre activé", tone: "info", duration: 1500 });
      },
    },
    {
      id: "theme-system",
      group: "Thème",
      label: "Suivre le système",
      icon: <IconMonitor size={14} />,
      keywords: ["system", "auto", "systeme"],
      hint: theme === "system" ? "actif" : undefined,
      action: () => {
        setTheme("system");
        toast({
          title: "Thème système activé",
          tone: "info",
          duration: 1500,
        });
      },
    },
    {
      id: "logout",
      group: "Compte",
      label: "Se déconnecter",
      icon: <IconLogOut size={14} />,
      keywords: ["logout", "deconnexion", "sign out"],
      action: async () => {
        try {
          await fetch("/api/auth/logout", { method: "POST" });
        } catch {
          /* on continue quoi qu'il arrive */
        }
        toast({
          title: "Session terminée",
          tone: "success",
          duration: 2000,
        });
        router.replace("/login");
        router.refresh();
      },
    },
  ];

  return (
    <>
      {children}
      <CommandPalette commands={commands} />
      <IdleSessionGuard />
    </>
  );
}