import React, { useState, useEffect } from 'react';
import { usePredictiveCaching } from '../hooks/usePredictiveCaching';
import { MediaItem } from '../types/mediaTypes';
import './PredictiveCachingDemo.css';

interface PredictiveCachingDemoProps {
  className?: string;
}

const PredictiveCachingDemo: React.FC<PredictiveCachingDemoProps> = ({ className }) => {
  const {
    state,
    recordListeningEvent,
    getPredictions,
    refreshPredictions,
    clearAllData
  } = usePredictiveCaching();

  const [currentSong, setCurrentSong] = useState<MediaItem | null>(null);
  const [simulationRunning, setSimulationRunning] = useState(false);
  const [predictions, setPredictions] = useState(state.predictions);

  // Mock songs for demonstration
  const mockSongs: MediaItem[] = [
    { id: 'song1', title: 'Morning Vibes', artist: 'Chill Artist', albumId: 'album1', artistId: 'artist1', duration: 180, type: 'song' },
    { id: 'song2', title: 'Afternoon Energy', artist: 'Pop Artist', albumId: 'album2', artistId: 'artist2', duration: 200, type: 'song' },
    { id: 'song3', title: 'Evening Relaxation', artist: 'Ambient Artist', albumId: 'album3', artistId: 'artist3', duration: 240, type: 'song' },
    { id: 'song4', title: 'Night Beats', artist: 'Electronic Artist', albumId: 'album4', artistId: 'artist4', duration: 190, type: 'song' },
    { id: 'song5', title: 'Workout Pump', artist: 'Rock Artist', albumId: 'album1', artistId: 'artist1', duration: 160, type: 'song' },
    { id: 'song6', title: 'Study Focus', artist: 'Instrumental Artist', albumId: 'album5', artistId: 'artist5', duration: 300, type: 'song' },
    { id: 'song7', title: 'Party Time', artist: 'Dance Artist', albumId: 'album6', artistId: 'artist6', duration: 180, type: 'song' },
    { id: 'song8', title: 'Commute Companion', artist: 'Podcast Artist', albumId: 'album7', artistId: 'artist7', duration: 220, type: 'song' }
  ];

  useEffect(() => {
    setPredictions(getPredictions(currentSong, mockSongs));
  }, [state.analytics, currentSong, getPredictions]);

  const simulateListening = (song: MediaItem, completed: boolean = true) => {
    const duration = completed ? song.duration : Math.random() * song.duration * 0.5;
    const context = ['playlist', 'album', 'shuffle', 'search'][Math.floor(Math.random() * 4)] as any;
    
    recordListeningEvent(
      song.id,
      duration,
      song.duration,
      !completed,
      context,
      song.albumId,
      song.artistId
    );

    setCurrentSong(song);
  };

  const runSimulation = async () => {
    setSimulationRunning(true);
    
    // Simulate different listening patterns
    const patterns = [
      // Morning routine (7-9 AM)
      { songs: ['song1', 'song6'], time: 8, completionRate: 0.9 },
      // Commute (8-9 AM, 5-6 PM)
      { songs: ['song8', 'song2'], time: 8.5, completionRate: 0.7 },
      // Work focus (9 AM - 5 PM)
      { songs: ['song6', 'song3'], time: 11, completionRate: 0.8 },
      // Workout (6-7 PM)
      { songs: ['song5', 'song7'], time: 18, completionRate: 0.95 },
      // Evening relaxation (8-10 PM)
      { songs: ['song3', 'song4'], time: 20, completionRate: 0.85 },
      // Weekend party (Friday/Saturday night)
      { songs: ['song7', 'song4', 'song2'], time: 22, completionRate: 0.9 }
    ];

    for (let day = 0; day < 7; day++) {
      for (const pattern of patterns) {
        for (const songId of pattern.songs) {
          const song = mockSongs.find(s => s.id === songId);
          if (song) {
            const completed = Math.random() < pattern.completionRate;
            simulateListening(song, completed);
            
            // Small delay to show progression
            await new Promise(resolve => setTimeout(resolve, 100));
          }
        }
      }
    }

    setSimulationRunning(false);
    refreshPredictions();
  };

  const getReasonColor = (reason: string) => {
    switch (reason) {
      case 'pattern': return '#4CAF50';
      case 'album': return '#2196F3';
      case 'artist': return '#FF9800';
      case 'time': return '#9C27B0';
      case 'hybrid': return '#607D8B';
      default: return '#757575';
    }
  };

  const getTimeSlotName = () => {
    const hour = new Date().getHours();
    if (hour >= 6 && hour < 12) return 'Morning';
    if (hour >= 12 && hour < 17) return 'Afternoon';
    if (hour >= 17 && hour < 22) return 'Evening';
    return 'Night';
  };

  return (
    <div className={`predictive-caching-demo ${className || ''}`}>
      <div className="demo-header">
        <h2>🧠 Predictive Caching System</h2>
        <p>AI-powered music caching based on listening patterns</p>
      </div>

      <div className="demo-controls">
        <button 
          onClick={runSimulation} 
          disabled={simulationRunning}
          className="simulation-btn"
        >
          {simulationRunning ? '🔄 Running Simulation...' : '🎯 Run Learning Simulation'}
        </button>
        
        <button onClick={refreshPredictions} className="refresh-btn">
          🔄 Refresh Predictions
        </button>
        
        <button onClick={clearAllData} className="clear-btn">
          🗑️ Clear All Data
        </button>
      </div>

      <div className="demo-stats">
        <div className="stat-card">
          <h3>📊 Analytics</h3>
          <div className="stat-grid">
            <div className="stat-item">
              <span className="stat-label">Listening Patterns:</span>
              <span className="stat-value">{state.analytics.totalPatterns}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Album Predictions:</span>
              <span className="stat-value">{state.analytics.albumPredictions}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Artist Predictions:</span>
              <span className="stat-value">{state.analytics.artistPredictions}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Time Predictions:</span>
              <span className="stat-value">{state.analytics.timeSlotPredictions}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Avg Confidence:</span>
              <span className="stat-value">{(state.analytics.averageConfidence * 100).toFixed(1)}%</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Current Time Slot:</span>
              <span className="stat-value">{getTimeSlotName()}</span>
            </div>
          </div>
        </div>
      </div>

      <div className="demo-sections">
        <div className="section">
          <h3>🎵 Mock Songs (Click to Simulate Listening)</h3>
          <div className="songs-grid">
            {mockSongs.map(song => (
              <div 
                key={song.id} 
                className={`song-card ${currentSong?.id === song.id ? 'current' : ''}`}
                onClick={() => simulateListening(song)}
              >
                <div className="song-title">{song.title}</div>
                <div className="song-artist">{song.artist}</div>
                <div className="song-duration">{Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="section">
          <h3>🔮 Predictive Cache Recommendations ({predictions.length})</h3>
          {predictions.length === 0 ? (
            <div className="no-predictions">
              <p>No predictions yet. Try the simulation or manually play some songs!</p>
            </div>
          ) : (
            <div className="predictions-list">
              {predictions.slice(0, 10).map((prediction, index) => {
                const song = mockSongs.find(s => s.id === prediction.songId);
                return (
                  <div key={prediction.songId} className="prediction-card">
                    <div className="prediction-rank">#{index + 1}</div>
                    <div className="prediction-info">
                      <div className="prediction-song">
                        {song ? song.title : `Song ${prediction.songId}`}
                      </div>
                      <div className="prediction-details">
                        <span 
                          className="prediction-reason"
                          style={{ backgroundColor: getReasonColor(prediction.reason) }}
                        >
                          {prediction.reason}
                        </span>
                        <span className="prediction-priority">
                          Priority: {prediction.priority}
                        </span>
                        <span className="prediction-confidence">
                          Confidence: {(prediction.confidence * 100).toFixed(1)}%
                        </span>
                      </div>
                    </div>
                    <div className="prediction-eta">
                      {prediction.estimatedPlayTime > Date.now() 
                        ? `ETA: ${Math.round((prediction.estimatedPlayTime - Date.now()) / 60000)}m`
                        : 'Ready now'
                      }
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="section">
          <h3>📈 Algorithm Insights</h3>
          <div className="insights-grid">
            <div className="insight-card">
              <h4>🎯 Pattern Analysis</h4>
              <p>Tracks play frequency, completion rates, and skip patterns to predict future listening behavior.</p>
            </div>
            <div className="insight-card">
              <h4>💿 Album Completion</h4>
              <p>Predicts when you'll listen to remaining songs in an album based on current listening patterns.</p>
            </div>
            <div className="insight-card">
              <h4>🎤 Artist Exploration</h4>
              <p>Suggests similar artists and songs when you show interest in a particular artist.</p>
            </div>
            <div className="insight-card">
              <h4>⏰ Time-Based Caching</h4>
              <p>Learns your daily music preferences and pre-caches songs for different time periods.</p>
            </div>
          </div>
        </div>
      </div>

      {state.isAnalyzing && (
        <div className="analyzing-overlay">
          <div className="analyzing-spinner">🧠</div>
          <p>Analyzing listening patterns...</p>
        </div>
      )}
    </div>
  );
};

export default PredictiveCachingDemo;