/**
 * Demo component showing massive library system integration
 * This demonstrates how to use the system in a React component
 */

import React, { useState, useEffect } from 'react';
import { massiveLibraryService, validateMassiveLibrarySystem } from '../services';
import type { MassiveLibraryStatus, DeviceInfo } from '../services';

interface MassiveLibraryDemoProps {
  className?: string;
}

const MassiveLibraryDemo: React.FC<MassiveLibraryDemoProps> = ({ className }) => {
  const [isInitialized, setIsInitialized] = useState(false);
  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo | null>(null);
  const [libraryStatus, setLibraryStatus] = useState<MassiveLibraryStatus | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [validationResults, setValidationResults] = useState<any>(null);

  useEffect(() => {
    initializeLibrary();
  }, []);

  const initializeLibrary = async () => {
    setIsLoading(true);
    try {
      const result = await massiveLibraryService.initialize({
        enableCompression: true,
        enableSharding: true,
        enableCarOptimization: true,
        maxStorageUsage: 80,
        compressionStrategy: 'balanced'
      });

      if (result.success) {
        setIsInitialized(true);
        setDeviceInfo(result.deviceInfo);
        
        // Get initial library status
        const status = await massiveLibraryService.getLibraryStatus();
        setLibraryStatus(status);
      }
    } catch (error) {
      console.error('Failed to initialize massive library:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const runValidation = async () => {
    setIsLoading(true);
    try {
      const results = await validateMassiveLibrarySystem();
      setValidationResults(results);
    } catch (error) {
      console.error('Validation failed:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const simulateCaching = async () => {
    if (!isInitialized) return;

    setIsLoading(true);
    try {
      // Simulate caching a few songs
      const mockSongs = [
        { id: 'song1', title: 'Car Priority Song', cacheReason: 'car-priority' as const },
        { id: 'song2', title: 'Favorite Song', cacheReason: 'favorite' as const },
        { id: 'song3', title: 'Discovery Song', cacheReason: 'discovery' as const }
      ];

      for (const song of mockSongs) {
        const mockBlob = new Blob([`Mock audio data for ${song.title}`], { type: 'audio/mpeg' });
        const metadata = {
          title: song.title,
          artist: 'Demo Artist',
          album: 'Demo Album',
          duration: 180,
          quality: 'high' as const,
          originalSize: mockBlob.size
        };

        await massiveLibraryService.cacheSong(song.id, mockBlob, metadata, song.cacheReason);
      }

      // Refresh library status
      const status = await massiveLibraryService.getLibraryStatus();
      setLibraryStatus(status);
    } catch (error) {
      console.error('Caching simulation failed:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const formatBytes = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <div className={`massive-library-demo ${className || ''}`}>
      <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', margin: '20px' }}>
        <h2>🚀 Massive Library System Demo</h2>
        
        {/* Initialization Status */}
        <div style={{ marginBottom: '20px' }}>
          <h3>Initialization Status</h3>
          <p>Status: {isInitialized ? '✅ Initialized' : '❌ Not Initialized'}</p>
          {isLoading && <p>⏳ Loading...</p>}
        </div>

        {/* Device Information */}
        {deviceInfo && (
          <div style={{ marginBottom: '20px' }}>
            <h3>Device Information</h3>
            <ul>
              <li><strong>Type:</strong> {deviceInfo.type}</li>
              <li><strong>Model:</strong> {deviceInfo.model}</li>
              <li><strong>OS:</strong> {deviceInfo.os}</li>
              <li><strong>Browser:</strong> {deviceInfo.browser}</li>
              <li><strong>High-End:</strong> {deviceInfo.isHighEnd ? 'Yes' : 'No'}</li>
              <li><strong>Cache Strategy:</strong> {deviceInfo.cacheStrategy}</li>
              <li><strong>Max Storage:</strong> {formatBytes(deviceInfo.capabilities.maxStorage)}</li>
              <li><strong>Compression Support:</strong> {deviceInfo.capabilities.compressionSupport ? 'Yes' : 'No'}</li>
              <li><strong>Background Processing:</strong> {deviceInfo.capabilities.backgroundProcessing ? 'Yes' : 'No'}</li>
            </ul>
          </div>
        )}

        {/* Library Status */}
        {libraryStatus && (
          <div style={{ marginBottom: '20px' }}>
            <h3>Library Status</h3>
            <ul>
              <li><strong>Total Size:</strong> {formatBytes(libraryStatus.totalSize)}</li>
              <li><strong>Song Count:</strong> {libraryStatus.songCount}</li>
              <li><strong>Cache Strategy:</strong> {libraryStatus.cacheStrategy}</li>
              <li><strong>Available Space:</strong> {formatBytes(libraryStatus.availableSpace)}</li>
              <li><strong>Compression Ratio:</strong> {(libraryStatus.compressionRatio * 100).toFixed(1)}%</li>
              {libraryStatus.shards && (
                <li><strong>Shards:</strong> {libraryStatus.shards.length} active</li>
              )}
            </ul>
          </div>
        )}

        {/* Action Buttons */}
        <div style={{ marginBottom: '20px' }}>
          <button 
            onClick={runValidation}
            disabled={isLoading}
            style={{ marginRight: '10px', padding: '10px 20px' }}
          >
            🔍 Run Validation Tests
          </button>
          
          <button 
            onClick={simulateCaching}
            disabled={isLoading || !isInitialized}
            style={{ marginRight: '10px', padding: '10px 20px' }}
          >
            🎵 Simulate Song Caching
          </button>
          
          <button 
            onClick={initializeLibrary}
            disabled={isLoading}
            style={{ padding: '10px 20px' }}
          >
            🔄 Reinitialize
          </button>
        </div>

        {/* Validation Results */}
        {validationResults && (
          <div style={{ marginBottom: '20px' }}>
            <h3>Validation Results</h3>
            <p><strong>Overall Success:</strong> {validationResults.success ? '✅ Pass' : '❌ Fail'}</p>
            <ul>
              {validationResults.results.map((result: any, index: number) => (
                <li key={index}>
                  <strong>{result.test}:</strong> {result.passed ? '✅ Pass' : '❌ Fail'}
                  {result.error && <span style={{ color: 'red' }}> - {result.error}</span>}
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Car Dashboard Optimization Status */}
        {isInitialized && (
          <div style={{ marginBottom: '20px' }}>
            <h3>Car Dashboard Optimization</h3>
            <p>
              <strong>Status:</strong> {massiveLibraryService.isCarDashboardOptimized() ? '🚗 Enabled' : '📱 Standard Mode'}
            </p>
            {deviceInfo?.type === 'car-dashboard' && (
              <p style={{ color: 'green' }}>
                🎉 Car dashboard detected! Aggressive caching and instant startup enabled.
              </p>
            )}
          </div>
        )}

        {/* Usage Instructions */}
        <div style={{ backgroundColor: '#f5f5f5', padding: '15px', borderRadius: '5px' }}>
          <h4>Usage Instructions:</h4>
          <ol>
            <li>The system automatically detects your device type and optimizes accordingly</li>
            <li>iPad Pro devices are detected as car dashboards with aggressive caching</li>
            <li>Click "Run Validation Tests" to verify all components are working</li>
            <li>Click "Simulate Song Caching" to test the caching pipeline</li>
            <li>Check the browser console for detailed logs</li>
          </ol>
        </div>
      </div>
    </div>
  );
};

export default MassiveLibraryDemo;