'use client'
// src/components/Sidebar.tsx — 权限驱动侧边栏（遵循设计系统「统一管理布局」）
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { LayoutDashboard, Server, Bell, Clock, Shield, Users, FileText, Activity } from 'lucide-react'
import { hasPermission } from '@/lib/permissions'

interface NavItem { label: string; href: string; icon: React.ComponentType<{ size?: number }>; permission?: string }
interface NavSection { title?: string; items: NavItem[] }

export default function Sidebar() {
  const pathname = usePathname()
  const isActive = (href: string) => pathname === href || (href !== '/' && pathname.startsWith(href))

  // 默认显示所有导航项（客户端权限在 API 层强制验证，此处仅 UI 过滤）
  const userRole = 'admin' // TODO: 从 cookie 或 session 读取实际角色

  const sections: NavSection[] = [
    {
      items: [
        { label: '仪表盘', href: '/', icon: LayoutDashboard },
      ],
    },
    {
      title: '监控',
      items: [
        { label: '服务管理', href: '/services', icon: Server, permission: 'services:view' },
      ],
    },
    {
      title: '告警',
      items: [
        { label: '告警设置', href: '/settings', icon: Bell, permission: 'alerts:manage' },
        { label: '告警历史', href: '/alerts', icon: Activity, permission: 'alerts:view' },
        { label: '状态历史', href: '/status-history', icon: Clock, permission: 'status_history:view' },
      ],
    },
    {
      title: '管理',
      items: [
        { label: '用户管理', href: '/admin/users', icon: Users, permission: 'users:view' },
        { label: '角色权限', href: '/admin/roles', icon: Shield, permission: 'roles:manage' },
        { label: '审计日志', href: '/admin/audit-logs', icon: FileText, permission: 'audit:view' },
      ],
    },
  ]

  return (
    <aside className="fixed left-0 top-0 bottom-0 w-60 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 z-[200] flex flex-col">
      {/* 品牌区 */}
      <div className="h-14 flex items-center px-6 border-b border-slate-200 dark:border-slate-800 shrink-0">
        <Link href="/" className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold text-sm">M</div>
          <span className="font-semibold text-slate-900 dark:text-white">monitor-ai</span>
        </Link>
      </div>

      {/* 导航区 */}
      <nav className="flex-1 overflow-y-auto p-3 space-y-6">
        {sections.map((section, i) => (
          <div key={i}>
            {section.title && (
              <p className="px-3 mb-1 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
                {section.title}
              </p>
            )}
            {/* 客户端仅控制导航可见性，实际权限由 middleware + API 验证 */}
            {section.items.filter(item => !item.permission || hasPermission(userRole, item.permission)).map(item => (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors mb-0.5 ${
                  isActive(item.href)
                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400'
                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
                }`}
              >
                <item.icon size={18} />
                <span>{item.label}</span>
              </Link>
            ))}
          </div>
        ))}
      </nav>

      {/* 用户信息和退出在 TopBar 中，此处不重复 */}
    </aside>
  )
}