<!-- Contenedor del widget -->
<div id="manyao-widget"></div>

<!-- Script del widget -->
<script src="https://manyao.pe/widget/manyao-widget.js"
        data-document="UUID_DEL_DOCUMENTO"
        data-token="BEARER_TOKEN"
        data-container="manyao-widget">
</script>

async function loadManyaoWidget(docUuid) {
  // 1. Tu backend obtiene el Bearer token
  const resp = await fetch('/tu-api/manyao-token');
  const { token } = await resp.json();

  // 2. Cargar widget dinámicamente
  const script = document.createElement('script');
  script.src = 'https://manyao.pe/widget/manyao-widget.js';
  script.dataset.document = docUuid;
  script.dataset.token = token;
  script.dataset.container = 'manyao-widget';
  document.body.appendChild(script);
}

loadManyaoWidget('tu-document-uuid');

// GET /api/widget-token/:docId
app.get('/api/widget-token/:docId', async (req, res) => {
  const auth = await fetch('https://api.manyao.pe/v1/auth/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      client_id: process.env.MANYAO_CLIENT_ID,
      client_secret: process.env.MANYAO_CLIENT_SECRET,
      grant_type: 'client_credentials'
    })
  });
  const { access_token } = await auth.json();
  res.json({ token: access_token, documentId: req.params.docId });
});

// GET /api/widget-token.php?doc=UUID
$ch = curl_init('https://api.manyao.pe/v1/auth/token');
curl_setopt_array($ch, [
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => json_encode([
        'client_id'     => getenv('MANYAO_CLIENT_ID'),
        'client_secret' => getenv('MANYAO_CLIENT_SECRET'),
        'grant_type'    => 'client_credentials'
    ]),
    CURLOPT_HTTPHEADER     => ['Content-Type: application/json'],
    CURLOPT_RETURNTRANSFER => true,
]);
$resp = json_decode(curl_exec($ch), true);

header('Content-Type: application/json');
echo json_encode([
    'token'      => $resp['access_token'],
    'documentId' => $_GET['doc']
]);

document.addEventListener('manyao:status', (event) => {
  const { document, signers, session, changed } = event.detail;

  console.log('Estado documento:', document.status);
  console.log('Firmantes:', signers);

  // Solo actuar si hubo cambios reales en este poll
  if (changed) {
    actualizarMiUI(document, signers);
  }
});

window.addEventListener('message', (event) => {
  // Verificar que el mensaje es de manyao
  if (event.data?.type !== 'manyao:status') return;

  const { document, signers, session, changed } = event.data;

  console.log('Estado documento:', document.status);
  console.log('Firmantes:', signers);

  if (changed) {
    actualizarMiUI(document, signers);
  }
});

document.addEventListener('manyao:status', (event) => {
  const { document, signers, changed } = event.detail;

  // Actualizar contador en tu UI
  document.getElementById('progreso').textContent =
    `${document.completed} de ${document.total} firmantes`;

  // Detectar cuando se completó el documento
  if (document.status === 'completed' && document.has_signed_pdf) {
    document.getElementById('descargar').style.display = 'block';
    mostrarNotificacion('¡Documento firmado por todos!');
  }

  // Detectar firmante en revisión manual
  const enRevision = signers.find(s => s.status === 'waiting_review');
  if (enRevision) {
    mostrarAlerta(`${enRevision.name || enRevision.dni} requiere revisión manual`);
  }
});

document.addEventListener('manyao:action', (event) => {
  const { action, documentId, document, signers, data } = event.detail;

  switch (action) {
    case 'signer_added':
      console.log('Firmante agregado:', data.dni);
      break;
    case 'signer_removed':
      console.log('Firmante eliminado:', data.signer_id);
      break;
    case 'signer_review_approve':
      console.log('Firmante aprobado:', data.signer_id);
      break;
    case 'document_download':
      console.log('Documento descargado');
      break;
  }
});

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'manyao:action') return;

  const { action, documentId, document, signers, data } = event.data;
  console.log('Acción:', action, data);
});

// Escuchar cambios de estado (polling)
document.addEventListener('manyao:status', (e) => {
  const { document, signers, changed } = e.detail;
  if (changed) actualizarUI(document, signers);
});

// Escuchar acciones puntuales del emisor
document.addEventListener('manyao:action', (e) => {
  const { action, data, document, signers } = e.detail;

  if (action === 'signer_added') {
    mostrarToast(`Firmante ${data.dni} agregado`);
    actualizarUI(document, signers);
  }

  if (action === 'signer_review_approve') {
    mostrarToast('Firmante aprobado ✅');
    actualizarUI(document, signers);
  }

  if (action === 'document_download') {
    registrarDescarga(document.uuid);
  }
});