'use client'

/**
 * Sidebar - Operator workflow navigation
 * ======================================
 * Nothing.tech 視覺憲法:
 * - 純白背景 (bg-white)
 * - 極細右邊框 (border-r-[0.5px] border-neutral-200)
 * - 無陰影
 * - 單色圖示
 *
 * IA D0 (2026-06-27):
 * - 側欄保留 primary 工作台與 secondary 深連結。
 * - Runs / Approvals / Contracts / Alerts 等流程細節以二級樣式顯示，
 *   避免路由被移除後只剩隱藏連結。
 * - 頁面內仍以同頁 sections 呈現關鍵狀態，減少二層分頁藏內容。
 *
 * 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 {
  ChevronLeft,
  ChevronRight,
} from 'lucide-react'
import {
  PRODUCT_BOTTOM_NAV_ITEMS,
  PRODUCT_NAV_SECTIONS,
  type ProductNavChild,
  type ProductNavItem,
} from '@/lib/navigation/product-ia'
// Phase 8.0 #15: 改用 approval store SSE (移除 polling)
import { useApprovalStore } from '@/stores/approval.store'

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

interface SidebarProps {
  locale: string
  collapsed?: boolean
  compact?: boolean
  width?: number | string
  showToggle?: boolean
  onToggle?: () => void
  onNavigate?: () => void
  className?: string
}

// ============================================================
// 2026-06-26: Operator-first IA repair
// ============================================================
// 參考 Material / Atlassian / Carbon 的 app shell 模式：
// 側欄放高頻任務與產品導航，頁面內不再重複用二層分頁藏入口。
// ============================================================

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

export function Sidebar({
  locale,
  collapsed = false,
  compact = false,
  width,
  showToggle = true,
  onToggle,
  onNavigate,
  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: ProductNavItem) => (
    isRouteActive(item.href, item.exact) ||
    item.aliases?.some(alias => isRouteActive(alias)) === true ||
    item.relatedPaths?.some(path => isRouteActive(path)) === true ||
    item.children?.some(child => isChildActive(child)) === true
  )
  const isChildActive = (item: ProductNavChild) => isRouteActive(item.href, item.exact)
  const sidebarWidth = width ?? (compact && collapsed ? 48 : collapsed ? 64 : 224)

  return (
    <aside
      className={cn(
        'fixed left-0 flex-col',
        className ?? 'flex'
      )}
      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">
        {PRODUCT_NAV_SECTIONS.map(section => {
          if (section.items.length === 0) return null

          return (
          <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
              const secondary = item.surface === 'secondary'
              return (
                <div key={item.id}>
                  <Link
                    href={`/${locale}${item.href === '/' ? '' : item.href}`}
                    title={collapsed ? t(item.labelKey) : undefined}
                    onClick={onNavigate}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: collapsed ? 0 : secondary ? 7 : 8,
                      justifyContent: collapsed ? 'center' : 'flex-start',
                      padding: collapsed ? '8px 0' : secondary ? '4px 12px 4px 30px' : '6px 12px',
                      fontSize: secondary ? 13 : 14,
                      color: active ? '#141413' : secondary ? '#77736a' : '#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 : secondary ? 28 : 32,
                    }}
                  >
                    <item.Icon size={secondary ? 14 : 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>
                  {!collapsed && item.children?.length ? (
                    <div
                      aria-label={t(item.labelKey)}
                      style={{
                        display: 'grid',
                        gap: 1,
                        margin: '1px 0 5px',
                        paddingLeft: secondary ? 44 : 35,
                        paddingRight: 8,
                      }}
                    >
                      {item.children.map(child => {
                        const childActive = isChildActive(child)
                        return (
                          <Link
                            key={`${item.id}-${child.id}`}
                            href={`/${locale}${child.href}`}
                            onClick={onNavigate}
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              minHeight: 24,
                              padding: '3px 8px',
                              borderLeft: childActive ? '2px solid #d97757' : '2px solid #e7e2d8',
                              color: childActive ? '#141413' : '#7d7a72',
                              background: childActive ? 'rgba(217,119,87,0.08)' : 'transparent',
                              fontSize: 12,
                              fontWeight: childActive ? 650 : 450,
                              lineHeight: 1.25,
                              textDecoration: 'none',
                              overflowWrap: 'anywhere',
                            }}
                          >
                            {t(child.labelKey)}
                          </Link>
                        )
                      })}
                    </div>
                  ) : null}
                </div>
              )
            })}
          </div>
          )
        })}

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

        {/* 底部菜單 */}
        {PRODUCT_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}
              onClick={onNavigate}
              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>

      {/* 折疊按鈕 */}
      {showToggle && (
        <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>
  )
}
