web/src/app/(home)/docs/sidebar.tsx

'use client'
import {useState, useMemo, useCallback} from 'react'
import Link from 'next/link'
import {usePathname} from 'next/navigation'
import {ChevronRight} from 'lucide-react'

type Props = {
  collapsed?: boolean
}

// 简化的菜单配置 - 扁平结构，支持分组
const MENU_ITEMS = [
  {
    group: '官网教程',
    items: [
      {key: 'browser-proxy', label: '浏览器设置代理教程'},
      {key: 'package-operations', label: '套餐续费、合并、修改时效、补重操作'},
      {key: 'fixed-package', label: '长效固定套餐操作手册'},
    ],
  },
  {
    group: '客户端教程',
    items: [
      {key: 'ios-proxy', label: 'iOS设置代理教程'},
      {key: 'windows10-proxy', label: 'Windows10电脑设置代理教程'},
      {key: 'android-proxy', label: '安卓手机设置代理教程'},
    ],
  },
  {
    group: '操作指南',
    items: [
      {key: 'win7-proxy', label: 'Windows7电脑设置代理教程'},
      {key: 'mac-proxy', label: 'MAC设置代理教程'},
      {key: 'firefox-proxy', label: '火狐浏览器设置代理'},
      {key: 'socks5-usage', label: 'Socks5代理使用教程'},
      {key: 'http-notes', label: '使用 HTTP 代理注意事项'},
      {key: 'official-tutorial', label: '浏览器设置代理教程'},
    ],
  },
  {
    group: '产品介绍',
    items: [
      {key: 'product-overview', label: '产品概述'},
      {key: 'product-features', label: '产品功能'},
      {key: 'product-cert', label: '实名认证与证书'},
    ],
  },
  {
    group: '常见问题',
    items: [
      {key: 'faq-general', label: '常见问题总览'},
      {key: 'faq-billing', label: '计费与套餐问题'},
    ],
  },
  {
    group: '新闻资讯',
    items: [
      {key: 'news-latest', label: '了解代理服务器的工作原理'},
      {key: 'news-announce', label: '公告'},
    ],
  },
  {
    group: '其他',
    items: [
      {key: 'online-ip-proxy', label: '在线 IP 代理地址'},
    ],
  },
]

export default function Sidebar({collapsed = false}: Props) {
  const pathname = usePathname()

  // 获取当前文档 key （从 /help/{key} 路径中提取）
  const getCurrentKey = useCallback(() => {
    const parts = pathname?.split('/') || []
    return parts[2] || '' // /help/{key} -> key
  }, [pathname])

  const currentKey = getCurrentKey()

  // 展开/收起状态
  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({})

  // 初始化：自动展开包含当前活跃项的分组
  const initialExpandedGroups = useMemo(() => {
    const result: Record<string, boolean> = {}
    MENU_ITEMS.forEach((section, index) => {
      const hasActive = section.items.some(item => item.key === currentKey)
      if (hasActive || index === 0) {
        result[section.group] = true
      }
    })
    return result
  }, [currentKey])

  // 合并自动展开和用户手动切换
  const finalExpandedGroups = useMemo(() => {
    return {...initialExpandedGroups, ...expandedGroups}
  }, [initialExpandedGroups, expandedGroups])

  const toggleGroup = (group: string) => {
    setExpandedGroups(prev => ({
      ...prev,
      [group]: !finalExpandedGroups[group],
    }))
  }

  const getItemHref = (key: string) => `/help/${key}`

  return (
    <aside
      className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${
        collapsed ? 'w-20' : 'w-68'
      }`}
    >
      <nav className="space-y-2">
        {MENU_ITEMS.map(section => (
          <div key={section.group}>
            <div
              onClick={() => toggleGroup(section.group)}
              className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${
                finalExpandedGroups[section.group] && !collapsed
                  ? 'bg-blue-50'
                  : 'hover:bg-slate-50'
              }`}
            >
              <div
                className={`w-4 flex items-center justify-center text-sm text-slate-400 transform transition-transform ${
                  finalExpandedGroups[section.group] ? 'rotate-90' : ''
                }`}
              >
                <ChevronRight size={16}/>
              </div>

              {!collapsed && (
                <div className="text-lg font-semibold text-slate-900">
                  {section.group}
                </div>
              )}
            </div>

            {finalExpandedGroups[section.group] && (
              <ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
                {section.items.map((item) => {
                  const isActive = currentKey === item.key
                  const href = getItemHref(item.key)

                  return (
                    <li key={item.key}>
                      <Link
                        href={href}
                        className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
                          isActive
                            ? 'bg-blue-50 font-semibold'
                            : 'text-slate-700 hover:text-slate-900 hover:bg-slate-50'
                        }`}
                      >
                        {item.label}
                      </Link>
                    </li>
                  )
                })}
              </ul>
            )}
          </div>
        ))}
      </nav>
    </aside>
  )
}