/* Pantalla de informe (paso final) + versión imprimible para PDF.
   Usa window.Diagnosis.buildReport. */

const { useMemo: useMemoR } = React;

function MethodMeter({ score, band }) {
  return (
    <div className="meter">
      <div className="meter-track">
        <div className="meter-fill" style={{ width: `${score}%` }}></div>
        <div className="meter-knob" style={{ left: `${score}%` }}>
          <span>{score}</span>
        </div>
      </div>
      <div className="meter-scale">
        <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
      </div>
    </div>
  );
}

function ScreenReport({ contact, state, btnShape, onRestart }) {
  const report = useMemoR(() => window.Diagnosis.buildReport(state), [state]);
  const firstName = (contact?.name || '').trim().split(/\s+/)[0] || '';

  const waText = encodeURIComponent(
    `Hola, soy ${contact?.name || ''}. Acabo de hacer el diagnóstico de Consultoría Método ` +
    `(Índice ${report.score}/100 · ${report.band.name}). Me gustaría agendar la llamada de 15 minutos para comentarlo.`
  );
  const waHref = `https://wa.me/${report.whatsapp}?text=${waText}`;

  const printPdf = () => window.print();

  return (
    <div className="screen report-screen">
      <div className="report-greet">
        <div className="eyebrow"><span className="dot"></span>Tu informe</div>
        <h1 className="headline" style={{ fontSize: 'clamp(24px, 6.8vw, 30px)' }}>
          {firstName ? <>Hola {firstName}, esto es lo que <em>vemos</em>.</> : <>Esto es lo que <em>vemos</em>.</>}
        </h1>
        <p className="lede" style={{ fontSize: 14, marginBottom: 18 }}>
          Un retrato honesto de tu negocio según tus respuestas, con un primer paso concreto para cada punto.
        </p>
      </div>

      {/* Índice de Método */}
      <div className="report-block index-block">
        <div className="index-head">
          <div>
            <div className="report-label">Índice de Método</div>
            <div className="index-band">{report.band.name}</div>
            <div className="index-tag">{report.band.tag}</div>
          </div>
        </div>
        <MethodMeter score={report.score} band={report.band} />
        <p className="index-desc">{report.band.desc}</p>
      </div>

      {/* Espejo de respuestas */}
      <div className="report-block">
        <div className="report-label">Lo que nos dijiste</div>
        <ul className="mirror-list">
          {report.mirrorAreas.length > 0 && (
            <li>
              <span className="mirror-k">Dónde notas fugas</span>
              <span className="mirror-v">{report.mirrorAreas.join(' · ')}</span>
            </li>
          )}
          <li>
            <span className="mirror-k">Claridad de tus números</span>
            <span className="mirror-v">{report.scale}/10 — {report.clarityLine}</span>
          </li>
          <li>
            <span className="mirror-k">Facturación declarada</span>
            <span className="mirror-v">{report.revenueLabel}</span>
          </li>
        </ul>
      </div>

      {/* Palancas */}
      <div className="report-block">
        <div className="report-label">
          Tus {report.levers.length} {report.levers.length === 1 ? 'palanca prioritaria' : 'palancas prioritarias'}
        </div>
        <div className="lever-list">
          {report.levers.map((lv, i) => (
            <div key={i} className="lever-card">
              <div className="lever-top">
                <span className="lever-icon">{lv.icon}</span>
                <span className="lever-title">{lv.title}</span>
                <span className="lever-num">{String(i + 1).padStart(2, '0')}</span>
              </div>
              <div className="lever-row">
                <span className="lever-tag tag-sym">Síntoma</span>
                <p>{lv.symptom}</p>
              </div>
              <div className="lever-row">
                <span className="lever-tag tag-cost">Por qué te cuesta dinero</span>
                <p>{lv.cost}</p>
              </div>
              <div className="lever-row action">
                <span className="lever-tag tag-act">Tu acción esta semana</span>
                <p>{lv.action}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Benchmark honesto */}
      <div className="report-block bench-block">
        <p>
          <strong>Para situarte:</strong> ordenar estas palancas suele ser el primer paso para
          trabajar con más método, ganar claridad en tus números y recuperar tiempo.
          No te prometemos cifras — preferimos verlo contigo y ser honestos con lo que sí se puede mejorar.
        </p>
      </div>

      {/* CTA */}
      <div className="report-cta">
        <div className="cta-pitch">
          <div className="cta-pitch-title">¿Lo vemos juntos?</div>
          <p>Te contactamos para charlar <strong>15 minutos</strong> y ver si encajamos — si somos lo que necesitas. Sin vender, sin forzar. Solo 15 minutos para ver si de verdad podemos ayudarte.</p>
        </div>
        <a className={`btn btn-primary btn-wa ${btnShape}`} href={waHref} target="_blank" rel="noopener noreferrer">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.67-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35zM12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.5A10 10 0 1 0 12 2z"/></svg>
          Charlemos 15 minutos
        </a>
        <button className={`btn btn-ghost ${btnShape}`} onClick={printPdf}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
          Descargar informe (PDF)
        </button>
        <button className="link-back" style={{ alignSelf: 'center', margin: '4px 0 0' }} onClick={onRestart}>
          Empezar de nuevo
        </button>
      </div>

      {/* ===== Versión imprimible (solo visible al imprimir / PDF) ===== */}
      <PrintReport report={report} contact={contact} />
    </div>
  );
}

/* Documento A4 limpio para impresión / PDF */
function PrintReport({ report, contact }) {
  const date = new Date().toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' });
  return (
    <div className="print-doc" aria-hidden="true">
      <div className="print-header">
        <div className="print-brand">Consultoría <strong>Método</strong></div>
        <div className="print-meta">Informe de diagnóstico · {date}</div>
      </div>

      <h1 className="print-h1">Informe para {contact?.name || 'tu negocio'}</h1>

      <div className="print-index">
        <div className="print-index-num">{report.score}<span>/100</span></div>
        <div>
          <div className="print-index-band">{report.band.name}</div>
          <div className="print-index-tag">{report.band.tag}</div>
          <p className="print-index-desc">{report.band.desc}</p>
        </div>
      </div>

      <h2 className="print-h2">Lo que nos dijiste</h2>
      <table className="print-table">
        <tbody>
          {report.mirrorAreas.length > 0 && (
            <tr><th>Dónde notas fugas</th><td>{report.mirrorAreas.join(' · ')}</td></tr>
          )}
          <tr><th>Claridad de tus números</th><td>{report.scale}/10 — {report.clarityLine}</td></tr>
          <tr><th>Facturación declarada</th><td>{report.revenueLabel}</td></tr>
        </tbody>
      </table>

      <h2 className="print-h2">Tus palancas prioritarias</h2>
      {report.levers.map((lv, i) => (
        <div key={i} className="print-lever">
          <div className="print-lever-title">{String(i + 1).padStart(2, '0')} · {lv.title}</div>
          <p><strong>Síntoma.</strong> {lv.symptom}</p>
          <p><strong>Por qué te cuesta dinero.</strong> {lv.cost}</p>
          <p className="print-action"><strong>Tu acción esta semana.</strong> {lv.action}</p>
        </div>
      ))}

      <div className="print-bench">
        Ordenar estas palancas suele ser el primer paso para trabajar con más método, ganar claridad
        en los números y recuperar tiempo. No prometemos cifras: preferimos verlo contigo y ser honestos
        con lo que sí se puede mejorar.
      </div>

      <div className="print-footer">
        Consultoría Método · Diagnóstico orientativo basado en tus respuestas. No sustituye un análisis financiero detallado.
      </div>
    </div>
  );
}

window.ScreenReport = ScreenReport;