/* global React */
const { QUESTIONS: PQ, STAGES: PS, ACTIONS: PA, stageForTotal: pStage, targetedActionIndex: pTarget, EXTENDED } = window.AITS_DATA;

function PrintReport({ scores, contact }) {
  const total = scores.reduce((a, b) => a + (b || 0), 0);
  const stage = pStage(total);
  const targetedIdx = pTarget(scores);
  const stageDetail = EXTENDED.stages[stage.key];
  const lowestScore = Math.min(...scores);
  const dateStr = new Date().toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" });
  const markerPct = ((total - 5) / (15 - 5)) * 100;

  return (
    <div className="print-report" id="print-report">
      {/* COVER */}
      <section className="p-page p-cover">
        <header className="p-cover-head">
          <img src="assets/divergeit-logo.webp" alt="DivergeIT" className="p-logo" />
          <div className="p-eyebrow">AI Threat Spectrum · Self-Assessment Report</div>
        </header>

        {contact && (
          <div className="p-prepared-for">
            <div className="p-eyebrow">Prepared for</div>
            <div className="p-prepared-row">
              <div>
                <div className="p-prepared-name">{contact.name}</div>
                {contact.company && <div className="p-prepared-meta">{contact.company}</div>}
              </div>
              <div className="p-prepared-meta-right">{contact.email}</div>
            </div>
          </div>
        )}

        <div className="p-cover-body">
          <h1 className="p-display">Where you are<br />on the <em>AI Threat Spectrum</em>.</h1>
          <p className="p-lead">
            A five-question self-assessment of your organization's posture on AI governance — visibility, shadow AI, embedded AI, AI-in-code, and a roadmap to Governed.
          </p>
        </div>

        <div className="p-cover-result">
          <div className="p-cover-result-left">
            <div className="p-eyebrow">Your stage</div>
            <h2 className={`p-stage-name p-stage-${stage.key}`}>{stage.name}</h2>
            <p className="p-stage-tag">{stage.tagline}</p>
          </div>
          <div className="p-cover-result-right">
            <div className="p-eyebrow">Total score</div>
            <div className="p-total"><span className="p-total-num">{total}</span><span className="p-total-of">/15</span></div>

            <div className="p-spectrum">
              <div className="p-spectrum-bar">
                <div className="p-seg p-atrisk"></div>
                <div className="p-seg p-exposed"></div>
                <div className="p-seg p-aware"></div>
                <div className="p-seg p-governed"></div>
                <div className="p-spectrum-marker" style={{ left: `${markerPct}%` }}>
                  <span className="p-pin"></span>
                  <span className="p-pin-label">YOU · {total}</span>
                </div>
              </div>
              <div className="p-spectrum-labels">
                {PS.map(s => (
                  <div key={s.key} className={s.key === stage.key ? "p-stage-row p-active" : "p-stage-row"}>
                    <span className="p-stage-label">{s.name}</span>
                    <span className="p-stage-range">{s.range[0]}–{s.range[1]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <footer className="p-cover-foot">
          <div>
            <div className="p-eyebrow">Assessed</div>
            <div className="p-meta">{dateStr}</div>
          </div>
          <div>
            <div className="p-eyebrow">Lowest score</div>
            <div className="p-meta">{lowestScore}/3 · drives your priority action</div>
          </div>
          <div>
            <div className="p-eyebrow">Next assessment</div>
            <div className="p-meta">90 days from today</div>
          </div>
        </footer>
      </section>

      {/* WHAT YOUR STAGE MEANS */}
      <section className="p-page">
        <div className="p-running-head">
          <span>AI Threat Spectrum</span><span>Your Stage · {stage.name}</span>
        </div>
        <h2 className="p-h2">What "{stage.name}" means for your business</h2>
        <p className="p-headline">{stageDetail.headline}</p>
        <p className="p-body">{stageDetail.detail}</p>

        <div className="p-callout">
          <div className="p-eyebrow">90-day mandate</div>
          <p className="p-body p-body-strong">{stageDetail.mandate}</p>
        </div>

        <h3 className="p-h3">Your scores at a glance</h3>
        <table className="p-score-table">
          <thead>
            <tr>
              <th>#</th>
              <th>Question</th>
              <th>Score</th>
              <th>Stage</th>
            </tr>
          </thead>
          <tbody>
            {PQ.map((q, i) => {
              const s = scores[i];
              const lvl = s === 1 ? "At Risk" : s === 2 ? "Partial" : "Governed";
              return (
                <tr key={q.id} className={`p-row p-row-s${s}`}>
                  <td className="p-row-num">{String(i + 1).padStart(2, "0")}</td>
                  <td className="p-row-q">{q.short}</td>
                  <td className="p-row-pts">{s}<span className="p-row-of">/3</span></td>
                  <td className="p-row-lvl">{lvl}</td>
                </tr>
              );
            })}
            <tr className="p-row p-row-total">
              <td></td>
              <td className="p-row-q">TOTAL</td>
              <td className="p-row-pts">{total}<span className="p-row-of">/15</span></td>
              <td className="p-row-lvl">{stage.name}</td>
            </tr>
          </tbody>
        </table>
      </section>

      {/* QUESTION DETAIL — one per question */}
      {PQ.map((q, i) => {
        const s = scores[i];
        const ext = EXTENDED.questions[i];
        return (
          <section className="p-page p-q-page" key={q.id}>
            <div className="p-running-head">
              <span>Question {String(i + 1).padStart(2, "0")} of 05 · {q.short}</span>
              <span className={`p-tag p-tag-s${s}`}>Your score · {s}/3</span>
            </div>

            <h2 className="p-h2">{q.title}</h2>
            <p className="p-body">{ext.whyExpanded}</p>

            <div className="p-q-grid">
              <div className="p-q-col">
                <h3 className="p-h3">The scoring scale</h3>
                {q.options.map(opt => (
                  <div key={opt.score} className={`p-opt ${s === opt.score ? "p-opt-yours" : ""}`}>
                    <span className={`p-opt-badge p-opt-s${opt.score}`}>{opt.score}</span>
                    <div>
                      <div className="p-opt-label">
                        {opt.label}
                        {s === opt.score && <span className="p-opt-flag">YOUR ANSWER</span>}
                      </div>
                      <div className="p-opt-desc">{opt.text}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="p-q-col">
                <h3 className="p-h3">Signals at your level ({s}/3)</h3>
                <ul className="p-signals">
                  {ext.signals[s].map((sig, j) => (
                    <li key={j}>{sig}</li>
                  ))}
                </ul>

                <div className="p-callout p-callout-tight">
                  <div className="p-eyebrow">What to do next</div>
                  <p className="p-body">{ext.perScoreNext[s]}</p>
                </div>
              </div>
            </div>
          </section>
        );
      })}

      {/* TOP 3 ACTIONS */}
      <section className="p-page">
        <div className="p-running-head">
          <span>AI Threat Spectrum</span><span>Top 3 Actions</span>
        </div>
        <h2 className="p-h2">Top 3 Actions</h2>
        <p className="p-lead">Mitigate the risk. Capture the value. Pick the action tied to your lowest score — start there.</p>

        {PA.map((a, i) => {
          const ext = EXTENDED.actions[i];
          const targeted = i === targetedIdx;
          return (
            <div key={a.n} className={`p-action ${targeted ? "p-action-targeted" : ""}`}>
              <div className="p-action-head">
                <div className="p-action-num">{a.n}</div>
                <div>
                  <h3 className="p-action-title">{a.title}</h3>
                  {targeted && <div className="p-action-flag">START HERE · tied to your lowest score</div>}
                </div>
              </div>
              <p className="p-body">{ext.narrative}</p>

              <div className="p-action-grid">
                <div>
                  <div className="p-eyebrow">Mitigates</div>
                  <p className="p-body">{a.mitigates}</p>
                </div>
                <div>
                  <div className="p-eyebrow">Unlocks</div>
                  <p className="p-body">{a.unlocks}</p>
                </div>
              </div>

              <div className="p-action-grid">
                <div>
                  <div className="p-eyebrow">Concrete deliverables</div>
                  <ul className="p-list">
                    {ext.deliverables.map((d, j) => <li key={j}>{d}</li>)}
                  </ul>
                </div>
                <div>
                  <div className="p-eyebrow">Timeline</div>
                  <p className="p-body">{ext.timeline}</p>
                  <div className="p-eyebrow" style={{marginTop:12}}>Owner</div>
                  <p className="p-body">{ext.owner}</p>
                </div>
              </div>

              <div className="p-action-firstmove">
                <div className="p-eyebrow">First move (this week)</div>
                <p className="p-body p-body-strong">{a.firstMove}</p>
              </div>
            </div>
          );
        })}
      </section>

      {/* CLOSING */}
      <section className="p-page p-close">
        <h2 className="p-h2">What happens next</h2>
        <ol className="p-checklist">
          <li>
            <strong>This week.</strong> Share this report with your leadership team. Agree on which of the three actions you'll own. Name a single accountable person for AI governance.
          </li>
          <li>
            <strong>Next 30 days.</strong> Execute the "first move" tied to your priority action. The first move is deliberately small — completion matters more than scope.
          </li>
          <li>
            <strong>Next 90 days.</strong> Re-take this assessment. The point isn't a one-time score; it's the trend. Bring the spectrum chart to your leadership readout and show movement.
          </li>
        </ol>

        <div className="p-cta">
          <h3 className="p-h3">Want help getting to Governed?</h3>
          <p className="p-body">DivergeIT runs this same assessment as a paid engagement — with named owners, milestones, and quarterly re-scoring. We sit alongside your leadership team to move you from your current stage to Governed in defined, defensible steps.</p>
          <p className="p-body p-body-strong">Book a 30-minute consultation: divergeit.com</p>
        </div>

        <footer className="p-foot">
          <img src="assets/divergeit-logo.webp" alt="DivergeIT" className="p-foot-logo" />
          <div className="p-foot-meta">
            <div>AI Threat Spectrum · Self-Assessment Report</div>
            <div>Generated {dateStr} · IT's in our nature</div>
          </div>
        </footer>
      </section>
    </div>
  );
}

window.PrintReport = PrintReport;