Configuración e Integración del Iframe en el Frontend

export function ConsultaAsistidaIframe({ embedUrl }: { embedUrl: string }) {
  return (
    <div className="w-full h-full min-h-[760px] rounded-2xl overflow-hidden shadow-sm border border-slate-200">
      <iframe
        src={embedUrl}
        allow="microphone"
        title="Consulta Médica Asistida por IA"
        className="w-full h-full min-h-[760px] border-0"
        loading="lazy"
      />
    </div>
  );
}

useEffect(() => {
  const QLINI_ORIGIN = "https://app.qlini.co"; // O tu dominio asignado de Qlini

  function handleMessage(event: MessageEvent) {
    // 1. Validar origen por seguridad
    if (event.origin !== QLINI_ORIGIN) return;

    const { type, payload } = event.data || {};

    switch (type) {
      case "ready":
        console.log("Iframe listo y cargado");
        break;
      case "recording":
        console.log("El médico inició la grabación de voz");
        // Puedes deshabilitar botones de navegación para evitar pérdidas
        break;
      case "processing":
        console.log("La IA está procesando el audio dictado");
        break;
      case "review":
        console.log("Borrador clínico disponible para revisión");
        break;
      case "delivering":
        console.log("Médico pulsó Finalizar. Entregando resultado por webhook");
        break;
      case "failed":
        console.error("Error en la sesión:", payload?.error);
        break;
    }
  }

  window.addEventListener("message", handleMessage);
  return () => window.removeEventListener("message", handleMessage);
}, []);