import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Wifi, WifiOff, RefreshCw, AlertCircle } from 'lucide-react';
import { WebSocketReadyState } from '@/hooks/useWebSocket';

interface RealTimeIndicatorProps {
  readyState: WebSocketReadyState;
  lastMessageTime?: Date;
  newLogCount: number;
  onToggleRealTime: () => void;
  onReconnect: () => void;
  isEnabled: boolean;
  reconnectAttempts: number;
}

export const RealTimeIndicator: React.FC<RealTimeIndicatorProps> = ({
  readyState,
  lastMessageTime,
  newLogCount,
  onToggleRealTime,
  onReconnect,
  isEnabled,
  reconnectAttempts
}) => {
  const getStatusInfo = () => {
    switch (readyState) {
      case WebSocketReadyState.CONNECTING:
        return {
          status: 'Connecting',
          color: 'warning',
          icon: RefreshCw,
          pulse: true
        };
      case WebSocketReadyState.OPEN:
        return {
          status: 'Connected',
          color: 'success',
          icon: Wifi,
          pulse: false
        };
      case WebSocketReadyState.CLOSING:
        return {
          status: 'Closing',
          color: 'warning',
          icon: WifiOff,
          pulse: true
        };
      case WebSocketReadyState.CLOSED:
        return {
          status: 'Disconnected',
          color: 'error',
          icon: WifiOff,
          pulse: false
        };
      default:
        return {
          status: 'Unknown',
          color: 'error',
          icon: AlertCircle,
          pulse: false
        };
    }
  };

  const statusInfo = getStatusInfo();
  const StatusIcon = statusInfo.icon;
  const isConnected = readyState === WebSocketReadyState.OPEN;

  return (
    <div className="flex items-center space-x-4 bg-base-100 border border-base-300 rounded-lg px-4 py-2">
      {/* Connection Status */}
      <div className="flex items-center space-x-2">
        <div className="relative">
          <StatusIcon
            className={`h-4 w-4 text-${statusInfo.color} ${
              statusInfo.pulse ? 'animate-spin' : ''
            }`}
          />
          {statusInfo.color === 'success' && (
            <div className="absolute -top-1 -right-1 w-2 h-2 bg-success rounded-full animate-pulse-slow"></div>
          )}
        </div>
        <span className={`text-sm font-medium text-${statusInfo.color}`}>
          {statusInfo.status}
        </span>
      </div>

      {/* Last Message Time */}
      {lastMessageTime && isConnected && (
        <div className="text-xs text-base-content/60">
          Last: {lastMessageTime.toLocaleTimeString()}
        </div>
      )}

      {/* Reconnect Attempts */}
      {reconnectAttempts > 0 && (
        <div className="text-xs text-warning">
          Attempt {reconnectAttempts}
        </div>
      )}

      {/* New Log Count */}
      <AnimatePresence>
        {newLogCount > 0 && (
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            exit={{ scale: 0 }}
            className="flex items-center space-x-2"
          >
            <span className="badge badge-primary badge-sm">
              {newLogCount} new
            </span>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Controls */}
      <div className="flex items-center space-x-2">
        <div className="form-control">
          <label className="label cursor-pointer space-x-2">
            <span className="label-text text-xs">Real-time</span>
            <input
              type="checkbox"
              className="toggle toggle-primary toggle-sm"
              checked={isEnabled}
              onChange={onToggleRealTime}
            />
          </label>
        </div>

        {!isConnected && (
          <button
            onClick={onReconnect}
            className="btn btn-ghost btn-sm text-primary"
            disabled={readyState === WebSocketReadyState.CONNECTING}
          >
            <RefreshCw className="h-3 w-3" />
            Retry
          </button>
        )}
      </div>
    </div>
  );
};
