"use client";

import { useState } from "react";

import { BadgeCheck, Bell, CreditCard, LogOut } from "lucide-react";

import { LogoutConfirmation } from "@/components/auth/logout-confirmation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuGroup,
} from "@/components/ui/dropdown-menu";
import { useAuth, useLogout } from "@/hooks/auth/use-auth-queries";
import { getInitials } from "@/lib/utils";

export function AccountSwitcher({
  users,
}: {
  readonly users?: ReadonlyArray<{
    readonly id: string;
    readonly name: string;
    readonly email: string;
    readonly avatar: string;
    readonly role: string;
  }>;
}) {
  const { user } = useAuth();
  const logoutMutation = useLogout();
  const [showLogoutConfirmation, setShowLogoutConfirmation] = useState(false);

  const handleLogoutClick = () => {
    setShowLogoutConfirmation(true);
  };

  const handleLogoutConfirm = () => {
    logoutMutation.mutate(undefined, {
      onSettled: () => {
        setShowLogoutConfirmation(false);
      },
    });
  };

  // Use the actual authenticated user or fallback to the first user from props
  const activeUser = user
    ? {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        id: (user as any).pk ? (user as any).pk.toString() : user.email || "current",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        name: (user as any).full_name ?? user.email ?? "User",
        email: user.email,
        avatar: user.profile?.avatar ?? "",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        role: (user as any).user_type_display ?? user.user_type ?? "user",
      }
    : (users?.[0] ?? {
        id: "unknown",
        name: "Unknown User",
        email: "unknown@example.com",
        avatar: "",
        role: "user",
      });

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Avatar className="size-9 rounded-lg">
            <AvatarImage src={activeUser.avatar || undefined} alt={activeUser.name} />
            <AvatarFallback className="rounded-lg">{getInitials(activeUser.name)}</AvatarFallback>
          </Avatar>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="min-w-56 space-y-1 rounded-lg" side="bottom" align="end" sideOffset={4}>
          {/* Current User Display */}
          <div className="flex w-full items-center gap-2 px-2 py-2">
            <Avatar className="size-9 rounded-lg">
              <AvatarImage src={activeUser.avatar || undefined} alt={activeUser.name} />
              <AvatarFallback className="rounded-lg">{getInitials(activeUser.name)}</AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-semibold">{activeUser.name}</span>
              <span className="text-muted-foreground truncate text-xs">{activeUser.email}</span>
              <span className="text-muted-foreground truncate text-xs capitalize">{activeUser.role}</span>
            </div>
          </div>

          <DropdownMenuSeparator />

          <DropdownMenuGroup>
            <DropdownMenuItem>
              <BadgeCheck />
              Mon compte
            </DropdownMenuItem>
            <DropdownMenuItem>
              <CreditCard />
              Facturation
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Bell />
              Notifications
            </DropdownMenuItem>
          </DropdownMenuGroup>

          <DropdownMenuSeparator />

          <DropdownMenuItem
            className="text-red-600 focus:text-red-600"
            onClick={handleLogoutClick}
            disabled={logoutMutation.isPending}
          >
            <LogOut />
            {logoutMutation.isPending ? "Déconnexion..." : "Se déconnecter"}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <LogoutConfirmation
        open={showLogoutConfirmation}
        onOpenChange={setShowLogoutConfirmation}
        onConfirm={handleLogoutConfirm}
        isLoading={logoutMutation.isPending}
      />
    </>
  );
}