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

type FormValues = {
  year: string;
  title: string;
  subtitle: string;
  /** Solo dígitos en UI; se envía como entero al API */
  sort_order: string;
  status: boolean;
};

const blockNonDigitKeys = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.ctrlKey || e.metaKey || e.altKey) return;
  const allowed = [
    "Backspace",
    "Delete",
    "Tab",
    "Escape",
    "Enter",
    "ArrowLeft",
    "ArrowRight",
    "ArrowUp",
    "ArrowDown",
    "Home",
    "End",
  ];
  if (allowed.includes(e.key)) return;
  if (e.key.length === 1 && /[0-9]/.test(e.key)) return;
  e.preventDefault();
};

const sanitizeDigitPaste = (
  e: React.ClipboardEvent<HTMLInputElement>,
  maxLen: number | null,
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
) => {
  e.preventDefault();
  const paste = (e.clipboardData.getData("text") || "").replace(/\D/g, "");
  const slice = maxLen != null ? paste.slice(0, maxLen) : paste;
  const input = e.currentTarget;
  const start = input.selectionStart ?? 0;
  const end = input.selectionEnd ?? 0;
  const merged = `${input.value.slice(0, start)}${slice}${input.value.slice(end)}`;
  const next = maxLen != null ? merged.replace(/\D/g, "").slice(0, maxLen) : merged.replace(/\D/g, "");
  input.value = next;
  const caret = Math.min(start + slice.length, next.length);
  requestAnimationFrame(() => input.setSelectionRange(caret, caret));
  onChange({ target: input, type: "change" } as React.ChangeEvent<HTMLInputElement>);
};

interface Props {
  section?: IAboutUsSection | null;
  onSave: (formData: FormData) => void;
  onCancel: () => void;
}

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

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: section
      ? {
          year: /^\d{4}$/.test(String(section.year ?? "").trim())
            ? String(section.year).trim()
            : String(section.year ?? "")
                .replace(/\D/g, "")
                .slice(0, 4),
          title: section.title,
          subtitle: section.subtitle,
          sort_order: String(section.sort_order ?? 0),
          status: section.status === 1,
        }
      : {
          year: "",
          title: "",
          subtitle: "",
          sort_order: "0",
          status: true,
        },
  });

  const yearRegister = register("year", {
    required: "Requerido",
    validate: (v) =>
      /^\d{4}$/.test(String(v ?? "").trim()) || "Debe ser exactamente 4 números (ej. 2012)",
  });

  const sortOrderRegister = register("sort_order", {
    required: "Requerido",
    validate: (v) => {
      const s = String(v ?? "").trim();
      if (!/^\d+$/.test(s)) return "Solo números enteros, sin signos ni decimales";
      return true;
    },
  });

  const onSubmit = (data: FormValues) => {
    if (!section && !selectedFile) {
      alert("Selecciona una imagen para la nueva sección.");
      return;
    }

    const formData = new FormData();
    formData.append("year", data.year.trim());
    formData.append("title", data.title.trim());
    formData.append("subtitle", data.subtitle.trim());
    const orderNum = parseInt(String(data.sort_order).replace(/\D/g, ""), 10);
    formData.append("sort_order", String(Number.isNaN(orderNum) ? 0 : orderNum));
    formData.append("status", data.status ? "1" : "0");

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

    onSave(formData);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>{section ? `Editar: ${section.title}` : "Nueva sección (Nosotros)"}</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-3">
              <div className="form-group">
                <label>Año *</label>
                <input
                  type="text"
                  inputMode="numeric"
                  autoComplete="off"
                  maxLength={4}
                  placeholder="2012"
                  className={`form-control ${errors.year ? "is-invalid" : ""}`}
                  name={yearRegister.name}
                  ref={yearRegister.ref}
                  onBlur={yearRegister.onBlur}
                  onChange={(e) => {
                    const el = e.currentTarget;
                    const next = el.value.replace(/\D/g, "").slice(0, 4);
                    if (el.value !== next) el.value = next;
                    yearRegister.onChange(e);
                  }}
                  onKeyDown={blockNonDigitKeys}
                  onPaste={(e) => sanitizeDigitPaste(e, 4, yearRegister.onChange)}
                />
                {errors.year && <div className="invalid-feedback d-block">{errors.year.message}</div>}
              </div>
            </div>
            <div className="col-md-3">
              <div className="form-group">
                <label>Orden en la línea de tiempo *</label>
                <input
                  type="text"
                  inputMode="numeric"
                  autoComplete="off"
                  placeholder="0"
                  className={`form-control ${errors.sort_order ? "is-invalid" : ""}`}
                  name={sortOrderRegister.name}
                  ref={sortOrderRegister.ref}
                  onBlur={sortOrderRegister.onBlur}
                  onChange={(e) => {
                    const el = e.currentTarget;
                    const next = el.value.replace(/\D/g, "");
                    if (el.value !== next) el.value = next;
                    sortOrderRegister.onChange(e);
                  }}
                  onKeyDown={blockNonDigitKeys}
                  onPaste={(e) => sanitizeDigitPaste(e, null, sortOrderRegister.onChange)}
                />
                {errors.sort_order && (
                  <div className="invalid-feedback d-block">{errors.sort_order.message}</div>
                )}
              </div>
            </div>
            <div className="col-md-6">
              <div className="form-group">
                <label>Título *</label>
                <input
                  type="text"
                  className={`form-control ${errors.title ? "is-invalid" : ""}`}
                  {...register("title", { required: "Requerido" })}
                />
                {errors.title && <div className="invalid-feedback">{errors.title.message}</div>}
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>Subtítulo *</label>
                <textarea
                  rows={4}
                  className={`form-control ${errors.subtitle ? "is-invalid" : ""}`}
                  {...register("subtitle", { required: "Requerido" })}
                />
                {errors.subtitle && (
                  <div className="invalid-feedback">{errors.subtitle.message}</div>
                )}
              </div>
            </div>
            <div className="col-md-12 mt-2">
              <InputImageSingle
                initialImage={section?.imageUrl}
                onFileChange={setSelectedFile}
                inputId="about-us-section-image"
                label={section ? "Imagen (opcional: nueva reemplaza la actual)" : "Imagen *"}
                helperText="Recomendado 400x200px."
              />
            </div>
            <div className="col-md-12 mt-3">
              <div className="form-check">
                <input type="checkbox" className="form-check-input" id="about-us-status" {...register("status")} />
                <label className="form-check-label" htmlFor="about-us-status">
                  Activo
                </label>
              </div>
            </div>
          </div>
          <div className="form-actions mt-4">
            <button type="submit" className="btn btn-primary">
              <i className="fas fa-save" /> Guardar
            </button>
            <button type="button" className="btn btn-secondary ml-2" onClick={onCancel}>
              Cancelar
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};