lovart3/components/top-navbar.tsx

"use client";

import { useRouter } from "next/navigation";
import Link from "next/link";
import { Settings, ExternalLink, Briefcase, Images } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTheme } from "next-themes";
import { useState, useEffect } from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type TopNavbarProps = {
  siteName?: string;
  siteLogo?: string;
  siteLogoDark?: string;
  isAdmin?: boolean;
  customLinks?: Array<{
    id: string;
    name: string;
    url: string;
    order: number;
  }>;
};

export function TopNavbar({
  siteName = "AI Chatbot",
  siteLogo,
  siteLogoDark,
  isAdmin = false,
  customLinks = [],
}: TopNavbarProps) {
  const router = useRouter();
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // 决定显示哪个 LOGO
  // 导航栏背景固定为黑色，理论上应该始终显示适合深色背景的 LOGO
  // 但如果有专门配置了 "Dark Mode Logo" (通常用于深色背景)，我们优先使用它
  // 如果没配置 Dark Mode Logo，则使用默认 Logo
  // 注意：这里的背景是黑色的，所以通常需要一个浅色的 LOGO（即 Dark Mode 下使用的 LOGO）
  // 如果用户配置逻辑是：siteLogo(Light Mode/白底用), siteLogoDark(Dark Mode/黑底用)
  // 那么在黑色导航栏上，应该优先使用 siteLogoDark
  const displayLogo = (siteLogoDark && siteLogoDark.trim() !== "") ? siteLogoDark : siteLogo;

  return (
    <nav className="fixed top-0 left-0 right-0 z-[100] flex h-12 items-center justify-between bg-black/90 backdrop-blur-sm px-4 text-white border-b border-white/10 shadow-sm">
      {/* 左侧：LOGO + 网站名称 */}
      <Link href="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
        {displayLogo && (
          <img
            src={displayLogo}
            alt={siteName}
            className="h-6 w-6 object-contain"
          />
        )}
        <span className="text-sm font-semibold">{siteName}</span>
      </Link>

      {/* 右侧区域：自定义链接 + 系统设置 */}
      <div className="flex items-center gap-2">
        {/* 工具箱 (如果有自定义链接) */}
        {customLinks.length > 0 && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
                className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors"
              >
                <Briefcase className="h-4 w-4" />
                <span className="text-sm font-medium">工具箱</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[320px] p-2">
               <div className="grid grid-cols-2 gap-2">
                  {customLinks
                    .sort((a, b) => a.order - b.order)
                    .map((link) => (
                      <DropdownMenuItem key={link.id} asChild className="cursor-pointer">
                        <a
                          href={link.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="flex flex-col items-center justify-center gap-2 rounded-md bg-muted/50 p-4 hover:bg-accent hover:text-accent-foreground text-center h-20 transition-colors"
                        >
                          <ExternalLink className="h-5 w-5 opacity-70" />
                          <span className="text-xs font-medium line-clamp-2">{link.name}</span>
                        </a>
                      </DropdownMenuItem>
                  ))}
               </div>
            </DropdownMenuContent>
          </DropdownMenu>
        )}

        {/* 我的图册 */}
        <Button
          variant="ghost"
          size="sm"
          className="flex items-center gap-1 h-8 px-3 text-white hover:bg-white/15 hover:text-white rounded-full transition-colors"
          onClick={() => router.push("/gallery")}
          type="button"
          title="我的图册"
        >
          <Images className="h-4 w-4" />
          <span className="text-sm font-medium">我的图册</span>
        </Button>

        {/* 分隔线 (如果有链接或图册按钮，且是管理员) */}
        {isAdmin && (
          <div className="hidden h-4 w-px bg-white/20 mx-1 sm:block" />
        )}

        {/* 系统设置（仅管理员可见）*/}
        {isAdmin && (
          <Button
            variant="ghost"
            size="sm"
            className="h-8 w-8 p-0 text-white hover:bg-white/15 hover:text-white rounded-full"
            onClick={() => router.push("/settings")}
            type="button"
            title="系统设置"
          >
            <Settings className="h-4 w-4" />
          </Button>
        )}
      </div>
    </nav>
  );
}