"use client";

import { createContext, useCallback, useContext, useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  Receipt,
  LifeBuoy,
  Settings,
  CreditCard,
  LogOut,
  Layers,
  Menu,
  X,
  type LucideIcon,
} from "@/components/ui/icons";
import { cn } from "@/lib/utils";
import { Logo } from "@/components/brand/logo";

type Variant = "admin" | "portail";

type RawItem = { href: string; label: string; icon: LucideIcon; end?: boolean };

const ADMIN_ITEMS: RawItem[] = [
  { href: "/atelier-novelia", label: "Tableau de bord", icon: LayoutDashboard, end: true },
  { href: "/atelier-novelia/clients", label: "Clients", icon: Users },
  { href: "/atelier-novelia/realisations", label: "Réalisations", icon: Layers },
  { href: "/atelier-novelia/factures", label: "Factures", icon: Receipt },
  { href: "/atelier-novelia/tickets", label: "Tickets", icon: LifeBuoy },
  { href: "/atelier-novelia/parametres", label: "Paramètres", icon: Settings },
];

const PORTAL_ITEMS: RawItem[] = [
  { href: "/portail", label: "Tableau de bord", icon: LayoutDashboard, end: true },
  { href: "/portail/abonnement", label: "Abonnement", icon: CreditCard },
  { href: "/portail/factures", label: "Factures", icon: Receipt },
  { href: "/portail/support", label: "Support", icon: LifeBuoy },
  { href: "/portail/parametres", label: "Paramètres", icon: Settings },
];

type Ctx = {
  open: () => void;
  available: boolean;
};

const MobileNavCtx = createContext<Ctx>({ open: () => {}, available: false });

export function useMobileNav() {
  return useContext(MobileNavCtx);
}

type ProviderProps = {
  variant: Variant;
  contextLabel: string;
  contextValue: string;
  children: React.ReactNode;
};

/**
 * Wrapper layout portail/admin : fournit le context + rend le drawer en overlay quand ouvert.
 * À placer en racine du layout, autour de Sidebar/Shell.
 */
export function MobileNavProvider({ variant, contextLabel, contextValue, children }: ProviderProps) {
  const pathname = usePathname();
  const [isOpen, setOpen] = useState(false);
  const items = variant === "admin" ? ADMIN_ITEMS : PORTAL_ITEMS;

  const openSheet = useCallback(() => setOpen(true), []);
  const closeSheet = useCallback(() => setOpen(false), []);

  // Fermeture automatique au changement de route
  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  // Échap
  useEffect(() => {
    if (!isOpen) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [isOpen]);

  // Bloque scroll body
  useEffect(() => {
    if (!isOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [isOpen]);

  // Animation slide-in : on garde le drawer dans le DOM (mount + visibility
  // toggle via data-open) pour permettre les transitions enter/exit. Audit emil :
  // sans transition, le drawer mobile pop instantanement, c'est l'interaction la
  // plus visible sur mobile. Easing iOS-like (cubic-bezier 0.32,0.72,0,1).
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    if (isOpen) {
      setMounted(true);
    } else {
      // Demonte apres la fin de l'anim exit (250ms) pour clear le DOM.
      const t = setTimeout(() => setMounted(false), 280);
      return () => clearTimeout(t);
    }
  }, [isOpen]);

  return (
    <MobileNavCtx.Provider value={{ open: openSheet, available: true }}>
      {children}
      {mounted && (
        <div
          className="fixed inset-0 z-50 md:hidden"
          role="dialog"
          aria-modal="true"
          aria-label="Menu principal"
          data-open={isOpen}
        >
          <div
            className={cn(
              "absolute inset-0 bg-stone-900/30 backdrop-blur-sm transition-opacity duration-250 ease-out",
              isOpen ? "opacity-100" : "opacity-0",
            )}
            onClick={closeSheet}
            aria-hidden
          />
          <aside
            className={cn(
              "absolute top-0 left-0 bottom-0 w-[88%] max-w-sm bg-surface-2 border-r border-border shadow-xl flex flex-col",
              "transition-transform duration-250 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
              isOpen ? "translate-x-0" : "-translate-x-full",
            )}
          >
            <div className="h-14 px-5 flex items-center justify-between border-b border-border">
              <Link href="/" onClick={closeSheet} className="flex items-center gap-2.5">
                <Logo size="sm" />
              </Link>
              <button
                type="button"
                onClick={closeSheet}
                aria-label="Fermer le menu"
                className="inline-flex items-center justify-center size-11 -mr-2 rounded-md text-text-muted hover:text-text hover:bg-stone-900/[0.05]"
              >
                <X className="size-5" />
              </button>
            </div>

            <div className="px-4 pt-4 pb-2">
              <div className="px-3 py-2.5 rounded-md border border-border bg-surface">
                <div className="text-xxs uppercase tracking-wider font-semibold text-text-faint">{contextLabel}</div>
                <div className="mt-0.5 text-sm font-medium text-text truncate">{contextValue}</div>
              </div>
            </div>

            <nav className="flex-1 px-3 py-3 overflow-y-auto">
              <ul className="space-y-0.5">
                {items.map((item) => {
                  const isActive = item.end ? pathname === item.href : pathname.startsWith(item.href);
                  const Icon = item.icon;
                  return (
                    <li key={item.href}>
                      <Link
                        href={item.href}
                        className={cn(
                          "flex items-center gap-3 rounded-md px-3 py-3 text-base transition-colors",
                          isActive
                            ? "bg-surface text-text border border-border"
                            : "text-text-muted hover:text-text hover:bg-surface/60 border border-transparent",
                        )}
                      >
                        <Icon
                          className={cn(
                            "size-[18px] shrink-0 transition-colors",
                            isActive ? "text-accent" : "text-text-dim",
                          )}
                        />
                        <span className="font-medium">{item.label}</span>
                        {isActive && <span className="ml-auto size-1.5 rounded-full bg-accent" />}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </nav>

            <div className="border-t border-border p-3">
              <Link
                href="/"
                onClick={closeSheet}
                className="flex items-center gap-3 rounded-md px-3 py-3 text-base text-text-muted hover:text-text hover:bg-surface/60 transition-colors"
              >
                <LogOut className="size-[18px] text-text-dim shrink-0" />
                <span className="font-medium">Déconnexion</span>
              </Link>
            </div>
          </aside>
        </div>
      )}
    </MobileNavCtx.Provider>
  );
}

/**
 * Burger trigger affiché uniquement sous `md`.
 * Auto-no-op si pas dans un MobileNavProvider.
 */
export function MobileNavTrigger() {
  const { open, available } = useMobileNav();
  if (!available) return null;
  return (
    <button
      type="button"
      onClick={open}
      aria-label="Ouvrir le menu"
      className="md:hidden inline-flex items-center justify-center size-11 -ml-2 rounded-md text-text-muted hover:text-text hover:bg-stone-900/[0.05]"
    >
      <Menu className="size-5" />
    </button>
  );
}