"use client";

import { useState, useRef, ChangeEvent, useEffect } from "react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Upload, Download, X, Trash2, Check, ArrowRightLeft, HelpCircle, RotateCcw } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { Switch } from "@/components/ui/switch";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Slider } from "@/components/ui/slider";
import { ObjectPositionControl } from "./object-position-control";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useScopedI18n } from "@/lib/i18n/client";

const initialSettings = {
  width: "",
  height: "",
  aspectRatio: "custom",
  keepOrientation: true,
  format: "webp" as "png" | "jpeg" | "webp",
  quality: 90,
  prefix: "",
  suffix: "",
  useCounter: false,
  counterStart: 1,
  counterDigits: 3,
  useDefaultBaseName: false,
  defaultBaseName: "",
  scaleMode: 'cover' as 'fill' | 'cover' | 'contain',
  objectPosition: 'center center',
};

export function ImageConverter() {
  const t = useScopedI18n('converter');

  const aspectRatios = [
    { name: t('aspect_ratios.custom'), value: "custom" },
    { name: t('aspect_ratios.square'), value: "1/1" },
    { name: t('aspect_ratios.standard'), value: "4/3" },
    { name: t('aspect_ratios.photography'), value: "3/2" },
    { name: t('aspect_ratios.widescreen'), value: "16/9" },
  ];

  const [images, setImages] = useState<File[]>([]);
  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
  const [filenames, setFilenames] = useState<string[]>([]);
  const [width, setWidth] = useState<number | string>(initialSettings.width);
  const [height, setHeight] = useState<number | string>(initialSettings.height);
  const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
  const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
  const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
  const [quality, setQuality] = useState<number>(initialSettings.quality);
  
  const [prefix, setPrefix] = useState<string>(initialSettings.prefix);
  const [suffix, setSuffix] = useState<string>(initialSettings.suffix);
  const [useCounter, setUseCounter] = useState<boolean>(initialSettings.useCounter);
  const [counterStart, setCounterStart] = useState<number>(initialSettings.counterStart);
  const [counterDigits, setCounterDigits] = useState<number>(initialSettings.counterDigits);
  const [useDefaultBaseName, setUseDefaultBaseName] = useState<boolean>(initialSettings.useDefaultBaseName);
  const [defaultBaseName, setDefaultBaseName] = useState<string>(initialSettings.defaultBaseName);

  const [scaleMode, setScaleMode] = useState<'fill' | 'cover' | 'contain'>(initialSettings.scaleMode);
  const [objectPosition, setObjectPosition] = useState<string>(initialSettings.objectPosition);

  const [isConverting, setIsConverting] = useState(false);
  const [convertingIndex, setConvertingIndex] = useState<number | null>(null);
  const [isDraggingOver, setIsDraggingOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    return () => {
      previewUrls.forEach((url) => URL.revokeObjectURL(url));
    };
  }, [previewUrls]);

  const handleFiles = (files: FileList | null) => {
    if (!files || files.length === 0) return;

    const imageFiles = Array.from(files).filter((file) =>
      file.type.startsWith("image/")
    );

    if (imageFiles.length === 0) {
      toast.error(t('toasts.no_valid_files'));
      return;
    }

    const newImages = [...images, ...imageFiles];
    const newPreviewUrls = [
      ...previewUrls,
      ...imageFiles.map((file) => URL.createObjectURL(file)),
    ];
    const newFilenames = [
      ...filenames,
      ...imageFiles.map((file) =>
        useDefaultBaseName && defaultBaseName
          ? defaultBaseName
          : file.name.substring(0, file.name.lastIndexOf("."))
      ),
    ];

    setImages(newImages);
    setPreviewUrls(newPreviewUrls);
    setFilenames(newFilenames);

    toast.success(t('toasts.images_added', { count: imageFiles.length }));
  };

  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
    handleFiles(e.target.files);
    if (e.target) e.target.value = "";
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(true);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(false);
    handleFiles(e.dataTransfer.files);
  };

  const handleRemoveImage = (indexToRemove: number) => {
    URL.revokeObjectURL(previewUrls[indexToRemove]);
    const newImages = images.filter((_, i) => i !== indexToRemove);
    const newPreviewUrls = previewUrls.filter((_, i) => i !== indexToRemove);
    const newFilenames = filenames.filter((_, i) => i !== indexToRemove);

    setImages(newImages);
    setPreviewUrls(newPreviewUrls);
    setFilenames(newFilenames);
  };

  const handleClearAll = () => {
    previewUrls.forEach((url) => URL.revokeObjectURL(url));
    setImages([]);
    setPreviewUrls([]);
    setFilenames([]);
    setWidth(initialSettings.width);
    setHeight(initialSettings.height);
    toast.info(t('toasts.all_cleared'));
  };

  const handleFilenameChange = (index: number, newName: string) => {
    const newFilenames = [...filenames];
    newFilenames[index] = newName;
    setFilenames(newFilenames);
  };

  const generateFinalFilename = (index: number) => {
    const baseName = filenames[index] || "filename";
    let finalName = `${prefix}${baseName}${suffix}`;

    if (useCounter) {
      const counter = (index + counterStart).toString().padStart(counterDigits, '0');
      finalName += `${counter}`;
    }
    
    return finalName;
  };

  const convertAndDownload = (image: File, previewUrl: string, index: number) => {
    return new Promise<void>((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.src = previewUrl;

      img.onload = () => {
        const canvas = document.createElement("canvas");
        const sourceRatio = img.naturalWidth / img.naturalHeight;
        
        let targetWidth: number;
        let targetHeight: number;

        const inputWidth = width ? Number(width) : 0;
        const inputHeight = height ? Number(height) : 0;

        if (inputWidth && !inputHeight) {
            targetWidth = inputWidth;
            targetHeight = Math.round(targetWidth / sourceRatio);
        } else if (!inputWidth && inputHeight) {
            targetHeight = inputHeight;
            targetWidth = Math.round(targetHeight * sourceRatio);
        } else if (inputWidth && inputHeight) {
            targetWidth = inputWidth;
            targetHeight = inputHeight;
        } else {
            targetWidth = img.naturalWidth;
            targetHeight = img.naturalHeight;
        }

        if (keepOrientation && (inputWidth || inputHeight)) {
          const isOriginalPortrait = img.naturalHeight > img.naturalWidth;
          const isTargetPortrait = targetHeight > targetWidth;
          if (isOriginalPortrait !== isTargetPortrait) {
            [targetWidth, targetHeight] = [targetHeight, targetWidth];
          }
        }

        canvas.width = targetWidth;
        canvas.height = targetHeight;
        const ctx = canvas.getContext("2d");

        if (ctx) {
          const sWidth = img.naturalWidth;
          const sHeight = img.naturalHeight;
          const dWidth = targetWidth;
          const dHeight = targetHeight;

          if (scaleMode === 'fill' || !width || !height) {
            ctx.drawImage(img, 0, 0, dWidth, dHeight);
          } else {
            const sourceRatio = sWidth / sHeight;
            const targetRatio = dWidth / dHeight;
            let sx = 0, sy = 0, sRenderWidth = sWidth, sRenderHeight = sHeight;
            let dx = 0, dy = 0, dRenderWidth = dWidth, dRenderHeight = dHeight;
            const [hPos, vPos] = objectPosition.split(' ');

            if (scaleMode === 'cover') {
              if (sourceRatio > targetRatio) {
                sRenderHeight = sHeight;
                sRenderWidth = sHeight * targetRatio;
                if (hPos === 'center') sx = (sWidth - sRenderWidth) / 2;
                if (hPos === 'right') sx = sWidth - sRenderWidth;
              } else {
                sRenderWidth = sWidth;
                sRenderHeight = sWidth / targetRatio;
                if (vPos === 'center') sy = (sHeight - sRenderHeight) / 2;
                if (vPos === 'bottom') sy = sHeight - sRenderHeight;
              }
              ctx.drawImage(img, sx, sy, sRenderWidth, sRenderHeight, 0, 0, dWidth, dHeight);
            } else if (scaleMode === 'contain') {
              if (sourceRatio > targetRatio) {
                dRenderWidth = dWidth;
                dRenderHeight = dWidth / sourceRatio;
                if (vPos === 'center') dy = (dHeight - dRenderHeight) / 2;
                if (vPos === 'bottom') dy = dHeight - dRenderHeight;
              } else {
                dRenderHeight = dHeight;
                dRenderWidth = dHeight * sourceRatio;
                if (hPos === 'center') dx = (dWidth - dRenderWidth) / 2;
                if (hPos === 'right') dx = dWidth - dRenderWidth;
              }
              ctx.drawImage(img, 0, 0, sWidth, sHeight, dx, dy, dRenderWidth, dRenderHeight);
            }
          }

          const mimeType = `image/${format}`;
          const dataUrl = canvas.toDataURL(mimeType, format === 'png' ? undefined : quality / 100);
          const link = document.createElement("a");
          link.href = dataUrl;
          link.download = `${generateFinalFilename(index)}.${format}`;
          
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          resolve();
        } else {
          reject(new Error(t('toasts.error_processing', { filename: image.name })));
        }
      };
      img.onerror = () => {
        reject(new Error(t('toasts.error_loading', { filename: image.name })));
      };
    });
  };

  const handleConvertAndDownloadAll = async () => {
    if (images.length === 0) {
      toast.error(t('toasts.upload_images_first'));
      return;
    }

    setIsConverting(true);
    toast.info(t('toasts.conversion_start_all', { count: images.length }));

    const conversionPromises = images.map((image, index) => 
      convertAndDownload(image, previewUrls[index], index)
    );

    try {
      await Promise.all(conversionPromises);
      toast.success(t('toasts.conversion_success_all', { count: images.length }));
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message);
      } else {
        toast.error(t('toasts.conversion_error'));
      }
    } finally {
      setIsConverting(false);
    }
  };

  const handleConvertAndDownloadSingle = async (index: number) => {
    setConvertingIndex(index);
    toast.info(t('toasts.conversion_start_single', { filename: filenames[index] }));

    try {
      await convertAndDownload(images[index], previewUrls[index], index);
      toast.success(t('toasts.conversion_success_single', { filename: filenames[index] }));
    } catch (error) {
      if (error instanceof Error) {
        toast.error(error.message);
      } else {
        toast.error(t('toasts.conversion_error'));
      }
    } finally {
      setConvertingIndex(null);
    }
  };

  const handleApplySettings = () => {
    toast.info(t('toasts.settings_applied'));
  };

  const handleResetSettings = () => {
    setWidth(initialSettings.width);
    setHeight(initialSettings.height);
    setAspectRatio(initialSettings.aspectRatio);
    setKeepOrientation(initialSettings.keepOrientation);
    setFormat(initialSettings.format);
    setQuality(initialSettings.quality);
    setPrefix(initialSettings.prefix);
    setSuffix(initialSettings.suffix);
    setUseCounter(initialSettings.useCounter);
    setCounterStart(initialSettings.counterStart);
    setCounterDigits(initialSettings.counterDigits);
    setUseDefaultBaseName(initialSettings.useDefaultBaseName);
    setDefaultBaseName(initialSettings.defaultBaseName);
    setScaleMode(initialSettings.scaleMode);
    setObjectPosition(initialSettings.objectPosition);
    toast.success(t('toasts.settings_reset'));
  };

  const handleAspectRatioChange = (value: string) => {
    setAspectRatio(value);

    if (value === "custom") {
      return;
    }

    const [w, h] = value.split("/").map(Number);
    let newWidth: number;
    let newHeight: number;

    if (w > h) {
      newWidth = 1000;
      newHeight = Math.round((1000 * h) / w);
    } else if (h > w) {
      newHeight = 1000;
      newWidth = Math.round((1000 * w) / h);
    } else {
      newWidth = 1000;
      newHeight = 1000;
    }

    setWidth(newWidth);
    setHeight(newHeight);
  };

  const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setWidth(e.target.value);
    setAspectRatio("custom");
  };

  const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setHeight(e.target.value);
    setAspectRatio("custom");
  };

  const handleSwapDimensions = () => {
    setWidth(height);
    setHeight(width);
  };

  const hasImages = images.length > 0;

  const handleApplyDefaultBaseNameToAll = () => {
    if (!defaultBaseName) {
      toast.error(t('toasts.base_name_required'));
      return;
    }
    if (!hasImages) {
      toast.info(t('toasts.upload_first'));
      return;
    }
    const newFilenames = filenames.map(() => defaultBaseName);
    setFilenames(newFilenames);
    toast.success(t('toasts.base_name_applied', { baseName: defaultBaseName, count: images.length }));
  };

  return (
    <TooltipProvider>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full">
        <div className="lg:col-span-2 flex flex-col gap-4 lg:order-2">
          <Card>
            <CardContent className="pt-6">
              <div className="space-y-4">
                <h3 className="text-lg font-medium">{t('upload.title')}</h3>
                <div
                  className={cn(
                    "w-full h-48 rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
                    isDraggingOver ? "border-primary bg-accent" : "border-input"
                  )}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  onDrop={handleDrop}
                  onClick={() => fileInputRef.current?.click()}
                >
                  <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
                    <Upload className="w-8 h-8 mb-2" />
                    <p className="font-semibold">{t('upload.cta')}</p>
                    <p className="text-xs text-muted-foreground mt-1">{t('upload.supported')}</p>
                  </div>
                  <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
                </div>
              </div>
            </CardContent>
          </Card>

          {hasImages && (
            <Card>
              <CardHeader>
                <div className="flex justify-between items-center">
                  <CardTitle>{t('uploaded.title')}</CardTitle>
                  <div className="flex items-center gap-2">
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="ghost" size="sm" onClick={handleClearAll} disabled={isConverting || convertingIndex !== null}><Trash2 className="mr-2 h-4 w-4" />{t('uploaded.clear_all')}</Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{t('uploaded.clear_all_tooltip')}</p>
                      </TooltipContent>
                    </Tooltip>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button onClick={handleConvertAndDownloadAll} disabled={!hasImages || isConverting || convertingIndex !== null}>
                          <Download className="mr-2 h-4 w-4" />
                          {isConverting ? t('uploaded.converting') : t('uploaded.download_all', { count: images.length })}
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{t('uploaded.download_all_tooltip')}</p>
                      </TooltipContent>
                    </Tooltip>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {previewUrls.map((url, index) => {
                    const finalFilename = generateFinalFilename(index);
                    return (
                      <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
                        <img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />
                        <div className="flex-1 min-w-0">
                          <Label htmlFor={`filename-${index}`} className="text-xs text-muted-foreground">{t('uploaded.base_name')}</Label>
                          <Input
                            id={`filename-${index}`}
                            value={filenames[index]}
                            onChange={(e) => handleFilenameChange(index, e.target.value)}
                            className="text-sm font-medium h-8 mt-1"
                          />
                          <p className="text-xs text-muted-foreground truncate mt-1" title={`${finalFilename}.${format}`}>
                            {t('uploaded.final_name', { filename: `${finalFilename}.${format}` })}
                          </p>
                        </div>
                        <div className="flex items-center shrink-0">
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="text-gray-500 hover:text-primary"
                                onClick={() => handleConvertAndDownloadSingle(index)}
                                disabled={isConverting || convertingIndex !== null}
                              >
                                <Download className="h-4 w-4" />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{t('uploaded.download_image_tooltip')}</p>
                            </TooltipContent>
                          </Tooltip>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button
                                variant="ghost"
                                size="icon"
                                className="shrink-0 text-gray-500 hover:text-destructive"
                                onClick={() => handleRemoveImage(index)}
                                disabled={isConverting || convertingIndex !== null}
                              >
                                <X className="h-4 w-4" />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{t('uploaded.remove_image_tooltip')}</p>
                            </TooltipContent>
                          </Tooltip>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
        
        <div className="lg:col-span-1 flex flex-col gap-4 lg:sticky lg:top-8 self-start lg:order-1">
          <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
            <AccordionItem value="image-settings" className="border rounded-lg bg-card">
              <AccordionTrigger className="p-6 hover:no-underline">
                <div className="text-left">
                  <h3 className="text-lg font-medium leading-none">{t('settings.image.title')}</h3>
                  <p className="text-sm text-muted-foreground mt-1">
                    {t('settings.image.description')}
                  </p>
                </div>
              </AccordionTrigger>
              <AccordionContent className="px-6 pb-6">
                <div className="space-y-4">
                  <div>
                    <div className="flex items-center gap-1.5">
                      <Label htmlFor="aspect-ratio">{t('settings.image.aspect_ratio')}</Label>
                      <Tooltip>
                        <TooltipTrigger>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.image.aspect_ratio_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <Select value={aspectRatio} onValueChange={handleAspectRatioChange}>
                      <SelectTrigger id="aspect-ratio" className="mt-2">
                        <SelectValue placeholder="Select aspect ratio" />
                      </SelectTrigger>
                      <SelectContent>
                        {aspectRatios.map((ratio) => (
                          <SelectItem key={ratio.value} value={ratio.value}>
                            {ratio.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex items-end gap-2">
                    <div className="space-y-2 flex-1">
                      <div className="flex items-center gap-1.5">
                        <Label htmlFor="width">{t('settings.image.width')}</Label>
                        <Tooltip>
                          <TooltipTrigger>
                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>{t('settings.image.width_tooltip')}</p>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                      <Input id="width" type="number" placeholder="Auto" value={width} onChange={handleWidthChange} />
                    </div>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="outline" size="icon" onClick={handleSwapDimensions} className="shrink-0" aria-label="Swap width and height">
                          <ArrowRightLeft className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{t('settings.image.swap_tooltip')}</p>
                      </TooltipContent>
                    </Tooltip>
                    <div className="space-y-2 flex-1">
                      <div className="flex items-center gap-1.5">
                        <Label htmlFor="height">{t('settings.image.height')}</Label>
                        <Tooltip>
                          <TooltipTrigger>
                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>{t('settings.image.height_tooltip')}</p>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                      <Input id="height" type="number" placeholder="Auto" value={height} onChange={handleHeightChange} />
                    </div>
                  </div>
                  <div className="flex items-center space-x-2 pt-2">
                    <Checkbox id="keep-orientation" checked={keepOrientation} onCheckedChange={(checked) => setKeepOrientation(Boolean(checked))} />
                    <Label htmlFor="keep-orientation" className="cursor-pointer flex items-center gap-1.5">
                      {t('settings.image.keep_orientation')}
                      <Tooltip>
                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.image.keep_orientation_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </Label>
                  </div>
                </div>
                <div className="mt-4 space-y-2">
                  <div className="flex items-center gap-1.5">
                    <Label htmlFor="scale-mode">{t('settings.image.scaling')}</Label>
                    <Tooltip>
                      <TooltipTrigger>
                        <HelpCircle className="h-4 w-4 text-muted-foreground" />
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{t('settings.image.scaling_tooltip')}</p>
                      </TooltipContent>
                    </Tooltip>
                  </div>
                  <Select value={scaleMode} onValueChange={(value: 'fill' | 'cover' | 'contain') => setScaleMode(value)}>
                    <SelectTrigger id="scale-mode"><SelectValue placeholder="Select scaling mode" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fill">{t('settings.image.scaling_options.fill')}</SelectItem>
                      <SelectItem value="cover">{t('settings.image.scaling_options.cover')}</SelectItem>
                      <SelectItem value="contain">{t('settings.image.scaling_options.contain')}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                {scaleMode !== 'fill' && (
                  <div className="mt-4 space-y-2">
                    <div className="flex items-center gap-1.5">
                      <Label>{t('settings.image.position')}</Label>
                      <Tooltip>
                        <TooltipTrigger>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.image.position_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <ObjectPositionControl value={objectPosition} onChange={(pos) => setObjectPosition(pos as string)} />
                  </div>
                )}
              </AccordionContent>
            </AccordionItem>

            <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
              <AccordionTrigger className="p-6 hover:no-underline">
                <div className="text-left">
                  <h3 className="text-lg font-medium leading-none">{t('settings.filename.title')}</h3>
                  <p className="text-sm text-muted-foreground mt-1">{t('settings.filename.description')}</p>
                </div>
              </AccordionTrigger>
              <AccordionContent className="px-6 pb-6">
                <div className="space-y-6">
                  <div className="flex items-center space-x-2">
                    <Switch id="use-default-base-name" checked={useDefaultBaseName} onCheckedChange={setUseDefaultBaseName} />
                    <Label htmlFor="use-default-base-name" className="flex items-center gap-1.5 cursor-pointer">
                      {t('settings.filename.use_default_base_name')}
                      <Tooltip>
                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.filename.use_default_base_name_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </Label>
                  </div>
                  {useDefaultBaseName && (
                    <div className="space-y-2">
                      <Label htmlFor="default-base-name">{t('settings.filename.default_base_name')}</Label>
                      <div className="flex items-center gap-2">
                        <Input
                          id="default-base-name"
                          placeholder="e.g., new-york-trip"
                          value={defaultBaseName}
                          onChange={(e) => setDefaultBaseName(e.target.value)}
                        />
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button variant="outline" size="sm" onClick={handleApplyDefaultBaseNameToAll} disabled={!defaultBaseName || !hasImages}>
                              {t('settings.filename.apply_to_all')}
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>{t('settings.filename.apply_to_all_tooltip')}</p>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                    </div>
                  )}
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <Label htmlFor="prefix">{t('settings.filename.prefix')}</Label>
                      <Tooltip>
                        <TooltipTrigger>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.filename.prefix_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <Label htmlFor="suffix">{t('settings.filename.suffix')}</Label>
                      <Tooltip>
                        <TooltipTrigger>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.filename.suffix_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} />
                  </div>
                  <div className="flex items-center space-x-2 pt-2">
                    <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} />
                    <Label htmlFor="use-counter" className="flex items-center gap-1.5 cursor-pointer">
                      {t('settings.filename.add_sequential_number')}
                      <Tooltip>
                        <TooltipTrigger onClick={(e) => e.preventDefault()}>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.filename.add_sequential_number_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </Label>
                  </div>
                  {useCounter && (
                    <div className="grid grid-cols-2 gap-4 pt-2">
                      <div className="space-y-2">
                        <div className="flex items-center gap-1.5">
                          <Label htmlFor="counter-start">{t('settings.filename.start_number')}</Label>
                          <Tooltip>
                            <TooltipTrigger>
                              <HelpCircle className="h-4 w-4 text-muted-foreground" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{t('settings.filename.start_number_tooltip')}</p>
                            </TooltipContent>
                          </Tooltip>
                        </div>
                        <Input
                          id="counter-start"
                          type="number"
                          value={counterStart}
                          onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
                          min="0"
                        />
                      </div>
                      <div className="space-y-2">
                        <div className="flex items-center gap-1.5">
                          <Label htmlFor="counter-digits">{t('settings.filename.padding_digits')}</Label>
                          <Tooltip>
                            <TooltipTrigger>
                              <HelpCircle className="h-4 w-4 text-muted-foreground" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{t('settings.filename.padding_digits_tooltip')}</p>
                            </TooltipContent>
                          </Tooltip>
                        </div>
                        <Input
                          id="counter-digits"
                          type="number"
                          value={counterDigits}
                          onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
                          min="1"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </AccordionContent>
            </AccordionItem>

            <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
              <AccordionTrigger className="p-6 hover:no-underline">
                <div className="text-left">
                  <h3 className="text-lg font-medium leading-none">{t('settings.quality.title')}</h3>
                  <p className="text-sm text-muted-foreground mt-1">{t('settings.quality.description')}</p>
                </div>
              </AccordionTrigger>
              <AccordionContent className="px-6 pb-6">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <Label htmlFor="format">{t('settings.quality.format')}</Label>
                      <Tooltip>
                        <TooltipTrigger>
                          <HelpCircle className="h-4 w-4 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{t('settings.quality.format_tooltip')}</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                    <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
                      <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="png">PNG</SelectItem>
                        <SelectItem value="jpeg">JPEG</SelectItem>
                        <SelectItem value="webp">WEBP</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-1.5">
                        <Label htmlFor="quality">{t('settings.quality.quality')}</Label>
                        <Tooltip>
                          <TooltipTrigger>
                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>{t('settings.quality.quality_tooltip')}</p>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                      <span className="text-sm text-muted-foreground">{quality}%</span>
                    </div>
                    <Slider
                      id="quality"
                      min={0}
                      max={100}
                      step={1}
                      value={[quality]}
                      onValueChange={(value) => setQuality(value[0])}
                      disabled={format === 'png'}
                    />
                    {format === 'png' && (
                      <p className="text-xs text-muted-foreground pt-1">{t('settings.quality.png_disabled_notice')}</p>
                    )}
                  </div>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
          <div className="flex items-center gap-2">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  onClick={handleResetSettings}
                  className="w-full"
                  variant="outline"
                >
                  <RotateCcw className="mr-2 h-4 w-4" />
                  {t('settings.reset')}
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>{t('settings.reset_tooltip')}</p>
              </TooltipContent>
            </Tooltip>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  onClick={handleApplySettings}
                  className="w-full"
                >
                  <Check className="mr-2 h-4 w-4" />
                  {t('settings.apply')}
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>{t('settings.apply_tooltip')}</p>
              </TooltipContent>
            </Tooltip>
          </div>
        </div>
      </div>
    </TooltipProvider>
  );
}