import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { IBankPaymentMethod } from "~/admin/interfaces/bankPaymentMethod";
import { InputImageSingle } from "~/admin/components/models/InputImageSingle";

type FormValues = {
  name: string;
  url: string;
  sort_order: number;
  status: number;
};

interface Props {
  item: IBankPaymentMethod | null;
  onSave: (formData: FormData) => void;
  onCancel: () => void;
}

export const BankPaymentMethodForm = ({ item, onSave, onCancel }: Props) => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      name: "",
      url: "",
      sort_order: 0,
      status: 1,
    },
  });

  useEffect(() => {
    reset(
      item
        ? {
            name: item.name,
            url: item.url ?? "",
            sort_order: item.sort_order ?? 0,
            status: item.status === 1 ? 1 : 0,
          }
        : { name: "", url: "", sort_order: 0, status: 1 },
    );
    setSelectedFile(null);
  }, [item, reset]);

  const onSubmit = (data: FormValues) => {
    if (!item && !selectedFile) {
      alert("Arrastra o selecciona la imagen del logo del banco.");
      return;
    }
    if (item && !selectedFile && !item.image_url?.trim()) {
      alert("Debe existir una imagen o sube una nueva.");
      return;
    }

    const formData = new FormData();
    formData.append("name", data.name.trim());
    formData.append("url", (data.url ?? "").trim());
    formData.append("sort_order", String(Number.isNaN(data.sort_order) ? 0 : data.sort_order));
    formData.append("status", data.status ? "1" : "0");

    if (selectedFile) {
      formData.append("image", selectedFile);
    } else if (item?.image_url) {
      formData.append("existingImageUrl", item.image_url);
    }

    onSave(formData);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>{item ? `Editar: ${item.name}` : "Nuevo método de pago (banco)"}</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Nombre del banco *</label>
                <input
                  type="text"
                  className={`form-control ${errors.name ? "is-invalid" : ""}`}
                  {...register("name", { required: "Requerido" })}
                />
                {errors.name && <div className="invalid-feedback">{errors.name.message}</div>}
              </div>
            </div>
            <div className="col-md-6">
              <div className="form-group">
                <label>Orden en la página *</label>
                <input
                  type="number"
                  min={0}
                  step={1}
                  className={`form-control ${errors.sort_order ? "is-invalid" : ""}`}
                  {...register("sort_order", {
                    valueAsNumber: true,
                    min: { value: 0, message: "No puede ser negativo" },
                  })}
                />
                {errors.sort_order && (
                  <div className="invalid-feedback d-block">{errors.sort_order.message}</div>
                )}
              </div>
            </div>
            <div className="col-md-12 mt-2">
              <InputImageSingle
                initialImage={item?.image_url}
                onFileChange={setSelectedFile}
                inputId="bank-payment-logo"
                label={item ? "Logo del banco (nueva imagen opcional)" : "Logo del banco *"}
                helperText="Arrastra o elige un archivo. Recomendado: PNG/SVG con fondo transparente o logo horizontal claro."
              />
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>URL del banco (opcional)</label>
                <input type="text" className="form-control" placeholder="https://…" {...register("url")} />
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>Visibilidad en /pagos</label>
                <select
                  className="form-control"
                  {...register("status", { valueAsNumber: true })}
                >
                  <option value={1}>Activo (visible)</option>
                  <option value={0}>Inactivo (oculto)</option>
                </select>
              </div>
            </div>
          </div>
          <div className="form-actions mt-3">
            <button type="submit" className="btn btn-primary mr-2">
              <i className="fas fa-save" /> Guardar
            </button>
            <button type="button" className="btn btn-secondary" onClick={onCancel}>
              Cancelar
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};