"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Check } from "lucide-react";
import { useTranslations } from "next-intl";
import { ImageSettings } from "./image-settings";
import { FilenameSettings } from "./filename-settings";
import { QualitySettings } from "./quality-settings";
import { useImageConverter } from "@/hooks/use-image-converter";

type SettingsPanelProps = ReturnType<typeof useImageConverter>;

export function SettingsPanel(props: SettingsPanelProps) {
  const t = useTranslations("ImageConverter");
  const hasImages = props.images.length > 0;

  return (
    <div className="lg:col-span-1 flex flex-col gap-4 lg:sticky lg:top-8 self-start">
      <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("imageSettingsTitle")}</h3>
              <p className="text-sm text-muted-foreground mt-1">{t("imageSettingsDescription")}</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <ImageSettings
              aspectRatio={props.aspectRatio}
              onAspectRatioChange={props.handleAspectRatioChange}
              width={props.width}
              onWidthChange={props.handleWidthChange}
              height={props.height}
              onHeightChange={props.handleHeightChange}
              onSwapDimensions={props.handleSwapDimensions}
              keepOrientation={props.keepOrientation}
              onKeepOrientationChange={props.setKeepOrientation}
              scaleMode={props.scaleMode}
              onScaleModeChange={props.setScaleMode}
              objectPosition={props.objectPosition}
              onObjectPositionChange={props.setObjectPosition}
            />
          </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("filenameSettingsTitle")}</h3>
              <p className="text-sm text-muted-foreground mt-1">{t("filenameSettingsDescription")}</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <FilenameSettings
              useDefaultBaseName={props.useDefaultBaseName}
              onUseDefaultBaseNameChange={props.setUseDefaultBaseName}
              defaultBaseName={props.defaultBaseName}
              onDefaultBaseNameChange={(e) => props.setDefaultBaseName(e.target.value)}
              onApplyDefaultBaseNameToAll={props.handleApplyDefaultBaseNameToAll}
              prefix={props.prefix}
              onPrefixChange={(e) => props.setPrefix(e.target.value)}
              suffix={props.suffix}
              onSuffixChange={(e) => props.setSuffix(e.target.value)}
              useCounter={props.useCounter}
              onUseCounterChange={props.setUseCounter}
              counterStart={props.counterStart}
              onCounterStartChange={(e) => props.setCounterStart(Math.max(0, Number(e.target.value)))}
              counterDigits={props.counterDigits}
              onCounterDigitsChange={(e) => props.setCounterDigits(Math.max(1, Number(e.target.value)))}
              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">{t("qualitySettingsTitle")}</h3>
              <p className="text-sm text-muted-foreground mt-1">{t("qualitySettingsDescription")}</p>
            </div>
          </AccordionTrigger>
          <AccordionContent className="px-6 pb-6">
            <QualitySettings
              format={props.format}
              onFormatChange={props.setFormat}
              quality={props.quality}
              onQualityChange={(value) => props.setQuality(value[0])}
            />
          </AccordionContent>
        </AccordionItem>
      </Accordion>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            onClick={props.handleApplySettings}
            disabled={!hasImages}
            className="w-full"
          >
            <Check className="mr-2 h-4 w-4" />
            {t("applySettings")}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>{t("applySettingsTooltip")}</p>
        </TooltipContent>
      </Tooltip>
    </div>
  );
}