// straffer-historiek.jsx — eigen pagina met de volledige geschiedenis van
// het kettingspel "Wat is straffer dan peper?"

function StrafferHistoriekPagina({ onBack, fontScale, setFontScale }) {
  const [chain, setChain] = React.useState(null);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/straffer/history")
      .then(async r => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const ct = r.headers.get("content-type") || "";
        if (!ct.includes("application/json")) throw new Error("API niet beschikbaar");
        return r.json();
      })
      .then(d => setChain(d.chain || []))
      .catch(e => setErr(e.message));
  }, []);

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

      <div style={{
        position: "sticky", top: 0, zIndex: 20,
        background: "#F0FAE6",
        borderBottom: "5px solid #1A1A1A",
        padding: "14px 40px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 16, flexWrap: "wrap",
        boxShadow: "0 4px 0 rgba(0,0,0,0.08)",
      }}>
        <button onClick={onBack} className="btn-comic" style={{ fontSize: 20, padding: "6px 16px" }}>
          ← HOME
        </button>
        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: 40, letterSpacing: "0.05em",
          color: "#E63946", WebkitTextStroke: "2px #1A1A1A",
          textShadow: "4px 4px 0 #1A1A1A",
          textAlign: "center", flex: "1 1 auto",
        }}>
          📜 GESCHIEDENIS
        </div>
        <FontSizer scale={fontScale} setScale={setFontScale} />
      </div>

      <section style={{
        position: "relative", zIndex: 2,
        padding: "32px 40px 60px",
        maxWidth: 1200, margin: "0 auto",
      }}>
        <div style={{
          background: "#F0FAE6", border: "4px solid #1A1A1A",
          boxShadow: "8px 8px 0 #1A1A1A", padding: "20px 24px", marginBottom: 24,
          fontSize: 20,
        }}>
          Iedereen die iets straffers verzon dan de vorige kampioen krijgt hier een eigen plekje. Hoe verder in de lijst, hoe straffer!
        </div>

        {err && (
          <div style={{
            background: "#FBE9E7", border: "3px solid #1A1A1A",
            padding: "16px 20px", fontSize: 18, color: "#B23A2E",
          }}>
            ⚠️ Geschiedenis kan niet geladen worden: {err}
          </div>
        )}

        {!chain && !err && (
          <div style={{ textAlign: "center", fontSize: 24, padding: 40 }}>
            🌶️ Laden…
          </div>
        )}

        {chain && chain.length === 0 && (
          <div style={{ textAlign: "center", fontSize: 22, padding: 40 }}>
            Nog geen items in de keten!
          </div>
        )}

        {chain && chain.length > 0 && (
          <ol style={{
            listStyle: "none", margin: 0, padding: 0,
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
            gap: 16,
          }}>
            {chain.map((x, i) => {
              const isCurrent = i === chain.length - 1;
              return (
                <li key={x.id} style={{
                  background: isCurrent ? "#FFD23F" : "#FFF8EC",
                  border: "4px solid #1A1A1A",
                  boxShadow: "5px 5px 0 #1A1A1A",
                  padding: "16px 18px",
                  position: "relative",
                  transform: `rotate(${(i % 2 === 0 ? -0.4 : 0.4)}deg)`,
                }}>
                  {isCurrent && (
                    <div style={{
                      position: "absolute", top: -12, right: 12,
                      background: "#E63946", color: "#F0FAE6",
                      border: "3px solid #1A1A1A", boxShadow: "2px 2px 0 #1A1A1A",
                      padding: "2px 10px",
                      fontFamily: "'Bangers', sans-serif", fontSize: 16,
                      letterSpacing: "0.04em",
                    }}>KAMPIOEN</div>
                  )}
                  <div style={{
                    fontFamily: "'Bangers', sans-serif", fontSize: 18,
                    letterSpacing: "0.06em", color: "#6B5A3D",
                  }}>#{i + 1}</div>
                  <div style={{
                    display: "flex", alignItems: "center", gap: 14, marginTop: 4,
                  }}>
                    <div style={{ fontSize: 56, lineHeight: 1 }} aria-hidden="true">{x.emoji || "✨"}</div>
                    <div style={{
                      fontFamily: "'Bangers', sans-serif",
                      fontSize: x.item.length > 14 ? 22 : x.item.length > 10 ? 26 : 32,
                      lineHeight: 1, color: "#E63946",
                      WebkitTextStroke: "1.5px #1A1A1A",
                      textShadow: "3px 3px 0 #1A1A1A",
                      letterSpacing: "0.02em",
                      textTransform: "uppercase",
                      overflowWrap: "anywhere",
                    }}>{x.item}</div>
                  </div>
                  <div style={{ fontSize: 16, color: "#3A3025", marginTop: 8 }}>
                    door <b>{x.submitter}</b><br />
                    <span style={{ color: "#6B5A3D" }}>{formatStrafferDatum(x.datum)}</span>
                  </div>
                  {x.uitleg && (
                    <div style={{
                      fontSize: 17, marginTop: 10,
                      background: isCurrent ? "#FFF8DA" : "#F0FAE6",
                      border: "2px dashed #1A1A1A",
                      padding: "8px 10px",
                    }}>
                      {x.uitleg}
                    </div>
                  )}
                </li>
              );
            })}
          </ol>
        )}

        <div style={{ marginTop: 28, textAlign: "center" }}>
          <button onClick={onBack} className="btn-comic rood" style={{ fontSize: 22 }}>
            ← TERUG OM TE SPELEN
          </button>
        </div>
      </section>
    </div>
  );
}

function formatStrafferDatum(iso) {
  if (!iso) return "";
  try {
    const d = new Date(iso);
    return d.toLocaleDateString("nl-BE", { day: "numeric", month: "long", year: "numeric" });
  } catch { return ""; }
}

Object.assign(window, { StrafferHistoriekPagina });