import React from 'react';
import { useCacheManagement } from '../hooks/useCacheManagement';
import './CacheManagementUI.css';

export const CacheManagementUI: React.FC = () => {
  const { 
    status, 
    isLoading, 
    error, 
    isClearing, 
    clearCache, 
    refreshStatus, 
    formatBytes 
  } = useCacheManagement();

  if (isLoading) {
    return (
      <div className="cache-management">
        <div className="cache-loading">
          <div className="loading-spinner"></div>
          <span>Loading cache information...</span>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="cache-management">
        <div className="cache-error">
          <div className="error-icon">⚠️</div>
          <div className="error-message">
            <strong>Cache Error:</strong> {error}
          </div>
          <button className="btn retry" onClick={refreshStatus}>
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!status) {
    return (
      <div className="cache-management">
        <div className="cache-unavailable">
          Cache information unavailable
        </div>
      </div>
    );
  }

  const storagePercentage = status.deviceType.capabilities.maxStorage > 0 
    ? (status.totalSize / status.deviceType.capabilities.maxStorage) * 100 
    : 0;

  return (
    <div className="cache-management">
      <div className="cache-overview">
        <div className="cache-stats">
          <div className="stat-item">
            <div className="stat-label">Cached Songs</div>
            <div className="stat-value">{status.songCount.toLocaleString()}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">Storage Used</div>
            <div className="stat-value">{formatBytes(status.totalSize)}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">Available Space</div>
            <div className="stat-value">{formatBytes(status.availableSpace)}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">Device Type</div>
            <div className="stat-value device-type">
              {status.deviceType.type.replace('-', ' ')}
              {status.deviceType.model && (
                <span className="device-model">({status.deviceType.model})</span>
              )}
            </div>
          </div>
        </div>

        <div className="storage-bar">
          <div className="storage-bar-track">
            <div 
              className="storage-bar-fill" 
              style={{ width: `${Math.min(storagePercentage, 100)}%` }}
            ></div>
          </div>
          <div className="storage-bar-labels">
            <span>0</span>
            <span>{formatBytes(status.deviceType.capabilities.maxStorage)}</span>
          </div>
        </div>
      </div>

      <div className="cache-details">
        <div className="detail-section">
          <div className="detail-title">Cache Strategy</div>
          <div className="detail-value strategy-badge">
            {status.cacheStrategy}
          </div>
        </div>

        <div className="detail-section">
          <div className="detail-title">Compression Ratio</div>
          <div className="detail-value">
            {(status.compressionRatio * 100).toFixed(1)}%
            <span className="compression-note">
              (Space saved: {((1 - status.compressionRatio) * 100).toFixed(1)}%)
            </span>
          </div>
        </div>

        <div className="detail-section">
          <div className="detail-title">Storage Shards</div>
          <div className="detail-value">
            {status.shards.length} shard{status.shards.length !== 1 ? 's' : ''}
          </div>
        </div>

        {status.shards.length > 0 && (
          <div className="shards-list">
            {status.shards.slice(0, 3).map((shard, index) => (
              <div key={shard.id} className="shard-item">
                <div className="shard-info">
                  <span className="shard-name">Shard {index + 1}</span>
                  <span className="shard-stats">
                    {shard.songCount} songs • {formatBytes(shard.size)}
                  </span>
                </div>
              </div>
            ))}
            {status.shards.length > 3 && (
              <div className="shard-item more-shards">
                +{status.shards.length - 3} more shard{status.shards.length - 3 !== 1 ? 's' : ''}
              </div>
            )}
          </div>
        )}
      </div>

      <div className="cache-actions">
        <button 
          className="btn refresh" 
          onClick={refreshStatus}
          disabled={isLoading}
        >
          Refresh Status
        </button>
        
        {status.songCount > 0 && (
          <button 
            className="btn clear-cache" 
            onClick={clearCache}
            disabled={isClearing}
          >
            {isClearing ? 'Clearing Cache...' : 'Clear All Cache'}
          </button>
        )}
      </div>

      {status.songCount === 0 && (
        <div className="empty-cache-message">
          <div className="empty-icon">📱</div>
          <div className="empty-text">
            <strong>No cached songs</strong>
            <p>Start playing music to automatically cache songs for offline playback.</p>
          </div>
        </div>
      )}
    </div>
  );
};