// spelletjes.jsx, pagina voor alle spelletjes. Lijst komt via props (content/games.json).

const CATEGORIEEN = [
  { id: "alles", label: "ALLES", icon: "⭐" },
  { id: "rekenen", label: "REKENEN", icon: "➕" },
  { id: "spelling", label: "SPELLING", icon: "🔤" },
  { id: "geheugen", label: "GEHEUGEN", icon: "🧠" },
  { id: "puzzels", label: "PUZZELS", icon: "🧩" },
  { id: "kleuren", label: "KLEUREN", icon: "🎨" },
];

function SpelletjesPagina({ games = [], onBack, accent = "#E63946", fontScale, setFontScale }) {
  const [cat, setCat] = React.useState("alles");
  const [zoek, setZoek] = React.useState("");
  const [openGame, setOpenGame] = React.useState(null);

  const SPELLETJES = games;
  const filtered = SPELLETJES.filter(s => {
    const c = cat === "alles" || s.categorie === cat;
    const z = !zoek || s.titel.toLowerCase().includes(zoek.toLowerCase());
    return c && z;
  });

  return (
    <div style={{
      background: "#D6EFC7", minHeight: "100%", width: "100%",
      fontFamily: "'Patrick Hand', cursive", color: "#1A1A1A",
      position: "relative",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1.2px, transparent 1.4px)",
        backgroundSize: "12px 12px", pointerEvents: "none", zIndex: 0,
      }} />

      {/* Nav */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10, background: "#F0FAE6",
        borderBottom: "4px solid #1A1A1A", padding: "12px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <PeperMascotte size={50} mood="happy" />
          <div style={{
            fontFamily: "'Bangers', sans-serif", fontSize: 34,
            color: accent, letterSpacing: "0.05em",
            WebkitTextStroke: "1.5px #1A1A1A",
          }}>HETE PEPER</div>
        </div>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          {setFontScale && <FontSizer scale={fontScale} setScale={setFontScale} />}
          <button className="btn-comic" onClick={onBack} style={{ fontSize: 18, padding: "6px 16px" }}>
            ← HOME
          </button>
        </div>
      </div>

      {/* Header */}
      <section style={{ position: "relative", zIndex: 1, padding: "32px 40px 10px" }}>
        <div style={{
          background: "#F0FAE6", border: "5px solid #1A1A1A",
          boxShadow: "8px 8px 0 #1A1A1A", padding: "22px 28px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 20, position: "relative", transform: "rotate(-0.3deg)",
        }}>
          <div>
            <div style={{ fontFamily: "'Bangers', sans-serif", fontSize: 18, color: "#6B5A3D", letterSpacing: "0.1em" }}>
              HETE PEPER · ARCADE
            </div>
            <div style={{
              fontFamily: "'Bangers', sans-serif", fontSize: 76, lineHeight: 0.95,
              color: "#3FA34D", WebkitTextStroke: "2.5px #1A1A1A",
              textShadow: "5px 5px 0 #1A1A1A", letterSpacing: "0.03em",
            }}>
              SPELLETJES
            </div>
            <div style={{ fontSize: 22, color: "#3A3025", maxWidth: 560 }}>
              Word slimmer, sneller en heter! Kies een spel, verzamel ⚡ punten,
              en help Hete Peper de stad te redden.
            </div>
          </div>
          <div style={{ position: "relative" }}>
            <PeperMascotte size={170} mood="determined" fire />
            <div style={{ position: "absolute", top: -18, right: -24 }}>
              <Burst color="#FFD23F" rotate={10} size={100}>{SPELLETJES.length} SPELLEN</Burst>
            </div>
          </div>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{ position: "relative", zIndex: 1, padding: "18px 40px 10px" }}>
        <div style={{
          display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap",
          justifyContent: "space-between",
        }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {CATEGORIEEN.map(c => (
              <button key={c.id} onClick={() => setCat(c.id)}
                style={{
                  background: cat === c.id ? "#1A1A1A" : "#F0FAE6",
                  color: cat === c.id ? "#FFD23F" : "#1A1A1A",
                  border: "3px solid #1A1A1A",
                  fontFamily: "'Bangers', sans-serif", fontSize: 18,
                  letterSpacing: "0.04em", padding: "6px 14px",
                  boxShadow: cat === c.id ? "2px 2px 0 #1A1A1A" : "4px 4px 0 #1A1A1A",
                  cursor: "pointer",
                  transform: cat === c.id ? "translate(2px, 2px)" : "none",
                  transition: "transform 0.08s, box-shadow 0.08s",
                }}>
                <span style={{ marginRight: 6 }}>{c.icon}</span>{c.label}
                {c.id !== "alles" && (
                  <span style={{
                    marginLeft: 8, fontSize: 13, opacity: 0.7,
                  }}>
                    {SPELLETJES.filter(s => s.categorie === c.id).length}
                  </span>
                )}
              </button>
            ))}
          </div>
          <div style={{
            display: "flex", alignItems: "center", gap: 8,
            background: "#F0FAE6", border: "3px solid #1A1A1A",
            padding: "4px 12px", boxShadow: "4px 4px 0 #1A1A1A",
          }}>
            <span style={{ fontSize: 18 }}>🔍</span>
            <input
              value={zoek}
              onChange={e => setZoek(e.target.value)}
              placeholder="Zoek een spel..."
              style={{
                border: 0, outline: 0, background: "transparent",
                fontFamily: "'Patrick Hand', cursive", fontSize: 18,
                padding: "6px 0", width: 200,
              }}
            />
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ position: "relative", zIndex: 1, padding: "18px 40px 40px" }}>
        {filtered.length === 0 ? (
          <div style={{ textAlign: "center", padding: 60, fontSize: 22, color: "#6B5A3D" }}>
            Geen spelletjes gevonden. Probeer een andere categorie!
          </div>
        ) : (
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
            gap: 22,
          }}>
            {filtered.map(s => (
              <SpelCard key={s.id} spel={s} onPlay={() => setOpenGame(s)} />
            ))}
            <VoegToeCard />
          </div>
        )}
      </section>

      {/* Modal */}
      {openGame && (
        <SpelModal spel={openGame} onClose={() => setOpenGame(null)} />
      )}
    </div>
  );
}

function SpelCard({ spel, onPlay }) {
  const klikbaar = spel.status === "speelbaar";
  return (
    <div onClick={klikbaar ? onPlay : undefined}
      style={{
        background: "#F0FAE6", border: "4px solid #1A1A1A",
        boxShadow: "6px 6px 0 #1A1A1A", padding: 0,
        cursor: klikbaar ? "pointer" : "default",
        position: "relative", overflow: "hidden",
        transition: "transform 0.1s, box-shadow 0.1s",
        opacity: klikbaar ? 1 : 0.92,
      }}
      onMouseEnter={e => {
        if (!klikbaar) return;
        e.currentTarget.style.transform = "translate(-2px, -2px)";
        e.currentTarget.style.boxShadow = "8px 8px 0 #1A1A1A";
      }}
      onMouseLeave={e => {
        e.currentTarget.style.transform = "translate(0,0)";
        e.currentTarget.style.boxShadow = "6px 6px 0 #1A1A1A";
      }}>
      {/* Hero tile */}
      <div style={{
        background: spel.kleur, height: 120,
        borderBottom: "4px solid #1A1A1A", position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.12) 1.4px, transparent 1.6px)",
        backgroundSize: "10px 10px",
      }}>
        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: 74, lineHeight: 1,
          color: "#F0FAE6", WebkitTextStroke: "2px #1A1A1A",
          textShadow: "4px 4px 0 #1A1A1A",
        }}>{spel.icon}</div>

        {/* Badges */}
        <div style={{ position: "absolute", top: 8, left: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
          <BadgePill bg="#F0FAE6" color="#1A1A1A">
            {spel.categorie.toUpperCase()}
          </BadgePill>
          {spel.nieuw && (
            <BadgePill bg="#E63946" color="#F0FAE6">NIEUW!</BadgePill>
          )}
        </div>
        <div style={{ position: "absolute", top: 8, right: 8 }}>
          {spel.status === "speelbaar" ? (
            <BadgePill bg="#3FA34D" color="#F0FAE6">● SPEELBAAR</BadgePill>
          ) : (
            <BadgePill bg="#1A1A1A" color="#FFD23F">BINNENKORT</BadgePill>
          )}
        </div>
      </div>

      {/* Info */}
      <div style={{ padding: 16 }}>
        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: 26,
          letterSpacing: "0.03em", lineHeight: 1, color: "#1A1A1A",
        }}>{spel.titel}</div>
        <div style={{ fontSize: 16, color: "#3A3025", marginTop: 6, minHeight: 44 }}>
          {spel.omschrijving}
        </div>

        <div style={{
          marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <div style={{ display: "flex", gap: 2 }} title={`Moeilijkheid: ${spel.pit}/3`}>
            {[1, 2, 3].map(i => (
              <span key={i} style={{ opacity: i <= spel.pit ? 1 : 0.22, fontSize: 20 }}>🌶️</span>
            ))}
          </div>
          {klikbaar ? (
            <span className="btn-comic rood" style={{ fontSize: 16, padding: "5px 14px" }}>
              SPEEL →
            </span>
          ) : (
            <span style={{
              fontFamily: "'Bangers', sans-serif", fontSize: 14,
              color: "#6B5A3D", letterSpacing: "0.04em",
            }}>COMING SOON</span>
          )}
        </div>
      </div>
    </div>
  );
}

function BadgePill({ children, bg, color }) {
  return (
    <span style={{
      background: bg, color,
      border: "2.5px solid #1A1A1A",
      fontFamily: "'Bangers', sans-serif", fontSize: 13,
      letterSpacing: "0.05em", padding: "2px 8px",
      boxShadow: "2px 2px 0 #1A1A1A",
      display: "inline-block", lineHeight: 1.2,
    }}>{children}</span>
  );
}

function VoegToeCard() {
  return (
    <div style={{
      background: "transparent",
      border: "4px dashed #6B5A3D",
      padding: 16, minHeight: 240,
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 8,
      color: "#6B5A3D", textAlign: "center",
    }}>
      <div style={{ fontSize: 48 }}>➕</div>
      <div style={{ fontFamily: "'Bangers', sans-serif", fontSize: 24, letterSpacing: "0.04em" }}>
        MEER SPELLEN KOMEN
      </div>
      <div style={{ fontSize: 15, maxWidth: 220 }}>
        Dit systeem is gemaakt om te groeien, voeg simpelweg een nieuw spel toe aan de lijst.
      </div>
    </div>
  );
}

function SpelModal({ spel, onClose }) {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 100, padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()}>
        {spel.id === "reken-missie" && <RekenSpel onClose={onClose} />}
        {spel.id !== "reken-missie" && (
          <div style={{
            background: "#D6EFC7", border: "5px solid #1A1A1A",
            boxShadow: "8px 8px 0 #1A1A1A", padding: 32,
            maxWidth: 520, position: "relative", textAlign: "center",
          }}>
            <button onClick={onClose} style={{
              position: "absolute", top: -18, right: -18,
              width: 44, height: 44, borderRadius: "50%",
              background: "#1A1A1A", color: "#F0FAE6",
              border: "3px solid #F0FAE6", boxShadow: "2px 2px 0 #1A1A1A",
              fontFamily: "'Bangers', sans-serif", fontSize: 22, cursor: "pointer",
            }}>✕</button>
            <div style={{ fontSize: 60 }}>{spel.icon}</div>
            <div style={{
              fontFamily: "'Bangers', sans-serif", fontSize: 38,
              color: spel.kleur, WebkitTextStroke: "1.5px #1A1A1A",
              letterSpacing: "0.03em", lineHeight: 1, marginTop: 6,
            }}>{spel.titel}</div>
            <div style={{ fontSize: 18, marginTop: 10, color: "#3A3025" }}>
              {spel.omschrijving}
            </div>
            <div style={{
              marginTop: 18, padding: "10px 16px",
              background: "#FFD23F", border: "3px solid #1A1A1A",
              display: "inline-block",
              fontFamily: "'Bangers', sans-serif", fontSize: 20,
            }}>
              BINNENKORT SPEELBAAR
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { SpelletjesPagina });