/**
 * Demo component for shuffle-triggered cache refresh functionality
 * Shows how the cache refresh works when shuffle is toggled
 */

import React, { useState } from 'react';
import { useShuffleCacheRefresh } from '../hooks/useShuffleCacheRefresh';
import { OfflineModeIndicator } from './OfflineModeIndicator';
import './ShuffleCacheRefreshDemo.css';

export const ShuffleCacheRefreshDemo: React.FC = () => {
  const { refreshState, triggerManualRefresh, isRefreshing, clearError } = useShuffleCacheRefresh();
  const [shuffleEnabled, setShuffleEnabled] = useState(false);

  const handleShuffleToggle = async () => {
    const newShuffleState = !shuffleEnabled;
    setShuffleEnabled(newShuffleState);
    
    // Simulate the shuffle toggle event that would normally come from PlaybackManager
    window.dispatchEvent(new CustomEvent('shuffle-toggled', {
      detail: {
        shuffleEnabled: newShuffleState,
        currentTrack: {
          Id: 'demo-track-123',
          Name: 'Demo Song',
          Artists: ['Demo Artist'],
          Album: 'Demo Album'
        },
        playlistLength: 150
      }
    }));
  };

  const handleManualRefresh = async () => {
    await triggerManualRefresh(shuffleEnabled);
  };

  return (
    <div className="shuffle-cache-refresh-demo">
      <div className="demo-header">
        <h2>🔀 Shuffle Cache Refresh Demo</h2>
        <p>This demo shows how the cache refreshes when shuffle is toggled</p>
      </div>

      {/* Shuffle Control */}
      <div className="shuffle-control">
        <button 
          className={`shuffle-button ${shuffleEnabled ? 'enabled' : 'disabled'}`}
          onClick={handleShuffleToggle}
          disabled={isRefreshing}
        >
          <span className="shuffle-icon">🔀</span>
          <span className="shuffle-text">
            Shuffle: {shuffleEnabled ? 'ON' : 'OFF'}
          </span>
        </button>
        
        <button 
          className="manual-refresh-button"
          onClick={handleManualRefresh}
          disabled={isRefreshing}
        >
          <span className="refresh-icon">🔄</span>
          <span className="refresh-text">Manual Refresh</span>
        </button>
      </div>

      {/* Cache Refresh Status */}
      <div className="cache-refresh-status">
        <h3>Cache Refresh Status</h3>
        
        {refreshState.error && (
          <div className="error-message">
            <span className="error-icon">❌</span>
            <span className="error-text">{refreshState.error}</span>
            <button className="clear-error-button" onClick={clearError}>
              Clear
            </button>
          </div>
        )}

        {refreshState.isRefreshing && (
          <div className="refresh-progress">
            <div className="progress-header">
              <span className="progress-icon">🔄</span>
              <span className="progress-title">Refreshing Cache...</span>
            </div>
            
            <div className="progress-bar">
              <div 
                className="progress-fill"
                style={{ width: `${refreshState.progress}%` }}
              />
            </div>
            
            <div className="progress-details">
              <span className="progress-text">
                {refreshState.refreshedSongs} / {refreshState.totalSongs} songs
              </span>
              <span className="progress-percentage">
                {Math.round(refreshState.progress)}%
              </span>
            </div>
            
            {refreshState.status && (
              <div className="progress-status">
                {refreshState.status}
              </div>
            )}
          </div>
        )}

        {!refreshState.isRefreshing && refreshState.progress === 100 && (
          <div className="refresh-complete">
            <span className="complete-icon">✅</span>
            <span className="complete-text">Cache refreshed successfully!</span>
          </div>
        )}

        {!refreshState.isRefreshing && !refreshState.error && refreshState.progress === 0 && (
          <div className="refresh-idle">
            <span className="idle-icon">💾</span>
            <span className="idle-text">Cache is ready. Toggle shuffle to refresh.</span>
          </div>
        )}
      </div>

      {/* Offline Mode Indicator */}
      <div className="offline-indicator-section">
        <h3>Offline Mode Indicator</h3>
        <OfflineModeIndicator />
      </div>

      {/* Feature Description */}
      <div className="feature-description">
        <h3>How It Works</h3>
        <ul>
          <li><strong>Shuffle Toggle:</strong> When you toggle shuffle, the cache is automatically refreshed</li>
          <li><strong>Queue Reordering:</strong> Shuffle ON = random order, Shuffle OFF = sequential order</li>
          <li><strong>Progress Tracking:</strong> Real-time progress updates during cache refresh</li>
          <li><strong>Error Handling:</strong> Graceful error handling with retry capabilities</li>
          <li><strong>Visual Feedback:</strong> Clear indicators for all cache states</li>
        </ul>
      </div>

      {/* Requirements Mapping */}
      <div className="requirements-mapping">
        <h3>Requirements Implemented</h3>
        <ul>
          <li><strong>3.1:</strong> Cache clears and rebuilds when shuffle is toggled</li>
          <li><strong>3.2:</strong> Shuffle ON creates randomly ordered cache</li>
          <li><strong>3.3:</strong> Shuffle OFF creates sequential cache</li>
          <li><strong>5.4:</strong> Progress and completion feedback is shown</li>
        </ul>
      </div>
    </div>
  );
};

export default ShuffleCacheRefreshDemo;