"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { LogOutIcon, UserRoundIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { authClient } from "@/lib/auth/client";
import { unsubscribeCommissionPush } from "@/components/commission/push-client";

export function AccountMenu({ admin = false }: { admin?: boolean }) {
  const router = useRouter();
  const { data } = authClient.useSession();
  if (!admin && !data?.user) return null;

  async function signOut() {
    await unsubscribeCommissionPush().catch(() => undefined);
    await authClient.signOut();
    router.push(admin ? "/auth/login?next=%2Fadmin" : "/commission");
    router.refresh();
  }

  return <DropdownMenu>
    <DropdownMenuTrigger render={<Button type="button" variant="ghost" size="icon-sm" aria-label="บัญชีของฉัน" />}>
      <UserRoundIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end" className="w-48">
      <DropdownMenuGroup>
        <DropdownMenuLabel className="truncate">{data?.user?.name || "บัญชีของฉัน"}</DropdownMenuLabel>
        <DropdownMenuItem render={<Link href="/profile" />}><UserRoundIcon />โปรไฟล์ของฉัน</DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem onClick={() => void signOut()}><LogOutIcon />ออกจากระบบ</DropdownMenuItem>
      </DropdownMenuGroup>
    </DropdownMenuContent>
  </DropdownMenu>;
}