import React, { useState, useEffect } from 'react';
import { useCarDashboardOptimizer } from '../hooks/useCarDashboardOptimizer';
import './CarDashboardOptimizer.css';

export const CarDashboardOptimizer: React.FC = () => {
  const {
    status,
    settings,
    isCarDashboard,
    isLoading,
    error,
    enableInstantStartup,
    startAggressiveCaching,
    initiateHandoffToPhone,
    updateSettings,
    getCacheStatistics
  } = useCarDashboardOptimizer();

  const [cacheStats, setCacheStats] = useState<any>(null);
  const [isEnablingStartup, setIsEnablingStartup] = useState(false);
  const [isStartingCaching, setIsStartingCaching] = useState(false);
  const [isInitiatingHandoff, setIsInitiatingHandoff] = useState(false);

  // Load cache statistics
  useEffect(() => {
    const loadStats = async () => {
      try {
        const stats = await getCacheStatistics();
        setCacheStats(stats);
      } catch (err) {
        console.error('Failed to load cache statistics:', err);
      }
    };

    if (!isLoading && !error) {
      loadStats();
      const interval = setInterval(loadStats, 5000);
      return () => clearInterval(interval);
    }
  }, [isLoading, error, getCacheStatistics]);

  const handleEnableInstantStartup = async () => {
    setIsEnablingStartup(true);
    try {
      await enableInstantStartup();
    } catch (err) {
      console.error('Failed to enable instant startup:', err);
    } finally {
      setIsEnablingStartup(false);
    }
  };

  const handleStartAggressiveCaching = async () => {
    setIsStartingCaching(true);
    try {
      await startAggressiveCaching();
    } catch (err) {
      console.error('Failed to start aggressive caching:', err);
    } finally {
      setIsStartingCaching(false);
    }
  };

  const handleInitiateHandoff = async () => {
    setIsInitiatingHandoff(true);
    try {
      await initiateHandoffToPhone();
    } catch (err) {
      console.error('Failed to initiate handoff:', err);
    } finally {
      setIsInitiatingHandoff(false);
    }
  };

  const handleSettingsChange = async (key: string, value: any) => {
    try {
      await updateSettings({ [key]: value });
    } catch (err) {
      console.error('Failed to update settings:', err);
    }
  };

  if (isLoading) {
    return (
      <div className="car-dashboard-optimizer loading">
        <div className="loading-spinner"></div>
        <p>Initializing car dashboard optimizer...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="car-dashboard-optimizer error">
        <h3>⚠️ Car Dashboard Optimizer Error</h3>
        <p>{error}</p>
      </div>
    );
  }

  if (!isCarDashboard) {
    return (
      <div className="car-dashboard-optimizer not-car">
        <h3>📱 Mobile/Desktop Mode</h3>
        <p>Car dashboard optimizations are not active on this device.</p>
        {status && (
          <div className="basic-status">
            <p>Cache Size: {Math.round((cacheStats?.cacheSize || 0) / (1024 * 1024))} MB</p>
            <p>Cached Songs: {cacheStats?.totalCachedSongs || 0}</p>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="car-dashboard-optimizer">
      <div className="optimizer-header">
        <h3>🚗 Car Dashboard Mode</h3>
        <div className="car-indicator">
          <span className="car-icon">🚗</span>
          <span>Optimized for Car Use</span>
        </div>
      </div>

      {/* Status Overview */}
      <div className="status-overview">
        <div className="status-grid">
          <div className={`status-item ${status?.instantStartupReady ? 'ready' : 'pending'}`}>
            <div className="status-icon">
              {status?.instantStartupReady ? '🚀' : '⏳'}
            </div>
            <div className="status-text">
              <h4>Instant Startup</h4>
              <p>{status?.instantStartupReady ? 'Ready' : 'Preparing...'}</p>
            </div>
          </div>

          <div className={`status-item ${status?.priorityCacheComplete ? 'ready' : 'pending'}`}>
            <div className="status-icon">
              {status?.priorityCacheComplete ? '💾' : '📥'}
            </div>
            <div className="status-text">
              <h4>Priority Cache</h4>
              <p>{status?.cachedSongCount || 0} / {settings?.prioritySongCount || 0} songs</p>
            </div>
          </div>

          <div className={`status-item ${status?.handoffInProgress ? 'active' : 'ready'}`}>
            <div className="status-icon">
              {status?.handoffInProgress ? '🔄' : '🤝'}
            </div>
            <div className="status-text">
              <h4>Device Handoff</h4>
              <p>{status?.handoffInProgress ? 'In Progress' : 'Ready'}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Cache Statistics */}
      {cacheStats && (
        <div className="cache-statistics">
          <h4>📊 Cache Statistics</h4>
          <div className="stats-grid">
            <div className="stat-item">
              <span className="stat-label">Total Songs:</span>
              <span className="stat-value">{cacheStats.totalCachedSongs.toLocaleString()}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Cache Size:</span>
              <span className="stat-value">
                {(cacheStats.cacheSize / (1024 * 1024 * 1024)).toFixed(1)} GB
              </span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Priority Songs:</span>
              <span className="stat-value">{cacheStats.prioritySongsCount.toLocaleString()}</span>
            </div>
            <div className="stat-item">
              <span className="stat-label">Storage Limit:</span>
              <span className="stat-value">
                {((settings?.maxCacheSize || 0) / (1024 * 1024 * 1024)).toFixed(0)} GB
              </span>
            </div>
          </div>
        </div>
      )}

      {/* Action Buttons */}
      <div className="action-buttons">
        <button
          className="action-button primary"
          onClick={handleEnableInstantStartup}
          disabled={isEnablingStartup || status?.instantStartupReady}
        >
          {isEnablingStartup ? '🔄 Enabling...' : status?.instantStartupReady ? '✅ Startup Ready' : '🚀 Enable Instant Startup'}
        </button>

        <button
          className="action-button secondary"
          onClick={handleStartAggressiveCaching}
          disabled={isStartingCaching || status?.priorityCacheComplete}
        >
          {isStartingCaching ? '🔄 Caching...' : status?.priorityCacheComplete ? '✅ Cache Complete' : '💾 Start Aggressive Caching'}
        </button>

        <button
          className="action-button tertiary"
          onClick={handleInitiateHandoff}
          disabled={isInitiatingHandoff}
        >
          {isInitiatingHandoff ? '🔄 Handing Off...' : '📱 Handoff to Phone'}
        </button>
      </div>

      {/* Settings */}
      <div className="optimizer-settings">
        <h4>⚙️ Car Dashboard Settings</h4>
        <div className="settings-grid">
          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={settings?.zeroBufferMode || false}
                onChange={(e) => handleSettingsChange('zeroBufferMode', e.target.checked)}
              />
              Zero Buffer Mode
            </label>
            <p className="setting-description">Eliminate all loading delays</p>
          </div>

          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={settings?.aggressiveAlbumCaching || false}
                onChange={(e) => handleSettingsChange('aggressiveAlbumCaching', e.target.checked)}
              />
              Aggressive Album Caching
            </label>
            <p className="setting-description">Cache complete albums when playing any track</p>
          </div>

          <div className="setting-item">
            <label>
              <input
                type="checkbox"
                checked={settings?.preloadEntireQueue || false}
                onChange={(e) => handleSettingsChange('preloadEntireQueue', e.target.checked)}
              />
              Preload Entire Queue
            </label>
            <p className="setting-description">Cache all songs in current queue</p>
          </div>

          <div className="setting-item">
            <label>
              Priority Song Count:
              <input
                type="range"
                min="1000"
                max="15000"
                step="1000"
                value={settings?.prioritySongCount || 5000}
                onChange={(e) => handleSettingsChange('prioritySongCount', parseInt(e.target.value))}
              />
              <span className="range-value">{(settings?.prioritySongCount || 5000).toLocaleString()}</span>
            </label>
            <p className="setting-description">Number of priority songs to cache</p>
          </div>

          <div className="setting-item">
            <label>
              Max Cache Size:
              <input
                type="range"
                min="10"
                max="100"
                step="5"
                value={((settings?.maxCacheSize || 0) / (1024 * 1024 * 1024))}
                onChange={(e) => handleSettingsChange('maxCacheSize', parseInt(e.target.value) * 1024 * 1024 * 1024)}
              />
              <span className="range-value">{((settings?.maxCacheSize || 0) / (1024 * 1024 * 1024)).toFixed(0)} GB</span>
            </label>
            <p className="setting-description">Maximum storage for car dashboard cache</p>
          </div>
        </div>
      </div>

      {/* Progress Indicators */}
      {(status?.handoffInProgress || isStartingCaching || isEnablingStartup) && (
        <div className="progress-section">
          <h4>🔄 Operations in Progress</h4>
          {status?.handoffInProgress && (
            <div className="progress-item">
              <span>Device handoff in progress...</span>
              <div className="progress-bar">
                <div className="progress-fill handoff"></div>
              </div>
            </div>
          )}
          {isStartingCaching && (
            <div className="progress-item">
              <span>Aggressive caching starting...</span>
              <div className="progress-bar">
                <div className="progress-fill caching"></div>
              </div>
            </div>
          )}
          {isEnablingStartup && (
            <div className="progress-item">
              <span>Enabling instant startup...</span>
              <div className="progress-bar">
                <div className="progress-fill startup"></div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};