'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ShieldCheck, ListTodo, User, LayoutDashboard, Scan, BarChart3, Settings, FileText, Users, Bell } from 'lucide-react'
import { cn } from '@/lib/utils'

interface NavItem {
  icon: React.ElementType
  label: string
  href: string
}

// 达人端导航项
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: FileText, label: 'Brief 配置', href: '/agency/briefs' },
  { icon: Users, label: '达人管理', href: '/agency/creators' },
  { icon: BarChart3, label: '数据报表', href: '/agency/reports' },
]

// 品牌方端导航项
const brandNavItems: NavItem[] = [
  { icon: LayoutDashboard, label: '数据看板', href: '/brand' },
  { icon: Settings, label: 'AI 配置', href: '/brand/ai-config' },
  { icon: FileText, label: '规则配置', href: '/brand/rules' },
  { icon: FileCheck, label: '终审台', href: '/brand/final-review' },
  { icon: Users, label: '代理商管理', href: '/brand/agencies' },
]

interface SidebarProps {
  role?: 'creator' | 'agency' | 'brand'
}

export function Sidebar({ role = 'creator' }: SidebarProps) {
  const pathname = usePathname() || ''

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

  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'
                )}
              >
                <Icon className="w-5 h-5" />
                <span className="text-[15px]">{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>
    </aside>
  )
}

export default Sidebar