video-compliance-ai/frontend/components/navigation/Sidebar.tsx

'use client'

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
  ShieldCheck,
  ListTodo,
  User,
  LayoutDashboard,
  Scan,
  BarChart3,
  Settings,
  FileText,
  Users,
  Bell,
  FolderKanban,
  PlusCircle,
  ClipboardCheck,
  Bot,
  MessageSquare
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { api } from '@/lib/api'
import { USE_MOCK } from '@/contexts/AuthContext'

interface NavItem {
  icon: React.ElementType
  label: string
  href: string
  badge?: 'dot' | 'warning' | number // 支持红点、警告或数字徽章
}

// 达人端导航项
const creatorNavItems: NavItem[] = [
  { icon: ListTodo, label: '我的任务', href: '/creator' },
  { icon: Bell, label: '消息中心', href: '/creator/messages' },
  { icon: User, label: '个人中心', href: '/creator/profile' },
]

// 代理商端导航项
const agencyNavItems: NavItem[] = [
  { icon: LayoutDashboard, label: '工作台', href: '/agency' },
  { icon: Scan, label: '审核台', href: '/agency/review' },
  { icon: MessageSquare, label: '申诉处理', href: '/agency/appeals' },
  { icon: FileText, label: '任务配置', href: '/agency/briefs' },
  { icon: Users, label: '达人管理', href: '/agency/creators' },
  { icon: BarChart3, label: '数据报表', href: '/agency/reports' },
  { icon: Bell, label: '消息中心', href: '/agency/messages' },
  { icon: User, label: '个人中心', href: '/agency/profile' },
]

// 品牌方端导航项
const brandNavItems: NavItem[] = [
  { icon: FolderKanban, label: '项目看板', href: '/brand' },
  { icon: PlusCircle, label: '创建项目', href: '/brand/projects/create' },
  { icon: ClipboardCheck, label: '终审台', href: '/brand/review' },
  { icon: Bell, label: '消息中心', href: '/brand/messages' },
  { icon: Users, label: '代理商管理', href: '/brand/agencies' },
  { icon: FileText, label: '规则配置', href: '/brand/rules' },
  { icon: Bot, label: 'AI 配置', href: '/brand/ai-config' },
  { icon: Settings, label: '系统设置', href: '/brand/settings' },
]

interface SidebarProps {
  role?: 'creator' | 'agency' | 'brand'
  aiServiceError?: boolean // AI 服务是否异常
}

export function Sidebar({ role = 'creator', aiServiceError = false }: SidebarProps) {
  const pathname = usePathname() || ''
  const [unreadCount, setUnreadCount] = useState(0)

  const fetchUnreadCount = useCallback(async () => {
    if (USE_MOCK) return
    try {
      const res = await api.getUnreadCount()
      setUnreadCount(res.count)
    } catch {
      // 忽略错误（未登录等）
    }
  }, [])

  useEffect(() => {
    fetchUnreadCount()
    const timer = setInterval(fetchUnreadCount, 30000) // 每 30 秒轮询
    return () => clearInterval(timer)
  }, [fetchUnreadCount])

  // 消息中心路径
  const messagesHref = `/${role}/messages`

  // 根据 aiServiceError 和 unreadCount 动态设置徽章
  const applyBadges = (items: NavItem[]): NavItem[] => {
    return items.map(item => {
      if (item.href === '/brand/ai-config' && aiServiceError) {
        return { ...item, badge: 'warning' as const }
      }
      if (item.href === messagesHref && unreadCount > 0) {
        return { ...item, badge: 'dot' as const }
      }
      return item
    })
  }

  const baseItems = role === 'creator'
    ? creatorNavItems
    : role === 'agency'
      ? agencyNavItems
      : brandNavItems

  const navItems = applyBadges(baseItems)

  const isActive = (href: string) => {
    if (href === `/${role}`) {
      return pathname === href || pathname === `/${role}/`
    }
    return pathname.startsWith(href)
  }

  return (
    <aside className="fixed left-0 top-0 bottom-0 z-sidebar w-[260px] bg-bg-card flex flex-col">
      {/* Logo 区域 */}
      <div className="flex items-center gap-3 px-6 py-6">
        <div className="w-9 h-9 rounded-[10px] bg-gradient-to-br from-accent-indigo to-[#4F46E5] flex items-center justify-center">
          <ShieldCheck className="w-5 h-5 text-white" />
        </div>
        <span className="text-xl font-bold text-text-primary">秒思</span>
      </div>

      {/* 导航列表 */}
      <nav className="flex-1 px-4 py-2">
        <div className="flex flex-col gap-1">
          {navItems.map((item) => {
            const Icon = item.icon
            const active = isActive(item.href)

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-[10px] transition-colors',
                  active
                    ? 'bg-bg-elevated text-text-primary font-semibold'
                    : 'text-text-secondary hover:bg-bg-elevated/50'
                )}
              >
                <div className="relative">
                  <Icon className="w-5 h-5" />
                  {/* 警告徽章 */}
                  {item.badge === 'warning' && (
                    <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-accent-coral rounded-full border-2 border-bg-card animate-pulse" />
                  )}
                  {/* 红点徽章 */}
                  {item.badge === 'dot' && (
                    <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent-coral rounded-full" />
                  )}
                </div>
                <span className="text-[15px] flex-1">{item.label}</span>
                {/* 数字徽章 */}
                {typeof item.badge === 'number' && item.badge > 0 && (
                  <span className="px-1.5 py-0.5 text-xs bg-accent-coral text-white rounded-full min-w-[20px] text-center">
                    {item.badge > 99 ? '99+' : item.badge}
                  </span>
                )}
              </Link>
            )
          })}
        </div>
      </nav>
    </aside>
  )
}

export default Sidebar