"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard,
  ShoppingBag,
  Users,
  Megaphone,
  Boxes,
  Truck,
  BarChart3,
  Image as ImageIcon,
  BookOpen,
  MessageSquareQuote,
  Handshake,
  MessagesSquare,
  Settings,
  LogOut,
  Menu,
  X,
  PanelLeftClose,
  PanelLeftOpen,
} from "lucide-react";
import Logo from "@/components/Logo";
import { useAuthStore } from "@/store/auth";
import { useAuthHydrated } from "@/store/useAuthHydrated";
import ConfirmDialog from "@/components/admin/ui/ConfirmDialog";
import { PageLoader } from "@/components/admin/ui/Loader";
import UserMenu from "@/components/admin/UserMenu";
import styles from "./AdminLayout.module.css";

interface NavItem {
  href: string;
  label: string;
  icon: typeof LayoutDashboard;
}

interface NavSection {
  titre: string;
  items: NavItem[];
}

const NAV_SECTIONS: NavSection[] = [
  {
    titre: "Général",
    items: [{ href: "/admin/dashboard", label: "Dashboard", icon: LayoutDashboard }],
  },
  {
    titre: "Ventes",
    items: [
      { href: "/admin/commandes", label: "Commandes", icon: ShoppingBag },
      { href: "/admin/clients", label: "Clients", icon: Users },
      { href: "/admin/espace-pub", label: "Espace Pub", icon: Megaphone },
      { href: "/admin/stock", label: "Stock", icon: Boxes },
      { href: "/admin/livraisons", label: "Livraisons", icon: Truck },
      { href: "/admin/impact", label: "Impact", icon: BarChart3 },
    ],
  },
  {
    titre: "Contenu",
    items: [
      { href: "/admin/contenu/slides", label: "Carrousel Hero", icon: ImageIcon },
      { href: "/admin/contenu/articles", label: "Articles Blog", icon: BookOpen },
      { href: "/admin/contenu/temoignages", label: "Témoignages", icon: MessageSquareQuote },
      { href: "/admin/contenu/partenaires", label: "Partenaires", icon: Handshake },
    ],
  },
  {
    titre: "Système",
    items: [
      { href: "/admin/messages", label: "Messages", icon: MessagesSquare },
      { href: "/admin/infos-utiles", label: "Infos utiles", icon: Settings },
    ],
  },
];

const COLLAPSE_STORAGE_KEY = "pubago_admin_sidebar_collapsed";

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const user = useAuthStore((state) => state.user);
  const hydrate = useAuthHydrated();
  const deconnecte = useAuthStore((state) => state.deconnecte);

  const [sidebarOuverte, setSidebarOuverte] = useState(false);
  const [collapsed, setCollapsed] = useState(false);
  const [confirmDeconnexion, setConfirmDeconnexion] = useState(false);

  // Garde d'accès : redirige si non connecté ou sans le rôle ROLE_ADMIN.
  // On attend la fin de l'hydratation du store (localStorage) pour ne pas
  // rediriger à tort avant que la session persistée ait été relue.
  useEffect(() => {
    if (!hydrate) return;
    if (!user || !user.roles.includes("ROLE_ADMIN")) {
      router.replace("/auth/connexion");
    }
  }, [hydrate, user, router]);

  useEffect(() => {
    setCollapsed(localStorage.getItem(COLLAPSE_STORAGE_KEY) === "1");
  }, []);

  useEffect(() => {
    setSidebarOuverte(false);
  }, [pathname]);

  const toggleCollapsed = () => {
    setCollapsed((prev) => {
      const next = !prev;
      localStorage.setItem(COLLAPSE_STORAGE_KEY, next ? "1" : "0");
      return next;
    });
  };

  const handleDeconnexion = () => {
    deconnecte();
    router.push("/auth/connexion");
  };

  // Tant que l'hydratation n'est pas faite, ou que l'accès n'est pas
  // autorisé (redirection en cours), on n'affiche jamais le contenu admin.
  if (!hydrate || !user || !user.roles.includes("ROLE_ADMIN")) {
    return <PageLoader label="Vérification de l'accès..." />;
  }

  return (
    <div className={`${styles.layout} ${collapsed ? styles.layoutCollapsed : ""}`}>
      {sidebarOuverte && <div className={styles.overlay} onClick={() => setSidebarOuverte(false)} />}

      <aside className={`${styles.sidebar} ${sidebarOuverte ? styles.sidebarOuverte : ""}`}>
        <div className={styles.sidebarHeader}>
          <Link href="/admin/dashboard" className={styles.brand}>
            <Logo height={28} />
          </Link>
          <button
            type="button"
            className={styles.closeSidebar}
            onClick={() => setSidebarOuverte(false)}
            aria-label="Fermer le menu"
          >
            <X size={18} />
          </button>
        </div>

        <nav className={styles.nav}>
          {NAV_SECTIONS.map((section) => (
            <div key={section.titre} className={styles.navSection}>
              <span className={styles.navSectionTitre}>{section.titre}</span>
              {section.items.map(({ href, label, icon: Icon }) => {
                const actif = pathname === href || pathname.startsWith(`${href}/`);
                return (
                  <Link
                    key={href}
                    href={href}
                    className={`${styles.navLink} ${actif ? styles.navLinkActif : ""}`}
                    title={label}
                  >
                    <Icon size={18} />
                    <span>{label}</span>
                  </Link>
                );
              })}
            </div>
          ))}
        </nav>

        <div className={styles.sidebarFooter}>
          <div className={styles.userInfo}>
            <span className={styles.userNom}>{user?.nom ?? "Administrateur"}</span>
            <span className={styles.userRole}>{user?.type ?? "ADMIN"}</span>
          </div>
          <button type="button" className={styles.logout} onClick={() => setConfirmDeconnexion(true)}>
            <LogOut size={18} />
            <span>Déconnexion</span>
          </button>
        </div>
      </aside>

      <div className={styles.main}>
        <header className={styles.header}>
          <button
            type="button"
            className={styles.menuToggle}
            onClick={() => setSidebarOuverte(true)}
            aria-label="Ouvrir le menu"
          >
            <Menu size={20} />
          </button>
          <button
            type="button"
            className={styles.collapseToggle}
            onClick={toggleCollapsed}
            aria-label="Réduire le menu"
          >
            {collapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
          </button>

          <UserMenu />
        </header>

        <main className={styles.content} key={pathname}>
          {children}
        </main>
      </div>

      <ConfirmDialog
        open={confirmDeconnexion}
        title="Se déconnecter ?"
        description="Vous devrez vous reconnecter pour accéder à l'espace admin."
        confirmLabel="Déconnexion"
        danger
        onConfirm={handleDeconnexion}
        onCancel={() => setConfirmDeconnexion(false)}
      />
    </div>
  );
}