awoooi/apps/web/src/components/layout/sidebar.tsx

'use client'

/**
 * Sidebar - Phase 7.0 極簡五柱導航
 * =================================
 * Nothing.tech 視覺憲法:
 * - 純白背景 (bg-white)
 * - 極細右邊框 (border-r-[0.5px] border-neutral-200)
 * - 無陰影
 * - 單色圖示
 *
 * 5 大核心樞紐:
 * 1. 全局戰情室 (/)
 * 2. 授權中心 (/authorizations) - 含動態徽章
 * 3. 行動日誌 (/action-logs)
 * 4. 知識殿堂 (/knowledge-base)
 * 5. 系統設定 (/settings)
 *
 * Phase 19: 使用 Z_INDEX.SIDEBAR (40)
 * @see lib/constants/z-index.ts
 */

import { useEffect, useState } from 'react'
import { Z_INDEX } from '@/lib/constants/z-index'
// Phase 8.0 #15: SSE 驅動的待簽核數量
import { useTranslations } from 'next-intl'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import {
  LayoutDashboard, ShieldCheck, Bell, Monitor, Activity,
  Bug, GitBranch, Shield, ClipboardCheck,
  Wrench, Package, Ticket, DollarSign, Zap, FileText,
  BookOpen, Terminal, AppWindow, Server,
  Users, BellRing, CreditCard, HelpCircle, Settings,
  ChevronLeft, ChevronRight, Diff, BrainCircuit,
} from 'lucide-react'
// Phase 8.0 #15: 改用 approval store SSE (移除 polling)
import { useApprovalStore } from '@/stores/approval.store'

// =============================================================================
// Types
// =============================================================================

interface SidebarProps {
  locale: string
  collapsed?: boolean
  onToggle?: () => void
  className?: string
}

type NavItemConfig = {
  id: string
  href: string
  labelKey: string
  Icon: typeof LayoutDashboard
  badge?: boolean // 是否顯示動態徽章
}

type NavSection = {
  sectionKey: string
  sectionLabel: string
  items: NavItemConfig[]
}

// ============================================================
// Sprint 5: 精簡導航 6+2+經典（統帥批准 2026-04-08）
// ============================================================
// 整合對照:
// 指令中心 / → 整合: 儀表板 + 授權 + 告警 + 報表 (4 Tab)
// 可觀測性 /observability → 整合: 監控 + APM + 錯誤 + 應用 + 服務 (5 Tab) [暫指 /monitoring]
// 自動化 /automation → 整合: 自動修復 + 神經指揮 + Drift (3 Tab) [暫指 /auto-repair]
// 營運 /operations → 整合: 部署 + 工單 + 成本 + 行動日誌 + 計費 (5 Tab) [暫指 /deployments]
// 安全合規 /security-compliance → 整合: 安全 + 合規 (2 Tab) [暫指 /security]
// 知識 /knowledge → 知識庫 [暫指 /knowledge-base]
// ============================================================

const NAV_SECTIONS: NavSection[] = [
  {
    sectionKey: 'main',
    sectionLabel: '',
    items: [
      { id: 'command-center',      href: '/',                      labelKey: 'commandCenter',     Icon: LayoutDashboard },
      { id: 'observability',       href: '/observability',          labelKey: 'observability',     Icon: Monitor },
      { id: 'automation',          href: '/automation',             labelKey: 'automation',        Icon: Wrench },
      { id: 'operations',          href: '/operations',             labelKey: 'operations',        Icon: Package },
      { id: 'security-compliance', href: '/security-compliance',    labelKey: 'securityCompliance',Icon: Shield },
      { id: 'knowledge',           href: '/knowledge',              labelKey: 'knowledge',         Icon: BookOpen },
      { id: 'governance',          href: '/governance',             labelKey: 'governance',        Icon: ShieldCheck },
    ],
  },
  {
    // Legacy: 經典 AI 中心 (統帥指示保留)
    sectionKey: 'legacy',
    sectionLabel: 'legacy',
    items: [
      { id: 'classic',  href: '/classic',  labelKey: 'classicAICenter',  Icon: LayoutDashboard },
    ],
  },
]

const BOTTOM_NAV_ITEMS: NavItemConfig[] = [
  { id: 'terminal',  href: '/terminal',  labelKey: 'terminal',  Icon: Terminal },
  { id: 'settings',  href: '/settings',  labelKey: 'settings',  Icon: Settings },
]

// =============================================================================
// Component
// =============================================================================

export function Sidebar({
  locale,
  collapsed = false,
  onToggle,
  className,
}: SidebarProps) {
  const t = useTranslations('nav')
  const tBrand = useTranslations('brand')
  const tSection = useTranslations('navSection')
  const tSidebar = useTranslations('sidebar')
  const pathname = usePathname()

  // Phase 8.0 #15: 改用 SSE 驅動的 pending count (移除 30s polling)
  // 防止 SSR hydration mismatch: 只在 client 顯示 badge
  const [mounted, setMounted] = useState(false)
  const pendingApprovals = useApprovalStore(state => state.pendingApprovals)
  const pendingCount = pendingApprovals.length

  useEffect(() => {
    setMounted(true)
  }, [])

  const isActive = (href: string) => {
    const fullHref = `/${locale}${href === '/' ? '' : href}`
    if (href === '/') {
      return pathname === `/${locale}` || pathname === `/${locale}/`
    }
    return pathname === fullHref || pathname.startsWith(fullHref + '/')
  }

  return (
    <aside
      className={cn(
        'fixed left-0 flex flex-col',
        className
      )}
      style={{
        top: 68,
        bottom: 0,
        zIndex: Z_INDEX.SIDEBAR,
        background: '#faf9f3',
        borderRight: '0.5px solid #e0ddd4',
        width: collapsed ? 64 : 224,
        transition: 'width 0.3s ease',
      }}
    >

      {/* 導航列表 - AI中心 v6 4分區 */}
      <nav className="flex-1 py-2 overflow-y-auto">
        {/* 4 分區菜單 */}
        {NAV_SECTIONS.map(section => (
          <div key={section.sectionKey} style={{ marginBottom: 4 }}>
            {/* 分區標題 — main 不顯示，legacy 顯示分隔線+標題 */}
            {!collapsed && section.sectionLabel && (
              <div style={{
                fontSize: 10,
                color: '#b0ad9f',
                letterSpacing: '1.5px',
                textTransform: 'uppercase' as const,
                padding: '12px 12px 3px',
                fontFamily: 'var(--font-body), monospace',
                borderTop: '0.5px solid #e0ddd4',
                marginTop: 4,
              }}>
                {section.sectionLabel}
              </div>
            )}
            {section.items.map(item => {
              const active = isActive(item.href)
              const count = item.badge && mounted ? pendingCount : 0
              return (
                <Link
                  key={item.id}
                  href={`/${locale}${item.href === '/' ? '' : item.href}`}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: collapsed ? 0 : 8,
                    justifyContent: collapsed ? 'center' : 'flex-start',
                    padding: collapsed ? '8px 0' : '6px 12px',
                    fontSize: 14,
                    color: active ? '#141413' : '#87867f',
                    fontWeight: active ? 600 : 400,
                    borderRight: active ? '2px solid #d97757' : '2px solid transparent',
                    background: active ? 'rgba(217,119,87,0.08)' : 'transparent',
                    textDecoration: 'none',
                    transition: 'all 0.15s',
                    position: 'relative' as const,
                  }}
                >
                  <item.Icon size={15} />
                  {!collapsed && <span>{t(item.labelKey)}</span>}
                  {item.badge && count > 0 && (
                    <span style={{
                      marginLeft: 'auto',
                      fontSize: 12,
                      background: '#d97757',
                      color: 'white',
                      borderRadius: 10,
                      padding: '1px 5px',
                      fontWeight: 700,
                    }}>
                      {count > 99 ? '99+' : count}
                    </span>
                  )}
                </Link>
              )
            })}
          </div>
        ))}

        {/* Separator */}
        <div style={{ borderTop: '0.5px solid #e0ddd4', margin: '6px 0' }} />

        {/* 底部菜單 */}
        {BOTTOM_NAV_ITEMS.map(item => {
          const active = isActive(item.href)
          return (
            <Link
              key={item.id}
              href={`/${locale}${item.href === '/' ? '' : item.href}`}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: collapsed ? 0 : 8,
                justifyContent: collapsed ? 'center' : 'flex-start',
                padding: collapsed ? '7px 0' : '5px 12px',
                fontSize: 13,
                color: active ? '#141413' : '#87867f',
                fontWeight: active ? 600 : 400,
                borderRight: active ? '2px solid #d97757' : '2px solid transparent',
                background: active ? 'rgba(217,119,87,0.08)' : 'transparent',
                textDecoration: 'none',
                transition: 'all 0.15s',
              }}
            >
              <item.Icon size={15} />
              {!collapsed && <span>{t(item.labelKey)}</span>}
            </Link>
          )
        })}
      </nav>

      {/* 底部區域 - 版本號 */}
      <div style={{
        borderTop: '0.5px solid #e0ddd4',
        padding: collapsed ? '8px 0' : '8px 12px',
        textAlign: collapsed ? 'center' : 'left',
      }}>
        {!collapsed && (
          <span style={{ fontSize: 10, color: '#b0ad9f', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            v1.0.0
          </span>
        )}
      </div>

      {/* 折疊按鈕 */}
      <button
        onClick={onToggle}
        style={{
          position: 'absolute',
          right: -12,
          top: 80,
          width: 24,
          height: 24,
          borderRadius: '50%',
          background: '#faf9f3',
          border: '0.5px solid #e0ddd4',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: 'pointer',
          transition: 'all 0.15s',
        }}
        aria-label={collapsed ? tSidebar('expand') : tSidebar('collapse')}
      >
        {collapsed ? (
          <ChevronRight className="w-3 h-3 text-neutral-400" />
        ) : (
          <ChevronLeft className="w-3 h-3 text-neutral-400" />
        )}
      </button>
    </aside>
  )
}