export default function StudySheet({ sheet, onClose }) {
  return (
    <section className="study-sheet" aria-labelledby="study-sheet-title">
      <div className="study-sheet-actions">
        <button type="button" onClick={() => window.print()}>
          Jetzt drucken
        </button>
        <button type="button" className="quiet" onClick={onClose}>
          Zurück
        </button>
      </div>

      <h1 id="study-sheet-title">Kernel Panic — mein Lern-Spickzettel</h1>
      <p className="study-sheet-meta">
        {sheet.modeLabel} · {sheet.questionCount} Fragen · {sheet.xp} XP ·
        Integrität {sheet.integrity} % · Score {sheet.score} · erstellt am{" "}
        {sheet.createdAt}
      </p>

      {sheet.review.length > 0 ? (
        <>
          <h2>Diese Fragen saßen nicht sofort ({sheet.review.length})</h2>
          {sheet.review.map((entry) => (
            <article key={entry.id} className="study-sheet-entry">
              <h3>
                Kapitel {entry.chapterNumber} · {entry.topic} · „{entry.title}"
              </h3>
              <dl>
                <div>
                  <dt>Lösung</dt>
                  <dd>
                    <code>{entry.solution}</code>
                  </dd>
                </div>
                <div>
                  <dt>Signal</dt>
                  <dd>{entry.signal}</dd>
                </div>
                <div>
                  <dt>Werkzeug</dt>
                  <dd>
                    <code>{entry.tool}</code>
                  </dd>
                </div>
                <div>
                  <dt>Entscheidung</dt>
                  <dd>{entry.decision}</dd>
                </div>
                <div>
                  <dt>Risiko</dt>
                  <dd>{entry.risk}</dd>
                </div>
              </dl>
            </article>
          ))}
        </>
      ) : (
        <p>Keine Frage brauchte einen zweiten Versuch oder einen Hinweis.</p>
      )}

      <h2>Kapitelbilanz</h2>
      <ul className="study-sheet-balance">
        {sheet.results.map((result) => (
          <li key={result.id}>
            Kapitel {result.number} · {result.topic}: {result.clean}/
            {result.total} ohne Hilfe, {result.mistakes} Fehler, {result.hints}{" "}
            Hinweise
          </li>
        ))}
      </ul>
    </section>
  );
}
