import type { QueueItem } from '@/core/types';
import { getFormatMetadata } from '@/core/format-utils';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import {
  FileAudio,
  FileImage,
  Download,
  Trash2,
} from 'lucide-react';
import StatusBadge from '@/components/status-badge';

export default function QueueItemRow({
  item,
  onDownload,
  onRemove,
}: {
  item: QueueItem;
  onDownload: () => void;
  onRemove: () => void;
}) {
  const inputMeta = getFormatMetadata(item.inputFormat);
  const outputMeta = getFormatMetadata(item.targetFormat);
  const isImage = inputMeta.category === 'image';

  return (
    <div className="flex items-center gap-4 p-4 rounded-lg bg-card border">
      {/* File icon */}
      <div className="p-2 rounded-lg bg-muted">
        {isImage ? (
          <FileImage className="w-5 h-5 text-muted-foreground" />
        ) : (
          <FileAudio className="w-5 h-5 text-muted-foreground" />
        )}
      </div>

      {/* File info */}
      <div className="flex-1 min-w-0">
        <p className="font-medium truncate">{item.file.name}</p>
        <p className="text-sm text-muted-foreground">
          {inputMeta.displayName} → {outputMeta.displayName}
        </p>
        {item.status === 'processing' && (
          <Progress value={item.progress} className="h-1 mt-2" />
        )}
        {item.status === 'error' && (
          <p className="text-sm text-destructive mt-1">{item.error}</p>
        )}
      </div>

      {/* Status */}
      <StatusBadge status={item.status} />

      {/* Actions */}
      <div className="flex gap-2">
        {item.status === 'complete' && (
          <Button size="icon" variant="ghost" onClick={onDownload}>
            <Download className="w-4 h-4" />
          </Button>
        )}
        <Button
          size="icon"
          variant="ghost"
          onClick={onRemove}
          disabled={item.status === 'processing'}
        >
          <Trash2 className="w-4 h-4" />
        </Button>
      </div>
    </div>
  );
}