'use client';

import { useState, useTransition } from 'react';
import { cambiarEstado, marcarGanado } from '@/app/panel/actions';
import { ESTADOS, ESTADO_BADGE, ESTADO_LABEL, formatEuros } from '@/lib/funnel';

type Estado = (typeof ESTADOS)[number];

export default function EstadoControl({
  leadId,
  estado,
  presupuestoEstimado,
}: {
  leadId: string;
  estado: Estado;
  presupuestoEstimado: number | null;
}) {
  const [pending, startTransition] = useTransition();
  const [modalOpen, setModalOpen] = useState(false);
  const [precio, setPrecio] = useState(
    presupuestoEstimado != null ? String(Math.round(presupuestoEstimado / 100)) : ''
  );
  const [error, setError] = useState<string | null>(null);

  function onSelect(nuevo: Estado) {
    if (nuevo === estado) return;
    if (nuevo === 'ganado') {
      setModalOpen(true);
      return;
    }
    setError(null);
    startTransition(async () => {
      await cambiarEstado(leadId, nuevo);
    });
  }

  function confirmarGanado() {
    const euros = Number(precio);
    if (!Number.isFinite(euros) || euros <= 0) {
      setError('Introduce un precio final válido.');
      return;
    }
    setError(null);
    startTransition(async () => {
      await marcarGanado(leadId, euros);
      setModalOpen(false);
    });
  }

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap gap-2">
        {ESTADOS.map((e) => {
          const active = e === estado;
          return (
            <button
              key={e}
              type="button"
              disabled={pending}
              onClick={() => onSelect(e)}
              className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors disabled:opacity-50 ${
                active
                  ? `${ESTADO_BADGE[e]} border-transparent ring-2 ring-black/80`
                  : 'bg-white text-gray-600 border-gray-200 hover:border-gray-400'
              }`}
            >
              {ESTADO_LABEL[e]}
            </button>
          );
        })}
      </div>

      {modalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
          <div className="bg-white rounded-xl p-6 w-full max-w-sm flex flex-col gap-4 shadow-xl">
            <div className="flex flex-col gap-1">
              <h3 className="text-lg font-extrabold text-black">Marcar como Ganado</h3>
              <p className="text-sm text-gray-500">
                Introduce el precio final firmado. Calcularemos la desviación vs el presupuesto
                estimado ({formatEuros(presupuestoEstimado)}).
              </p>
            </div>
            <label className="flex flex-col gap-1 text-sm font-medium text-gray-700">
              Precio final firmado (€)
              <input
                type="number"
                min="0"
                value={precio}
                onChange={(e) => setPrecio(e.target.value)}
                className="border border-gray-300 rounded-lg px-3 py-2 text-black focus:outline-none focus:border-black"
                autoFocus
              />
            </label>
            {error && <p className="text-sm text-red-600">{error}</p>}
            <div className="flex gap-2 justify-end">
              <button
                type="button"
                onClick={() => setModalOpen(false)}
                disabled={pending}
                className="px-4 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100"
              >
                Cancelar
              </button>
              <button
                type="button"
                onClick={confirmarGanado}
                disabled={pending}
                className="px-4 py-2 rounded-lg text-sm font-semibold bg-black text-white hover:bg-gray-800 disabled:opacity-50"
              >
                {pending ? 'Guardando…' : 'Confirmar'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
