import { Link } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { ChevronDown, Menu } from "lucide-react";
import { AppLogo } from "./AppLogo";
import { toast } from "sonner";

interface HeaderProps { dashboard?: boolean; onMenuClick?: () => void; }

export function Header({ dashboard = false, onMenuClick }: HeaderProps) {
  const { currentUser, logout, isAuthenticated } = useAuth();
  const dashboardPath = currentUser?.role === "planner" ? "/dashboard" : "/voyageur/dashboard";
  const initials = currentUser?.name?.split(" ").filter(Boolean).map((part) => part[0]).join("").slice(0, 2).toUpperCase() || "TT";
  const handleLogout = async () => {
    try {
      await logout();
      toast.info("Vous avez été déconnecté");
    } catch (error) {
      console.error("Logout error:", error);
      toast.error("Erreur lors de la déconnexion");
    }
  };

  if (dashboard) {
    return <header className="sticky top-0 z-30 flex h-20 items-center justify-between border-b bg-white/95 px-4 backdrop-blur sm:px-6 lg:px-8">
      <div className="flex items-center gap-3">
        <button onClick={onMenuClick} className="grid h-11 w-11 place-items-center rounded-xl border bg-white lg:hidden" aria-label="Ouvrir le menu"><Menu /></button>
        <span className="hidden text-sm font-medium text-muted-foreground sm:block">Votre espace de voyage sur mesure</span>
      </div>
      <DropdownMenu>
        <DropdownMenuTrigger asChild><Button variant="ghost" className="h-12 gap-3 rounded-xl px-2"><Avatar className="h-9 w-9"><AvatarImage src="/default-avatar.png" alt="" /><AvatarFallback>{initials}</AvatarFallback></Avatar><span className="hidden font-semibold sm:inline">{currentUser?.name}</span><ChevronDown className="h-4 w-4" /></Button></DropdownMenuTrigger>
        <DropdownMenuContent className="w-60" align="end"><DropdownMenuItem asChild><Link to={dashboardPath}>Mon espace</Link></DropdownMenuItem>{currentUser?.role === "planner" && <><DropdownMenuItem asChild><Link to="/dashboard/settings">Mon profil et paramètres</Link></DropdownMenuItem><DropdownMenuItem asChild><Link to="/dashboard/help">Aide</Link></DropdownMenuItem></>}<DropdownMenuItem asChild><Link to="/">Accueil TripTales</Link></DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem onClick={handleLogout}>Se déconnecter</DropdownMenuItem></DropdownMenuContent>
      </DropdownMenu>
    </header>;
  }

  return <header className="sticky top-0 z-40 border-b bg-white/95 backdrop-blur">
    <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-4 sm:px-6"><AppLogo /><nav className="hidden items-center gap-7 text-sm font-semibold md:flex" aria-label="Navigation publique"><Link to="/" className="hover:text-primary">Accueil</Link><Link to="/about" className="hover:text-primary">À propos</Link>{isAuthenticated && <Link to={dashboardPath} className="hover:text-primary">Mon espace</Link>}</nav><div className="flex items-center gap-2">{isAuthenticated ? <Button asChild><Link to={dashboardPath}>Mon espace</Link></Button> : <><Button variant="ghost" asChild className="hidden sm:inline-flex"><Link to="/login">Se connecter</Link></Button><Button asChild><Link to="/signup">Créer un compte</Link></Button></>}</div></div>
  </header>;
}