/* eslint-disable */
// SlotSimba — main app: router + tweaks

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "neon-classic",
  "bgMood": "midnight",
  "particles": true,
  "density": "comfy"
}/*EDITMODE-END*/;

// Background aurora moods — decoupled from the accent palette.
const BG_MOODS = {
  "midnight": { label: "Midnight (indigo/violet/teal)", "--bg-aura-1": "#2f2d86", "--bg-aura-2": "#6c3a8e", "--bg-aura-3": "#1f5f6e" },
  "abyss":    { label: "Abyss (near-neutral haze)",     "--bg-aura-1": "#26304c", "--bg-aura-2": "#2c2f44", "--bg-aura-3": "#1f3640" },
  "ember":    { label: "Ember (amber/bronze)",          "--bg-aura-1": "#7a4a16", "--bg-aura-2": "#6e3318", "--bg-aura-3": "#8a6a1c" },
  "teal":     { label: "Deep teal (single cool)",       "--bg-aura-1": "#175863", "--bg-aura-2": "#1d6e7a", "--bg-aura-3": "#124852" },
  "plum":     { label: "Plum noir (wine/violet)",       "--bg-aura-1": "#5a1f4e", "--bg-aura-2": "#3a2a6e", "--bg-aura-3": "#4a1f3a" },
  "neon":     { label: "Neon (match accents)",          "--bg-aura-1": "var(--accent-2)", "--bg-aura-2": "var(--accent-3)", "--bg-aura-3": "var(--accent-1)" },
};

function applyBgMood(name) {
  const m = BG_MOODS[name] || BG_MOODS["midnight"];
  const root = document.documentElement;
  Object.entries(m).forEach(([k, v]) => {
    if (k.startsWith("--")) root.style.setProperty(k, v);
  });
}

const PALETTES = {
  "neon-classic": {
    label: "Neon classic",
    "--accent-1": "#22d3ee",
    "--accent-2": "#00ffff",
    "--accent-3": "#ff4fa3",
    "--accent-1-soft": "rgba(34,211,238,0.12)",
    "--accent-1-glow": "rgba(34,211,238,0.45)",
    "--accent-2-soft": "rgba(0,255,255,0.12)",
    "--accent-2-glow": "rgba(0,255,255,0.45)",
    "--accent-3-soft": "rgba(255,79,163,0.12)",
    "--accent-3-glow": "rgba(255,79,163,0.45)",
  },
  "midnight-violet": {
    label: "Midnight violet",
    "--accent-1": "#a78bfa",
    "--accent-2": "#22d3ee",
    "--accent-3": "#f472b6",
    "--accent-1-soft": "rgba(167,139,250,0.14)",
    "--accent-1-glow": "rgba(167,139,250,0.5)",
    "--accent-2-soft": "rgba(34,211,238,0.14)",
    "--accent-2-glow": "rgba(34,211,238,0.5)",
    "--accent-3-soft": "rgba(244,114,182,0.14)",
    "--accent-3-glow": "rgba(244,114,182,0.5)",
  },
  "mane-gold": {
    label: "Mane gold",
    "--accent-1": "#ffd166",
    "--accent-2": "#ffba49",
    "--accent-3": "#ff7849",
    "--accent-1-soft": "rgba(255,209,102,0.14)",
    "--accent-1-glow": "rgba(255,209,102,0.55)",
    "--accent-2-soft": "rgba(255,186,73,0.14)",
    "--accent-2-glow": "rgba(255,186,73,0.55)",
    "--accent-3-soft": "rgba(255,120,73,0.14)",
    "--accent-3-glow": "rgba(255,120,73,0.55)",
  },
  "molten-gold": {
    label: "Molten gold",
    "--accent-1": "#ffd166",
    "--accent-2": "#ff7849",
    "--accent-3": "#ef476f",
    "--accent-1-soft": "rgba(255,209,102,0.14)",
    "--accent-1-glow": "rgba(255,209,102,0.5)",
    "--accent-2-soft": "rgba(255,120,73,0.14)",
    "--accent-2-glow": "rgba(255,120,73,0.5)",
    "--accent-3-soft": "rgba(239,71,111,0.14)",
    "--accent-3-glow": "rgba(239,71,111,0.5)",
  },
  "mono-mint": {
    label: "Mono mint",
    "--accent-1": "#5eead4",
    "--accent-2": "#34d399",
    "--accent-3": "#a3e635",
    "--accent-1-soft": "rgba(94,234,212,0.14)",
    "--accent-1-glow": "rgba(94,234,212,0.5)",
    "--accent-2-soft": "rgba(52,211,153,0.14)",
    "--accent-2-glow": "rgba(52,211,153,0.5)",
    "--accent-3-soft": "rgba(163,230,53,0.14)",
    "--accent-3-glow": "rgba(163,230,53,0.5)",
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES["neon-classic"];
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => {
    if (k.startsWith("--")) root.style.setProperty(k, v);
  });
}

/* =====================  ROUTER  ===================== */
function parsePath() {
  let path = location.pathname || "/";
  if (path.length > 1 && path.endsWith("/")) path = path.slice(0, -1);
  const query = {};
  const qs = location.search ? location.search.slice(1) : "";
  if (qs) qs.split("&").forEach(p => { const [k, v] = p.split("="); if (k) query[k] = decodeURIComponent(v||""); });
  return { path: path || "/", query };
}

function App() {
  const [{ path, query }, setRoute] = useState(parsePath());
  useEffect(() => {
    const on = () => {
      setRoute(parsePath());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("popstate", on);
    return () => window.removeEventListener("popstate", on);
  }, []);

  // Safety net: any time the route changes, make sure the body is scrollable
  // again. (Catches stuck state from a previously-mounted modal whose cleanup
  // didn't restore overflow correctly.)
  useEffect(() => {
    document.body.style.overflow = "";
  }, [path]);

  const navigate = (to) => {
    const url = to.startsWith("/") ? to : "/" + to;
    if (url !== location.pathname + location.search) {
      history.pushState({}, "", url);
    }
    setRoute(parsePath());
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  useEffect(() => { applyBgMood(tweaks.bgMood); }, [tweaks.bgMood, tweaks.palette]);

  const densityClass =
    tweaks.density === "compact" ? "density-compact"
    : tweaks.density === "spacious" ? "density-spacious"
    : "";

  const P = window.SS_Pages;
  const { Nav, Footer, Particles } = window.SS_Components;

  let page;
  if (path === "/" || path === "") page = <P.HomePage navigate={navigate} />;
  else if (path === "/slots") page = <P.SlotsPage navigate={navigate} query={query} />;
  else if (path.startsWith("/slots/")) page = <P.SlotDetailPage slug={path.slice(7)} navigate={navigate} />;
  // Single-provider site: /providers redirects to /slots; /pragmatic shows deep studio profile.
  else if (path === "/providers" || path === "/providers/" || path === "/providers/pragmatic-play") page = <P.ProviderDetailPage slug="pragmatic-play" navigate={navigate} />;
  else if (path === "/pragmatic" || path === "/about-pragmatic") page = <P.ProviderDetailPage slug="pragmatic-play" navigate={navigate} />;
  else if (path === "/about") page = <P.AboutPage navigate={navigate} />;
  else if (path === "/contact") page = <P.ContactPage navigate={navigate} />;
  else page = <P.NotFound navigate={navigate} />;

  const swatch = PALETTES[tweaks.palette] || PALETTES["neon-classic"];

  return (
    <div className={densityClass}>
      <div className="backdrop" />
      {tweaks.particles && (
        <div className="rails">
          <div className="rail rail-l" />
          <div className="rail rail-r" />
        </div>
      )}
      <Nav route={path} navigate={navigate} />
      <main>{page}</main>
      <Footer navigate={navigate} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Accent palette">
          <window.TweakSelect
            label="Theme"
            value={tweaks.palette}
            onChange={(v)=>setTweak("palette", v)}
            options={Object.entries(PALETTES).map(([k,v]) => ({ value:k, label:v.label }))}
          />
          <div style={{display:"flex", gap:6, marginTop:10, padding:"0 2px"}}>
            {[swatch["--accent-1"], swatch["--accent-2"], swatch["--accent-3"]].map((c,i)=>(
              <div key={i} style={{
                flex:1, height:24, borderRadius:6, background:c,
                boxShadow:`0 0 14px ${c}66`,
              }} />
            ))}
          </div>
        </window.TweakSection>

        <window.TweakSection label="Background">
          <window.TweakSelect
            label="Aurora mood"
            value={tweaks.bgMood}
            onChange={(v)=>setTweak("bgMood", v)}
            options={Object.entries(BG_MOODS).map(([k,v]) => ({ value:k, label:v.label }))}
          />
          <window.TweakToggle
            label="Reel rails"
            value={tweaks.particles}
            onChange={(v)=>setTweak("particles", v)}
          />
        </window.TweakSection>

        <window.TweakSection label="Card density">
          <window.TweakRadio
            label="Grid"
            value={tweaks.density}
            onChange={(v)=>setTweak("density", v)}
            options={[
              {value:"compact",  label:"Compact"},
              {value:"comfy",    label:"Comfy"},
              {value:"spacious", label:"Roomy"},
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

// Migrate any legacy "#/path" links (from the old hash router) to real URLs,
// so previously-shared bookmarks land on the right page.
if (location.hash && location.hash.startsWith("#/") && location.hash.length > 2) {
  history.replaceState({}, "", location.hash.slice(1));
}

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