// Finish → Lesson handout: a printable page for each session (or one session), for a group to follow along.
import { useState } from 'react';
import { HANDOUT_LAYOUTS, printHandout, sessionsFor } from '../utils/handout.js';

export default function HandoutExport({ project }) {
  const sessions = sessionsFor(project);
  const [which, setWhich] = useState('all');
  const [lines, setLines] = useState(true);
  const [layout, setLayout] = useState('standard');
  const [blocked, setBlocked] = useState(false);
  if (sessions.length === 0) return null;
  const go = () => setBlocked(!printHandout(project, which === 'all' ? null : [which], { answerLines: lines, layout }));
  return (
    <section className="rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5" aria-label="Lesson handout">
      <h2 className="text-sm font-medium">Lesson handout</h2>
      <p className="mb-3 mt-1 text-xs text-[var(--r-sub)]">A page per session with the passage, the outline, discussion questions and room to write. Use “Save as PDF” in the print dialog. Write the questions in the Study stage under “More”; without them, your Application notes are used.</p>
      <div className="flex flex-wrap items-end gap-3">
        <label className="text-xs text-[var(--r-sub)]">Sessions
          <select value={which} onChange={(e) => setWhich(e.target.value)} className="mt-1 block rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)]">
            <option value="all">All {sessions.length} (one page each)</option>
            {sessions.map((s) => <option key={s.chunk.id} value={s.chunk.id}>{s.number}. {s.reference}</option>)}
          </select>
        </label>
        <label className="text-xs text-[var(--r-sub)]">Layout
          <select value={layout} onChange={(e) => setLayout(e.target.value)} className="mt-1 block rounded-lg border border-[var(--r-line)] bg-[var(--r-bg)] px-2.5 py-1.5 text-sm text-[var(--r-text)]">
            {HANDOUT_LAYOUTS.map((l) => <option key={l.id} value={l.id}>{l.label}</option>)}
          </select>
        </label>
        <label className="flex items-center gap-2 pb-2 text-xs text-[var(--r-sub)]"><input type="checkbox" checked={lines} onChange={(e) => setLines(e.target.checked)} className="accent-[var(--r-accent)]" /> Lines to write on</label>
        <button type="button" onClick={go} className="rounded-xl border border-[var(--r-line)] px-4 py-2 text-sm hover:bg-black/5">Print / Save PDF</button>
      </div>
      {blocked && <p role="alert" className="mt-2 text-xs text-[var(--r-danger,#b42318)]">Allow pop-ups for this site to print the handout.</p>}
    </section>
  );
}