import React, { useState } from 'react';
import { OfflineModeIndicator } from './OfflineModeIndicator';
import './OfflineModeDemo.css';

export const OfflineModeDemo: React.FC = () => {
  const [isSimulatingOffline, setIsSimulatingOffline] = useState(false);
  const [isSimulatingRefresh, setIsSimulatingRefresh] = useState(false);

  const simulateOfflineMode = () => {
    setIsSimulatingOffline(!isSimulatingOffline);
    
    // Override navigator.onLine temporarily
    Object.defineProperty(navigator, 'onLine', {
      writable: true,
      value: !isSimulatingOffline
    });
    
    // Dispatch online/offline events
    const event = new Event(isSimulatingOffline ? 'online' : 'offline');
    window.dispatchEvent(event);
  };

  const simulateCacheRefresh = async () => {
    if (isSimulatingRefresh) return;
    
    setIsSimulatingRefresh(true);
    
    // Simulate cache refresh start
    window.dispatchEvent(new CustomEvent('cache-refresh-start', {
      detail: { totalSongs: 50 }
    }));
    
    // Simulate progress updates
    for (let i = 0; i <= 50; i++) {
      await new Promise(resolve => setTimeout(resolve, 50));
      
      const progress = (i / 50) * 100;
      window.dispatchEvent(new CustomEvent('cache-refresh-progress', {
        detail: { progress, refreshedSongs: i }
      }));
    }
    
    // Simulate completion
    window.dispatchEvent(new CustomEvent('cache-refresh-complete'));
    
    setIsSimulatingRefresh(false);
  };

  const simulateShuffleToggle = () => {
    // Simulate shuffle toggle event that would normally come from PlaybackManager
    window.dispatchEvent(new CustomEvent('shuffle-toggled', {
      detail: {
        shuffleEnabled: true,
        currentTrack: { Id: 'demo-track', Name: 'Demo Song' },
        playlistLength: 50
      }
    }));
  };

  return (
    <div className="offline-mode-demo">
      <div className="demo-header">
        <h3>Offline Mode Indicator Demo</h3>
        <p>Test the offline mode indicator functionality with these controls:</p>
      </div>
      
      <div className="demo-controls">
        <button 
          className={`demo-button ${isSimulatingOffline ? 'active' : ''}`}
          onClick={simulateOfflineMode}
        >
          {isSimulatingOffline ? '📵 Go Online' : '📶 Go Offline'}
        </button>
        
        <button 
          className="demo-button"
          onClick={simulateCacheRefresh}
          disabled={isSimulatingRefresh}
        >
          {isSimulatingRefresh ? '🔄 Refreshing...' : '🔄 Simulate Cache Refresh'}
        </button>
        
        <button 
          className="demo-button"
          onClick={simulateShuffleToggle}
        >
          🔀 Simulate Shuffle Toggle
        </button>
      </div>
      
      <div className="demo-indicator">
        <h4>Full Indicator:</h4>
        <OfflineModeIndicator />
      </div>
      
      <div className="demo-indicator">
        <h4>Compact Indicator:</h4>
        <OfflineModeIndicator mode="compact" />
      </div>
      
      <div className="demo-indicator">
        <h4>Orb Indicator (Header Style):</h4>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <OfflineModeIndicator mode="orb" />
          <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
            Hover to see tooltip
          </span>
        </div>
      </div>
      
      <div className="demo-info">
        <h4>How it works:</h4>
        <ul>
          <li><strong>Connection Status:</strong> Shows online/offline state with connection quality</li>
          <li><strong>Cache Status:</strong> Displays number of cached songs and storage used</li>
          <li><strong>Cache Refresh:</strong> Triggered automatically when shuffle is toggled</li>
          <li><strong>Progress Indicator:</strong> Shows real-time progress during cache refresh</li>
          <li><strong>Offline Availability:</strong> Shows available songs when offline</li>
        </ul>
      </div>
    </div>
  );
};

export default OfflineModeDemo;