'use client'

/**
 * Sidebar - Operator workflow navigation
 * ======================================
 * Nothing.tech 視覺憲法:
 * - 純白背景 (bg-white)
 * - 極細右邊框 (border-r-[0.5px] border-neutral-200)
 * - 無陰影
 * - 單色圖示
 *
 * IA v2 (2026-06-04):
 * - 頂層按照 operator 工作流排序，不按照技術模組排序。
 * - AwoooP / Runs / Work Items / Approvals / Alerts 直接成為全域入口。
 * - 頁內 tabs 只保留同一頁的視角切換，避免把任務入口藏在第二層。
 *
 * 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 {
  Activity,
  Bell,
  BookOpen,
  BrainCircuit,
  Building2,
  ChevronLeft,
  ChevronRight,
  ClipboardList,
  DollarSign,
  FileText,
  GitBranch,
  HelpCircle,
  LayoutDashboard,
  Monitor,
  Package,
  Radar,
  Route,
  Settings,
  ShieldCheck,
  Terminal,
  Ticket,
  Wrench,
} from 'lucide-react'
// Phase 8.0 #15: 改用 approval store SSE (移除 polling)
import { useApprovalStore } from '@/stores/approval.store'

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

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

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

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

// ============================================================
// 2026-06-04: Operator-first IA
// ============================================================
// 參考 Material / Atlassian / Carbon 的 app shell 模式：
// 側欄放高頻任務與產品導航，Header 留給搜尋與全域工具。
// ============================================================

const NAV_SECTIONS: NavSection[] = [
  {
    sectionKey: 'queues',
    items: [
      { id: 'command-center', href: '/', labelKey: 'commandCenter', Icon: LayoutDashboard },
      { id: 'awooop-home', href: '/awooop', labelKey: 'awooopHome', Icon: BrainCircuit, exact: true },
      { id: 'awooop-work-items', href: '/awooop/work-items', labelKey: 'workItems', Icon: ClipboardList },
      { id: 'awooop-runs', href: '/awooop/runs', labelKey: 'runMonitor', Icon: Activity },
      { id: 'awooop-approvals', href: '/awooop/approvals', labelKey: 'approvalQueue', Icon: ShieldCheck, badge: true },
      { id: 'awooop-contracts', href: '/awooop/contracts', labelKey: 'contracts', Icon: FileText },
      { id: 'awooop-tenants', href: '/awooop/tenants', labelKey: 'tenants', Icon: Building2 },
      { id: 'alerts', href: '/alerts', labelKey: 'alerts', Icon: Bell },
    ],
  },
  {
    sectionKey: 'truth',
    items: [
      { id: 'observability', href: '/observability', labelKey: 'observability', Icon: Monitor },
      { id: 'automation', href: '/automation', labelKey: 'automation', Icon: Wrench },
      { id: 'governance', href: '/governance', labelKey: 'governance', Icon: ShieldCheck },
      { id: 'knowledge', href: '/knowledge', labelKey: 'knowledge', Icon: BookOpen },
      { id: 'iwooos-security', href: '/iwooos', labelKey: 'iwooos', Icon: Radar, aliases: ['/security-compliance'] },
    ],
  },
  {
    sectionKey: 'ops',
    items: [
      { id: 'operations', href: '/operations', labelKey: 'operationsOverview', Icon: Package },
      { id: 'topology', href: '/topology', labelKey: 'topology', Icon: Route },
      { id: 'deployments', href: '/deployments', labelKey: 'deployments', Icon: GitBranch },
      { id: 'tickets', href: '/tickets', labelKey: 'tickets', Icon: Ticket },
      { id: 'cost', href: '/cost', labelKey: 'cost', Icon: DollarSign },
    ],
  },
  {
    // Legacy: 經典 AI 中心 (既有決策保留)
    sectionKey: 'legacy',
    items: [
      { id: 'terminal', href: '/terminal', labelKey: 'terminal', Icon: Terminal },
      { id: 'settings', href: '/settings', labelKey: 'settings', Icon: Settings },
      { id: 'classic', href: '/classic', labelKey: 'classicAICenter', Icon: LayoutDashboard },
    ],
  },
]

const BOTTOM_NAV_ITEMS: NavItemConfig[] = [
  { id: 'help', href: '/help', labelKey: 'help', Icon: HelpCircle },
]

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

export function Sidebar({
  locale,
  collapsed = false,
  compact = false,
  onToggle,
  className,
}: SidebarProps) {
  const t = useTranslations('nav')
  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 isRouteActive = (href: string, exact = false) => {
    const fullHref = `/${locale}${href === '/' ? '' : href}`
    if (href === '/') {
      return pathname === `/${locale}` || pathname === `/${locale}/`
    }
    if (exact) {
      return pathname === fullHref || pathname === `${fullHref}/`
    }
    return pathname === fullHref || pathname.startsWith(fullHref + '/')
  }

  const isActive = (item: NavItemConfig) => (
    isRouteActive(item.href, item.exact) || item.aliases?.some(alias => isRouteActive(alias)) === true
  )
  const sidebarWidth = compact && collapsed ? 48 : collapsed ? 64 : 224

  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: sidebarWidth,
        transition: 'width 0.3s ease',
      }}
    >

      {/* 導航列表 - Operator workflow sections */}
      <nav className="flex-1 py-2 overflow-y-auto">
        {NAV_SECTIONS.map(section => (
          <div key={section.sectionKey} style={{ marginBottom: 4 }}>
            {!collapsed && (
              <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,
              }}>
                {tSection(section.sectionKey)}
              </div>
            )}
            {section.items.map(item => {
              const active = isActive(item)
              const count = item.badge && mounted ? pendingCount : 0
              return (
                <Link
                  key={item.id}
                  href={`/${locale}${item.href === '/' ? '' : item.href}`}
                  title={collapsed ? t(item.labelKey) : undefined}
                  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,
                    minHeight: collapsed ? 36 : 32,
                  }}
                >
                  <item.Icon size={15} aria-hidden="true" />
                  {!collapsed && (
                    <span style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
                      {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)
          return (
            <Link
              key={item.id}
              href={`/${locale}${item.href === '/' ? '' : item.href}`}
              title={collapsed ? t(item.labelKey) : undefined}
              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',
                minHeight: collapsed ? 34 : 30,
              }}
            >
              <item.Icon size={15} aria-hidden="true" />
              {!collapsed && (
                <span style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
                  {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>
  )
}
