import { NavLink, useNavigate } from 'react-router-dom'
import { LayoutDashboard, Bot, Cpu, LogOut, Zap, LibraryBig, Package, Plug } from 'lucide-react'
import { useAppStore } from '../store/app'
import { clsx } from '../lib/clsx'
import { useMode, MODE_META, type DeploymentMode } from '../api/mode'

// Nav labels are mode-aware (CR-20260607-001 rev.2 §10.3): desktop users
// are scientists, not platform operators, so the wording leans toward
// "research workspace" instead of "platform admin". lab/paas keep the
// platform vocabulary.
function navItems(mode: DeploymentMode) {
  const desktop = mode === 'desktop'
  return [
    { to: '/dashboard', label: desktop ? '今日工作' : '仪表盘', icon: LayoutDashboard },
    { to: '/agents', label: '智能体', icon: Bot },
    { to: '/agentpacks', label: '智能体包', icon: Package },
    { to: '/knowledge', label: desktop ? '资料库' : '知识体', icon: LibraryBig },
    { to: '/settings/providers', label: desktop ? '模型与隐私' : '模型提供商', icon: Cpu },
    { to: '/settings/connections', label: '工具与连接', icon: Plug },
  ]
}

function ModeChip() {
  const { data } = useMode()
  const mode = (data?.mode ?? 'desktop') as DeploymentMode
  const meta = MODE_META[mode]
  const alias = data?.tenant_alias ?? ''

  return (
    <div
      className={clsx(
        'flex items-center gap-1.5 px-2 py-1 rounded-md border text-[11px] font-medium',
        meta.chipClass,
      )}
      title={
        mode === 'desktop'
          ? '单机模式 — 数据全部保存在本机'
          : `${meta.label} 模式${alias ? ` · ${alias}` : ''}`
      }
    >
      <span>{meta.icon}</span>
      <span>{meta.label}</span>
      {mode !== 'desktop' && alias && (
        <span className="opacity-60 truncate max-w-[90px]">· {alias}</span>
      )}
    </div>
  )
}

export default function Sidebar() {
  const { clearApiKey } = useAppStore()
  const navigate = useNavigate()
  const { data } = useMode()
  const mode = (data?.mode ?? 'desktop') as DeploymentMode
  const meta = MODE_META[mode]

  return (
    <aside className="w-56 bg-gray-900 text-gray-100 flex flex-col shrink-0">
      <div className="px-4 py-4 border-b border-gray-800 space-y-2.5">
        <div className="flex items-center gap-2">
          <Zap size={18} className="text-indigo-400 shrink-0" />
          <span className="font-semibold text-sm tracking-tight truncate">
            {meta.brand}
          </span>
        </div>
        <ModeChip />
      </div>

      <nav className="flex-1 px-2 py-4 space-y-0.5">
        {navItems(mode).map(({ to, label, icon: Icon }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              clsx(
                'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
                isActive
                  ? 'bg-indigo-600 text-white'
                  : 'text-gray-400 hover:bg-gray-800 hover:text-gray-100',
              )
            }
          >
            <Icon size={16} />
            {label}
          </NavLink>
        ))}
      </nav>

      <div className="px-2 py-3 border-t border-gray-800">
        <button
          onClick={() => {
            clearApiKey()
            // ?reconfigure=1 tells SetupWizard to skip the desktop
            // auto-login shortcut — without it the wizard immediately
            // re-fetches the key and bounces back to /dashboard, making
            // this button a no-op.
            navigate('/setup?reconfigure=1')
          }}
          className="flex items-center gap-3 px-3 py-2 w-full rounded-lg text-sm text-gray-500 hover:bg-gray-800 hover:text-gray-300 transition-colors"
        >
          <LogOut size={16} />
          {mode === 'desktop' ? '切换数据 / 重新配置' : '重新配置'}
        </button>
      </div>
    </aside>
  )
}
