import React, { useState, useEffect } from 'react'
import { usePlaybackContinuity } from '../hooks/usePlaybackContinuity'
import { PlaybackContinuityIndicator } from './PlaybackContinuityIndicator'
import { MediaItem } from '../api/jellyfin'
import './PlaybackContinuityDemo.css'

export const PlaybackContinuityDemo: React.FC = () => {
  const {
    playbackState,
    connectionState,
    isOnline,
    connectionQuality,
    updatePlaybackState,
    syncPlaybackPosition,
    getSmartFallbackUrl,
    seamlessHandoff,
    canPlayOffline,
    getEstimatedOfflineTime
  } = usePlaybackContinuity()

  const [demoTrack] = useState<MediaItem>({
    Id: 'demo-track-123',
    Name: 'Demo Track',
    Artists: ['Demo Artist'],
    Album: 'Demo Album'
  } as MediaItem)

  const [position, setPosition] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [volume, setVolume] = useState(0.8)
  const [fallbackResult, setFallbackResult] = useState<string>('')

  // Simulate playback position updates
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null
    
    if (isPlaying) {
      interval = setInterval(() => {
        setPosition(prev => {
          const newPosition = prev + 1
          syncPlaybackPosition(demoTrack.Id, newPosition)
          return newPosition
        })
      }, 1000)
    }

    return () => {
      if (interval) clearInterval(interval)
    }
  }, [isPlaying, demoTrack.Id, syncPlaybackPosition])

  const handlePlay = () => {
    setIsPlaying(true)
    updatePlaybackState({
      trackId: demoTrack.Id,
      position,
      isPlaying: true,
      volume,
      queue: [demoTrack],
      currentIndex: 0,
      shuffle: false,
      repeat: 'off',
      timestamp: Date.now(),
      deviceId: ''
    })
  }

  const handlePause = () => {
    setIsPlaying(false)
    updatePlaybackState({
      trackId: demoTrack.Id,
      position,
      isPlaying: false,
      volume,
      queue: [demoTrack],
      currentIndex: 0,
      shuffle: false,
      repeat: 'off',
      timestamp: Date.now(),
      deviceId: ''
    })
  }

  const handleSeek = (newPosition: number) => {
    setPosition(newPosition)
    syncPlaybackPosition(demoTrack.Id, newPosition)
  }

  const testFallback = async () => {
    try {
      const mockAudioStorage = {
        getPlayableUrl: async () => ({ url: 'blob://cached-demo', type: 'audio' })
      }
      const mockApi = {
        getStreamUrl: () => 'https://demo-server/stream'
      }
      
      const result = await getSmartFallbackUrl(demoTrack.Id, mockAudioStorage, mockApi, 320000)
      setFallbackResult(`Source: ${result.source}, URL: ${result.url || result.error}`)
    } catch (error) {
      setFallbackResult(`Error: ${error}`)
    }
  }

  const simulateOffline = () => {
    // Simulate going offline
    Object.defineProperty(navigator, 'onLine', { value: false, configurable: true })
    window.dispatchEvent(new Event('offline'))
  }

  const simulateOnline = () => {
    // Simulate going online
    Object.defineProperty(navigator, 'onLine', { value: true, configurable: true })
    window.dispatchEvent(new Event('online'))
  }

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  return (
    <div className="playback-continuity-demo">
      <h2>🎵 Playback Continuity System Demo</h2>
      
      {/* Connection Status */}
      <div className="demo-section">
        <h3>Connection Status</h3>
        <PlaybackContinuityIndicator showDetails={true} />
        <div className="connection-controls">
          <button onClick={simulateOffline} className="btn-offline">
            📱 Simulate Offline
          </button>
          <button onClick={simulateOnline} className="btn-online">
            🌐 Simulate Online
          </button>
        </div>
      </div>

      {/* Playback Controls */}
      <div className="demo-section">
        <h3>Playback Controls</h3>
        <div className="track-info">
          <div className="track-name">{demoTrack.Name}</div>
          <div className="track-artist">{demoTrack.Artists?.[0]}</div>
        </div>
        
        <div className="playback-controls">
          <button 
            onClick={isPlaying ? handlePause : handlePlay}
            className={`play-pause-btn ${isPlaying ? 'playing' : 'paused'}`}
          >
            {isPlaying ? '⏸️' : '▶️'}
          </button>
          
          <div className="position-control">
            <span>{formatTime(position)}</span>
            <input
              type="range"
              min="0"
              max="180"
              value={position}
              onChange={(e) => handleSeek(Number(e.target.value))}
              className="position-slider"
            />
            <span>3:00</span>
          </div>
          
          <div className="volume-control">
            <span>🔊</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={volume}
              onChange={(e) => setVolume(Number(e.target.value))}
              className="volume-slider"
            />
          </div>
        </div>
      </div>

      {/* Smart Fallback Test */}
      <div className="demo-section">
        <h3>Smart Fallback Logic</h3>
        <button onClick={testFallback} className="test-fallback-btn">
          🔄 Test Smart Fallback
        </button>
        {fallbackResult && (
          <div className="fallback-result">
            <strong>Result:</strong> {fallbackResult}
          </div>
        )}
      </div>

      {/* Playback State */}
      <div className="demo-section">
        <h3>Current Playback State</h3>
        <div className="state-display">
          {playbackState ? (
            <div className="state-grid">
              <div className="state-item">
                <label>Track ID:</label>
                <span>{playbackState.trackId}</span>
              </div>
              <div className="state-item">
                <label>Position:</label>
                <span>{playbackState.position.toFixed(3)}s</span>
              </div>
              <div className="state-item">
                <label>Playing:</label>
                <span>{playbackState.isPlaying ? '✅' : '❌'}</span>
              </div>
              <div className="state-item">
                <label>Volume:</label>
                <span>{(playbackState.volume * 100).toFixed(0)}%</span>
              </div>
              <div className="state-item">
                <label>Device:</label>
                <span>{playbackState.deviceId.slice(-8)}</span>
              </div>
              <div className="state-item">
                <label>Last Sync:</label>
                <span>{new Date(playbackState.timestamp).toLocaleTimeString()}</span>
              </div>
            </div>
          ) : (
            <div className="no-state">No playback state available</div>
          )}
        </div>
      </div>

      {/* Offline Capabilities */}
      <div className="demo-section">
        <h3>Offline Capabilities</h3>
        <div className="offline-info">
          <div className="offline-item">
            <label>Estimated Offline Time:</label>
            <span>{Math.floor(getEstimatedOfflineTime() / 60)} minutes</span>
          </div>
          <div className="offline-item">
            <label>Can Play Current Track Offline:</label>
            <span>{canPlayOffline(demoTrack.Id) ? '✅' : '❌'}</span>
          </div>
        </div>
      </div>

      {/* Connection Details */}
      <div className="demo-section">
        <h3>Connection Details</h3>
        <div className="connection-details">
          <div className="detail-item">
            <label>Online Status:</label>
            <span className={isOnline ? 'online' : 'offline'}>
              {isOnline ? '🌐 Online' : '📱 Offline'}
            </span>
          </div>
          <div className="detail-item">
            <label>Connection Quality:</label>
            <span className={`quality-${connectionQuality}`}>
              {connectionQuality.charAt(0).toUpperCase() + connectionQuality.slice(1)}
            </span>
          </div>
          <div className="detail-item">
            <label>Last Online:</label>
            <span>{new Date(connectionState.lastOnlineTime).toLocaleTimeString()}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default PlaybackContinuityDemo