lovart3/components/sidebar-user-nav.tsx

"use client";

import { ChevronUp } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import type { User } from "next-auth";
import { signOut, useSession } from "next-auth/react";
import { useTheme } from "next-themes";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { guestRegex } from "@/lib/constants";
import { LoaderIcon } from "./icons";
import { toast } from "./toast";

export function SidebarUserNav({ user }: { user: User }) {
  const router = useRouter();
  const { data, status } = useSession();
  const { setTheme, resolvedTheme } = useTheme();

  const isGuest = guestRegex.test(data?.user?.email ?? "");

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            {status === "loading" ? (
              <SidebarMenuButton className="h-10 justify-between bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                <div className="flex flex-row gap-2">
                  <div className="size-6 animate-pulse rounded-full bg-zinc-500/30" />
                  <span className="animate-pulse rounded-md bg-zinc-500/30 text-transparent">
                    正在获取登录状态
                  </span>
                </div>
                <div className="animate-spin text-zinc-500">
                  <LoaderIcon />
                </div>
              </SidebarMenuButton>
            ) : (
              <SidebarMenuButton
                className="h-10 bg-background data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                data-testid="user-nav-button"
              >
                <Image
                  alt={user.email ?? "User Avatar"}
                  className="rounded-full"
                  height={24}
                  src={`https://avatar.vercel.sh/${user.email}`}
                  width={24}
                />
                <span className="truncate" data-testid="user-email">
                  {isGuest ? "访客用户" : (user?.name || user?.email)}
                </span>
                <ChevronUp className="ml-auto" />
              </SidebarMenuButton>
            )}
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-popper-anchor-width)"
            data-testid="user-nav-menu"
            side="top"
          >
            <DropdownMenuItem
              className="cursor-pointer"
              data-testid="user-nav-item-theme"
              onSelect={() =>
                setTheme(resolvedTheme === "dark" ? "light" : "dark")
              }
            >
              切换到 {resolvedTheme === "light" ? "深色" : "浅色"} 模式
            </DropdownMenuItem>
            {!isGuest ? (
              <DropdownMenuItem
                className="cursor-pointer"
                data-testid="user-nav-item-billing"
                onSelect={() => {
                  router.push("/billing");
                }}
              >
                订阅与账单
              </DropdownMenuItem>
            ) : null}
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild data-testid="user-nav-item-auth">
              <button
                className="w-full cursor-pointer"
                onClick={async () => {
                  if (status === "loading") {
                    toast({
                      type: "error",
                      description: "正在核对登录状态，请稍后重试",
                    });
                    return;
                  }

                  if (isGuest) {
                    router.push("/login");
                  } else {
                    try {
                      // 调用自定义退出 API 清除服务器端 cookie
                      await fetch("/api/auth/logout", { method: "POST" });
                      
                      // 同时调用 signOut 确保客户端状态也被清除
                      await signOut({
                        callbackUrl: "/login",
                        redirect: false,
                      });
                      
                      // 等待一小段时间确保 cookie 被清除
                      await new Promise(resolve => setTimeout(resolve, 100));
                      
                      // 强制跳转到登录页面（使用 replace 避免浏览器后退按钮问题）
                      window.location.replace("/login");
                    } catch (error) {
                      console.error("退出登录失败:", error);
                      // 强制跳转
                      window.location.replace("/login");
                    }
                  }
                }}
                type="button"
              >
                {isGuest ? "登录正式账号" : "退出登录"}
              </button>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}