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

export const CarDashboardDemo: React.FC = () => {
  const { isCarDashboard, status, getCacheStatistics } = useCarDashboardOptimizer();
  const [showDemo, setShowDemo] = useState(false);
  const [demoStep, setDemoStep] = useState(0);
  const [handoffData, setHandoffData] = useState<any>(null);

  const demoSteps = [
    {
      title: "🚗 Car Dashboard Detection",
      description: "Automatically detects when running on car dashboard (iPad Pro in landscape)",
      action: "Device detection active"
    },
    {
      title: "🚀 Instant Startup Mode",
      description: "Pre-caches essential data for zero loading screens",
      action: "Enable instant startup"
    },
    {
      title: "💾 Aggressive Caching",
      description: "Caches 5000-10000 priority songs for offline playback",
      action: "Start aggressive caching"
    },
    {
      title: "🤝 Seamless Handoff",
      description: "Continues playback exactly where you left off on phone",
      action: "Simulate handoff from phone"
    }
  ];

  // Simulate handoff from phone
  const simulatePhoneHandoff = () => {
    const mockHandoffData = {
      currentTrack: "mock-track-id-123",
      playbackPosition: 45.7, // 45.7 seconds
      queue: [
        { Id: "track-1", Name: "Song 1", Artists: [{ Name: "Artist 1" }] },
        { Id: "track-2", Name: "Song 2", Artists: [{ Name: "Artist 2" }] },
        { Id: "track-3", Name: "Song 3", Artists: [{ Name: "Artist 3" }] }
      ],
      timestamp: Date.now(),
      deviceType: "iPhone 15 Pro"
    };

    setHandoffData(mockHandoffData);

    // Simulate handoff event
    document.dispatchEvent(new CustomEvent('carHandoffReady', {
      detail: mockHandoffData
    }));
  };

  // Listen for handoff events
  useEffect(() => {
    const handleHandoffReady = (event: CustomEvent) => {
      setHandoffData(event.detail);
    };

    document.addEventListener('carHandoffReady', handleHandoffReady as EventListener);
    return () => {
      document.removeEventListener('carHandoffReady', handleHandoffReady as EventListener);
    };
  }, []);

  const nextStep = () => {
    if (demoStep < demoSteps.length - 1) {
      setDemoStep(demoStep + 1);
    }
  };

  const prevStep = () => {
    if (demoStep > 0) {
      setDemoStep(demoStep - 1);
    }
  };

  const resetDemo = () => {
    setDemoStep(0);
    setHandoffData(null);
  };

  return (
    <div className="car-dashboard-demo">
      <div className="demo-header">
        <h2>🚗 Car Dashboard Optimization Demo</h2>
        <p>Experience the advanced car dashboard features designed for seamless in-vehicle music playback</p>
        
        <div className="demo-controls">
          <button 
            className={`demo-toggle ${showDemo ? 'active' : ''}`}
            onClick={() => setShowDemo(!showDemo)}
          >
            {showDemo ? '📱 Hide Demo' : '🚗 Show Car Dashboard Demo'}
          </button>
        </div>
      </div>

      {showDemo && (
        <div className="demo-content">
          {/* Demo Steps Navigation */}
          <div className="demo-steps">
            <div className="steps-header">
              <h3>Demo Steps ({demoStep + 1}/{demoSteps.length})</h3>
              <div className="step-controls">
                <button onClick={prevStep} disabled={demoStep === 0}>
                  ← Previous
                </button>
                <button onClick={nextStep} disabled={demoStep === demoSteps.length - 1}>
                  Next →
                </button>
                <button onClick={resetDemo} className="reset">
                  🔄 Reset
                </button>
              </div>
            </div>

            <div className="step-progress">
              {demoSteps.map((_, index) => (
                <div 
                  key={index}
                  className={`step-indicator ${index <= demoStep ? 'completed' : ''} ${index === demoStep ? 'active' : ''}`}
                  onClick={() => setDemoStep(index)}
                >
                  {index + 1}
                </div>
              ))}
            </div>

            <div className="current-step">
              <h4>{demoSteps[demoStep].title}</h4>
              <p>{demoSteps[demoStep].description}</p>
              
              {demoStep === 3 && (
                <button 
                  className="demo-action-button"
                  onClick={simulatePhoneHandoff}
                >
                  📱➡️🚗 {demoSteps[demoStep].action}
                </button>
              )}
            </div>
          </div>

          {/* Handoff Simulation */}
          {handoffData && (
            <div className="handoff-simulation">
              <h4>🤝 Handoff Received from {handoffData.deviceType}</h4>
              <div className="handoff-details">
                <div className="handoff-item">
                  <span className="label">Current Track:</span>
                  <span className="value">{handoffData.currentTrack}</span>
                </div>
                <div className="handoff-item">
                  <span className="label">Position:</span>
                  <span className="value">{handoffData.playbackPosition}s</span>
                </div>
                <div className="handoff-item">
                  <span className="label">Queue Length:</span>
                  <span className="value">{handoffData.queue.length} songs</span>
                </div>
                <div className="handoff-item">
                  <span className="label">Timestamp:</span>
                  <span className="value">{new Date(handoffData.timestamp).toLocaleTimeString()}</span>
                </div>
              </div>
              
              <div className="queue-preview">
                <h5>📋 Queue Preview:</h5>
                <ul>
                  {handoffData.queue.slice(0, 3).map((track: any, index: number) => (
                    <li key={track.Id}>
                      {index + 1}. {track.Name} - {track.Artists[0]?.Name}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}

          {/* Feature Highlights */}
          <div className="feature-highlights">
            <h4>🌟 Key Features</h4>
            <div className="features-grid">
              <div className="feature-card">
                <div className="feature-icon">🚀</div>
                <h5>Zero Loading Screens</h5>
                <p>Instant startup with pre-cached essential data</p>
              </div>
              
              <div className="feature-card">
                <div className="feature-icon">💾</div>
                <h5>Massive Offline Library</h5>
                <p>Up to 50GB cache with 10,000+ songs</p>
              </div>
              
              <div className="feature-card">
                <div className="feature-icon">🤝</div>
                <h5>Seamless Handoff</h5>
                <p>Continue exactly where you left off</p>
              </div>
              
              <div className="feature-card">
                <div className="feature-icon">🧠</div>
                <h5>Intelligent Caching</h5>
                <p>Learns your patterns and pre-caches favorites</p>
              </div>
              
              <div className="feature-card">
                <div className="feature-icon">🔄</div>
                <h5>Cross-Device Sync</h5>
                <p>Real-time sync across all your devices</p>
              </div>
              
              <div className="feature-card">
                <div className="feature-icon">⚡</div>
                <h5>Performance Optimized</h5>
                <p>Designed specifically for car dashboard use</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Main Car Dashboard Optimizer Component */}
      <div className="optimizer-container">
        <CarDashboardOptimizer />
      </div>

      {/* Usage Instructions */}
      <div className="usage-instructions">
        <h4>📖 How to Use Car Dashboard Mode</h4>
        <div className="instructions-grid">
          <div className="instruction-step">
            <div className="step-number">1</div>
            <div className="step-content">
              <h5>Connect iPad to Car</h5>
              <p>Connect your iPad Pro to your car's display system via CarPlay or direct connection</p>
            </div>
          </div>
          
          <div className="instruction-step">
            <div className="step-number">2</div>
            <div className="step-content">
              <h5>Automatic Detection</h5>
              <p>The app automatically detects car dashboard mode and enables optimizations</p>
            </div>
          </div>
          
          <div className="instruction-step">
            <div className="step-number">3</div>
            <div className="step-content">
              <h5>Enable Features</h5>
              <p>Use the buttons above to enable instant startup and aggressive caching</p>
            </div>
          </div>
          
          <div className="instruction-step">
            <div className="step-number">4</div>
            <div className="step-content">
              <h5>Seamless Handoff</h5>
              <p>Start playing on your phone, then seamlessly continue on the car dashboard</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};