admin/src/app/(root)/appbar.tsx

"use client"
import {
  BadgeQuestionMarkIcon,
  BellIcon,
  ChevronDownIcon,
  ChevronRightIcon,
  InboxIcon,
  LogOutIcon,
  SearchIcon,
  SettingsIcon,
  UserIcon,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { useEffect, useRef, useState } from "react"
import { logout } from "@/actions/auth"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import type { Admin } from "@/models/admin"

export default function Appbar(props: { admin: Admin }) {
  const router = useRouter()
  const [showDropdown, setShowDropdown] = useState(false)
  const [showNotifications, setShowNotifications] = useState(false)
  const [notifications] = useState([
    {
      id: 1,
      title: "系统通知",
      content: "您有新的待审核内容",
      time: "10分钟前",
      read: false,
    },
    {
      id: 2,
      title: "安全提醒",
      content: "您的账号于昨天登录了新设备",
      time: "1小时前",
      read: true,
    },
    {
      id: 3,
      title: "系统更新",
      content: "系统将在今晚进行例行维护",
      time: "2小时前",
      read: true,
    },
  ])

  const pathname = usePathname()
  const dropdownRef = useRef<HTMLDivElement>(null)
  const notificationRef = useRef<HTMLDivElement>(null)

  // 处理点击外部关闭下拉菜单
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setShowDropdown(false)
      }
      if (
        notificationRef.current &&
        !notificationRef.current.contains(event.target as Node)
      ) {
        setShowNotifications(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  // 根据路径生成面包屑
  const generateBreadcrumbs = () => {
    const paths = pathname.split("/").filter(Boolean)

    const breadcrumbs = [
      { path: "/", label: "首页" },
      ...paths.map((path, index) => {
        const url = `/${paths.slice(0, index + 1).join("/")}`
        const label = getBreadcrumbLabel(path)
        return { path: url, label }
      }),
    ]

    return breadcrumbs
  }

  const getBreadcrumbLabel = (path: string) => {
    const labels: Record<string, string> = {
      dashboard: "控制台",
      content: "内容管理",
      articles: "文章管理",
      media: "媒体库",
      user: "用户管理",
      roles: "角色权限",
      settings: "系统设置",
      logs: "系统日志",
      proxy: "",
      nodes: "节点列表",
      trade: "交易明细",
      billing: "账单详情",
      resources: "套餐管理",
      batch: "使用记录",
      channel: "IP管理",
      pools: "IP池管理",
    }

    return labels[path] || path
  }

  const breadcrumbs = generateBreadcrumbs()
  const unreadCount = notifications.filter(n => !n.read).length
  const doLogout = async () => {
    const resp = await logout()
    if (resp.success) {
      router.replace("/")
      router.refresh()
    }
  }

  return (
    <header className="bg-white h-16 border-b border-gray-200 flex items-center justify-between px-6">
      {/* 面包屑导航 */}
      <div className="flex items-center text-sm">
        {breadcrumbs.map((crumb, index) => (
          <div key={crumb.path} className="flex items-center">
            {index > 0 && (
              <ChevronRightIcon size={18} className="text-gray-400" />
            )}
            <Link
              href={crumb.path}
              className={
                index === breadcrumbs.length - 1
                  ? "text-gray-800 font-medium"
                  : "text-gray-500 hover:text-gray-700"
              }
            >
              {crumb.label}
            </Link>
          </div>
        ))}
      </div>

      {/* 右侧用户信息和工具栏 */}
      <div className="flex items-center space-x-4">
        {/* 搜索框 */}
        <div className="hidden md:block relative">
          <div className="relative">
            <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              type="text"
              placeholder="搜索..."
              className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
            />
          </div>
        </div>

        {/* 通知图标 */}
        <div className="relative" ref={notificationRef}>
          <Button
            onClick={() => setShowNotifications(!showNotifications)}
            className="relative p-2 rounded-full text-gray-600 bg-gray-100 hover:bg-gray-100 hover:text-gray-800 transition-colors"
            aria-label="通知"
          >
            <BellIcon />
            {unreadCount > 0 && (
              <span className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">
                {unreadCount}
              </span>
            )}
          </Button>

          {/* 通知下拉面板 */}
          {showNotifications && (
            <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-20 border border-gray-200">
              <div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
                <h3 className="font-medium text-gray-800">通知</h3>
                <Button className="text-xs text-blue-600 hover:text-blue-800">
                  全部标为已读
                </Button>
              </div>

              <div className="max-h-72 overflow-y-auto">
                {notifications.length > 0 ? (
                  notifications.map(notification => (
                    <div
                      key={notification.id}
                      className={`px-4 py-3 border-b border-gray-100 hover:bg-gray-50 ${
                        notification.read ? "bg-white" : "bg-blue-50"
                      }`}
                    >
                      <div className="flex justify-between items-start">
                        <h4 className="text-sm font-medium text-gray-800">
                          {notification.title}
                        </h4>
                        <span className="text-xs text-gray-500">
                          {notification.time}
                        </span>
                      </div>
                      <p className="text-xs text-gray-600 mt-1">
                        {notification.content}
                      </p>
                    </div>
                  ))
                ) : (
                  <div className="py-8 px-4 text-center">
                    <InboxIcon size={18} />
                    <p className="mt-2 text-sm text-gray-500">暂无通知</p>
                  </div>
                )}
              </div>

              <div className="border-t border-gray-100 p-2 text-center">
                <Link
                  href="/notifications"
                  className="text-xs text-blue-600 hover:text-blue-800"
                >
                  查看全部通知
                </Link>
              </div>
            </div>
          )}
        </div>

        {/* 分隔线 */}
        <div className="hidden md:block h-8 w-px bg-gray-200"></div>

        {/* 用户下拉菜单 */}
        <div className="relative" ref={dropdownRef}>
          <Button
            onClick={() => setShowDropdown(!showDropdown)}
            className="flex items-center space-x-2 rounded-lg text-gray-800 bg-gray-100 hover:bg-gray-100 p-2 transition-colors"
            aria-label="用户菜单"
          >
            <div className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
              {props.admin ? (
                props.admin.avatar ? (
                  <Image
                    src={props.admin.avatar}
                    alt="用户头像"
                    width={32}
                    height={32}
                    className="h-full w-full object-cover"
                    onError={e => {
                      const target = e.target as HTMLImageElement
                      target.style.display = "none"
                      const parent = target.parentElement
                      if (parent && props.admin?.name) {
                        parent.textContent = props.admin.name
                          .charAt(0)
                          .toUpperCase()
                      }
                    }}
                  />
                ) : (
                  // 如果没有头像，直接显示用户名首字母
                  <span className="text-sm font-semibold">
                    {props.admin.name?.charAt(0).toUpperCase()}
                  </span>
                )
              ) : (
                // 加载状态或用户信息为空时
                <UserIcon size={18} />
              )}
            </div>
            <div className="hidden md:block text-left">
              {props.admin && (
                <div>
                  <p className="text-sm font-medium text-gray-800">
                    {props.admin.name}
                  </p>
                  <p className="text-xs text-gray-500">
                    {props.admin.username}
                  </p>
                </div>
              )}
            </div>
            <ChevronDownIcon />
          </Button>

          {/* 用户下拉内容 */}
          {showDropdown && (
            <div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg py-2 z-20 border border-gray-200">
              {props.admin && (
                <div className="px-4 py-2 border-b border-gray-100 md:hidden">
                  <p className="font-medium text-gray-800">
                    {props.admin.name}
                  </p>

                  <p className="text-xs text-gray-500">{props.admin.name}</p>
                </div>
              )}

              <div className="py-1">
                <Link
                  href="/profile"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
                  <UserIcon size={18} />
                  <span className="pl-3">个人资料</span>
                </Link>
                <Link
                  href="/settings/account"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
                  <SettingsIcon size={18} />
                  <span className="pl-3">账号设置</span>
                </Link>
                <Link
                  href="/system/help"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
                  <BadgeQuestionMarkIcon size={18} />
                  <span className="pl-3">帮助中心</span>
                </Link>
              </div>
              <div className="border-t border-gray-100 pt-1">
                <Button
                  variant="ghost"
                  onClick={doLogout}
                  className="flex items-center justify-start px-4 py-2 w-full text-sm text-red-600 hover:text-red-700 hover:bg-gray-100 font-normal"
                >
                  <LogOutIcon size={18} className="ml-2" />
                  退出登录
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}