"use client";

import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";
import { useT } from "@/shared/i18n/client";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import { Slider } from "@/presentation/components/ui/slider";
import { BILLING_TOLERANCE_MIN, BILLING_TOLERANCE_MAX } from "@/shared/constants/billing";
import type { BillingSettings } from "@/domain/entities/billing";

interface BillingSettingsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  settings: BillingSettings | null;
  loading: boolean;
  onSave: (defaultToleranceMonths: number) => void;
}

const clamp = (n: number) =>
  Math.min(BILLING_TOLERANCE_MAX, Math.max(BILLING_TOLERANCE_MIN, n));

export function BillingSettingsDialog({
  open,
  onOpenChange,
  settings,
  loading,
  onSave,
}: BillingSettingsDialogProps) {
  const t = useT();
  const [value, setValue] = useState(BILLING_TOLERANCE_MIN);

  // Seed the slider from the saved default each time the dialog opens.
  useEffect(() => {
    if (!open || !settings) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setValue(clamp(settings.default_tolerance_months));
  }, [open, settings]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <DialogHeader>
          <DialogTitle>{t.billing.settings.title}</DialogTitle>
        </DialogHeader>

        <div className="space-y-2">
          <p className="text-sm font-medium">{t.billing.settings.toleranceLabel}</p>
          <p className="text-xs text-muted-foreground">{t.billing.settings.toleranceHelp}</p>
          <div className="flex items-center gap-4 pt-2">
            <Slider
              min={BILLING_TOLERANCE_MIN}
              max={BILLING_TOLERANCE_MAX}
              step={1}
              value={[value]}
              onValueChange={([v]) => setValue(v)}
              className="flex-1"
            />
            <Input
              type="number"
              min={BILLING_TOLERANCE_MIN}
              max={BILLING_TOLERANCE_MAX}
              value={value}
              onChange={(e) => setValue(clamp(parseInt(e.target.value, 10) || BILLING_TOLERANCE_MIN))}
              className="w-16 text-center"
            />
            <span className="text-sm text-muted-foreground">
              {t.billing.months(value).replace(/^\d+\s*/, "")}
            </span>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            {t.common.cancel}
          </Button>
          <Button disabled={loading} onClick={() => onSave(value)}>
            {loading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
            {t.billing.settings.save}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}