// Pummel Tale — main app
const { useState, useEffect, useRef } = React;

// ---------- Particles canvas ----------
function useParticles(canvasRef, opts = {}) {
  const { count = 60, color = "rgba(200, 153, 90, 0.45)", color2 = "rgba(214, 58, 63, 0.35)" } = opts;
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf, w, h;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    function resize() {
      w = window.innerWidth;
      h = window.innerHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    resize();
    window.addEventListener("resize", resize);

    const particles = Array.from({ length: count }, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      r: Math.random() * 1.6 + 0.4,
      vx: (Math.random() - 0.5) * 0.15,
      vy: -(Math.random() * 0.25 + 0.05),
      a: Math.random() * 0.7 + 0.3,
      c: Math.random() > 0.7 ? color2 : color,
      drift: Math.random() * Math.PI * 2,
    }));

    function frame(t) {
      ctx.clearRect(0, 0, w, h);
      for (const p of particles) {
        p.x += p.vx + Math.sin((t * 0.0005) + p.drift) * 0.08;
        p.y += p.vy;
        if (p.y < -10) { p.y = h + 10; p.x = Math.random() * w; }
        if (p.x < -10) p.x = w + 10;
        if (p.x > w + 10) p.x = -10;
        ctx.beginPath();
        ctx.fillStyle = p.c.replace(/[\d.]+\)$/, `${p.a})`);
        ctx.shadowBlur = 8;
        ctx.shadowColor = p.c;
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.shadowBlur = 0;
      raf = requestAnimationFrame(frame);
    }
    raf = requestAnimationFrame(frame);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, [count, color, color2]);
}

// ---------- Reveal on scroll ----------
function useRevealOnScroll() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Player counter ticker ----------
function usePlayerCounter(initial = 1847) {
  const [n, setN] = useState(initial);
  useEffect(() => {
    const i = setInterval(() => {
      setN(prev => {
        const delta = Math.floor(Math.random() * 9) - 4;
        return Math.max(1500, Math.min(2400, prev + delta));
      });
    }, 3200);
    return () => clearInterval(i);
  }, []);
  return n;
}

// ---------- Section observer for active nav ----------
function useActiveSection(setActive) {
  useEffect(() => {
    const ids = ["home", "features", "mix", "ranking", "download", "news"];
    const sections = ids.map(id => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.35) {
          setActive(e.target.id);
        }
      });
    }, { threshold: [0.35, 0.6] });
    sections.forEach(s => io.observe(s));
    return () => io.disconnect();
  }, []);
}

// ---------- Tweaks defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blood",
  "particles": true,
  "particleDensity": 60,
  "showFloatCards": true,
  "glint": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  blood: { blood: "#a31d22", bloodBright: "#d63a3f", gold: "#c8995a", goldBright: "#f0c97a" },
  arcane: { blood: "#3a4fa3", bloodBright: "#5b8fd4", gold: "#c8995a", goldBright: "#f0c97a" },
  emerald: { blood: "#1f6e4a", bloodBright: "#3aa07a", gold: "#c8995a", goldBright: "#f0c97a" },
  void: { blood: "#5a2a8a", bloodBright: "#8a4fc2", gold: "#c8995a", goldBright: "#f0c97a" },
};

function App() {
  const [active, setActive] = useState("home");
  const canvasRef = useRef(null);
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const players = usePlayerCounter();

  useRevealOnScroll();
  useActiveSection(setActive);
  useParticles(canvasRef, {
    count: tweaks.particles ? tweaks.particleDensity : 0,
    color: `rgba(200,153,90,0.45)`,
    color2: `rgba(214,58,63,0.40)`,
  });

  // Apply accent palette via CSS custom props
  useEffect(() => {
    const p = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.blood;
    document.documentElement.style.setProperty("--blood", p.blood);
    document.documentElement.style.setProperty("--blood-bright", p.bloodBright);
  }, [tweaks.accent]);

  // Toggle glint
  useEffect(() => {
    document.documentElement.classList.toggle("no-glint", !tweaks.glint);
  }, [tweaks.glint]);

  // Toggle float cards
  useEffect(() => {
    document.documentElement.classList.toggle("hide-floats", !tweaks.showFloatCards);
  }, [tweaks.showFloatCards]);

  return (
    <div className="app">
      <Header active={active} setActive={setActive}/>
      <Hero players={players}/>
      <div className="reveal"><Features/></div>
      <div className="reveal"><MixSystem/></div>
      <div className="reveal"><Ranking/></div>
      <div className="reveal"><Download/></div>
      <div className="reveal"><News/></div>
      <Footer/>

      <canvas id="particles" ref={canvasRef}></canvas>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Theme">
          <window.TweakRadio
            label="Accent"
            value={tweaks.accent}
            options={[
              { value: "blood", label: "Blood" },
              { value: "arcane", label: "Arcane" },
              { value: "emerald", label: "Emerald" },
              { value: "void", label: "Void" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Atmosphere">
          <window.TweakToggle label="Particles"   value={tweaks.particles} onChange={(v) => setTweak("particles", v)}/>
          <window.TweakSlider label="Density"     value={tweaks.particleDensity} min={0} max={140} step={5} onChange={(v) => setTweak("particleDensity", v)}/>
          <window.TweakToggle label="Float Cards" value={tweaks.showFloatCards} onChange={(v) => setTweak("showFloatCards", v)}/>
          <window.TweakToggle label="Button Glint" value={tweaks.glint} onChange={(v) => setTweak("glint", v)}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);