"use client";

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { LogOut } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { clearStoredUser, useStoredUser } from "@/lib/auth";

const ROLE_LABELS: Record<string, string> = {
  ADMIN: "Amministratore",
  MANAGER: "Gestore",
  CLIENT: "Associazione",
};

export function AppHeader() {
  const router = useRouter();
  const { user } = useStoredUser();

  const handleLogout = () => {
    clearStoredUser();
    router.push("/login");
  };

  const homeHref = user?.role === "CLIENT" ? "/client-portal" : "/dashboard";

  return (
    <header className="sticky top-0 z-20 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-6">
        <Link href={homeHref} className="flex items-center gap-2.5">
          <Image
            src="/logo-encap.jpg"
            alt="ENCAP"
            width={28}
            height={28}
            className="rounded-md"
          />
          <span className="text-sm font-semibold tracking-wide">ENCAP</span>
        </Link>

        {user && (
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-2.5 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
              <span className="hidden text-sm text-muted-foreground sm:inline">
                {user.email}
              </span>
              <Avatar size="sm">
                <AvatarFallback>{user.email.slice(0, 2).toUpperCase()}</AvatarFallback>
              </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel className="flex flex-col gap-1.5 font-normal">
                <span className="text-sm font-medium">{user.email}</span>
                <Badge variant="secondary" className="w-fit">
                  {ROLE_LABELS[user.role] ?? user.role}
                </Badge>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive" onClick={handleLogout}>
                <LogOut />
                Esci
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </header>
  );
}