// Playable Memory game — pairs of shapes/letters
function MemoryGame() {
  const SYMBOLS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
  const buildDeck = () => {
    const deck = [...SYMBOLS, ...SYMBOLS]
      .map((s, i) => ({ s, i, flipped: false, matched: false }))
      .sort(() => Math.random() - 0.5)
      .map((c, i) => ({ ...c, i }));
    return deck;
  };
  const [deck, setDeck] = React.useState(buildDeck);
  const [selected, setSelected] = React.useState([]);
  const [moves, setMoves] = React.useState(0);
  const [won, setWon] = React.useState(false);

  // Lower-is-better: report raw moves count when game is won. This is what
  // powers the "First Match" and "Sharp Eye" stickers — both are derived
  // server-side from the saved Memory Zoo score (see components/Stickers.jsx).
  window.useReportScore(won ? moves : 0);

  const flip = (idx) => {
    if (selected.length >= 2) return;
    if (deck[idx].flipped || deck[idx].matched) return;
    const next = deck.map((c, i) => i === idx ? { ...c, flipped: true } : c);
    const newSel = [...selected, idx];
    setDeck(next);
    setSelected(newSel);
    if (newSel.length === 2) {
      setMoves(m => m + 1);
      const [a, b] = newSel;
      if (next[a].s === next[b].s) {
        setTimeout(() => {
          setDeck(d => {
            const upd = d.map((c, i) => (i === a || i === b) ? { ...c, matched: true } : c);
            if (upd.every(c => c.matched)) setWon(true);
            return upd;
          });
          setSelected([]);
        }, 500);
      } else {
        setTimeout(() => {
          setDeck(d => d.map((c, i) => (i === a || i === b) ? { ...c, flipped: false } : c));
          setSelected([]);
        }, 900);
      }
    }
  };

  const reset = () => {
    setDeck(buildDeck());
    setSelected([]);
    setMoves(0);
    setWon(false);
  };

  return (
    <div>
      <div className="game-info-row" style={{ marginBottom: 20, marginTop: 0 }}>
        <div className="pill-stat">Moves: {moves}</div>
        <div className="pill-stat">Matched: {deck.filter(c => c.matched).length / 2} / {SYMBOLS.length}</div>
        <button className="btn btn-yellow" onClick={reset} style={{ marginLeft: 'auto', padding: '10px 18px', fontSize: 14 }}>
          Shuffle
        </button>
      </div>
      <div className="memory-grid">
        {deck.map((c, i) => (
          <div
            key={i}
            className={`mem-card ${c.flipped ? 'flipped' : ''} ${c.matched ? 'matched' : ''}`}
            onClick={() => flip(i)}
          >
            <span>{c.s}</span>
          </div>
        ))}
      </div>
      {won && (
        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <h2 style={{ color: 'var(--c-grass)' }}>You did it! 🎈</h2>
          <p style={{ marginTop: 8 }}>Solved in {moves} moves.</p>
          <button className="btn btn-primary" onClick={reset} style={{ marginTop: 12 }}>Play again</button>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MemoryGame });