"use client";

import { ImageFile, ConversionSettings } from "@/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Download, Trash2 } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { ImageListItem } from "./image-list-item";
import { useTranslations } from "next-intl";

interface ImageListProps {
  images: ImageFile[];
  settings: ConversionSettings;
  onClearAll: () => void;
  onDownloadAll: () => void;
  onDownloadSingle: (index: number) => void;
  onRemove: (index: number) => void;
  onFilenameChange: (index: number, newName: string) => void;
  isConverting: boolean;
  convertingIndex: number | null;
}

export function ImageList({
  images,
  settings,
  onClearAll,
  onDownloadAll,
  onDownloadSingle,
  onRemove,
  onFilenameChange,
  isConverting,
  convertingIndex,
}: ImageListProps) {
  const t = useTranslations("ImageList");

  if (images.length === 0) {
    return null;
  }

  const isProcessing = isConverting || convertingIndex !== null;

  return (
    <TooltipProvider>
      <Card>
        <CardHeader>
          <div className="flex justify-between items-center">
            <CardTitle>{t('title')}</CardTitle>
            <div className="flex items-center gap-2">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="ghost" size="sm" onClick={onClearAll} disabled={isProcessing}>
                    <Trash2 className="mr-2 h-4 w-4" />{t('clearAll')}
                  </Button>
                </TooltipTrigger>
                <TooltipContent><p>{t('clearAllTooltip')}</p></TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button onClick={onDownloadAll} disabled={isProcessing}>
                    <Download className="mr-2 h-4 w-4" />
                    {isConverting ? t('converting') : t('downloadAll', { count: images.length })}
                  </Button>
                </TooltipTrigger>
                <TooltipContent><p>{t('downloadAllTooltip')}</p></TooltipContent>
              </Tooltip>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {images.map((image, index) => (
              <ImageListItem
                key={image.previewUrl}
                image={image}
                index={index}
                settings={settings}
                onFilenameChange={onFilenameChange}
                onRemove={onRemove}
                onDownload={onDownloadSingle}
                isProcessing={isProcessing}
              />
            ))}
          </div>
        </CardContent>
      </Card>
    </TooltipProvider>
  );
}