reformix-hackaton/mvp/b2c/src/components/funnel/CanalWhatsapp.tsx

'use client';

import { useState, useTransition } from 'react';
import { iniciarWhatsapp, confirmarWhatsapp } from '@/app/solicitud/actions';

type Fase = 'idle' | 'escrito' | 'confirmado';

export default function CanalWhatsapp({
  leadId,
  nombre,
  telefono,
}: {
  leadId: string;
  nombre: string;
  telefono: string;
}) {
  const [pending, startTransition] = useTransition();
  const [fase, setFase] = useState<Fase>('idle');

  const escribir = () =>
    startTransition(async () => {
      await iniciarWhatsapp(leadId);
      setFase('escrito');
    });

  const confirmar = () =>
    startTransition(async () => {
      await confirmarWhatsapp(leadId);
      setFase('confirmado');
    });

  if (fase === 'confirmado') {
    return (
      <div className="text-sm font-medium text-green-700 bg-green-50 rounded-lg px-4 py-3">
        ✅ ¡Genial, {nombre.split(' ')[0]}! Seguimos por WhatsApp. Allí te pediremos las fotos y los
        detalles para preparar tu presupuesto.
      </div>
    );
  }

  if (fase === 'escrito') {
    return (
      <div className="flex flex-col gap-4">
        <p className="text-sm text-gray-600 leading-relaxed">
          Te acabamos de escribir al <strong className="text-black">{telefono}</strong>. ¿Puedes
          confirmarlo?
        </p>
        <button
          type="button"
          onClick={confirmar}
          disabled={pending}
          className="btn btn-primary self-start disabled:opacity-60"
        >
          {pending ? 'Confirmando…' : 'Lo he recibido'}
        </button>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <p className="text-sm text-gray-600 leading-relaxed">
        Te escribimos al WhatsApp del <strong className="text-black">{telefono}</strong> para seguir
        por ahí. Si el número es correcto, confírmalo y te escribimos ahora mismo.
      </p>
      <button
        type="button"
        onClick={escribir}
        disabled={pending}
        className="btn btn-primary self-start disabled:opacity-60"
      >
        {pending ? 'Escribiendo…' : 'Sí, escríbeme por WhatsApp'}
      </button>
    </div>
  );
}