"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { Menu, Film, Gamepad2, Calendar, User as UserIcon, LogOut, Utensils, Shield } from "lucide-react";
import { cn } from "@/lib/utils";
import { Logo } from "./Logo";
import { useAutenticacion } from "@/proveedores/autenticacion";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";


const navLinks = [
  { href: "/movies", label: "Películas", icon: Film },
  { href: "/gaming", label: "Gaming", icon: Gamepad2 },
  { href: "/menu", label: "Menú", icon: Utensils },
  { href: "/booking", label: "Reservar", icon: Calendar },
];

function UserButton() {
  const { usuario, cargando, cerrarSesion } = useAutenticacion();

  const handleSignOut = () => {
    cerrarSesion();
  };

  if (cargando) {
    return <div className="w-24 h-10 bg-muted rounded-md animate-pulse" />;
  }

  if (!usuario) {
    return (
      <>
        <Button variant="ghost" asChild>
          <Link href="/login">Iniciar Sesión</Link>
        </Button>
        <Button asChild className="group transition-all duration-300 ease-in-out transform hover:scale-105">
          <Link href="/signup">Registrarse</Link>
        </Button>
      </>
    );
  }
  
  const userInitial = usuario.nombre ? usuario.nombre.charAt(0).toUpperCase() : (usuario.correo ? usuario.correo.charAt(0).toUpperCase() : '?');
  const userRole = usuario.rol;
  
  const getRoleLabel = (role?: string) => {
    switch(role) {
      case 'superadmin': return 'Super Admin';
      case 'admin': return 'Administrador';
      default: return 'Cliente';
    }
  }


  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
           <Avatar className="w-8 h-8">
            <AvatarImage src={usuario.foto_perfil || undefined} alt="Foto de perfil" />
            <AvatarFallback>{userInitial}</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">{usuario.nombre} {usuario.apellido}</p>
            <p className="text-xs leading-none text-muted-foreground">
              {getRoleLabel(userRole)}
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
           <Link href="/dashboard/profile"><UserIcon className="mr-2 h-4 w-4" /> Mi Perfil</Link>
        </DropdownMenuItem>
        {(userRole === 'admin' || userRole === 'superadmin') && (
             <DropdownMenuItem asChild>
                <Link href="/dashboard/admin"><Shield className="mr-2 h-4 w-4" /> Panel de Admin</Link>
             </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={handleSignOut}>
          <LogOut className="mr-2 h-4 w-4" />
          Cerrar Sesión
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}


export function Header() {
  const pathname = usePathname();
 
  const NavLink = ({ href, label, icon: Icon }: { href: string; label: string; icon: React.ElementType }) => (
    <Link
      href={href}
      className={cn(
        "flex items-center gap-2 text-md font-medium transition-colors hover:text-primary",
        pathname === href ? "text-primary" : "text-muted-foreground"
      )}
    >
      <Icon className="h-5 w-5" />
      <span>{label}</span>
    </Link>
  );

  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 max-w-screen-2xl items-center justify-between">
        <div className="flex items-center gap-6">
          <Logo />
          <nav className="hidden md:flex items-center gap-6">
            {navLinks.map((link) => (
              <NavLink key={link.href} {...link} />
            ))}
          </nav>
        </div>

        <div className="hidden md:flex items-center gap-2">
          <UserButton />
        </div>

        <div className="md:hidden">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="outline" size="icon">
                <Menu className="h-6 w-6" />
                <span className="sr-only">Open navigation menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="right">
              <div className="flex flex-col h-full">
                <div className="mb-8">
                  <Logo />
                </div>
                <nav className="flex flex-col gap-6">
                  {navLinks.map((link) => (
                    <NavLink key={link.href} {...link} />
                  ))}
                </nav>
                <div className="mt-auto flex flex-col gap-4">
                 <UserButton />
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}