import { useLocation } from "react-router-dom";
import { LogOut, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/auth/AuthProvider";
import { NotificationCenter } from "./NotificationCenter";

const breadcrumbMap: Record<string, string> = {
  "/dashboard": "Vue d'ensemble",
  "/dashboard/playground": "Playground IA",
  "/dashboard/policies": "Politiques de routage",
  "/dashboard/users": "Utilisateurs",
  "/dashboard/providers": "Fournisseurs IA",
  "/dashboard/security": "Sécurité RSSI",
  "/dashboard/costs": "Coûts IA",
  "/dashboard/alerts": "Alertes Budget",
  "/dashboard/logs": "Journaux d'audit",
  "/dashboard/compliance": "Conformité RGPD / AI Act",
  "/dashboard/settings": "Paramètres",
};

export function Header() {
  const location = useLocation();
  const { user, logout } = useAuth();
  const title = breadcrumbMap[location.pathname] ?? "Dashboard";

  return (
    <header className="h-14 border-b bg-card flex items-center justify-between px-6 shrink-0">
      <h1 className="text-base font-semibold">{title}</h1>

      <div className="flex items-center gap-3">
        <NotificationCenter />

        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <User className="h-4 w-4" />
          <span className="hidden sm:inline">{user?.name ?? user?.email}</span>
          {user?.roles[0] && (
            <span className="text-xs bg-secondary px-1.5 py-0.5 rounded capitalize">
              {user.roles[0]}
            </span>
          )}
        </div>

        <Button variant="ghost" size="icon" onClick={logout} title="Se déconnecter">
          <LogOut className="h-4 w-4" />
        </Button>
      </div>
    </header>
  );
}
