import { useEffect, useState } from "react";
import { toast } from "sonner";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

type GiftTierFormState = {
  min_amount: string;
  gift_quantity: string;
  brands: string;
  volumes: string;
  description: string;
};

type GiftTierPayload = {
  min_amount: number;
  gift_quantity: number;
  brands: string[];
  volumes: string[];
  description?: string;
};

type Props = {
  open: boolean;
  onClose: () => void;
  onSave: (data: GiftTierPayload) => void;
  initialData?: {
    min_amount: number;
    gift_quantity: number;
    brands: string[];
    volumes: string[];
    description?: string;
  } | null;
};

export const GiftTierModal = ({
  open,
  onClose,
  onSave,
  initialData = null,
}: Props) => {
  const [form, setForm] = useState<GiftTierFormState>({
    min_amount: "",
    gift_quantity: "",
    brands: "",
    volumes: "",
    description: "",
  });

  useEffect(() => {
    if (initialData) {
      setForm({
        min_amount: String(initialData.min_amount ?? ""),
        gift_quantity: String(initialData.gift_quantity ?? ""),
        brands: (initialData.brands ?? []).join(", "),
        volumes: (initialData.volumes ?? []).join(", "),
        description: initialData.description ?? "",
      });
    } else {
      setForm({
        min_amount: "",
        gift_quantity: "",
        brands: "",
        volumes: "",
        description: "",
      });
    }
  }, [initialData, open]);

  const handleChange = (field: keyof GiftTierFormState, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = () => {
    if (!form.min_amount || !form.gift_quantity) {
      toast.error("Monto mínimo y cantidad son obligatorios");
      return;
    }

    const payload: GiftTierPayload = {
      min_amount: Number(form.min_amount),
      gift_quantity: Number(form.gift_quantity),
      brands: form.brands
        ? form.brands
            .split(",")
            .map((b) => b.trim())
            .filter(Boolean)
        : [],
      volumes: form.volumes
        ? form.volumes
            .split(",")
            .map((v) => v.trim())
            .filter(Boolean)
        : [],
      description: form.description || undefined,
    };

    onSave(payload);
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px] p-0 overflow-hidden border-none bg-white/95 backdrop-blur-md shadow-2xl">
        {/* CABECERA CON ESTILO */}
        <DialogHeader className="px-6 py-5 border-b bg-slate-50/50">
          <DialogTitle className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent inline-block">
            {initialData ? "Editar Regla" : "Nueva Regla de Regalo"}
          </DialogTitle>
          <DialogDescription className="text-slate-500">
            Define los límites y productos disponibles para este nivel de
            regalo.
          </DialogDescription>
        </DialogHeader>

        {/* CUERPO DEL FORMULARIO */}
        <div className="px-6 py-6 space-y-5">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="min_amount">Monto mínimo ($)</Label>
              <Input
                id="min_amount"
                type="number"
                placeholder="Ej: 50000"
                value={form.min_amount}
                onChange={(e) => handleChange("min_amount", e.target.value)}
                className="focus-visible:ring-blue-500"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="gift_quantity">Cant. Regalos</Label>
              <Input
                id="gift_quantity"
                type="number"
                placeholder="1"
                value={form.gift_quantity}
                onChange={(e) => handleChange("gift_quantity", e.target.value)}
                className="focus-visible:ring-blue-500"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="brands">Marcas permitidas</Label>
            <Input
              id="brands"
              placeholder="LAVIT, TEEN (separadas por coma)"
              value={form.brands}
              onChange={(e) => handleChange("brands", e.target.value)}
              className="focus-visible:ring-blue-500"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="volumes">Volúmenes disponibles</Label>
            <Input
              id="volumes"
              placeholder="Ej: 5, 10, 15 (en ml)"
              value={form.volumes}
              onChange={(e) => handleChange("volumes", e.target.value)}
              className="focus-visible:ring-blue-500"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Descripción (opcional)</Label>
            <Textarea
              id="description"
              placeholder="Nota interna sobre esta regla..."
              value={form.description}
              onChange={(e) => handleChange("description", e.target.value)}
              className="min-h-[80px] focus-visible:ring-blue-500"
            />
          </div>
        </div>

        {/* FOOTER CON ACCIONES */}
        <DialogFooter className="px-6 py-4 bg-slate-50/50 border-t gap-2">
          <Button
            variant="outline"
            onClick={onClose}
            className="hover:bg-slate-100"
          >
            Cancelar
          </Button>
          <Button
            onClick={handleSubmit}
            className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:opacity-90 shadow-md transition-all"
          >
            Guardar Regla
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};