"use client";

import { ConversionSettings } from "@/types";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { ImageSettings } from "./settings/image-settings";
import { FilenameSettings } from "./settings/filename-settings";
import { QualitySettings } from "./settings/quality-settings";
import { PresetSettings } from "./settings/preset-settings";

interface SettingsPanelProps {
  settings: ConversionSettings;
  onSettingsChange: (settings: Partial<ConversionSettings>) => void;
  onAspectRatioChange: (value: string) => void;
  onSwapDimensions: () => void;
  onApplyDefaultBaseNameToAll: () => void;
  hasImages: boolean;
}

export function SettingsPanel({
  settings,
  onSettingsChange,
  onAspectRatioChange,
  onSwapDimensions,
  onApplyDefaultBaseNameToAll,
  hasImages,
}: SettingsPanelProps) {
  return (
    <div className="space-y-4">
      <PresetSettings onSettingsChange={onSettingsChange} />
      <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">Image Settings</h3>
              <p className="text-sm text-muted-foreground mt-1">Adjust resolution and scaling for all images.</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <ImageSettings
              settings={settings}
              onSettingsChange={onSettingsChange}
              onAspectRatioChange={onAspectRatioChange}
              onSwapDimensions={onSwapDimensions}
            />
          </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">Filename Settings</h3>
              <p className="text-sm text-muted-foreground mt-1">Customize the output filenames.</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <FilenameSettings
              settings={settings}
              onSettingsChange={onSettingsChange}
              onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
              hasImages={hasImages}
            />
          </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">Quality Settings</h3>
              <p className="text-sm text-muted-foreground mt-1">Select format and compression level.</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}