// ── ChapterPage ───────────────────────────────────────────────────────────────

function ChapterPage({ chapterId, navigate }) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    setLoading(true);
    setError('');
    fetch(`/api/children/chapters/${chapterId}`, { credentials: 'include' })
      .then((r) => r.json().then((body) => ({ ok: r.ok, body })))
      .then(({ ok, body }) => {
        if (!ok) throw new Error(body.error || 'Failed to load chapter');
        setData(body);
      })
      .catch((err) => setError(err.message || 'Could not load chapter'))
      .finally(() => setLoading(false));
  }, [chapterId]);

  if (loading) {
    return (
      <div className="child-shell">
        <div className="chapter-page-card">
          <button className="chapter-back-btn" onClick={() => window.history.back()}>← Back</button>
          <p className="child-loading" style={{ marginTop: '2rem' }}>Loading…</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="child-shell">
        <div className="chapter-page-card">
          <button className="chapter-back-btn" onClick={() => window.history.back()}>← Back</button>
          <p className="subject-error" style={{ marginTop: '1.5rem' }}>{error}</p>
        </div>
      </div>
    );
  }

  const { chapter, subject, progress } = data;
  const isJustStarting = progress.current_level === 1 && !progress.parked_question_id && progress.questions_answered === 0;
  const progressLabel = isJustStarting ? 'Just starting' : `${progress.band} · Level ${progress.current_level}`;

  return (
    <div className="child-shell">
      <div className="chapter-page-card">
        <button className="chapter-back-btn" onClick={() => navigate(`/subject/${subject.id}`)}>← Back</button>
        <div className="chapter-page-context">{subject.emoji} {subject.name}</div>
        <h2 className="chapter-page-title">Chapter {chapter.sequence_number}: {chapter.name}</h2>
        <div className="chapter-page-progress">{progressLabel}</div>

        {chapter.refresher && (
          <RefresherBlock
            markdown={chapter.refresher}
            defaultOpen={progress.current_level <= 5}
          />
        )}

        <button className="chapter-start-btn" onClick={() => navigate(`/question/${chapter.id}`)}>
          {progress.parked_question_id ? 'Resume question' : 'Start'}
        </button>
      </div>
    </div>
  );
}

// ── RefresherBlock ─────────────────────────────────────────────────────────────

function RefresherBlock({ markdown, defaultOpen }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const contentRef = React.useRef(null);

  React.useEffect(() => {
    if (!open || !contentRef.current) return;
    if (typeof marked === 'undefined') return;

    const html = marked.parse(markdown);
    contentRef.current.innerHTML = html;

    if (typeof renderMathInElement !== 'undefined') {
      renderMathInElement(contentRef.current, {
        delimiters: [
          { left: '$$', right: '$$', display: true },
          { left: '$', right: '$', display: false },
          { left: '\\(', right: '\\)', display: false },
          { left: '\\[', right: '\\]', display: true },
        ],
        throwOnError: false,
      });
    }
  }, [open, markdown]);

  if (!open) {
    return (
      <button className="refresher-show-link" onClick={() => setOpen(true)}>
        📖 Show refresher
      </button>
    );
  }

  return (
    <div className="refresher-block">
      <div className="refresher-header">
        <span className="refresher-title">📖 Quick refresher</span>
        <button className="refresher-hide-btn" onClick={() => setOpen(false)}>hide</button>
      </div>
      <div className="refresher-content" ref={contentRef} />
    </div>
  );
}