'use client';

import { useState } from 'react';
import { useFormStatus } from 'react-dom';
import { TIPO_LABEL } from '@/lib/funnel';

const TIPOS = ['cocina', 'bano', 'salon', 'comedor', 'integral', 'otro'] as const;
const CALIDADES = [
  { value: 'basica', label: 'Básica' },
  { value: 'media', label: 'Media' },
  { value: 'premium', label: 'Premium' },
] as const;
const URGENCIAS = [
  { value: 'alta', label: 'Cuanto antes' },
  { value: 'media', label: 'En unos meses' },
  { value: 'baja', label: 'Sin prisa' },
] as const;

const MAX_ZONAS = 6;
const MAX_FOTOS_ZONA = 6;

const inputClass =
  'w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] border-gray-200 rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)]';

type Zona = { key: number; tipo: string };

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      className="btn btn-primary btn-lg w-full justify-center mt-1 disabled:opacity-60 disabled:cursor-not-allowed disabled:transform-none"
      disabled={pending}
      aria-busy={pending}
    >
      {pending ? (
        <>
          <span
            className="w-[18px] h-[18px] border-2 border-white/30 border-t-white rounded-full animate-[spin_0.7s_linear_infinite] shrink-0"
            aria-hidden="true"
          />
          Generando tu presupuesto...
        </>
      ) : (
        'Pedir mi presupuesto'
      )}
    </button>
  );
}

function ZonaCard({
  index,
  zona,
  onTipoChange,
  onRemove,
  removable,
}: {
  index: number;
  zona: Zona;
  onTipoChange: (tipo: string) => void;
  onRemove: () => void;
  removable: boolean;
}) {
  const [previews, setPreviews] = useState<string[]>([]);

  const handleFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files ?? []).slice(0, MAX_FOTOS_ZONA);
    previews.forEach((url) => URL.revokeObjectURL(url));
    setPreviews(files.map((f) => URL.createObjectURL(f)));
  };

  return (
    <div className="border border-gray-200 rounded-xl p-5 flex flex-col gap-4 bg-gray-50/50">
      <div className="flex items-center justify-between">
        <span className="text-sm font-bold text-black">Zona {index + 1}</span>
        {removable && (
          <button
            type="button"
            onClick={onRemove}
            className="text-xs text-gray-400 hover:text-red-600 font-medium"
          >
            Quitar
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="flex flex-col gap-2">
          <label htmlFor={`zona-${index}-tipo`} className="text-sm font-semibold text-dark">
            ¿Qué zona es?
          </label>
          <select
            id={`zona-${index}-tipo`}
            name={`zona-${index}-tipo`}
            value={zona.tipo}
            onChange={(e) => onTipoChange(e.target.value)}
            className={inputClass}
          >
            {TIPOS.map((t) => (
              <option key={t} value={t}>
                {TIPO_LABEL[t]}
              </option>
            ))}
          </select>
        </div>
        <div className="flex flex-col gap-2">
          <label htmlFor={`zona-${index}-m2`} className="text-sm font-semibold text-dark">
            Metros cuadrados <span className="text-gray-400 font-normal">(aprox.)</span>
          </label>
          <input
            id={`zona-${index}-m2`}
            name={`zona-${index}-m2`}
            type="number"
            min="1"
            step="1"
            inputMode="numeric"
            placeholder="12"
            className={inputClass}
          />
        </div>
      </div>

      <div className="flex flex-col gap-2">
        <label htmlFor={`zona-${index}-calidad`} className="text-sm font-semibold text-dark">
          Nivel de acabado
        </label>
        <select
          id={`zona-${index}-calidad`}
          name={`zona-${index}-calidad`}
          defaultValue="media"
          className={inputClass}
        >
          {CALIDADES.map((c) => (
            <option key={c.value} value={c.value}>
              {c.label}
            </option>
          ))}
        </select>
      </div>

      <div className="flex flex-col gap-2">
        <label htmlFor={`zona-${index}-notas`} className="text-sm font-semibold text-dark">
          Detalles de esta zona <span className="text-gray-400 font-normal">(opcional)</span>
        </label>
        <textarea
          id={`zona-${index}-notas`}
          name={`zona-${index}-notas`}
          rows={2}
          placeholder="Materiales, estilo, caprichos… (ej. suelo porcelánico, encimera de cuarzo, ducha de obra)."
          className={inputClass}
        />
      </div>

      <div className="flex flex-col gap-2">
        <label htmlFor={`zona-${index}-fotos`} className="text-sm font-semibold text-dark">
          Fotos de la zona{' '}
          <span className="text-gray-400 font-normal">(hasta {MAX_FOTOS_ZONA})</span>
        </label>
        <input
          id={`zona-${index}-fotos`}
          name={`zona-${index}-fotos`}
          type="file"
          accept="image/*"
          multiple
          onChange={handleFiles}
          className="block w-full text-sm text-gray-600 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-black file:text-white hover:file:bg-gray-800 file:cursor-pointer cursor-pointer"
        />
        {previews.length > 0 && (
          <div className="flex flex-wrap gap-3 mt-2">
            {previews.map((url, i) => (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                key={i}
                src={url}
                alt=""
                className="w-20 h-20 object-cover rounded-lg border border-gray-200"
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default function FormularioZonas({
  action,
}: {
  action: (formData: FormData) => void | Promise<void>;
}) {
  const [zonas, setZonas] = useState<Zona[]>([{ key: 0, tipo: 'cocina' }]);
  const [nextKey, setNextKey] = useState(1);

  const addZona = () => {
    if (zonas.length >= MAX_ZONAS) return;
    setZonas((z) => [...z, { key: nextKey, tipo: 'bano' }]);
    setNextKey((k) => k + 1);
  };

  return (
    <form action={action} className="flex flex-col gap-6">
      <input type="hidden" name="zonasCount" value={zonas.length} />

      <div className="flex flex-col gap-4">
        {zonas.map((z, i) => (
          <ZonaCard
            key={z.key}
            index={i}
            zona={z}
            removable={zonas.length > 1}
            onTipoChange={(tipo) =>
              setZonas((prev) => prev.map((p) => (p.key === z.key ? { ...p, tipo } : p)))
            }
            onRemove={() => setZonas((prev) => prev.filter((p) => p.key !== z.key))}
          />
        ))}
      </div>

      {zonas.length < MAX_ZONAS && (
        <button
          type="button"
          onClick={addZona}
          className="text-sm font-semibold text-[color:var(--brand,#0a0a0a)] self-start hover:underline"
        >
          + Añadir otra zona
        </button>
      )}

      <div className="border-t border-gray-100 pt-5 flex flex-col gap-5">
        <div className="flex flex-col gap-2">
          <label htmlFor="provincia" className="text-sm font-semibold text-dark">
            Provincia
          </label>
          <input
            id="provincia"
            name="provincia"
            type="text"
            placeholder="Madrid"
            autoComplete="address-level1"
            className={inputClass}
          />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div className="flex flex-col gap-2">
            <label htmlFor="urgencia" className="text-sm font-semibold text-dark">
              ¿Para cuándo?
            </label>
            <select id="urgencia" name="urgencia" defaultValue="media" className={inputClass}>
              {URGENCIAS.map((u) => (
                <option key={u.value} value={u.value}>
                  {u.label}
                </option>
              ))}
            </select>
          </div>
          <div className="flex flex-col gap-2">
            <label htmlFor="presupuestoTarget" className="text-sm font-semibold text-dark">
              Presupuesto objetivo <span className="text-gray-400 font-normal">(opcional, €)</span>
            </label>
            <input
              id="presupuestoTarget"
              name="presupuestoTarget"
              type="number"
              min="0"
              step="100"
              inputMode="numeric"
              placeholder="8000"
              className={inputClass}
            />
          </div>
        </div>

        <div className="flex flex-col gap-3">
          <label className="flex items-center gap-3 text-sm font-medium text-dark cursor-pointer">
            <input type="checkbox" name="estructural" className="w-4 h-4 accent-black" />
            Hay que tirar algún muro u obra estructural
          </label>
          <label className="flex items-center gap-3 text-sm font-medium text-dark cursor-pointer">
            <input type="checkbox" name="cambioDistribucion" className="w-4 h-4 accent-black" />
            Hay que mover el inodoro, la ducha o la bañera
          </label>
          <label className="flex items-center gap-3 text-sm font-medium text-dark cursor-pointer">
            <input type="checkbox" name="anteriorA2000" className="w-4 h-4 accent-black" />
            El piso es anterior al año 2000
          </label>
        </div>
      </div>

      <SubmitButton />
      <p className="text-xs text-gray-400 text-center">
        Calculamos un presupuesto orientativo con tus datos. Sin compromiso.
      </p>
    </form>
  );
}
