'use client'

/**
 * StatusOrb - 狀態呼吸燈
 * ======================
 * Nothing.tech 明亮工業風設計
 *
 * Features:
 * - 10px 預設尺寸 (可調整)
 * - 4 種狀態: healthy (綠), warning (橘), critical (紅), thinking (紫)
 * - 平滑 pulse 動畫
 * - WCAG 2.1 AA 色彩對比度
 *
 * Accessibility:
 * - 使用 aria-label 描述狀態
 * - 色彩 + 動畫雙重指示 (不僅依賴顏色)
 */

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '@/lib/utils'

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

export type StatusType = 'healthy' | 'warning' | 'critical' | 'thinking' | 'idle' | 'syncing'

export interface StatusOrbProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
  /** 狀態類型 */
  status: StatusType
  /** 尺寸 (px) */
  size?: 'xs' | 'sm' | 'md' | 'lg'
  /** 是否顯示脈衝動畫 */
  pulse?: boolean
  /** 是否顯示外發光 */
  glow?: boolean
  /** 無障礙標籤 (i18n) */
  'aria-label'?: string
}

// =============================================================================
// Status Configuration
// =============================================================================

interface StatusConfig {
  /** 背景色 */
  bgColor: string
  /** 發光色 */
  glowColor: string
  /** 是否預設動畫 */
  defaultPulse: boolean
  /** 無障礙標籤 (預設) */
  label: string
}

const statusConfig: Record<StatusType, StatusConfig> = {
  healthy: {
    bgColor: 'bg-status-healthy',        // #22C55E
    glowColor: 'shadow-glow-green',
    defaultPulse: false,
    label: 'Healthy',
  },
  warning: {
    bgColor: 'bg-status-warning',         // #F59E0B
    glowColor: 'shadow-[0_0_12px_rgba(245,158,11,0.5)]',
    defaultPulse: true,
    label: 'Warning',
  },
  critical: {
    bgColor: 'bg-status-critical',        // #FF3300
    glowColor: 'shadow-glow-red',
    defaultPulse: true,
    label: 'Critical',
  },
  thinking: {
    bgColor: 'bg-status-thinking',        // #8B5CF6
    glowColor: 'shadow-glow-purple',
    defaultPulse: true,
    label: 'Thinking',
  },
  idle: {
    bgColor: 'bg-status-idle',            // #A3A3A3
    glowColor: '',
    defaultPulse: false,
    label: 'Idle',
  },
  syncing: {
    bgColor: 'bg-status-syncing',         // #3B82F6
    glowColor: 'shadow-glow-blue',
    defaultPulse: true,
    label: 'Syncing',
  },
}

// =============================================================================
// Size Configuration
// =============================================================================

const sizeConfig = {
  xs: 'w-2 h-2',      // 8px
  sm: 'w-2.5 h-2.5',  // 10px (default per spec)
  md: 'w-3 h-3',      // 12px
  lg: 'w-4 h-4',      // 16px
}

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

export const StatusOrb = forwardRef<HTMLSpanElement, StatusOrbProps>(
  (
    {
      status,
      size = 'sm',
      pulse,
      glow = false,
      className,
      'aria-label': ariaLabel,
      ...props
    },
    ref
  ) => {
    const config = statusConfig[status]
    const shouldPulse = pulse ?? config.defaultPulse
    const label = ariaLabel || config.label

    return (
      <span
        ref={ref}
        role="status"
        aria-label={label}
        className={cn(
          // Base
          'inline-block rounded-full',
          // Size
          sizeConfig[size],
          // Color
          config.bgColor,
          // Glow effect
          glow && config.glowColor,
          // Pulse animation
          shouldPulse && 'animate-pulse',
          // Transition
          'transition-all duration-300',
          // Custom
          className
        )}
        {...props}
      />
    )
  }
)

StatusOrb.displayName = 'StatusOrb'

// =============================================================================
// Variant with Ring (更明顯的指示器)
// =============================================================================

export interface StatusOrbWithRingProps extends StatusOrbProps {
  /** 是否顯示外環 */
  showRing?: boolean
}

export const StatusOrbWithRing = forwardRef<HTMLSpanElement, StatusOrbWithRingProps>(
  ({ showRing = true, size = 'sm', status, className, ...props }, ref) => {
    const config = statusConfig[status]
    const shouldPulse = props.pulse ?? config.defaultPulse

    // Ring sizes
    const ringSizeConfig = {
      xs: 'w-4 h-4',
      sm: 'w-5 h-5',
      md: 'w-6 h-6',
      lg: 'w-8 h-8',
    }

    if (!showRing) {
      return <StatusOrb ref={ref} status={status} size={size} className={className} {...props} />
    }

    return (
      <span
        ref={ref}
        className={cn(
          'relative inline-flex items-center justify-center',
          ringSizeConfig[size],
          className
        )}
      >
        {/* Outer ring (animated) */}
        {shouldPulse && (
          <span
            className={cn(
              'absolute inset-0 rounded-full opacity-30 animate-ping',
              config.bgColor
            )}
          />
        )}
        {/* Inner orb */}
        <StatusOrb status={status} size={size} pulse={false} {...props} />
      </span>
    )
  }
)

StatusOrbWithRing.displayName = 'StatusOrbWithRing'

// =============================================================================
// Status Badge (狀態 + 文字標籤)
// =============================================================================

export interface StatusBadgeProps extends StatusOrbProps {
  /** 顯示文字 (i18n) */
  label?: string
  /** 標籤位置 */
  labelPosition?: 'right' | 'left'
}

export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(
  (
    {
      status,
      label,
      labelPosition = 'right',
      size = 'sm',
      className,
      ...props
    },
    ref
  ) => {
    const config = statusConfig[status]
    const displayLabel = label || config.label

    return (
      <span
        ref={ref}
        className={cn(
          'inline-flex items-center gap-2',
          labelPosition === 'left' && 'flex-row-reverse',
          className
        )}
      >
        <StatusOrb status={status} size={size} {...props} />
        <span className="text-xs font-body text-nothing-gray-600">
          {displayLabel}
        </span>
      </span>
    )
  }
)

StatusBadge.displayName = 'StatusBadge'
