import React, { useState } from 'react'
import { useBackgroundDownloadManager } from '../hooks/useBackgroundDownloadManager'
import './BackgroundDownloadManager.css'

interface BackgroundDownloadManagerProps {
  className?: string
}

const BackgroundDownloadManager: React.FC<BackgroundDownloadManagerProps> = ({ 
  className = '' 
}) => {
  const {
    stats,
    settings,
    queue,
    isInitialized,
    updateSettings,
    isDownloading,
    canDownload,
    isOnWifiOnly,
    dailyLimitReached
  } = useBackgroundDownloadManager()

  const [showSettings, setShowSettings] = useState(false)
  const [showQueue, setShowQueue] = useState(false)

  if (!isInitialized) {
    return (
      <div className={`background-download-manager loading ${className}`}>
        <div className="loading-spinner">
          <div className="spinner"></div>
          <span>Initializing Download Manager...</span>
        </div>
      </div>
    )
  }

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

  const formatTime = (minutes: number): string => {
    if (minutes < 60) return `${Math.round(minutes)}m`
    const hours = Math.floor(minutes / 60)
    const mins = Math.round(minutes % 60)
    return `${hours}h ${mins}m`
  }

  const getStatusColor = (): string => {
    if (!canDownload) return 'error'
    if (isDownloading) return 'downloading'
    if (queue.length > 0) return 'queued'
    return 'idle'
  }

  const getStatusText = (): string => {
    if (!navigator.onLine) return 'Offline'
    if (dailyLimitReached) return 'Daily limit reached'
    if (isOnWifiOnly && !canDownload) return 'Waiting for WiFi'
    if (isDownloading) return 'Downloading...'
    if (queue.length > 0) return `${queue.length} queued`
    return 'Ready'
  }

  return (
    <div className={`background-download-manager ${className}`}>
      {/* Status Header */}
      <div className="download-status-header">
        <div className="status-indicator">
          <div className={`status-dot ${getStatusColor()}`}></div>
          <span className="status-text">{getStatusText()}</span>
        </div>
        
        <div className="download-stats">
          <span className="stat">
            {stats.completedJobs}/{stats.totalJobs} songs
          </span>
          <span className="stat">
            {formatBytes(stats.totalDownloaded)}
          </span>
          {isDownloading && stats.estimatedTimeRemaining > 0 && (
            <span className="stat">
              {formatTime(stats.estimatedTimeRemaining)} left
            </span>
          )}
        </div>
      </div>

      {/* Progress Bar */}
      {isDownloading && (
        <div className="download-progress">
          <div className="progress-bar">
            <div 
              className="progress-fill"
              style={{ 
                width: `${(stats.completedJobs / stats.totalJobs) * 100}%` 
              }}
            ></div>
          </div>
          <div className="progress-details">
            <span>
              {formatBytes(stats.downloadSpeed)}/s
            </span>
            <span>
              {Math.round((stats.completedJobs / stats.totalJobs) * 100)}%
            </span>
          </div>
        </div>
      )}

      {/* Data Usage Indicator */}
      <div className="data-usage">
        <div className="usage-bar">
          <div 
            className={`usage-fill ${dailyLimitReached ? 'limit-reached' : ''}`}
            style={{ 
              width: `${Math.min((stats.dailyDataUsage / (settings.dataUsageLimit * 1024 * 1024)) * 100, 100)}%` 
            }}
          ></div>
        </div>
        <div className="usage-text">
          <span>Daily: {formatBytes(stats.dailyDataUsage)}</span>
          <span>Limit: {formatBytes(settings.dataUsageLimit * 1024 * 1024)}</span>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="download-actions">
        <button 
          className="action-btn"
          onClick={() => setShowQueue(!showQueue)}
        >
          Queue ({queue.length})
        </button>
        <button 
          className="action-btn"
          onClick={() => setShowSettings(!showSettings)}
        >
          Settings
        </button>
      </div>

      {/* Queue Display */}
      {showQueue && (
        <div className="download-queue">
          <h4>Download Queue</h4>
          {queue.length === 0 ? (
            <p className="empty-queue">No downloads queued</p>
          ) : (
            <div className="queue-list">
              {queue.slice(0, 10).map((job) => (
                <div key={job.id} className={`queue-item ${job.status}`}>
                  <div className="item-info">
                    <span className="item-name">{job.mediaItem.Name}</span>
                    <span className="item-artist">{job.mediaItem.Artists?.[0]}</span>
                  </div>
                  <div className="item-status">
                    <span className={`priority ${job.priority.level}`}>
                      {job.priority.level}
                    </span>
                    <span className="status">{job.status}</span>
                    {job.status === 'downloading' && (
                      <span className="progress">{Math.round(job.progress)}%</span>
                    )}
                  </div>
                </div>
              ))}
              {queue.length > 10 && (
                <div className="queue-more">
                  +{queue.length - 10} more items
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Settings Panel */}
      {showSettings && (
        <div className="download-settings">
          <h4>Download Settings</h4>
          
          <div className="setting-group">
            <label className="setting-label">
              <input
                type="checkbox"
                checked={settings.wifiOnlyMode}
                onChange={(e) => updateSettings({ wifiOnlyMode: e.target.checked })}
              />
              WiFi only downloads
            </label>
          </div>

          <div className="setting-group">
            <label className="setting-label">
              Daily data limit (MB)
              <input
                type="number"
                value={settings.dataUsageLimit}
                onChange={(e) => updateSettings({ dataUsageLimit: parseInt(e.target.value) })}
                min="100"
                max="50000"
                step="100"
              />
            </label>
          </div>

          <div className="setting-group">
            <label className="setting-label">
              Max concurrent downloads
              <input
                type="number"
                value={settings.maxConcurrentDownloads}
                onChange={(e) => updateSettings({ maxConcurrentDownloads: parseInt(e.target.value) })}
                min="1"
                max="10"
              />
            </label>
          </div>

          <div className="setting-group">
            <label className="setting-label">
              <input
                type="checkbox"
                checked={settings.overnightCachingEnabled}
                onChange={(e) => updateSettings({ overnightCachingEnabled: e.target.checked })}
              />
              Enable overnight mega-caching
            </label>
          </div>

          {settings.overnightCachingEnabled && (
            <div className="overnight-settings">
              <div className="time-inputs">
                <label>
                  Start time
                  <input
                    type="time"
                    value={settings.overnightStartTime}
                    onChange={(e) => updateSettings({ overnightStartTime: e.target.value })}
                  />
                </label>
                <label>
                  End time
                  <input
                    type="time"
                    value={settings.overnightEndTime}
                    onChange={(e) => updateSettings({ overnightEndTime: e.target.value })}
                  />
                </label>
              </div>
            </div>
          )}

          <div className="setting-group">
            <label className="setting-label">
              <input
                type="checkbox"
                checked={settings.pauseOnLowBattery}
                onChange={(e) => updateSettings({ pauseOnLowBattery: e.target.checked })}
              />
              Pause on low battery
            </label>
          </div>

          {settings.pauseOnLowBattery && (
            <div className="setting-group">
              <label className="setting-label">
                Battery threshold (%)
                <input
                  type="number"
                  value={settings.batteryThreshold}
                  onChange={(e) => updateSettings({ batteryThreshold: parseInt(e.target.value) })}
                  min="5"
                  max="50"
                />
              </label>
            </div>
          )}
        </div>
      )}

      {/* Overnight Caching Indicator */}
      {settings.overnightCachingEnabled && (
        <div className="overnight-indicator">
          <span className="overnight-icon">🌙</span>
          <span>Overnight caching: {settings.overnightStartTime} - {settings.overnightEndTime}</span>
        </div>
      )}
    </div>
  )
}

export default BackgroundDownloadManager