"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Menu, Search, Upload, Sparkles, ChevronRight, Home } from "lucide-react";
import ThemeToggle from "../theme/ThemeToggle";
import NotificationBell from "./NotificationBell";
import Kbd, { modKey } from "../ui/Kbd";
import { useShell, toggleAiPanel } from "./ShellContext";
import { useEffect, useState } from "react";

const routeTitles: Record<string, string> = {
  "/dashboard": "Accueil",
  "/dashboard/files": "Fichiers",
  "/dashboard/favorites": "Favoris",
  "/dashboard/recent": "Récents",
  "/dashboard/graph": "Visualisation",
  "/dashboard/shared-with-me": "Partagé avec moi",
  "/dashboard/passwords": "Mots de passe",
  "/dashboard/trash": "Corbeille",
  "/dashboard/security": "Sécurité",
  "/admin": "Administration",
  "/admin/users": "Utilisateurs",
  "/admin/shared-spaces": "Espaces partagés",
  "/admin/shares": "Liens partagés",
  "/admin/activity": "Activité",
  "/admin/snapshots": "Snapshots",
  "/admin/backup": "Backups",
  "/admin/api-keys": "Clés API",
  "/admin/settings": "Paramètres",
};

export default function TopBar() {
  const pathname = usePathname();
  const router = useRouter();
  const { header, openCommand, setMobileNavOpen } = useShell();
  const [mod, setMod] = useState("⌘");
  useEffect(() => setMod(modKey()), []);

  const isFiles = pathname.startsWith("/dashboard/files") || pathname.startsWith("/dashboard/folder");
  const title = header.title || routeTitles[pathname] || (pathname.startsWith("/dashboard/shared-space") ? "Espace partagé" : isFiles ? "Fichiers" : "SPB Cloud");
  const crumbs = header.crumbs;

  return (
    <header className="h-14 lg:h-16 shrink-0 flex items-center gap-2 px-3 sm:px-4 lg:px-6 border-b border-line dark:border-white/[0.07] bg-surface/70 dark:bg-canvas/70 backdrop-blur-xl safe-top z-30">
      {/* Mobile : menu */}
      <button
        onClick={() => setMobileNavOpen(true)}
        className="lg:hidden w-10 h-10 -ml-1 flex items-center justify-center rounded-xl text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
        aria-label="Ouvrir le menu"
      >
        <Menu className="w-5 h-5" />
      </button>

      {/* Titre / fil d'Ariane */}
      <div className="flex-1 min-w-0 flex items-center">
        {crumbs ? (
          <nav className="flex items-center gap-1 text-sm overflow-x-auto scrollbar-none whitespace-nowrap" aria-label="Fil d'Ariane">
            <Link href="/dashboard/files" className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors px-1.5 py-1 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5" data-crumb-root>
              <Home className="w-4 h-4" />
              <span className={crumbs.length ? "hidden sm:inline" : "font-semibold text-gray-900 dark:text-white"}>Fichiers</span>
            </Link>
            {crumbs.map((c, i) => {
              const last = i === crumbs.length - 1;
              return (
                <span key={c.id} className="flex items-center gap-1">
                  <ChevronRight className="w-3.5 h-3.5 text-gray-300 dark:text-gray-600 shrink-0" />
                  <Link
                    href={`/dashboard/folder/${c.id}`}
                    data-crumb-id={c.id}
                    className={`px-1.5 py-1 rounded-lg transition-colors truncate max-w-[10rem] sm:max-w-[16rem] ${last ? "font-semibold text-gray-900 dark:text-white" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/5"}`}
                    aria-current={last ? "page" : undefined}
                  >
                    {c.name}
                  </Link>
                </span>
              );
            })}
          </nav>
        ) : (
          <h1 className="text-[15px] lg:text-base font-semibold tracking-tight text-gray-900 dark:text-white truncate">{title}</h1>
        )}
      </div>

      {/* Recherche / palette */}
      <button
        onClick={() => openCommand("")}
        className="hidden md:flex items-center gap-2 h-10 w-64 lg:w-80 px-3 rounded-xl bg-gray-100/80 dark:bg-white/[0.06] border border-transparent hover:border-line dark:hover:border-white/10 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors text-sm text-left"
        aria-label="Rechercher ou exécuter une commande"
      >
        <Search className="w-4 h-4 shrink-0" />
        <span className="flex-1 truncate">Rechercher, naviguer, agir…</span>
        <span className="flex items-center gap-0.5"><Kbd>{mod}</Kbd><Kbd>K</Kbd></span>
      </button>
      <button
        onClick={() => openCommand("")}
        className="md:hidden w-10 h-10 flex items-center justify-center rounded-xl text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
        aria-label="Rechercher"
      >
        <Search className="w-5 h-5" />
      </button>

      {/* Actions */}
      <div className="flex items-center gap-0.5 sm:gap-1">
        <button
          onClick={() => router.push(isFiles ? `${pathname}?upload=1` : "/dashboard/files?upload=1")}
          className="hidden sm:flex items-center gap-1.5 h-10 px-3 rounded-xl text-white bg-accent-gradient text-sm font-medium shadow-[inset_0_1px_0_rgb(255_255_255/.18)] hover:brightness-110 hover:shadow-glow transition-all"
          title="Envoyer des fichiers"
        >
          <Upload className="w-4 h-4" />
          <span className="hidden lg:inline">Envoyer</span>
        </button>
        <button
          onClick={toggleAiPanel}
          className="hidden sm:flex w-10 h-10 items-center justify-center rounded-xl text-gray-500 hover:text-blue-600 hover:bg-blue-500/10 dark:text-gray-400 dark:hover:text-blue-300 transition-colors"
          title="Assistant IA"
          aria-label="Assistant IA"
        >
          <Sparkles className="w-[18px] h-[18px]" />
        </button>
        <NotificationBell />
        <ThemeToggle />
      </div>
    </header>
  );
}