/**
 * Connection Status Indicator
 * Displays the current WebSocket connection state to the user
 */

import { Component, createEffect, onMount, createSignal } from 'solid-js';
import { ConnectionStatus } from '../../lib/collaboration/websocket-connection';

export interface ConnectionStatusIndicatorProps {
  getStatus: () => ConnectionStatus;
  className?: string;
}

export const ConnectionStatusIndicator: Component<ConnectionStatusIndicatorProps> = (props) => {
  const [status, setStatus] = createSignal<ConnectionStatus>('disconnected');
  const [lastUpdate, setLastUpdate] = createSignal<Date>(new Date());

  let indicatorRef: HTMLSpanElement | undefined;

  onMount(() => {
    // Get initial status
    setStatus(props.getStatus());
    setLastUpdate(new Date());

    // Create a simple polling mechanism to check status
    // In production, this would use a subscription pattern
    const interval = setInterval(() => {
      const currentStatus = props.getStatus();
      if (currentStatus !== status()) {
        setStatus(currentStatus);
        setLastUpdate(new Date());
      }
    }, 500);

    return () => {
      clearInterval(interval);
    };
  });

  const getStatusColor = (s: ConnectionStatus): string => {
    switch (s) {
      case 'connected':
        return '#22c55e'; // green
      case 'connecting':
        return '#eab308'; // yellow
      case 'reconnecting':
        return '#f97316'; // orange
      case 'disconnected':
      default:
        return '#ef4444'; // red
    }
  };

  const getStatusLabel = (s: ConnectionStatus): string => {
    switch (s) {
      case 'connected':
        return 'Connected';
      case 'connecting':
        return 'Connecting...';
      case 'reconnecting':
        return 'Reconnecting...';
      case 'disconnected':
      default:
        return 'Disconnected';
    }
  };

  return (
    <div
      class={props.className || 'connection-status-indicator'}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '8px',
        padding: '4px 12px',
        borderRadius: '16px',
        backgroundColor: `${getStatusColor(status())}20`,
        border: `1px solid ${getStatusColor(status())}`,
        fontSize: '12px',
        fontWeight: '500',
      }}
    >
      <span
        ref={indicatorRef}
        class="status-dot"
        style={{
          width: '8px',
          height: '8px',
          borderRadius: '50%',
          backgroundColor: getStatusColor(status()),
          animation: status() === 'connecting' || status() === 'reconnecting' 
            ? 'pulse 1.5s ease-in-out infinite' 
            : 'none',
        }}
      />
      <span class="status-text">{getStatusLabel(status())}</span>
      {status() === 'connected' && (
        <span class="last-update" style={{ fontSize: '10px', color: '#666' }}>
          {lastUpdate().toLocaleTimeString()}
        </span>
      )}
      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </div>
  );
};

export default ConnectionStatusIndicator;
