const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "vibe": "bold",
  "lockup": "text",
  "auraMotion": "subtle",
  "bgMotion": "lively",
  "bg": "outlines",
  "showTagline": false,
  "lead": "",
  "words": ""
}/*EDITMODE-END*/;

function WordRotator({ words }) {
  const list = words && words.length ? words : ["Hospitality"];
  const display = [...list, list[0]];
  const [idx, setIdx] = useState(0);
  const [anim, setAnim] = useState(true);

  // advance every 2.4s
  useEffect(() => {
    const id = setInterval(() => setIdx((p) => p + 1), 2400);
    return () => clearInterval(id);
  }, []);

  // when we land on the trailing clone, snap back to 0 without animating
  useEffect(() => {
    if (idx === list.length) {
      const t = setTimeout(() => { setAnim(false); setIdx(0); }, 640);
      return () => clearTimeout(t);
    }
  }, [idx, list.length]);

  // re-enable the transition the frame after a no-anim snap
  useEffect(() => {
    if (!anim) {
      const r = requestAnimationFrame(() =>
        requestAnimationFrame(() => setAnim(true)));
      return () => cancelAnimationFrame(r);
    }
  }, [anim]);

  return (
    <span className="rotator">
      <span className={"rot-track" + (anim ? "" : " no-anim")}
            style={{ transform: `translateY(${(-idx * 1.08).toFixed(3)}em)` }}>
        {display.map((w, i) => (
          <span className="rot-word" key={i}>{w}<span className="rot-period">.</span></span>
        ))}
      </span>
    </span>
  );
}

const PALETTES = {
  Brand: ["#DFF230", "#30F2D5", "#7B30F2", "#F230A5", "#F27130"]
};

const THEMES = {
  dark:  { bg: "#000000", fg: "#FFFFFF", muted: "rgba(255,255,255,.58)", aura: 0,   scale: 1 },
  light: { bg: "#F8F6F4", fg: "#000000", muted: "rgba(0,0,0,.55)",       aura: .42, scale: 1 },
  bold:  { bg: "#000000", fg: "#FFFFFF", muted: "rgba(255,255,255,.66)", aura: .42, scale: 1.08 }
};

const MOTION = {
  subtle: { flow: "11s", drift: "40s", ai: "5s", ring: "13s" },
  medium: { flow: "7s",  drift: "26s", ai: "3.04s", ring: "9s" },
  lively: { flow: "4s",  drift: "15s", ai: "1.8s", ring: "5.5s" }
};

// independent speed for everything "aura": the glow overlay + the blob background
const AURA_MOTION = {
  subtle: { flow: "16s", drift: "55s" },
  medium: { flow: "10s", drift: "34s" },
  lively: { flow: "6s",  drift: "18s" }
};

function Background({ kind }) {
  if (kind === "shapes") {
    return (
      <div className="bg bg-shapes">
        <span className="shape s1"></span>
        <span className="shape s2"></span>
        <span className="shape s3"></span>
      </div>
    );
  }
  if (kind === "spin") {
    return (
      <div className="bg bg-spin">
        <span className="spinner p1"></span>
        <span className="spinner p2"></span>
        <span className="spinner p3"></span>
      </div>
    );
  }
  if (kind === "slats") {
    return (
      <div className="bg bg-slats">
        <span className="slats s-back"></span>
        <span className="slats"></span>
      </div>
    );
  }
  if (kind === "outlines") {
    return (
      <div className="bg bg-outlines">
        <span className="frame f3"></span>
        <span className="frame f2"></span>
        <span className="frame f1"></span>
      </div>
    );
  }
  if (kind === "rings") {
    return (
      <div className="bg bg-rings">
        <span className="ring r1"></span>
        <span className="ring r2"></span>
        <span className="ring r3"></span>
      </div>
    );
  }
  return (
    <div className="bg bg-aura">
      <div className="blob a"></div>
      <div className="blob b"></div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [logo, setLogo] = useState("");

  useEffect(() => {
    fetch("assets/screenpilot.svg")
      .then(r => r.text())
      .then(setLogo)
      .catch(() => {});
  }, []);

  const theme = THEMES[t.vibe] || THEMES.dark;
  const motion = MOTION[t.bgMotion] || MOTION.medium;
  const auraM = AURA_MOTION[t.auraMotion] || AURA_MOTION.medium;

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--bg", theme.bg);
    r.setProperty("--fg", theme.fg);
    r.setProperty("--muted", theme.muted);
    r.setProperty("--aura", String(theme.aura));
    r.setProperty("--scale", String(theme.scale));
    r.setProperty("--auraflow", auraM.flow);
    r.setProperty("--auradrift", auraM.drift);
    r.setProperty("--aidur", motion.ai);
    r.setProperty("--flow", motion.flow);
    r.setProperty("--drift", motion.drift);
    r.setProperty("--ringdur", motion.ring);
  }, [theme, motion, auraM]);

  // which named palette is active (for the tweak swatches)
  return (
    <div className="stage">
      <Background kind={t.bg} />
      <div className="aura"></div>

      <div className="lockup-wrap">
        <div className={"lockup is-" + (t.lockup === "text" ? "text" : "icon")}>
          <span className="logo" dangerouslySetInnerHTML={{ __html: logo }}></span>
          {t.lockup === "text" ? (
            <span className="ai">.ai</span>
          ) : (
            <span className="chip"><span className="ai-in">.ai</span></span>
          )}
        </div>
      </div>

      {t.showTagline ? (
        <p className="tagline">
          <span className="tag-static">{t.lead}</span>
          <WordRotator words={(t.words || "").split(",").map((s) => s.trim()).filter(Boolean)} />
        </p>
      ) : null}

      <TweaksPanel>
        <TweakSection label="Look" />
        <TweakRadio label="Lockup" value={t.lockup}
                    options={["icon", "text"]}
                    onChange={(v) => setTweak("lockup", v)} />
        <TweakRadio label="Vibe" value={t.vibe}
                    options={["dark", "light", "bold"]}
                    onChange={(v) => setTweak("vibe", v)} />

        <TweakSection label="Background" />
        <TweakSelect label="Animation" value={t.bg}
                     options={["aura", "shapes", "spin", "slats", "outlines", "rings"]}
                     onChange={(v) => setTweak("bg", v)} />

        <TweakSection label="Motion" />
        <TweakRadio label="Aura" value={t.auraMotion}
                    options={["subtle", "medium", "lively"]}
                    onChange={(v) => setTweak("auraMotion", v)} />
        <TweakRadio label="Overlay" value={t.bgMotion}
                    options={["subtle", "medium", "lively"]}
                    onChange={(v) => setTweak("bgMotion", v)} />

        <TweakSection label="Tagline" />
        <TweakToggle label="Show tagline" value={t.showTagline}
                     onChange={(v) => setTweak("showTagline", v)} />
        <TweakText label="Lead" value={t.lead}
                   onChange={(v) => setTweak("lead", v)} />
        <TweakText label="Cycle words" value={t.words}
                   onChange={(v) => setTweak("words", v)} />
      </TweaksPanel>
    </div>
  );
}

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