import React from 'react'
import { usePlaybackContinuity } from '../hooks/usePlaybackContinuity'
import './PlaybackContinuityIndicator.css'

interface PlaybackContinuityIndicatorProps {
  className?: string
  showDetails?: boolean
}

export const PlaybackContinuityIndicator: React.FC<PlaybackContinuityIndicatorProps> = ({
  className = '',
  showDetails = false
}) => {
  const {
    connectionState,
    isOnline,
    connectionQuality,
    playbackState,
    getEstimatedOfflineTime
  } = usePlaybackContinuity()

  const getConnectionIcon = () => {
    if (!isOnline) return '📱'
    
    switch (connectionQuality) {
      case 'excellent': return '🌐'
      case 'good': return '📶'
      case 'poor': return '⚠️'
      default: return '📱'
    }
  }

  const getConnectionText = () => {
    if (!isOnline) return 'Offline Mode'
    
    switch (connectionQuality) {
      case 'excellent': return 'Online - Excellent'
      case 'good': return 'Online - Good'
      case 'poor': return 'Online - Poor'
      default: return 'Offline Mode'
    }
  }

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

  const offlineTime = getEstimatedOfflineTime()

  return (
    <div className={`playback-continuity-indicator ${className}`}>
      <div className="connection-status">
        <span className="connection-icon" title={getConnectionText()}>
          {getConnectionIcon()}
        </span>
        
        {showDetails && (
          <div className="connection-details">
            <div className="connection-text">{getConnectionText()}</div>
            
            {!isOnline && offlineTime > 0 && (
              <div className="offline-time">
                ~{formatTime(offlineTime)} offline
              </div>
            )}
            
            {playbackState && (
              <div className="sync-status">
                <span className="sync-icon">🔄</span>
                <span className="sync-text">Synced</span>
              </div>
            )}
          </div>
        )}
      </div>
      
      {showDetails && playbackState && (
        <div className="playback-sync-info">
          <div className="sync-device">
            Device: {playbackState.deviceId.slice(-8)}
          </div>
          <div className="sync-timestamp">
            Last sync: {new Date(playbackState.timestamp).toLocaleTimeString()}
          </div>
        </div>
      )}
    </div>
  )
}

export default PlaybackContinuityIndicator