/* Lovelyzer — result / game board screen */

function Result({ names, puzzle, onBack, onEdit, onPdf, onShuffle }) {
  const [reveal, setReveal] = React.useState(false);
  const [warnOpen, setWarnOpen] = React.useState(true);
  React.useEffect(() => { setWarnOpen(true); }, [puzzle]);
  const across = puzzle.placements.filter((p) => p.dir === "across");
  const down = puzzle.placements.filter((p) => p.dir === "down");
  const lonely = puzzle.unplaced || [];

  const boardRef = React.useRef(null);
  const [cell, setCell] = React.useState(null);
  React.useLayoutEffect(() => {
    function fit() {
      if (!boardRef.current) return;
      // board-card padding (22px × 2) + board-inner padding (8px × 2) = 60px
      const avail = boardRef.current.clientWidth - 60;
      const gap = 6;
      // byW guarantees the grid fits within avail (floor ensures no overflow)
      const byW = Math.floor((avail - (puzzle.cols - 1) * gap) / puzzle.cols);
      setCell(Math.min(52, Math.max(14, byW)));
    }
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(boardRef.current);
    return () => ro.disconnect();
  }, [puzzle]);

  return (
    <div className="result-wrap">
      {/* Sticky header: compact nav only */}
      <div className="result-header glass">
        <div className="wrap result-header-inner">
          <nav className="result-nav">
            <button className="brand brand-btn" onClick={onBack}>
              <span className="brand-mark"><Icon name="heart" size={18} stroke={2} style={{ color: "#fff" }} /></span>
              Lovelyzer
            </button>
            <div className="result-toolbar">
              <button className="btn btn-ghost btn-sm" onClick={onEdit}><Icon name="edit" size={15} /><span className="tbtn-txt"> Düzenle</span></button>
              <button className="btn btn-ghost btn-sm" onClick={onShuffle}><Icon name="shuffle" size={15} /><span className="tbtn-txt"> Yeniden diz</span></button>
              <button className="btn btn-primary btn-sm" onClick={onPdf}><Icon name="download" size={16} /><span className="tbtn-txt"> PDF indir</span></button>
            </div>
          </nav>
        </div>
      </div>

      {/* Main content */}
      <div className="wrap result-body">
        {lonely.length > 0 && warnOpen && (
          <div className="warn-banner glass fade-in">
            <span className="warn-ico"><Icon name="alert" size={18} /></span>
            <div className="warn-text">
              <strong>{lonely.length} kelime diğerleriyle harf paylaşamadı</strong>
              <span>
                {lonely.join(", ")} — bu kelime{lonely.length > 1 ? "ler" : ""} bulmacada bağımsız duruyor.
                Daha bağlantılı bir bulmaca için cevapları değiştirip "Yeniden diz"i deneyin.
              </span>
            </div>
            <button className="warn-close" onClick={() => setWarnOpen(false)} aria-label="Kapat">
              <Icon name="close" size={16} />
            </button>
          </div>
        )}

        <div className="result-grid fade-up-2">
          <div className="board-card glass" ref={boardRef}>
            <div className="board-top">
              <span className="board-kicker"><Icon name="grid" size={15} /> Oyun Tahtası</span>
              <button className={"reveal-toggle " + (reveal ? "on" : "")} onClick={() => setReveal(!reveal)}>
                <Icon name={reveal ? "eye-off" : "eye"} size={16} />
                {reveal ? "Cevapları gizle" : "Cevapları göster"}
              </button>
            </div>
            <div className="board-inner">
              <div className="board-inner-center">
                {cell !== null && <PuzzleGrid puzzle={puzzle} reveal={reveal} variant="app" cell={cell} gap={6} />}
              </div>
            </div>
            <div className="board-legend">
              <span className="clue-meta"><span className="dot" /> Boş kutucukları birlikte doldurun</span>
            </div>
          </div>

          <aside className="clue-panel glass">
            <ClueGroup title="Yatay" dir="Y" items={across} reveal={reveal} />
            <ClueGroup title="Dikey" dir="D" items={down} reveal={reveal} />
          </aside>
        </div>
      </div>
    </div>
  );
}

function ClueGroup({ title, dir, items, reveal }) {
  if (!items.length) return null;
  return (
    <div className="clue-group">
      <div className="clue-group-title">{title}</div>
      {items.map((p) => (
        <div className="clue" key={p.dir + p.number}>
          <span className="clue-badge">{p.number}</span>
          <div>
            <div className="clue-dir">{dir} · {p.letters} harf</div>
            <div className="clue-q">{p.clue}</div>
            {reveal && <div className="clue-a">Cevap: <b>{p.word}</b></div>}
          </div>
        </div>
      ))}
    </div>
  );
}

window.Result = Result;