'use client'

/**
 * Header - 頂部狀態列
 * ====================
 * CPO-102: Nothing.tech 明亮工業風頂部導航
 *
 * Features:
 * - 玻璃效果 + 固定定位
 * - 連線狀態指示器
 * - 語系切換器
 * - 使用者選單
 *
 * Phase 19: 使用 Z_INDEX.HEADER (30)
 * @see lib/constants/z-index.ts
 */

import { useCallback } from 'react'
import { useTranslations } from 'next-intl'
import { usePathname } from 'next/navigation'
import { StatusOrb } from '@/components/ui/status-orb'
import { useConnectionStatus, useMockMode } from '@/stores/dashboard.store'
import { useApprovalCount } from '@/stores/approval.store'
import { cn } from '@/lib/utils'
import { Z_INDEX } from '@/lib/constants/z-index'

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

interface HeaderProps {
  locale: string
  sidebarCollapsed?: boolean
  className?: string
}

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

export function Header({
  locale,
  sidebarCollapsed = false,
  className,
}: HeaderProps) {
  const t = useTranslations('locale')
  const tDashboard = useTranslations('dashboard')
  const pathname = usePathname()

  const connectionStatus = useConnectionStatus()
  const mockMode = useMockMode()
  const pendingApprovals = useApprovalCount()

  const switchLocale = useCallback((newLocale: string) => {
    const newPath = pathname.replace(`/${locale}`, `/${newLocale}`)
    window.location.href = newPath
  }, [locale, pathname])

  const tConnection = useTranslations('connection')
  const connectionLabel = tConnection(connectionStatus)

  const connectionOrbStatus = {
    disconnected: 'idle',
    connecting: 'syncing',
    connected: 'healthy',
    reconnecting: 'warning',
    error: 'critical',
  }[connectionStatus] as 'idle' | 'syncing' | 'healthy' | 'warning' | 'critical'

  return (
    <header
      className={cn(
        'fixed top-0 right-0 h-16',
        'flex items-center justify-between px-6',
        // 玻璃效果
        'bg-white/85 backdrop-blur-[20px]',
        'border-b border-black/[0.06]',
        // 寬度根據 sidebar 調整
        'transition-all duration-300 ease-out',
        sidebarCollapsed ? 'left-16' : 'left-64',
        className
      )}
      style={{ zIndex: Z_INDEX.HEADER }}
    >
      {/* Left: Page Title / Breadcrumb */}
      <div className="flex items-center gap-4">
        <h1 className="font-heading text-xl font-bold text-nothing-black tracking-tight">
          {tDashboard('title')}
        </h1>
      </div>

      {/* Right: Status + Locale + User */}
      <div className="flex items-center gap-6">
        {/* Pending Approvals Badge */}
        {pendingApprovals > 0 && (
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-status-critical/10 border border-status-critical/30">
            <StatusOrb status="critical" size="sm" pulse />
            <span className="text-sm font-mono text-status-critical">
              {pendingApprovals} {tDashboard('pendingApprovals')}
            </span>
          </div>
        )}

        {/* Connection Status */}
        <div className="flex items-center gap-2">
          <StatusOrb status={connectionOrbStatus} size="md" glow />
          <span className={cn(
            'font-mono text-sm',
            connectionStatus === 'connected' ? 'text-status-healthy' : 'text-nothing-gray-500'
          )}>
            {connectionLabel}
          </span>
          {mockMode && (
            <span className="px-2 py-0.5 text-xs font-mono rounded bg-status-warning/10 text-status-warning border border-status-warning/30">
              MOCK
            </span>
          )}
        </div>

        {/* Locale Switcher */}
        <div className="flex items-center gap-1 bg-nothing-gray-100 rounded-lg p-1">
          <button
            onClick={() => switchLocale('zh-TW')}
            className={cn(
              'px-3 py-1.5 rounded-md font-mono text-sm transition-all',
              locale === 'zh-TW'
                ? 'bg-nothing-black text-white'
                : 'text-nothing-gray-600 hover:text-nothing-black'
            )}
          >
            {t('zhTW')}
          </button>
          <button
            onClick={() => switchLocale('en')}
            className={cn(
              'px-3 py-1.5 rounded-md font-mono text-sm transition-all',
              locale === 'en'
                ? 'bg-nothing-black text-white'
                : 'text-nothing-gray-600 hover:text-nothing-black'
            )}
          >
            {t('en')}
          </button>
        </div>

        {/* User Avatar */}
        <button className="w-9 h-9 rounded-full bg-nothing-gray-200 flex items-center justify-center hover:bg-nothing-gray-300 transition-colors">
          <span className="text-sm font-medium text-nothing-gray-700">A</span>
        </button>
      </div>
    </header>
  )
}
