'use client';

import { useState, useTransition } from 'react';
import { pedirLlamada, enviarEnlaceFormularioEmail } from '@/app/solicitud/actions';

export default function CanalLlamada({
  leadId,
  telefono,
  email,
}: {
  leadId: string;
  telefono: string;
  email: string;
}) {
  const [pending, startTransition] = useTransition();
  const [confirmacion, setConfirmacion] = useState<string | null>(null);
  const [mostrarProgramar, setMostrarProgramar] = useState(false);
  const [cuando, setCuando] = useState('');
  const [enlaceEnviado, setEnlaceEnviado] = useState(false);

  const llamarAhora = () =>
    startTransition(async () => {
      await pedirLlamada(leadId, 'ahora');
      setConfirmacion(`Te llamamos en menos de 2 minutos al ${telefono}. Tenlo a mano.`);
    });

  const programar = () =>
    startTransition(async () => {
      if (!cuando) return;
      const r = await pedirLlamada(leadId, cuando);
      const fecha = r.programada
        ? new Date(r.programada).toLocaleString('es-ES', {
            day: '2-digit',
            month: 'long',
            hour: '2-digit',
            minute: '2-digit',
          })
        : '';
      setConfirmacion(`Hecho. Te llamaremos el ${fecha} al ${telefono}.`);
    });

  const enviarEnlace = () =>
    startTransition(async () => {
      await enviarEnlaceFormularioEmail(leadId);
      setEnlaceEnviado(true);
    });

  if (confirmacion) {
    return (
      <div className="flex flex-col gap-4">
        <div className="text-sm font-medium text-green-700 bg-green-50 rounded-lg px-4 py-3">
          ✅ {confirmacion}
        </div>
        <div className="border-t border-gray-100 pt-4 flex flex-col gap-3">
          <p className="text-sm text-gray-500 leading-relaxed">
            Para el render necesitamos ver el espacio. Puedes mandarnos las fotos por WhatsApp
            durante la llamada, o te enviamos un enlace al formulario por email para que las subas
            cuando quieras.
          </p>
          {enlaceEnviado ? (
            <div className="text-sm text-gray-600">📧 Te hemos enviado el enlace a {email}.</div>
          ) : (
            <button
              type="button"
              onClick={enviarEnlace}
              disabled={pending}
              className="btn btn-secondary self-start disabled:opacity-60"
            >
              Enviarme el enlace por email
            </button>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="border border-gray-200 rounded-xl p-5 flex flex-col gap-2">
        <span className="text-base font-bold text-black">Llamarme ahora</span>
        <span className="text-sm text-gray-500">Recibes la llamada en menos de 2 minutos.</span>
        <button
          type="button"
          onClick={llamarAhora}
          disabled={pending}
          className="btn btn-primary self-start mt-2 disabled:opacity-60"
        >
          {pending ? 'Pidiendo…' : 'Llamarme ahora'}
        </button>
      </div>

      <div className="border border-gray-200 rounded-xl p-5 flex flex-col gap-2">
        <span className="text-base font-bold text-black">Programar la llamada</span>
        <span className="text-sm text-gray-500">Elige el día y la hora que mejor te venga.</span>
        {mostrarProgramar ? (
          <div className="flex flex-col gap-3 mt-2">
            <input
              type="datetime-local"
              value={cuando}
              onChange={(e) => setCuando(e.target.value)}
              className="w-full px-4 py-3 text-base text-dark bg-white border-[1.5px] border-gray-200 rounded-lg outline-none focus:border-black"
            />
            <button
              type="button"
              onClick={programar}
              disabled={pending || !cuando}
              className="btn btn-primary self-start disabled:opacity-60"
            >
              {pending ? 'Programando…' : 'Confirmar la cita'}
            </button>
          </div>
        ) : (
          <button
            type="button"
            onClick={() => setMostrarProgramar(true)}
            className="btn btn-secondary self-start mt-2"
          >
            Programar llamada
          </button>
        )}
      </div>
    </div>
  );
}
