"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronDownIcon, SettingsIcon, UserRoundIcon, MessageCircle   } from "lucide-react";
import { authClient } from "@/lib/auth/client";
import { safeAuthReturnPath } from "@/lib/auth/return-path";
import { SignOutButton } from "@/components/auth/sign-out-button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuGroup,
  DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Separator } from "@/components/ui/separator"

export function PublicAccountMenu() {
  const pathname = usePathname();
  const { data, isPending } = authClient.useSession();
  const [openedPath, setOpenedPath] = useState<string | null>(null);
  const returnPath = safeAuthReturnPath(openedPath ?? pathname);
  const suffix = returnPath === "/" ? "" : `?next=${encodeURIComponent(returnPath)}`;
  const accountLabel = data?.user ? data.user.name.trim() || "โปรไฟล์" : "บัญชี";

  return <DropdownMenu onOpenChange={(open) => {
    if (open) setOpenedPath(window.location.pathname + window.location.search + window.location.hash);
  }}>
    <DropdownMenuTrigger render={<Button variant="link" size="sm" className="text-foreground" disabled={isPending} aria-label={data?.user ? `บัญชีของ ${accountLabel}` : "บัญชี"} />}>
      <Avatar size="sm" aria-hidden="true">
        {data?.user?.image && <AvatarImage src={data.user.image} alt="" />}
        <AvatarFallback><UserRoundIcon className="size-4" /></AvatarFallback>
      </Avatar>
      <span className="max-w-24 truncate sm:max-w-40" title={accountLabel}>{accountLabel}</span>
      <ChevronDownIcon data-icon="inline-end" aria-hidden="true" className="transition-transform group-aria-expanded/button:rotate-180" />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuGroup>
        {data?.user ? <>
          <DropdownMenuItem render={<Link href="/profile" />}><SettingsIcon aria-hidden="true" />ตั้งค่าบัญชี</DropdownMenuItem>
          <DropdownMenuItem render={<Link href="/commission/tickets" />}><MessageCircle aria-hidden="true" />คำขอของฉัน</DropdownMenuItem>
          <Separator />
          <SignOutButton menuItem />
        </> : <>
          <DropdownMenuItem render={<Link href={`/auth/login${suffix}`} />}>เข้าสู่ระบบ</DropdownMenuItem>
          <DropdownMenuItem render={<Link href={`/auth/register${suffix}`} />}>สมัครสมาชิก</DropdownMenuItem>
        </>}
      </DropdownMenuGroup>
    </DropdownMenuContent>
  </DropdownMenu>;
}