import { Wifi, WifiOff, Loader2 } from 'lucide-react';
import type { ConnectionStatus } from '../types/protocol';

interface ConnectionStatusProps {
  status: ConnectionStatus;
  /** rail 紧凑模式：仅显示图标 */
  compact?: boolean;
}

export function ConnectionStatus({ status, compact = false }: ConnectionStatusProps) {
  const getStatusConfig = () => {
    switch (status) {
      case 'connecting':
        return {
          icon: <Loader2 className={`animate-spin ${compact ? 'h-4 w-4' : 'h-3 w-3'}`} />,
          text: '连接中',
          className:
            'text-[var(--accent-amber)] bg-[var(--accent-amber)]/10 border-[var(--accent-amber)]/30',
        };
      case 'connected':
        return {
          icon: <Wifi className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
          text: '已连接',
          className:
            'text-[var(--accent-green)] bg-[var(--accent-green)]/10 border-[var(--accent-green)]/30',
        };
      case 'disconnected':
        return {
          icon: <WifiOff className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
          text: '已断开',
          className:
            'text-[var(--text-muted)] bg-[var(--overlay-dim)] border-[var(--border-color)]',
        };
      case 'error':
        return {
          icon: <WifiOff className={compact ? 'h-4 w-4' : 'h-3 w-3'} />,
          text: '连接错误',
          className:
            'text-[rgb(242,90,90)] bg-[rgb(242,90,90)]/10 border-[rgb(242,90,90)]/30',
        };
    }
  };

  const config = getStatusConfig();

  if (!config) return null;

  if (compact) {
    return (
      <div
        className={`flex h-8 w-8 items-center justify-center rounded-lg border ${config.className}`}
        title={config.text}
        aria-label={config.text}
      >
        {config.icon}
      </div>
    );
  }

  return (
    <div
      className={`inline-flex w-fit items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${config.className}`}
    >
      {config.icon}
      <span>{config.text}</span>
    </div>
  );
}