// peper-klok.jsx, klokkijken. Twee manieren van spelen:
//   LEES DE KLOK: de klok toont een tijd, kies uit vier antwoorden.
//   ZET DE KLOK:  een tijd staat in woorden, draai de wijzers tot het klopt.
// Antwoorden tonen zowel de cijfertijd (3:30) als de woorden (half 4), zoals
// kinderen het op school leren.
//
// Pit:
//   mild     = hele uren
//   pittig   = hele en halve uren
//   vlammend = kwartieren (kwart over, half, kwart voor)

const KLOK_DIFF = {
  mild:     { stap: 60, rondes: 8,  sub: "hele uren" },
  pittig:   { stap: 30, rondes: 10, sub: "hele en halve uren" },
  vlammend: { stap: 15, rondes: 10, sub: "kwartieren" },
};

function klokWoorden(h, m) {
  const volgend = (h % 12) + 1;
  if (m === 0) return `${h} uur`;
  if (m === 30) return `half ${volgend}`;
  if (m === 15) return `kwart over ${h}`;
  if (m === 45) return `kwart voor ${volgend}`;
  return `${h}:${String(m).padStart(2, "0")}`;
}
function klokDigitaal(h, m) { return `${h}:${String(m).padStart(2, "0")}`; }
function klokKey(t) { return `${t.h}:${t.m}`; }
function klokGelijk(a, b) { return a.h === b.h && a.m === b.m; }

function klokWillekeurig(stap) {
  const h = 1 + Math.floor(Math.random() * 12);
  const m = Math.floor(Math.random() * (60 / stap)) * stap;
  return { h, m };
}
// Uren +/- met 12-uurs rondloop (1..12).
function klokPlusUur(h, d) { return ((h - 1 + d + 12 * 10) % 12) + 1; }
function klokPlusMin(t, d) {
  let m = t.m + d, h = t.h;
  while (m >= 60) { m -= 60; h = klokPlusUur(h, 1); }
  while (m < 0) { m += 60; h = klokPlusUur(h, -1); }
  return { h, m };
}

// Vier antwoorden: het juiste plus drie afleiders in de buurt (uur ernaast,
// andere minuutstand). Afleiders liggen dicht bij het juiste antwoord zodat
// je echt naar de wijzers moet kijken.
function klokOpties(juist, stap) {
  const kandidaten = [];
  const minuten = [];
  for (let m = 0; m < 60; m += stap) minuten.push(m);
  for (const dh of [-1, 0, 1]) {
    for (const m of minuten) {
      const t = { h: klokPlusUur(juist.h, dh), m };
      if (!klokGelijk(t, juist)) kandidaten.push(t);
    }
  }
  kandidaten.sort(() => Math.random() - 0.5);
  const uniek = [];
  const gezien = new Set([klokKey(juist)]);
  for (const t of kandidaten) {
    if (gezien.has(klokKey(t))) continue;
    gezien.add(klokKey(t));
    uniek.push(t);
    if (uniek.length === 3) break;
  }
  return [juist, ...uniek].sort(() => Math.random() - 0.5);
}

// Analoge klok als SVG. Wijzers draaien mee via transform met een korte
// transitie zodat "zet de klok" lekker aanvoelt.
function KlokWijzerplaat({ tijd, size = 240, status }) {
  const uurHoek = ((tijd.h % 12) + tijd.m / 60) * 30;
  const minHoek = tijd.m * 6;
  const rand = status === "good" ? "#5BB85B" : status === "bad" ? "#E63946" : "#1A1A1A";
  const cijfers = Array.from({ length: 12 }, (_, i) => {
    const n = i + 1;
    const a = (n * 30 - 90) * Math.PI / 180;
    return { n, x: 100 + Math.cos(a) * 70, y: 100 + Math.sin(a) * 70 };
  });
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: "block", maxWidth: "100%" }}>
      <circle cx="100" cy="100" r="95" fill="#1A1A1A" />
      <circle cx="100" cy="100" r="90" fill="#E63946" />
      <circle cx="100" cy="100" r="82" fill="#FFF8EC" stroke={rand} strokeWidth="4" />
      {Array.from({ length: 60 }, (_, i) => {
        const a = (i * 6 - 90) * Math.PI / 180;
        const groot = i % 5 === 0;
        const r1 = groot ? 74 : 77, r2 = 80;
        return <line key={i}
          x1={100 + Math.cos(a) * r1} y1={100 + Math.sin(a) * r1}
          x2={100 + Math.cos(a) * r2} y2={100 + Math.sin(a) * r2}
          stroke="#1A1A1A" strokeWidth={groot ? 3 : 1.2} strokeLinecap="round" />;
      })}
      {cijfers.map(c => (
        <text key={c.n} x={c.x} y={c.y + 6} textAnchor="middle"
          fontFamily="'Bangers', sans-serif" fontSize="17" fill="#1A1A1A">{c.n}</text>
      ))}
      {/* pet-groene stip bovenaan als knipoog naar Hete Peper */}
      <circle cx="100" cy="14" r="4" fill="#3FA34D" stroke="#1A1A1A" strokeWidth="1.5" />
      <g style={{ transform: `rotate(${uurHoek}deg)`, transformOrigin: "100px 100px", transition: "transform 0.25s ease" }}>
        <line x1="100" y1="106" x2="100" y2="54" stroke="#1A1A1A" strokeWidth="9" strokeLinecap="round" />
        <line x1="100" y1="106" x2="100" y2="54" stroke="#3FA34D" strokeWidth="4.5" strokeLinecap="round" />
      </g>
      <g style={{ transform: `rotate(${minHoek}deg)`, transformOrigin: "100px 100px", transition: "transform 0.25s ease" }}>
        <line x1="100" y1="108" x2="100" y2="32" stroke="#1A1A1A" strokeWidth="7" strokeLinecap="round" />
        <line x1="100" y1="108" x2="100" y2="32" stroke="#E63946" strokeWidth="3" strokeLinecap="round" />
      </g>
      <circle cx="100" cy="100" r="6" fill="#FFD23F" stroke="#1A1A1A" strokeWidth="2.5" />
    </svg>
  );
}

function PeperKlok({ onClose }) {
  const isMobile = useIsMobile();
  const diff = useDifficulty("peper-klok", "pittig");
  const cfg = KLOK_DIFF[diff.level] || KLOK_DIFF.pittig;

  const [modus, setModus] = React.useState(null); // "lezen" | "zetten"
  const [ronde, setRonde] = React.useState(0);
  const [score, setScore] = React.useState(0);
  const [streak, setStreak] = React.useState(0);
  const [doel, setDoel] = React.useState(() => klokWillekeurig(60));
  const [opties, setOpties] = React.useState([]);
  const [wijzers, setWijzers] = React.useState({ h: 12, m: 0 });
  const [feedback, setFeedback] = React.useState(null);
  const [klaar, setKlaar] = React.useState(false);
  const floaters = useFloaters();

  const nieuweVraag = React.useCallback(() => {
    const t = klokWillekeurig(cfg.stap);
    setDoel(t);
    setOpties(klokOpties(t, cfg.stap));
    // Startstand voor "zet de klok": nooit al juist.
    let s = klokWillekeurig(cfg.stap);
    if (klokGelijk(s, t)) s = klokPlusMin(s, 60);
    setWijzers(s);
    setFeedback(null);
  }, [cfg.stap]);

  const reset = React.useCallback(() => {
    setRonde(0); setScore(0); setStreak(0); setKlaar(false);
    nieuweVraag();
  }, [nieuweVraag]);

  React.useEffect(() => { if (modus) reset(); }, [modus, reset]);

  function beoordeel(gekozen) {
    if (feedback) return;
    const juist = klokGelijk(gekozen, doel);
    setFeedback({ juist, gekozen });
    if (juist) {
      setScore(s => s + 1);
      setStreak(s => s + 1);
      floaters.pop(streak + 1 >= 3 ? "🔥 +1" : "+1", { y: 25, color: "#5BB85B" });
    } else {
      setStreak(0);
    }
  }

  function volgende() {
    const n = ronde + 1;
    if (n >= cfg.rondes) setKlaar(true);
    else { setRonde(n); nieuweVraag(); }
  }

  // Toetsenbord + gamepad: 1-4 kiest een antwoord, pijltjes draaien de
  // wijzers (links/rechts = uur, omhoog/omlaag = minuten), Enter = klaar/volgende.
  React.useEffect(() => {
    if (!modus || klaar) return;
    function onKey(e) {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        if (feedback) volgende();
        else if (modus === "zetten") beoordeel(wijzers);
        return;
      }
      if (feedback) return;
      if (modus === "lezen") {
        const i = ["1", "2", "3", "4"].indexOf(e.key);
        if (i >= 0 && opties[i]) { e.preventDefault(); beoordeel(opties[i]); }
      } else {
        if (e.key === "ArrowRight") { e.preventDefault(); setWijzers(w => ({ ...w, h: klokPlusUur(w.h, 1) })); }
        if (e.key === "ArrowLeft") { e.preventDefault(); setWijzers(w => ({ ...w, h: klokPlusUur(w.h, -1) })); }
        if (e.key === "ArrowUp") { e.preventDefault(); setWijzers(w => klokPlusMin(w, cfg.stap)); }
        if (e.key === "ArrowDown") { e.preventDefault(); setWijzers(w => klokPlusMin(w, -cfg.stap)); }
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  });

  if (!diff.chosen) {
    return (
      <div style={gameShellStyle(isMobile, "groen")}>
        <CloseBtn onClose={onClose} isMobile={isMobile} />
        <GameTitle icon="🕐" kleur="#3FA34D" sub="Hoe laat is het? Leer klokkijken met Hete Peper">
          PEPER KLOK
        </GameTitle>
        <DifficultyPicker
          onChoose={(id) => { diff.choose(id); setModus(null); }}
          currentLevel={diff.level}
          sub="Mild = hele uren. Pittig = ook halve uren. Vlammend = kwart over en kwart voor."
        />
      </div>
    );
  }

  if (!modus) {
    return (
      <div style={gameShellStyle(isMobile, "groen")}>
        <CloseBtn onClose={onClose} isMobile={isMobile} />
        <ShellDecor theme="groen" />
        <GameTitle icon="🕐" kleur="#3FA34D" sub={`Je speelt met ${cfg.sub}`}>
          PEPER KLOK
        </GameTitle>
        <div style={{
          background: "#FFF8EC", border: "4px solid #1A1A1A", boxShadow: "5px 5px 0 #1A1A1A",
          padding: "18px 14px", margin: "16px 0", textAlign: "center", position: "relative", zIndex: 1,
        }}>
          <div style={{
            fontFamily: "'Bangers', sans-serif", fontSize: 28, color: "#E63946",
            letterSpacing: "0.04em", WebkitTextStroke: "1.2px #1A1A1A", textShadow: "3px 3px 0 #1A1A1A",
            marginBottom: 14,
          }}>WAT WIL JE DOEN?</div>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 12 }}>
            <BigButton onClick={() => setModus("lezen")} color="#2D9CDB" style={{ color: "#FFF", fontSize: 24, lineHeight: 1.1 }}>
              👀 LEES DE KLOK
              <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 15, color: "#FFF", marginTop: 4 }}>Kijk naar de wijzers, kies de tijd</div>
            </BigButton>
            <BigButton onClick={() => setModus("zetten")} color="#FF8C1A" style={{ fontSize: 24, lineHeight: 1.1 }}>
              🔧 ZET DE KLOK
              <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 15, marginTop: 4 }}>Draai de wijzers naar de tijd</div>
            </BigButton>
          </div>
          <div style={{ marginTop: 14 }}>
            <button onClick={() => diff.reopen()} style={{
              background: "none", border: "none", cursor: "pointer",
              fontFamily: "'Patrick Hand', cursive", fontSize: 15, color: "#6B5A3D", textDecoration: "underline",
            }}>🌶️ andere pit kiezen</button>
          </div>
        </div>
      </div>
    );
  }

  const status = feedback ? (feedback.juist ? "good" : "bad") : null;
  const getoond = modus === "lezen" ? doel : wijzers;
  const knopKleur = (i) => {
    if (!feedback) return i % 2 === 0 ? "#FFD23F" : "#FFF8EC";
    const t = opties[i];
    if (klokGelijk(t, doel)) return "#5BB85B";
    if (klokGelijk(t, feedback.gekozen)) return "#E63946";
    return "#E9E4D8";
  };

  return (
    <div style={gameShellStyle(isMobile, "groen")}>
      <CloseBtn onClose={onClose} isMobile={isMobile} />
      <ShellDecor theme="groen" />
      {floaters.node}
      <GameTitle icon="🕐" kleur="#3FA34D" sub={modus === "lezen" ? "Hoe laat is het op de klok?" : "Draai de wijzers naar de juiste tijd"}>
        PEPER KLOK
      </GameTitle>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", position: "relative", zIndex: 1 }}>
        <ScoreBadge score={score} total={cfg.rondes} />
        <StreakBadge streak={streak} />
        <DifficultyBadge level={diff.level} />
        <span style={{ fontSize: 15, color: "#6B5A3D", marginLeft: "auto" }}>Vraag {Math.min(ronde + 1, cfg.rondes)} / {cfg.rondes}</span>
      </div>

      {klaar ? (
        <GameDoneScreen score={score} total={cfg.rondes} onReplay={reset} onClose={onClose}
          onChangeDifficulty={() => { setModus(null); diff.reopen(); }}
          perfectMessage="KLOKKENKONING!"
          message={`Je had ${score} van de ${cfg.rondes} goed${score >= cfg.rondes * 0.8 ? ", straf gedaan!" : ". Blijf oefenen!"}`} />
      ) : (
        <div style={{ position: "relative", zIndex: 1 }}>
          {modus === "zetten" && (
            <div style={{
              marginTop: 14, textAlign: "center",
              background: "#FFF8EC", border: "4px solid #1A1A1A", boxShadow: "4px 4px 0 #1A1A1A",
              padding: "10px 14px",
            }}>
              <div style={{ fontSize: 15, color: "#6B5A3D" }}>Zet de klok op</div>
              <div style={{ fontFamily: "'Bangers', sans-serif", fontSize: isMobile ? 30 : 36, color: "#E63946", letterSpacing: "0.04em", lineHeight: 1 }}>
                {klokWoorden(doel.h, doel.m)}
              </div>
              <div style={{ fontSize: 17, color: "#1A1A1A" }}>({klokDigitaal(doel.h, doel.m)})</div>
            </div>
          )}

          <div style={{
            display: "flex", justifyContent: "center", margin: "14px 0",
            animation: status === "bad" ? "pk-shake 0.4s ease" : status === "good" ? "pk-pulse 0.5s ease" : "none",
          }}>
            <KlokWijzerplaat tijd={getoond} size={isMobile ? 230 : 260} status={status} />
          </div>

          {modus === "lezen" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {opties.map((t, i) => (
                <BigButton key={klokKey(t)} onClick={() => beoordeel(t)} disabled={!!feedback}
                  color={knopKleur(i)}
                  style={{
                    fontSize: 26, padding: "10px 8px", lineHeight: 1,
                    color: feedback && (klokGelijk(t, doel) || klokGelijk(t, feedback.gekozen)) ? "#FFF" : "#1A1A1A",
                    opacity: 1,
                  }}>
                  <span style={{ position: "absolute", top: 4, left: 8, fontSize: 13, opacity: 0.6, fontFamily: "'Patrick Hand', cursive" }}>{i + 1}</span>
                  {klokDigitaal(t.h, t.m)}
                  <div style={{ fontFamily: "'Patrick Hand', cursive", fontSize: 16, marginTop: 4, textTransform: "none", letterSpacing: 0 }}>
                    {klokWoorden(t.h, t.m)}
                  </div>
                </BigButton>
              ))}
            </div>
          )}

          {modus === "zetten" && !feedback && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "center" }}>
              <div style={{ display: "grid", gridTemplateColumns: cfg.stap < 60 ? "1fr 1fr 1fr 1fr" : "1fr 1fr", gap: 8, width: "100%", maxWidth: 480 }}>
                <BigButton onClick={() => setWijzers(w => ({ ...w, h: klokPlusUur(w.h, -1) }))} color="#3FA34D" style={{ color: "#FFF", fontSize: 20, padding: "10px 6px" }}>◀ UUR</BigButton>
                <BigButton onClick={() => setWijzers(w => ({ ...w, h: klokPlusUur(w.h, 1) }))} color="#3FA34D" style={{ color: "#FFF", fontSize: 20, padding: "10px 6px" }}>UUR ▶</BigButton>
                {cfg.stap < 60 && <BigButton onClick={() => setWijzers(w => klokPlusMin(w, -cfg.stap))} color="#E63946" style={{ color: "#FFF", fontSize: 20, padding: "10px 6px" }}>▼ {cfg.stap} MIN</BigButton>}
                {cfg.stap < 60 && <BigButton onClick={() => setWijzers(w => klokPlusMin(w, cfg.stap))} color="#E63946" style={{ color: "#FFF", fontSize: 20, padding: "10px 6px" }}>▲ {cfg.stap} MIN</BigButton>}
              </div>
              <div style={{ fontSize: 15, color: "#6B5A3D" }}>
                Nu: <b>{klokDigitaal(wijzers.h, wijzers.m)}</b> ({klokWoorden(wijzers.h, wijzers.m)})
              </div>
              <BigButton onClick={() => beoordeel(wijzers)} color="#FFD23F" style={{ fontSize: 26 }}>✓ KLAAR!</BigButton>
            </div>
          )}

          {feedback && (
            <div style={{
              marginTop: 14, padding: "14px 16px",
              background: feedback.juist ? "#E1F5E1" : "#FFE0DA",
              border: "3px solid #1A1A1A", boxShadow: "3px 3px 0 #1A1A1A",
              animation: "fof-pop 0.45s ease-out both",
            }}>
              <div style={{
                fontFamily: "'Bangers', sans-serif", fontSize: 22,
                color: feedback.juist ? "#3FA34D" : "#B23A2E", letterSpacing: "0.04em", marginBottom: 4,
              }}>{feedback.juist ? "🎉 JUIST!" : "OEPS, MIS!"}</div>
              <div style={{ fontSize: 17, lineHeight: 1.35 }}>
                {modus === "lezen"
                  ? <>De klok staat op <b>{klokDigitaal(doel.h, doel.m)}</b>, dat is <b>{klokWoorden(doel.h, doel.m)}</b>.
                      {" "}De korte groene wijzer is het uur, de lange rode de minuten.</>
                  : feedback.juist
                    ? <>Precies! <b>{klokWoorden(doel.h, doel.m)}</b> is <b>{klokDigitaal(doel.h, doel.m)}</b>.</>
                    : <>Je zette de klok op <b>{klokDigitaal(feedback.gekozen.h, feedback.gekozen.m)}</b> ({klokWoorden(feedback.gekozen.h, feedback.gekozen.m)}),
                        maar het moest <b>{klokDigitaal(doel.h, doel.m)}</b> zijn.</>}
              </div>
              <div style={{ marginTop: 12, display: "flex", justifyContent: "center" }}>
                <BigButton onClick={volgende} color="#2D9CDB" style={{ color: "#FFF", fontSize: 22 }}>
                  {ronde + 1 >= cfg.rondes ? "EINDSCORE →" : "VOLGENDE →"}
                </BigButton>
              </div>
            </div>
          )}
          <style>{`
            @keyframes fof-pop {
              0% { transform: translateY(8px); opacity: 0; }
              100% { transform: translateY(0); opacity: 1; }
            }
            @keyframes pk-shake {
              0%, 100% { transform: translateX(0); }
              20% { transform: translateX(-8px) rotate(-1deg); }
              40% { transform: translateX(8px) rotate(1deg); }
              60% { transform: translateX(-5px); }
              80% { transform: translateX(5px); }
            }
            @keyframes pk-pulse {
              0%, 100% { transform: scale(1); }
              50% { transform: scale(1.05); }
            }
          `}</style>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PeperKlok });