'use client';
/**
 * Sidebar — 左侧8项导航
 * 按 PRD-前端§2 全局布局
 * 角色守卫：/review 只组长+管理员；/config 只管理员
 */
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuthStore } from '@/stores/authStore';
import { clsx } from 'clsx';

interface NavItem {
  label: string;
  href: string;
  roles?: string[];
  icon: string;
}

const NAV_ITEMS: NavItem[] = [
  { label: '工作台', href: '/dashboard', icon: '🏠' },
  { label: '开新任务', href: '/tasks/new', icon: '✏️' },
  { label: '选择文案', href: '/tasks', icon: '📝' },
  { label: '选择图片', href: '/images', icon: '🖼️' },
  { label: '建立任务', href: '/tasks/build', icon: '⚙️' },
  { label: '任务列表', href: '/tasks/list', icon: '📋' },
  { label: '历史归档', href: '/history', icon: '🗂️' },
  { label: '配置中心', href: '/config', roles: ['admin'], icon: '⚙️' },
];

export function Sidebar() {
  const pathname = usePathname();
  const { role } = useAuthStore();

  const visible = NAV_ITEMS.filter(
    (item) => !item.roles || (role && item.roles.includes(role))
  );

  return (
    <nav
      className="w-48 bg-surface-primary border-r border-border-default flex flex-col py-4 gap-1"
      aria-label="主导航"
    >
      {visible.map((item) => {
        const active = pathname === item.href || pathname.startsWith(item.href + '/');
        return (
          <Link
            key={item.href}
            href={item.href}
            aria-label={item.label}
            aria-current={active ? 'page' : undefined}
            className={clsx(
              'flex items-center gap-2 px-4 py-2 text-sm rounded-md mx-2 transition-colors',
              active
                ? 'bg-brand-orange-light text-brand-orange font-medium'
                : 'text-text-secondary hover:bg-surface-tertiary hover:text-text-primary'
            )}
          >
            <span aria-hidden="true">{item.icon}</span>
            {item.label}
          </Link>
        );
      })}

      {/* 版本号 — 替代原Token余额位置 */}
      <div className="mt-auto px-4 py-3 text-xs text-text-tertiary">
        Clover v0.1.0
        <br />
        <span aria-hidden="true">🌿</span>
      </div>
    </nav>
  );
}
