// react
import React, { useEffect, useState } from "react";
// third-party
import { useForm } from "react-hook-form";
import { IHero } from "~/admin/interfaces/hero";
import { InputImageSingle } from "~/admin/components/models/InputImageSingle";

interface Props {
  hero: IHero | null;
  handleCreateHeroApi: (formData: FormData) => void;
  onCancel: () => void;
}

const emptyDefaults: Pick<IHero, "title" | "subtitle" | "redirectUrl" | "status"> = {
  title: "",
  subtitle: "",
  redirectUrl: "",
  status: 1,
};

export const HeroForm = ({ hero, handleCreateHeroApi, onCancel }: Props) => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [selectedMobileFile, setSelectedMobileFile] = useState<File | null>(
    null
  );
  const [desktopImageCleared, setDesktopImageCleared] = useState(false);
  const [mobileImageCleared, setMobileImageCleared] = useState(false);

  const heroKey = hero?.heroID ?? "new";

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IHero>({
    defaultValues: hero
      ? {
          ...hero,
          title: hero.title ?? "",
          subtitle: hero.subtitle ?? "",
          redirectUrl: hero.redirectUrl ?? "",
          status: hero.status ?? 1,
        }
      : { ...emptyDefaults, heroID: 0, imageUrl: "" },
  });

  useEffect(() => {
    reset(
      hero
        ? {
            ...hero,
            title: hero.title ?? "",
            subtitle: hero.subtitle ?? "",
            redirectUrl: hero.redirectUrl ?? "",
            status: hero.status ?? 1,
          }
        : { ...emptyDefaults, heroID: 0, imageUrl: "" }
    );
    setSelectedFile(null);
    setSelectedMobileFile(null);
    setDesktopImageCleared(false);
    setMobileImageCleared(false);
  }, [heroKey, hero, reset]);

  const onSubmit = (data: IHero) => {
    // Crear: la imagen desktop sigue siendo obligatoria
    if (!hero?.heroID && !selectedFile && !hero?.imageUrl) {
      return;
    }

    const formData = new FormData();
    formData.append("title", (data.title ?? "").trim());
    formData.append("subtitle", (data.subtitle ?? "").trim());
    formData.append("redirectUrl", (data.redirectUrl ?? "").trim());
    formData.append("status", String(data.status ?? 1));

    if (hero?.heroID) {
      formData.append("heroID", String(hero.heroID));
    }

    // Imagen principal (desktop / horizontal)
    if (selectedFile) {
      formData.append("image", selectedFile);
    } else if (desktopImageCleared) {
      formData.append("clearDesktopImage", "1");
    } else if (hero?.imageUrl) {
      formData.append("existingImageUrl", hero.imageUrl);
    }

    // Imagen para mobile (vertical, opcional)
    if (selectedMobileFile) {
      formData.append("image_mobile", selectedMobileFile);
    } else if (mobileImageCleared) {
      formData.append("clearImageMobile", "1");
    } else if (hero?.imageMobileUrl) {
      formData.append("existingImageMobileUrl", hero.imageMobileUrl);
    }

    handleCreateHeroApi(formData);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>Sección de Hero</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-12">
              <div className="form-group">
                <label>Título</label>
                <input
                  type="text"
                  placeholder="Monticars"
                  className={`form-control ${errors.title ? "is-invalid" : ""}`}
                  {...register("title")}
                />
                {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>
                <input
                  type="text"
                  placeholder="Monticars te ofrece los mejores productos"
                  className={`form-control ${
                    errors.subtitle ? "is-invalid" : ""
                  }`}
                  {...register("subtitle")}
                />
                {errors.subtitle && (
                  <div className="invalid-feedback">
                    {errors.subtitle.message}
                  </div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <InputImageSingle
                  key={`${heroKey}-desktop`}
                  initialImage={hero?.imageUrl}
                  onFileChange={(f) => {
                    setSelectedFile(f);
                    if (f) setDesktopImageCleared(false);
                  }}
                  onClearInitial={() => setDesktopImageCleared(true)}
                  inputId="hero-image-desktop"
                  label="Imagen del hero (1 imagen) *"
                  helperText="Medida recomendada (desktop): 1920 x 590 px (formato horizontal)."
                />
                {!selectedFile && !hero?.imageUrl && (
                  <small className="text-danger">
                    Debes subir una imagen para crear el hero.
                  </small>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <InputImageSingle
                  key={`${heroKey}-mobile`}
                  initialImage={hero?.imageMobileUrl || undefined}
                  onFileChange={(f) => {
                    setSelectedMobileFile(f);
                    if (f) setMobileImageCleared(false);
                  }}
                  onClearInitial={() => setMobileImageCleared(true)}
                  inputId="hero-image-mobile"
                  label="Imagen del hero para mobile (vertical, opcional)"
                  helperText="Medida recomendada (mobile): 1080 x 1350 px (formato vertical)."
                />
                <small className="text-muted">
                  Esta imagen se mostrará solo en dispositivos móviles. Debe ser
                  una imagen vertical para verse correctamente.
                </small>
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>URL de redirección</label>
                <input
                  type="text"
                  placeholder="https://example.com"
                  className={`form-control ${
                    errors.redirectUrl ? "is-invalid" : ""
                  }`}
                  {...register("redirectUrl")}
                />
                {errors.redirectUrl && (
                  <div className="invalid-feedback">
                    {errors.redirectUrl.message}
                  </div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Estado</label>
                <select
                  className="form-control"
                  {...register("status")}
                >
                  <option value={1}>Activo</option>
                  <option value={0}>Pausado</option>
                </select>
              </div>
            </div>
          </div>
          <div className="form-actions">
            <button
              type="submit"
              className="btn btn-primary mr-2"
              disabled={!hero?.heroID && !selectedFile && !hero?.imageUrl}
            >
              <i className="fas fa-save" /> {hero ? "Actualizar" : "Crear"}
            </button>
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onCancel}
            >
              <i className="fas fa-times" /> Cancelar
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};