import React, { useState, useEffect } from 'react';
import { useCrossDeviceSync } from '../hooks/useCrossDeviceSync';
import { SyncConflict } from '../services/CrossDeviceSync';
import './CrossDeviceSyncIndicator.css';

interface ConflictModalProps {
  conflict: SyncConflict;
  onResolve: (resolution: 'take_control' | 'let_other_control' | 'dismiss') => void;
}

const ConflictModal: React.FC<ConflictModalProps> = ({ conflict, onResolve }) => {
  const getConflictMessage = () => {
    switch (conflict.type) {
      case 'simultaneous_playback':
        return 'Another device is playing music. What would you like to do?';
      case 'position_drift':
        return 'Playback position differs significantly between devices.';
      case 'queue_mismatch':
        return 'The queue has changed on another device.';
      default:
        return 'A sync conflict has been detected.';
    }
  };

  return (
    <div className="conflict-modal-overlay">
      <div className="conflict-modal">
        <div className="conflict-header">
          <h3>Sync Conflict Detected</h3>
        </div>
        <div className="conflict-content">
          <p>{getConflictMessage()}</p>
          <div className="conflict-devices">
            <span>Devices involved: {conflict.devices.length}</span>
          </div>
        </div>
        <div className="conflict-actions">
          <button 
            className="btn-primary"
            onClick={() => onResolve('take_control')}
          >
            Take Control
          </button>
          <button 
            className="btn-secondary"
            onClick={() => onResolve('let_other_control')}
          >
            Let Other Device Control
          </button>
          <button 
            className="btn-tertiary"
            onClick={() => onResolve('dismiss')}
          >
            Dismiss
          </button>
        </div>
      </div>
    </div>
  );
};

export const CrossDeviceSyncIndicator: React.FC = () => {
  const { syncState, connectedDevices, isEnabled } = useCrossDeviceSync();
  const [showDevices, setShowDevices] = useState(false);
  const [currentConflict, setCurrentConflict] = useState<SyncConflict | null>(null);
  const [lastSyncTime, setLastSyncTime] = useState<string>('');

  // Update last sync time display
  useEffect(() => {
    const updateTime = () => {
      if (syncState.lastSyncTime) {
        const now = Date.now();
        const diff = now - syncState.lastSyncTime;
        
        if (diff < 5000) {
          setLastSyncTime('just now');
        } else if (diff < 60000) {
          setLastSyncTime(`${Math.floor(diff / 1000)}s ago`);
        } else {
          setLastSyncTime(`${Math.floor(diff / 60000)}m ago`);
        }
      }
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, [syncState.lastSyncTime]);

  // Handle conflict detection
  useEffect(() => {
    const { onConflictDetected } = useCrossDeviceSync();
    
    const unsubscribe = onConflictDetected((conflict) => {
      setCurrentConflict(conflict);
    });

    return unsubscribe;
  }, []);

  const handleConflictResolve = (resolution: 'take_control' | 'let_other_control' | 'dismiss') => {
    // Handle conflict resolution based on user choice
    switch (resolution) {
      case 'take_control':
        // Force this device to be the primary controller
        console.log('Taking control of playback');
        break;
      case 'let_other_control':
        // Let the other device control playback
        console.log('Letting other device control playback');
        break;
      case 'dismiss':
        // Just dismiss the conflict without action
        console.log('Dismissing sync conflict');
        break;
    }
    
    setCurrentConflict(null);
  };

  const getSyncStatusIcon = () => {
    if (!isEnabled) return '⚫'; // Disabled
    if (connectedDevices.length === 0) return '🔴'; // No devices
    if (Date.now() - syncState.lastSyncTime > 10000) return '🟡'; // Stale sync
    return '🟢'; // Active sync
  };

  const getSyncStatusText = () => {
    if (!isEnabled) return 'Sync disabled';
    if (connectedDevices.length === 0) return 'No devices connected';
    if (Date.now() - syncState.lastSyncTime > 10000) return 'Sync stale';
    return `Synced with ${connectedDevices.length} device${connectedDevices.length !== 1 ? 's' : ''}`;
  };

  if (!isEnabled && connectedDevices.length === 0) {
    return null; // Don't show indicator if sync is disabled and no devices
  }

  return (
    <>
      <div className="cross-device-sync-indicator">
        <button 
          className="sync-status-button"
          onClick={() => setShowDevices(!showDevices)}
          title={getSyncStatusText()}
        >
          <span className="sync-icon">{getSyncStatusIcon()}</span>
          <span className="sync-text">{connectedDevices.length}</span>
        </button>

        {showDevices && (
          <div className="sync-devices-dropdown">
            <div className="sync-header">
              <h4>Connected Devices</h4>
              <span className="last-sync">Last sync: {lastSyncTime}</span>
            </div>
            
            {connectedDevices.length === 0 ? (
              <div className="no-devices">No other devices connected</div>
            ) : (
              <div className="devices-list">
                {connectedDevices.map(device => (
                  <div key={device.id} className="device-item">
                    <div className="device-info">
                      <span className="device-name">{device.name}</span>
                      <span className="device-type">{device.type}</span>
                    </div>
                    <div className="device-status">
                      {device.isActive ? (
                        <span className="status-active">Active</span>
                      ) : (
                        <span className="status-inactive">Inactive</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {syncState.currentTrack && (
              <div className="sync-info">
                <div className="current-track">
                  <span>Synced track: {syncState.currentTrack}</span>
                </div>
                <div className="sync-details">
                  <span>Position: {Math.floor(syncState.playbackPosition / 1000)}s</span>
                  <span>Queue: {syncState.queue.length} songs</span>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {currentConflict && (
        <ConflictModal 
          conflict={currentConflict}
          onResolve={handleConflictResolve}
        />
      )}
    </>
  );
};