---
interface Props {
  currentPath: string;
}

const { currentPath } = Astro.props;

const navigation = [
  {
    title: '开始',
    items: [
      { title: '概览', href: '/docs' },
      { title: '架构设计', href: '/docs/architecture' },
    ],
  },
  {
    title: '已完成功能',
    items: [
      { title: '编辑模式', href: '/docs/features/edit-modes' },
      { title: 'Checkpoint 系统', href: '/docs/features/checkpoint' },
      { title: '多模型支持', href: '/docs/features/multi-model' },
      { title: '会话管理', href: '/docs/features/chat-history' },
      { title: '仓库地图', href: '/docs/features/repo-map' },
      { title: '浏览器 GUI', href: '/docs/features/browser-gui' },
    ],
  },
  {
    title: '规划中功能',
    items: [
      { title: '配置管理', href: '/docs/features/configuration' },
      { title: 'Linting 集成', href: '/docs/features/linting' },
      { title: '测试集成', href: '/docs/features/testing' },
      { title: 'Watch 模式', href: '/docs/features/watch-mode' },
      { title: '语音输入', href: '/docs/features/voice-input' },
    ],
  },
];

function isActive(href: string): boolean {
  // 精确匹配或以 href 开头（用于子路径）
  if (currentPath === href || currentPath === href + '/') {
    return true;
  }
  return false;
}
---

<nav class="space-y-6">
  {navigation.map((section) => (
    <div>
      <h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
        {section.title}
      </h3>
      <ul class="space-y-1">
        {section.items.map((item) => (
          <li>
            <a
              href={item.href}
              class:list={[
                'block rounded-lg px-3 py-2 text-sm transition',
                isActive(item.href)
                  ? 'bg-primary-500/10 text-primary-400 font-medium'
                  : 'text-gray-400 hover:bg-gray-800 hover:text-white',
              ]}
            >
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  ))}
</nav>