'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ChevronDown, Loader2, LogOut, Settings } from 'lucide-react';

import { fetchMe, logout, type AuthUser } from '@/lib/api';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

function initials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean);

  if (parts.length === 0) {
    return '?';
  }

  return parts
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? '')
    .join('');
}

export function UserMenu() {
  const router = useRouter();
  const [user, setUser] = useState<AuthUser | null>(null);
  const [isSigningOut, setIsSigningOut] = useState(false);

  useEffect(() => {
    let cancelled = false;

    fetchMe()
      .then((me) => {
        if (!cancelled) {
          setUser(me);
        }
      })
      .catch(() => {
        // L'utilisateur non authentifié est redirigé par les pages protégées.
      });

    return () => {
      cancelled = true;
    };
  }, []);

  async function onLogout() {
    setIsSigningOut(true);

    try {
      await logout();
    } finally {
      router.replace('/');
      router.refresh();
    }
  }

  const displayName = user?.nom ?? 'Utilisateur';

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="flex items-center gap-2.5 rounded-full border border-transparent py-1 pl-1 pr-2 transition-colors hover:border-brand-100 hover:bg-brand-50/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <Avatar className="h-10 w-10 ring-2 ring-brand-200">
          <AvatarFallback className="brand-gradient text-white">
            {initials(displayName)}
          </AvatarFallback>
        </Avatar>

        <span className="hidden min-w-0 text-left sm:block">
          <span className="block truncate text-sm font-semibold leading-tight">
            {displayName}
          </span>
          <span className="block truncate text-xs font-medium text-primary">
            {user?.role_ccfn ?? '—'}
          </span>
        </span>

        <ChevronDown
          className="hidden h-4 w-4 shrink-0 text-muted-foreground sm:block"
          aria-hidden
        />
        <span className="sr-only">Ouvrir le menu du compte</span>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-64 rounded-xl">
        <div className="flex items-center gap-3 px-2.5 py-2">
          <Avatar className="h-10 w-10">
            <AvatarFallback className="brand-gradient text-white">
              {initials(displayName)}
            </AvatarFallback>
          </Avatar>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold">{displayName}</p>
            <p className="truncate text-xs text-muted-foreground">
              {user?.email ?? ''}
            </p>
          </div>
        </div>

        <DropdownMenuSeparator />

        <DropdownMenuItem asChild>
          <Link href="/parametres-compte">
            <Settings className="h-4 w-4" aria-hidden />
            Paramètres du compte
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <DropdownMenuItem
          disabled={isSigningOut}
          onSelect={(event) => {
            event.preventDefault();
            void onLogout();
          }}
          className="text-destructive focus:bg-destructive/10 focus:text-destructive"
        >
          {isSigningOut ? (
            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
          ) : (
            <LogOut className="h-4 w-4" aria-hidden />
          )}
          Déconnexion
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}