/* Lovingo — printable PDF preview */

function PdfView({ names, puzzle, onBack }) {
  const across = puzzle.placements.filter((p) => p.dir === "across");
  const down = puzzle.placements.filter((p) => p.dir === "down");

  const boardRef1 = React.useRef(null);
  const boardRef2 = React.useRef(null);
  const [cell, setCell] = React.useState(null);
  const gap = 5;

  React.useLayoutEffect(() => {
    function fit() {
      const el = boardRef1.current;
      if (!el) return;
      // pdf-board padding is 0; measure the board div's actual width
      const avail = el.clientWidth - 4; // 2px breathing room each side
      const byW = Math.floor((avail - (puzzle.cols - 1) * gap) / puzzle.cols);
      setCell(Math.min(46, Math.max(14, byW)));
    }
    fit();
    const ro = new ResizeObserver(fit);
    if (boardRef1.current) ro.observe(boardRef1.current);
    return () => ro.disconnect();
  }, [puzzle]);

  const grid = cell !== null
    ? <PuzzleGrid puzzle={puzzle} reveal={false} variant="paper" cell={cell} gap={gap} />
    : null;
  const gridReveal = cell !== null
    ? <PuzzleGrid puzzle={puzzle} reveal={true} variant="paper" cell={cell} gap={gap} />
    : null;

  return (
    <div className="pdf-screen">
      <div className="pdf-toolbar wrap">
        <button className="btn btn-ghost btn-sm" onClick={onBack}><Icon name="arrow-left" size={16} /> Bulmacaya dön</button>
        <div className="pdf-toolbar-mid"><Icon name="doc" size={15} /> PDF önizleme · 2 sayfa</div>
        <button className="btn btn-primary btn-sm" onClick={() => window.print()}>
          <Icon name="download" size={16} /> PDF olarak indir
        </button>
      </div>

      <div className="pdf-stage">
        {/* Sheet 1 — puzzle */}
        <div className="pdf-sheet">
          <div className="pdf-band">
            <div>
              <div className="pdf-kicker">LOVELYZER · AŞK BULMACASI</div>
              <div className="pdf-names">{names.a} <span>&</span> {names.b}</div>
            </div>
            <div className="pdf-heart"><Icon name="heart" size={20} stroke={2} /></div>
          </div>

          <div className="pdf-sub">Boş kutucukları, soruların cevaplarıyla birlikte doldurun. {names.date ? "· " + names.date : ""}</div>

          <div className="pdf-board" ref={boardRef1}>
            {grid}
          </div>

          <div className="pdf-clues">
            <div className="pdf-clue-col">
              <div className="pdf-clue-title">Yatay →</div>
              {across.map((p) => (
                <div className="pdf-clue" key={p.number}><b>{p.number}.</b> {p.clue} <i>({p.letters})</i></div>
              ))}
            </div>
            <div className="pdf-clue-col">
              <div className="pdf-clue-title">Dikey ↓</div>
              {down.map((p) => (
                <div className="pdf-clue" key={p.number}><b>{p.number}.</b> {p.clue} <i>({p.letters})</i></div>
              ))}
            </div>
          </div>

          <div className="pdf-foot">
            <span>https://lovelyzer.com</span>
            <span>{new Date().toLocaleDateString("tr-TR")} {new Date().toLocaleTimeString("tr-TR", { hour: "2-digit", minute: "2-digit" })} · Sayfa 1 / 4</span>
          </div>
        </div>

        {/* Sheet 2 — answer key */}
        <div className="pdf-sheet">
          <div className="pdf-band">
            <div>
              <div className="pdf-kicker">CEVAP ANAHTARI</div>
              <div className="pdf-names">{names.a} <span>&</span> {names.b}</div>
            </div>
            <div className="pdf-heart"><Icon name="check" size={20} stroke={2.4} /></div>
          </div>
          <div className="pdf-sub">Sadece kontrol için — önce birlikte çözmeyi deneyin!</div>

          <div className="pdf-board" ref={boardRef2}>
            {gridReveal}
          </div>

          <div className="pdf-clues">
            <div className="pdf-clue-col">
              <div className="pdf-clue-title">Yatay →</div>
              {across.map((p) => (
                <div className="pdf-clue" key={p.number}><b>{p.number}.</b> {p.clue} — <u>{p.word}</u></div>
              ))}
            </div>
            <div className="pdf-clue-col">
              <div className="pdf-clue-title">Dikey ↓</div>
              {down.map((p) => (
                <div className="pdf-clue" key={p.number}><b>{p.number}.</b> {p.clue} — <u>{p.word}</u></div>
              ))}
            </div>
          </div>
          <div className="pdf-foot">
            <span>https://lovelyzer.com</span>
            <span>{new Date().toLocaleDateString("tr-TR")} {new Date().toLocaleTimeString("tr-TR", { hour: "2-digit", minute: "2-digit" })} · Sayfa 2 / 4</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PdfView = PdfView;