"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";
import { Home, FolderOpen, Search, Star, Menu } from "lucide-react";
import { useShell } from "./ShellContext";

/** Barre d'onglets mobile (iOS-like) — masquée ≥ lg. */
export default function MobileTabBar() {
  const pathname = usePathname();
  const { openCommand, setMobileNavOpen } = useShell();

  const tabs = [
    { key: "home", label: "Accueil", icon: Home, href: "/dashboard", active: pathname === "/dashboard" },
    { key: "files", label: "Fichiers", icon: FolderOpen, href: "/dashboard/files", active: pathname.startsWith("/dashboard/files") || pathname.startsWith("/dashboard/folder") },
    { key: "search", label: "Rechercher", icon: Search, onClick: () => openCommand(""), active: false },
    { key: "fav", label: "Favoris", icon: Star, href: "/dashboard/favorites", active: pathname === "/dashboard/favorites" },
    { key: "menu", label: "Menu", icon: Menu, onClick: () => setMobileNavOpen(true), active: false },
  ];

  return (
    <nav className="lg:hidden fixed bottom-0 inset-x-0 z-40 glass border-t border-line dark:border-white/10 pb-safe" aria-label="Navigation principale">
      <div className="grid grid-cols-5 h-16">
        {tabs.map((t) => {
          const cls = `relative flex flex-col items-center justify-center gap-1 text-[10.5px] font-medium transition-colors ${t.active ? "text-blue-600 dark:text-blue-300" : "text-gray-500 dark:text-gray-400 active:text-gray-900 dark:active:text-white"}`;
          const inner = (
            <>
              {t.active && <motion.span layoutId="tab-dot" className="absolute top-1.5 w-8 h-1 rounded-full bg-blue-500" />}
              <t.icon className={`w-[22px] h-[22px] ${t.key === "search" ? "" : ""}`} strokeWidth={t.active ? 2.4 : 2} />
              <span>{t.label}</span>
            </>
          );
          return t.href ? (
            <Link key={t.key} href={t.href} className={cls} aria-current={t.active ? "page" : undefined}>{inner}</Link>
          ) : (
            <button key={t.key} onClick={t.onClick} className={cls}>{inner}</button>
          );
        })}
      </div>
    </nav>
  );
}