import React, { useState, useEffect } from 'react';
import { useCrossDeviceSync, usePlaybackSync } from '../hooks/useCrossDeviceSync';
import { useCacheIntelligence } from '../hooks/useCacheIntelligence';
import { CrossDeviceSyncIndicator } from './CrossDeviceSyncIndicator';

export const CrossDeviceSyncDemo: React.FC = () => {
  const { 
    syncState, 
    connectedDevices, 
    isEnabled, 
    enable, 
    disable 
  } = useCrossDeviceSync();
  
  const {
    syncCurrentTrack,
    syncPlayingState,
    syncQueue,
    syncVolumeChange
  } = usePlaybackSync();

  const {
    intelligence,
    topRecommendations,
    recordSongPlay,
    getStats
  } = useCacheIntelligence();

  const [demoTrack, setDemoTrack] = useState('demo-track-1');
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(0.8);

  // Simulate playback state changes
  const handlePlayPause = () => {
    const newPlayingState = !isPlaying;
    setIsPlaying(newPlayingState);
    
    // Sync the state across devices
    syncPlayingState(newPlayingState);
    
    if (newPlayingState) {
      syncCurrentTrack(demoTrack, 0);
    }
  };

  const handleTrackChange = (trackId: string) => {
    setDemoTrack(trackId);
    syncCurrentTrack(trackId, 0);
    
    // Record song access for cache intelligence
    recordSongPlay(trackId);
  };

  const handleVolumeChange = (newVolume: number) => {
    setVolume(newVolume);
    syncVolumeChange(newVolume);
  };

  const handleQueueUpdate = () => {
    const mockQueue = [
      { Id: 'track-1', Name: 'Song 1', Artist: 'Artist 1' },
      { Id: 'track-2', Name: 'Song 2', Artist: 'Artist 2' },
      { Id: 'track-3', Name: 'Song 3', Artist: 'Artist 3' }
    ] as any[];
    
    syncQueue(mockQueue);
  };

  const stats = getStats();

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '24px' }}>
        <h2>Cross-Device Sync Demo</h2>
        <CrossDeviceSyncIndicator />
      </div>

      {/* Sync Status */}
      <div style={{ 
        background: '#f5f5f5', 
        padding: '16px', 
        borderRadius: '8px', 
        marginBottom: '24px' 
      }}>
        <h3>Sync Status</h3>
        <p><strong>Enabled:</strong> {isEnabled ? 'Yes' : 'No'}</p>
        <p><strong>Connected Devices:</strong> {connectedDevices.length}</p>
        <p><strong>Current Track:</strong> {syncState.currentTrack || 'None'}</p>
        <p><strong>Is Playing:</strong> {syncState.isPlaying ? 'Yes' : 'No'}</p>
        <p><strong>Queue Length:</strong> {syncState.queue.length}</p>
        <p><strong>Cache Hints:</strong> {syncState.cacheHints.length}</p>
        
        <div style={{ marginTop: '12px' }}>
          <button 
            onClick={isEnabled ? disable : enable}
            style={{ 
              padding: '8px 16px', 
              marginRight: '8px',
              background: isEnabled ? '#dc3545' : '#28a745',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {isEnabled ? 'Disable Sync' : 'Enable Sync'}
          </button>
        </div>
      </div>

      {/* Playback Controls */}
      <div style={{ 
        background: '#e3f2fd', 
        padding: '16px', 
        borderRadius: '8px', 
        marginBottom: '24px' 
      }}>
        <h3>Playback Controls</h3>
        
        <div style={{ marginBottom: '16px' }}>
          <label>Current Track: </label>
          <select 
            value={demoTrack} 
            onChange={(e) => handleTrackChange(e.target.value)}
            style={{ marginLeft: '8px', padding: '4px' }}
          >
            <option value="demo-track-1">Demo Track 1</option>
            <option value="demo-track-2">Demo Track 2</option>
            <option value="demo-track-3">Demo Track 3</option>
            <option value="demo-track-4">Demo Track 4</option>
          </select>
        </div>

        <div style={{ marginBottom: '16px' }}>
          <button 
            onClick={handlePlayPause}
            style={{ 
              padding: '8px 16px', 
              marginRight: '8px',
              background: isPlaying ? '#ffc107' : '#28a745',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {isPlaying ? 'Pause' : 'Play'}
          </button>
          
          <button 
            onClick={handleQueueUpdate}
            style={{ 
              padding: '8px 16px',
              background: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Update Queue
          </button>
        </div>

        <div>
          <label>Volume: </label>
          <input 
            type="range" 
            min="0" 
            max="1" 
            step="0.1" 
            value={volume}
            onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
            style={{ marginLeft: '8px' }}
          />
          <span style={{ marginLeft: '8px' }}>{Math.round(volume * 100)}%</span>
        </div>
      </div>

      {/* Cache Intelligence */}
      <div style={{ 
        background: '#f3e5f5', 
        padding: '16px', 
        borderRadius: '8px', 
        marginBottom: '24px' 
      }}>
        <h3>Cache Intelligence</h3>
        
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
          <div>
            <h4>Device Intelligence</h4>
            <p><strong>Device Type:</strong> {intelligence.deviceType}</p>
            <p><strong>Frequently Played:</strong> {intelligence.frequentlyPlayed.length}</p>
            <p><strong>Recently Accessed:</strong> {intelligence.recentlyAccessed.length}</p>
            <p><strong>Cache Hit Rate:</strong> {(intelligence.cacheHitRate * 100).toFixed(1)}%</p>
          </div>
          
          <div>
            <h4>Statistics</h4>
            <p><strong>Total Priorities:</strong> {stats.totalPriorities}</p>
            <p><strong>Average Priority:</strong> {stats.averagePriority.toFixed(1)}</p>
            <p><strong>Cross-Device Hints:</strong> {stats.crossDeviceHints}</p>
          </div>
        </div>

        <div style={{ marginTop: '16px' }}>
          <h4>Top Cache Recommendations</h4>
          <div style={{ 
            maxHeight: '100px', 
            overflowY: 'auto', 
            background: 'white', 
            padding: '8px', 
            borderRadius: '4px' 
          }}>
            {topRecommendations.length > 0 ? (
              topRecommendations.slice(0, 10).map((songId, index) => (
                <div key={songId} style={{ fontSize: '12px', marginBottom: '2px' }}>
                  {index + 1}. {songId}
                </div>
              ))
            ) : (
              <div style={{ fontSize: '12px', color: '#666' }}>No recommendations yet</div>
            )}
          </div>
        </div>
      </div>

      {/* Connected Devices */}
      {connectedDevices.length > 0 && (
        <div style={{ 
          background: '#e8f5e8', 
          padding: '16px', 
          borderRadius: '8px' 
        }}>
          <h3>Connected Devices</h3>
          {connectedDevices.map(device => (
            <div key={device.id} style={{ 
              background: 'white', 
              padding: '8px', 
              marginBottom: '8px', 
              borderRadius: '4px',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center'
            }}>
              <div>
                <strong>{device.name}</strong> ({device.type})
              </div>
              <div style={{ 
                color: device.isActive ? '#28a745' : '#6c757d',
                fontSize: '12px'
              }}>
                {device.isActive ? 'Active' : 'Inactive'}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};