"use client";

import { useState, useTransition } from "react";
import { signOut } from "next-auth/react";
import type { Session } from "next-auth";
import { LayoutDashboard, User, Settings2, CreditCard, Settings, LogOut, Loader2, ShieldCheck } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useLanguage } from "@/lib/i18n/context";

function initials(name?: string | null, email?: string | null) {
  if (name) {
    const parts = name.trim().split(/\s+/);
    return (parts[0]?.[0] ?? "").concat(parts[1]?.[0] ?? "").toUpperCase() || "?";
  }
  return email?.[0]?.toUpperCase() ?? "?";
}

export function UserMenu({
  user,
  triggerClassName,
  avatarClassName,
}: {
  user: Session["user"];
  triggerClassName?: string;
  avatarClassName?: string;
}) {
  const { t } = useLanguage();
  const m = t.app.userMenu;
  const [open, setOpen] = useState(false);
  const [isPending, startTransition] = useTransition();

  function handleLogout() {
    startTransition(async () => {
      setOpen(false);
      // Client-side signOut() clears the cookie, updates every
      // useSession() consumer (like the header), and redirects in one call.
      await signOut({ callbackUrl: "/" });
    });
  }

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className={`rounded-full ${triggerClassName ?? ""}`}
          aria-label="Open account menu"
        >
          <Avatar className={avatarClassName}>
            <AvatarImage src={user.image ?? undefined} alt="" />
            <AvatarFallback>{initials(user.name, user.email)}</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <DropdownMenuLabel className="flex flex-col gap-0.5">
          <span className="truncate text-sm font-medium text-foreground">
            {user.name || m.yourAccount}
          </span>
          <span className="truncate text-xs font-normal text-muted-foreground">
            {user.email}
          </span>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <a href="/dashboard">
            <LayoutDashboard />
            {m.dashboard}
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href="/profile">
            <User />
            {m.profile}
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href="/account">
            <Settings2 />
            {m.account}
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href="/dashboard/billing">
            <CreditCard />
            {m.billing}
          </a>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <a href="/dashboard/settings">
            <Settings />
            {m.settings}
          </a>
        </DropdownMenuItem>
        {user.role === "ADMIN" && (
          <DropdownMenuItem asChild>
            <a href="/admin">
              <ShieldCheck />
              {t.admin.title}
            </a>
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem
          variant="destructive"
          onSelect={(event) => {
            event.preventDefault();
            handleLogout();
          }}
          disabled={isPending}
        >
          {isPending ? <Loader2 className="animate-spin" /> : <LogOut />}
          {m.logOut}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}