"use client";
// Coquille de l'application : barre latérale (desktop), navigation basse (mobile),
// bannière d'avertissement admin initial, raccourcis clavier globaux.
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import {
  GraduationCap, Library, LogOut, MessageSquareText, Settings, ShieldAlert, SlidersHorizontal,
} from "lucide-react";
import { ImmbotLogo, ImmbotMark, UqoLogo } from "@/components/logo";
import { ThemeToggle } from "@/components/theme-toggle";
import { cn } from "@/components/ui";

export type ShellUser = {
  id: number;
  username: string;
  displayName: string;
  role: "student" | "instructor" | "admin";
  isInitialAdmin: boolean;
};

export function AppShell({
  user,
  courses,
  children,
}: {
  user: ShellUser;
  courses: { code: string; title: string; color: string }[];
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const [initialPasswordActive] = useState(user.isInitialAdmin);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        router.push("/chat?new=1");
      }
      if ((e.metaKey || e.ctrlKey) && e.key === "j") {
        e.preventDefault();
        router.push("/apprendre");
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [router]);

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/connexion");
    router.refresh();
  }

  const nav = [
    { href: "/chat", label: "Chat", icon: MessageSquareText },
    { href: "/apprendre", label: "Apprendre", icon: GraduationCap },
    { href: "/bibliotheque", label: "Bibliothèque", icon: Library },
    { href: "/parametres", label: "Paramètres", icon: Settings },
    ...(user.role !== "student" ? [{ href: "/admin", label: "Administration", icon: SlidersHorizontal }] : []),
  ];
  const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");

  return (
    <div className="min-h-dvh bg-app flex">
      {/* Barre latérale desktop */}
      <aside className="hidden md:flex flex-col w-60 shrink-0 bg-sidebar border-r border-app sticky top-0 h-dvh">
        <div className="px-4 h-16 flex items-center border-b border-app">
          <Link href="/chat"><ImmbotLogo size={27} /></Link>
        </div>
        <nav className="flex-1 px-2.5 py-3 space-y-0.5 overflow-y-auto">
          {nav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors",
                isActive(item.href)
                  ? "bg-brand-100 dark:bg-brand-900/60 text-brand-700 dark:text-brand-200"
                  : "text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/30"
              )}
            >
              <item.icon size={17} />
              {item.label}
            </Link>
          ))}
          <div className="pt-4 mt-3 border-t border-app">
            <p className="px-3 pb-1.5 text-[11px] font-semibold text-muted uppercase tracking-wider">Mes cours</p>
            {courses.map((c) => (
              <Link
                key={c.code}
                href={`/apprendre/${c.code.toLowerCase()}`}
                className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/30 transition-colors"
              >
                <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: c.color }} />
                <span className="truncate">{c.code}</span>
              </Link>
            ))}
          </div>
        </nav>
        <div className="px-4 py-3 border-t border-app">
          <UqoLogo height={30} className="opacity-90 dark:invert dark:opacity-70" />
        </div>
        <div className="p-3 border-t border-app flex items-center justify-between gap-2">
          <div className="flex items-center gap-2.5 min-w-0">
            <div className="w-8 h-8 rounded-full bg-brand-600 text-white text-[13px] font-semibold flex items-center justify-center shrink-0">
              {user.displayName.slice(0, 1).toUpperCase()}
            </div>
            <div className="min-w-0">
              <p className="text-[13px] font-medium text-fg truncate">{user.displayName}</p>
              <p className="text-[11px] text-muted capitalize">{user.role === "student" ? "Étudiant·e" : user.role === "admin" ? "Admin" : "Professeur"}</p>
            </div>
          </div>
          <div className="flex items-center">
            <ThemeToggle />
            <button onClick={logout} title="Déconnexion" aria-label="Déconnexion" className="p-2 rounded-lg text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40">
              <LogOut size={16} />
            </button>
          </div>
        </div>
      </aside>

      {/* Contenu */}
      <div className="flex-1 flex flex-col min-w-0 pb-16 md:pb-0">
        {initialPasswordActive && (
          <div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2 flex items-center gap-2 text-[13px] text-amber-800 dark:text-amber-300">
            <ShieldAlert size={15} className="shrink-0" />
            <span>
              Compte d'amorçage actif — remplacez le mot de passe initial et créez votre compte personnel, puis
              désactivez ce compte en production (<code className="font-mono">DISABLE_INITIAL_ADMIN=true</code>).
            </span>
          </div>
        )}
        {children}
      </div>

      {/* Navigation basse mobile */}
      <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-card/95 backdrop-blur border-t border-app flex justify-around py-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))]">
        {nav.slice(0, 4).map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              "flex flex-col items-center gap-0.5 px-3 py-1 rounded-lg text-[10.5px] font-medium",
              isActive(item.href) ? "text-brand-600 dark:text-brand-300" : "text-muted"
            )}
          >
            <item.icon size={19} />
            {item.label}
          </Link>
        ))}
        {user.role !== "student" && (
          <Link href="/admin" className={cn("flex flex-col items-center gap-0.5 px-3 py-1 text-[10.5px] font-medium", isActive("/admin") ? "text-brand-600 dark:text-brand-300" : "text-muted")}>
            <SlidersHorizontal size={19} />
            Admin
          </Link>
        )}
      </nav>
    </div>
  );
}

export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: string; actions?: React.ReactNode }) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
      <div>
        <h1 className="text-xl font-bold text-fg flex items-center gap-2.5">
          <ImmbotMark size={22} className="md:hidden" />
          {title}
        </h1>
        {subtitle && <p className="text-sm text-muted mt-0.5">{subtitle}</p>}
      </div>
      {actions}
    </div>
  );
}