// ── ChapterListPage ───────────────────────────────────────────────────────────

function ChapterListPage({ subjectId, onBack, onNavigate }) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');

  function load() {
    setLoading(true);
    setError('');
    fetch(`/api/children/subjects/${subjectId}/chapters`, { 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');
        setData(body);
      })
      .catch((err) => setError(err.message || 'Could not load chapters, please try again'))
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { load(); }, [subjectId]);

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

  if (error) {
    return (
      <div className="child-shell">
        <div className="chapter-list-card">
          <button className="chapter-back-btn" onClick={onBack}>← Back</button>
          <p className="subject-error" style={{ marginTop: '1.5rem' }}>{error}</p>
          <button className="child-login-btn" style={{ marginTop: '1rem' }} onClick={load}>Retry</button>
        </div>
      </div>
    );
  }

  const { subject, chapters } = data;

  return (
    <div className="child-shell">
      <div className="chapter-list-card">
        <button className="chapter-back-btn" onClick={onBack}>← Back</button>
        <div className="chapter-subject-header">
          <span className="chapter-subject-emoji">{subject.emoji}</span>
          <span className="chapter-subject-name">{subject.name}</span>
        </div>
        <div className="chapter-list">
          {chapters.map((ch) => (
            <div
              key={ch.id}
              className="chapter-row chapter-row--clickable"
              onClick={() => onNavigate && onNavigate(`/chapter/${ch.id}`)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => e.key === 'Enter' && onNavigate && onNavigate(`/chapter/${ch.id}`)}
            >
              <span className="chapter-seq">{ch.sequence_number}.</span>
              <span className="chapter-name">{ch.name}</span>
              {ch.started && (
                <span className="chapter-badge">
                  Lv {ch.current_level}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}