"use client";

import {
  ChevronDown,
  KeyRound,
  LogOut,
  User,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { logoutSession } from "@/lib/auth-api";
import { useUserStore } from "@/stores/user-store";

function initialsFromName(name: string) {
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "?";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

function initialsFromEmail(email: string) {
  const local = email.split("@")[0]?.trim() ?? "";
  if (local.length >= 2) return local.slice(0, 2).toUpperCase();
  return local.slice(0, 1).toUpperCase() || "?";
}

export function UserHeaderUser() {
  const router = useRouter();
  const user = useUserStore((s) => s.user);

  const nameFromStore = user?.name?.trim() ?? "";
  const displayName = !user
    ? "Invité"
    : nameFromStore || user.email?.trim() || "Utilisateur";

  const photo =
    user?.image?.trim() || user?.avatar?.trim() || null;

  const fallbackInitials = !user
    ? "?"
    : nameFromStore
      ? initialsFromName(nameFromStore)
      : user.email
        ? initialsFromEmail(user.email)
        : "?";

  function handleLogout() {
    logoutSession();
    router.push("/");
    router.refresh();
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="h-auto gap-2 rounded-lg border border-border/80 bg-background/80 px-2 py-1.5 hover:bg-muted"
          aria-label="Menu du compte utilisateur"
        >
          <Avatar className="h-8 w-8">
            {photo ? <AvatarImage src={photo} alt="" /> : null}
            <AvatarFallback className="text-xs">{fallbackInitials}</AvatarFallback>
          </Avatar>
          <span className="hidden max-w-[160px] truncate text-left text-sm font-medium text-foreground sm:inline">
            {displayName}
          </span>
          <ChevronDown
            className="h-4 w-4 shrink-0 text-muted-foreground"
            aria-hidden
          />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <div className="px-2 py-1.5 sm:hidden">
          <p className="truncate text-sm font-medium">{displayName}</p>
        </div>
        <DropdownMenuSeparator className="sm:hidden" />
        <DropdownMenuItem asChild>
          <Link href="/user/compte" className="cursor-pointer">
            <User className="h-4 w-4" aria-hidden />
            Mon compte
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link href="/user/compte/mot-de-passe" className="cursor-pointer">
            <KeyRound className="h-4 w-4" aria-hidden />
            Changer mot de passe
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          className="cursor-pointer text-destructive focus:text-destructive"
          onSelect={(e) => {
            e.preventDefault();
            handleLogout();
          }}
        >
          <LogOut className="h-4 w-4" aria-hidden />
          Déconnexion
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}