"use client";

import { signOut } from "next-auth/react";
import { ROLE_LABELS } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { LogOut, User as UserIcon, ChevronDown } from "lucide-react";
import { MobileNav } from "./MobileNav";

interface HeaderProps {
  userName: string;
  userEmail: string;
  userRole: string;
  hotelName: string;
}

export function Header({ userName, userEmail, userRole, hotelName }: HeaderProps) {
  return (
    <header className="h-16 bg-white border-b sticky top-0 z-30 flex items-center justify-between px-4 lg:px-6">
      <div className="flex items-center gap-3">
        <MobileNav role={userRole} hotelName={hotelName} />
        <h2 className="text-base lg:text-lg font-semibold hidden sm:block">
          Bienvenue, {userName.split(" ")[0]}
        </h2>
      </div>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="gap-2 px-2">
            <div className="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center font-semibold text-sm">
              {userName.charAt(0).toUpperCase()}
            </div>
            <div className="text-left hidden sm:block">
              <p className="text-sm font-medium leading-tight">{userName}</p>
              <p className="text-xs text-muted-foreground leading-tight">
                {ROLE_LABELS[userRole] || userRole}
              </p>
            </div>
            <ChevronDown className="w-4 h-4 text-muted-foreground" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-56">
          <DropdownMenuLabel>
            <div>
              <p className="font-medium">{userName}</p>
              <p className="text-xs text-muted-foreground font-normal">{userEmail}</p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <a href="/parametres/mot-de-passe" className="cursor-pointer">
              <UserIcon className="w-4 h-4" />
              Changer mon mot de passe
            </a>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={() => signOut({ callbackUrl: "/login" })}
            className="text-danger focus:text-danger"
          >
            <LogOut className="w-4 h-4" />
            Se déconnecter
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </header>
  );
}