import React from 'react';
import { Article, PlaybackStatus } from '../types';
import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';

interface QueueItemProps {
  article: Article;
  isActive: boolean;
  isPlaying: boolean;
  onPlay: () => void;
  onPause: () => void;
  onRemove: () => void;
}

export const QueueItem: React.FC<QueueItemProps> = ({ 
  article, 
  isActive, 
  isPlaying, 
  onPlay, 
  onPause,
  onRemove
}) => {
  
  const getStatusIcon = () => {
    switch (article.status) {
      case PlaybackStatus.LOADING_TEXT:
        return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
      case PlaybackStatus.LOADING_AUDIO:
        return <Loader2 className="w-5 h-5 animate-spin text-purple-500" />;
      case PlaybackStatus.ERROR:
        return <AlertCircle className="w-5 h-5 text-red-500" />;
      case PlaybackStatus.PLAYING:
        return <div className="w-4 h-4 flex items-end space-x-0.5 h-4 overflow-hidden">
            <div className="w-1 bg-blue-500 animate-[bounce_1s_infinite] h-2"></div>
            <div className="w-1 bg-blue-500 animate-[bounce_1.2s_infinite] h-4"></div>
            <div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
        </div>;
      default:
        return <FileText className="w-5 h-5 text-slate-400" />;
    }
  };

  const isReady = article.status === PlaybackStatus.READY || article.status === PlaybackStatus.PAUSED || article.status === PlaybackStatus.PLAYING || article.status === PlaybackStatus.COMPLETED;

  return (
    <div className={`
      relative group flex items-center p-4 rounded-xl border transition-all duration-200
      ${isActive 
        ? 'bg-blue-50 border-blue-200 shadow-sm' 
        : 'bg-white border-slate-100 hover:border-slate-300'
      }
    `}>
      <div className="flex-shrink-0 mr-4 w-8 flex justify-center">
        {getStatusIcon()}
      </div>

      <div className="flex-grow min-w-0">
        <h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
          {article.title || article.url}
        </h3>
        <p className="text-xs text-slate-500 truncate mt-0.5">
          {article.url}
        </p>
        {article.errorMessage && (
          <p className="text-xs text-red-500 mt-1">{article.errorMessage}</p>
        )}
      </div>

      <div className="flex-shrink-0 ml-4 flex items-center space-x-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
        {isReady && (
          <button
            onClick={isActive && isPlaying ? onPause : onPlay}
            className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
          >
            {isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
          </button>
        )}
        <button 
          onClick={onRemove}
          className="text-xs text-slate-400 hover:text-red-500 underline px-2"
        >
          Remove
        </button>
      </div>
    </div>
  );
};