/**
 * SocketConnectionStatus Component
 * Enterprise FinTech Platform — Real-Time Communication System
 *
 * Displays the current WebSocket connection status with visual indicators.
 * Shows latency, reconnect attempts, and error states.
 * Can be placed in the header or footer of the application.
 */

'use client';

import { useEffect } from 'react';
import { Wifi, WifiOff, Loader2, RefreshCw } from 'lucide-react';
import { useConnectionStatus } from '@/hooks/useSocket';
import { useSocket } from '@/context/SocketContext';

interface SocketConnectionStatusProps {
  showLabel?: boolean;
  showLatency?: boolean;
  showReconnect?: boolean;
  className?: string;
}

export function SocketConnectionStatus({
  showLabel = true,
  showLatency = true,
  showReconnect = true,
  className = '',
}: SocketConnectionStatusProps) {
  const { connected, latency, reconnectAttempts, error, isReconnecting } = useConnectionStatus();
  const { connect, disconnect } = useSocket();

  // Determine status
  const status = isReconnecting ? 'checking' : connected ? 'connected' : 'disconnected';
  const statusLabel = isReconnecting
    ? `Reconnecting (${reconnectAttempts})`
    : connected
      ? 'Connected'
      : 'Disconnected';

  const statusColor = isReconnecting
    ? 'text-amber-400'
    : connected
      ? 'text-emerald-400'
      : 'text-red-400';
  const statusDot = isReconnecting
    ? 'bg-amber-400'
    : connected
      ? 'bg-emerald-400'
      : 'bg-red-400';

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      {/* Status indicator */}
      <div className="relative flex h-6 w-6 items-center justify-center">
        {isReconnecting ? (
          <Loader2 className={`h-4 w-4 ${statusColor} animate-spin`} />
        ) : connected ? (
          <Wifi className={`h-4 w-4 ${statusColor}`} />
        ) : (
          <WifiOff className={`h-4 w-4 ${statusColor}`} />
        )}
        <span
          className={`absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full ${statusDot} ${
            connected ? 'animate-pulse' : ''
          }`}
        />
      </div>

      {/* Label */}
      {showLabel && (
        <span className={`text-xs font-medium ${statusColor}`}>{statusLabel}</span>
      )}

      {/* Latency */}
      {showLatency && connected && latency !== null && (
        <span className="text-[10px] font-mono text-slate-500">{latency}ms</span>
      )}

      {/* Reconnect button */}
      {showReconnect && !connected && !isReconnecting && (
        <button
          onClick={() => connect()}
          className="flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-medium text-blue-400 hover:text-blue-300 transition-colors"
          title="Reconnect"
        >
          <RefreshCw className="h-3 w-3" />
          Reconnect
        </button>
      )}

      {/* Error tooltip */}
      {error && (
        <span className="text-[10px] text-red-400 max-w-[200px] truncate" title={error}>
          ({error})
        </span>
      )}
    </div>
  );
}