// diag-pdf.jsx — Hoja PDF clara, una página, todos los elementos visibles al imprimir.

function PdfSheet({ data, scores, rec, growth }) {
  const L = window.diagLevelLabel;
  const p = rec.program;
  const today = window.diagFmtDate(new Date());
  const progHref = 'index.html#programas';
  const first = data.nombre ? data.nombre.split(' ')[0] : 'Tu perfil';
  return (
    <div className="pdf-sheet" id="pdfSheet" aria-hidden="true">
      <div className="pdf-topbar">
        <div className="pdf-brand">
          <img src="assets/logo.svg" alt="The Next Level 360"
               onError={(e)=>{e.target.style.display='none';}} />
        </div>
        <div className="pdf-topbar-meta">
          <span className="pdf-kicker">Diagnóstico de los 8 Ejes</span>
          <span className="pdf-date">{today} · 2026</span>
        </div>
      </div>

      <div className="pdf-hero">
        <div className="pdf-hero-eyebrow"><span className="phe-dot" /> Tu diagnóstico está listo</div>
        <h1 className="pdf-hero-title">{first}, este es tu <em>punto de partida</em></h1>
        <p className="pdf-hero-sub">
          Hoy estás en el nivel <b>{L(rec.avg)}</b>. Tu siguiente nivel es <b>{L(growth.goal)}</b>,
          y tu mayor oportunidad está en <b>{rec.top.name}</b>.
        </p>
      </div>

      <div className="pdf-stats">
        <div className="pdf-stat">
          <div className="pdf-stat-n">{rec.avg.toFixed(1)}<span>/5</span></div>
          <div className="pdf-stat-l">Hoy · {L(rec.avg)}</div>
        </div>
        <div className="pdf-stat accent">
          <div className="pdf-stat-n">{growth.goal.toFixed(1)}<span>/5</span></div>
          <div className="pdf-stat-l">Tu siguiente nivel · {L(growth.goal)}</div>
        </div>
        <div className="pdf-stat">
          <div className="pdf-stat-n">{rec.top.name}</div>
          <div className="pdf-stat-l">Eje prioritario</div>
        </div>
        <div className="pdf-stat">
          <div className="pdf-stat-n">{rec.estWeeks}<span> sem</span></div>
          <div className="pdf-stat-l">Para lograrlo</div>
        </div>
      </div>

      <div className="pdf-cols">
        <div className="pdf-card pdf-radar">
          <div className="pdf-card-t">Mapa de los 8 ejes</div>
          <div className="pdf-legend">
            <span><i className="sw cur" /> Hoy</span><span><i className="sw tgt" /> Siguiente nivel</span>
          </div>
          <window.RadarChart scores={scores} light={true} />
        </div>
        <div className="pdf-card pdf-growth">
          <div className="pdf-card-t">Tu proyección de crecimiento</div>
          <div className="pdf-growth-stmt">
            De <b>{growth.start.toFixed(1)}</b> a <b>{growth.goal.toFixed(1)}/5</b> para <b>{growth.endLabel}</b>
          </div>
          <window.GrowthChart growth={growth} program={p} light={true} />
        </div>
      </div>

      <div className="pdf-card pdf-gap">
        <div className="pdf-card-t">¿Qué tan lejos estás de tu siguiente nivel?</div>
        <div className="pdf-legend gap">
          <span><i className="dotleg now" /> Aquí estás hoy</span>
          <span><i className="dotleg goal" /> Aquí quieres llegar</span>
        </div>
        <window.DetailBars scores={scores} light={true} />
      </div>

      <a className="pdf-rec" href={progHref}>
        <div className="pdf-rec-l">
          <div className="pdf-rec-tag">Tu siguiente paso recomendado</div>
          <div className="pdf-rec-title">{p.title}</div>
          <div className="pdf-rec-reason">{rec.reason}</div>
          <div className="pdf-rec-meta">{p.tag} · {rec.estWeeks} semanas · {p.meta.price}</div>
        </div>
        <div className="pdf-rec-cta">
          Ver programas →
          <span className="pdf-rec-url">{progHref}</span>
        </div>
      </a>

      <div className="pdf-foot">
        THE NEXT LEVEL 360 · Diagnóstico de los 8 Ejes — By Coach Arturo Ceballos
      </div>
    </div>
  );
}

function PdfButton({ nombre }) {
  const go = () => {
    const prev = document.title;
    document.title = 'Diagnóstico 360' + (nombre ? ' - ' + nombre : '');
    const sheet = document.getElementById('pdfSheet');
    let applied = false;
    if (sheet) {
      // Force the whole sheet onto ONE A4 page: measure natural height and
      // scale down uniformly if it would overflow (A4 @96dpi ≈ 1123px tall).
      const A4 = 1123;
      const natural = sheet.scrollHeight;
      const scale = natural > A4 ? (A4 / natural) : 1;
      sheet.style.setProperty('--pdf-scale', scale);
      sheet.classList.add('pdf-printing');
      applied = true;
    }
    const cleanup = () => {
      if (sheet && applied) {
        sheet.classList.remove('pdf-printing');
        sheet.style.removeProperty('--pdf-scale');
      }
      document.title = prev;
    };
    // give layout a tick to settle before printing
    setTimeout(() => { window.print(); setTimeout(cleanup, 400); }, 60);
  };
  React.useEffect(() => { window.__diagPrintPdf = go; }, [nombre]);
  return (
    <button className="send-btn pdf-dl" onClick={go}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
      </svg>
      Descargar PDF
    </button>
  );
}

Object.assign(window, { PdfSheet, PdfButton });