// diag-results.jsx — Resultados: scorecard, radar, brecha, proyección, recomendación y envío.

function normalizePhone(raw) {
  let d = (raw || '').replace(/\D/g, '');
  if (d.startsWith('00')) d = d.slice(2);
  if (d.length === 10) d = '52' + d;       // MX local sin lada de país
  return d;
}

function buildSummaryText(nombre, scores, rec, growth) {
  const L = window.diagLevelLabel;
  const lines = [];
  lines.push(`THE NEXT LEVEL 360 — Diagnóstico de ${nombre || 'tu perfil'}`);
  lines.push('');
  lines.push(`Hoy estás en: ${rec.avg.toFixed(1)}/5 · Nivel "${L(rec.avg)}"`);
  lines.push(`Tu siguiente nivel: ${growth.goal.toFixed(1)}/5 · "${L(growth.goal)}"`);
  lines.push('');
  lines.push('TUS 8 EJES (hoy → siguiente nivel):');
  scores.forEach(s => {
    const gap = (s.target - s.current);
    const arrow = gap > 0.1 ? ` (+${gap.toFixed(1)})` : '';
    lines.push(`• ${s.n} ${s.name}: ${s.current.toFixed(1)} → ${s.target.toFixed(1)}${arrow}`);
  });
  lines.push('');
  lines.push(`EJE PRIORITARIO: ${rec.top.name}`);
  lines.push(`TIEMPO ESTIMADO: ${rec.estWeeks} semanas`);
  lines.push(`PROGRAMA SUGERIDO: ${rec.program.title} (${rec.program.meta.price})`);
  lines.push('');
  lines.push('Tu siguiente nivel empieza hoy. — Coach Arturo Ceballos');
  return lines.join('\n');
}

/* mensaje optimizado para WhatsApp: encabezado visual + resumen + CTA con link */
function buildWhatsAppText(nombre, scores, rec, growth) {
  const L = window.diagLevelLabel;
  const first = nombre ? nombre.split(' ')[0] : '';
  const top3 = rec.focus.map(f => `   • *${f.name}:* ${f.current.toFixed(1)} → ${f.target.toFixed(1)}`).join('\n');
  return (
`🎯 *THE NEXT LEVEL 360*
*Diagnóstico de los 8 Ejes*
━━━━━━━━━━━━━━━
${first ? `Hola, soy *${first}*. Comparto mi diagnóstico y quiero más información 👇` : 'Hola, comparto mi diagnóstico y quiero más información 👇'}

📍 *Hoy estoy en:* ${rec.avg.toFixed(1)}/5 — _${L(rec.avg)}_
🚀 *Mi siguiente nivel:* ${growth.goal.toFixed(1)}/5 — _${L(growth.goal)}_
⏱ *Tiempo estimado:* ${rec.estWeeks} semanas
🔑 *Eje prioritario:* ${rec.top.name}

📊 *Mis 3 prioridades:*
${top3}

✅ *Programa sugerido:*
${rec.program.title} · ${rec.program.meta.price}

📎 _Adjunto el PDF completo de mi diagnóstico._
— vía Coach Arturo Ceballos

👉 https://thenextlevel360.com`
  );
}

const IconWA = () => (
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 18.15c-1.52 0-3.01-.41-4.3-1.18l-.31-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.35c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/>
  </svg>
);
const IconMail = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>
  </svg>
);

function Results({ data, scores, rec, growth, onRestart }) {
  const summary = buildSummaryText(data.nombre, scores, rec, growth);
  const waText = buildWhatsAppText(data.nombre, scores, rec, growth);
  const COACH_WA = '525568095911';
  const waHref = `https://wa.me/${COACH_WA}?text=${encodeURIComponent(waText)}`;
  const mailHref = `mailto:${encodeURIComponent(data.email || '')}` +
    `?subject=${encodeURIComponent('Tu Diagnóstico The Next Level 360')}` +
    `&body=${encodeURIComponent(summary)}`;
  const L = window.diagLevelLabel;
  const p = rec.program;
  const first = data.nombre ? data.nombre.split(' ')[0] : '';

  const handleWAClick = () => {
    // trigger PDF download so the user can attach it in the chat
    setTimeout(() => { if (typeof window.__diagPrintPdf === 'function') { try { window.__diagPrintPdf(); } catch(e){} } }, 400);
  };

  return (
    <section className="diag-fade">
      <div className="res-hero">
        <div className="res-eyebrow">Tu diagnóstico está listo</div>
        <h2 className="res-title">{first ? first + ', ' : ''}este es tu <em>punto de partida</em></h2>
        <p className="res-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 className="res-scorecard">
          <div className="res-score">
            <div className="big">{rec.avg.toFixed(1)}<span className="of"> /5</span></div>
            <div className="lbl">Hoy · {L(rec.avg)}</div>
          </div>
          <div className="res-score accent">
            <div className="big">{growth.goal.toFixed(1)}<span className="of"> /5</span></div>
            <div className="lbl">Tu siguiente nivel</div>
          </div>
          <div className="res-score">
            <div className="big">{rec.estWeeks}<span className="of"> sem</span></div>
            <div className="lbl">Para lograrlo</div>
          </div>
        </div>
      </div>

      {/* RADAR */}
      <div className="res-panel">
        <div className="res-panel-head">
          <h3 className="res-panel-title">Mapa de los 8 ejes</h3>
          <div className="res-legend">
            <span className="lg"><span className="sw cur" /> Hoy</span>
            <span className="lg"><span className="sw tgt" /> Tu siguiente nivel</span>
          </div>
        </div>
        <window.RadarChart scores={scores} />
      </div>

      {/* BRECHA (dot-plot coloquial) */}
      <div className="res-panel">
        <div className="res-panel-head">
          <h3 className="res-panel-title">¿Qué te falta para subir de nivel?</h3>
        </div>
        <div className="res-legend gap-legend">
          <span className="lg"><span className="dotleg now" /> Aquí estás hoy</span>
          <span className="lg"><span className="dotleg goal" /> Aquí quieres llegar</span>
        </div>
        <window.DetailBars scores={scores} />
        <div className="gap-callout">
          <div className="gap-callout-ic">⏱</div>
          <div>
            Para cerrar esta brecha y llegar a tu siguiente nivel necesitas aproximadamente
            <b> {rec.estWeeks} semanas</b> de trabajo enfocado.
          </div>
        </div>
      </div>

      {/* GROWTH PROJECTION */}
      <window.GrowthSection growth={growth} program={rec.program} nombre={data.nombre} />

      {/* RECOMMENDATION */}
      <div className="res-panel rec">
        <div className="rec-tag">● Tu siguiente paso recomendado</div>
        <div className="rec-focus">
          {rec.focus.map(f => (
            <span className="rec-chip" key={f.key}>{f.name} <b>{f.current.toFixed(1)}→{f.target.toFixed(1)}</b></span>
          ))}
        </div>
        <h3 className="rec-prog-title">{p.title}</h3>
        <p className="rec-reason">{rec.reason}</p>
        <ul className="rec-bullets">
          {p.bullets.map((b, i) => <li key={i}>{b}</li>)}
        </ul>
        <div className="rec-foot">
          <div><div className="rf-lbl">{p.tag}</div></div>
          <div><div className="rf-lbl">Duración estimada</div><div className="rf-val">{rec.estWeeks} semanas</div></div>
          <div><div className="rf-lbl">Inversión</div><div className="rf-val">{p.meta.price}</div></div>
        </div>

        <div className="send-row">
          <a className="send-btn wa" href={waHref} target="_blank" rel="noopener noreferrer" onClick={handleWAClick}>
            <IconWA /> Enviar por WhatsApp
          </a>
          <a className="send-btn mail" href={mailHref}>
            <IconMail /> Enviar a mi correo
          </a>
          <window.PdfButton nombre={data.nombre} />
        </div>
        <div className="send-note">
          <span className="pin" style={{width:6,height:6,borderRadius:99,background:'var(--d-red)',display:'inline-block'}} />
          Al enviar se abre tu chat con el equipo (+52 556 809 5911) con el resumen, y se genera tu PDF para que lo adjuntes en el mismo chat.
        </div>
      </div>

      <div className="res-restart">
        <a onClick={onRestart}>Volver a empezar el diagnóstico</a>
      </div>
    </section>
  );
}

Object.assign(window, { Results, buildSummaryText, normalizePhone });