/* Cashiu Tweaks — landing page customization panel */

const { useEffect } = React;

const PRIMARY_PALETTE = [
  "#2F741C", // brand forest-green
  "#1D4910", // deeper forest
  "#3F9826", // brighter accent
  "#2D7FF9", // info blue
  "#F2A341"  // warm orange
];

/* Helpers — apply tweaks to the live DOM. ---------------------- */
function applyPrimary(color) {
  const root = document.documentElement;
  root.style.setProperty("--green", color);
  // Lightly derive a 600/700 variant via CSS color-mix where supported,
  // fallback to the same color so buttons stay legible.
  root.style.setProperty("--green-600", `color-mix(in oklab, ${color}, black 12%)`);
  root.style.setProperty("--green-700", `color-mix(in oklab, ${color}, black 26%)`);
  root.style.setProperty("--green-50",  `color-mix(in oklab, ${color}, white 88%)`);
  root.style.setProperty("--green-100", `color-mix(in oklab, ${color}, white 76%)`);
}

function toggleHidden(selector, hidden) {
  document.querySelectorAll(selector).forEach(el => {
    el.style.display = hidden ? "none" : "";
  });
}

function applyAll(t) {
  applyPrimary(t.primaryColor);

  // Floating mascot FAB (bottom-right of the page)
  toggleHidden(".mascot-fab", !t.showFab);

  // Floating hero chips (Live earned / Cashback ready / Daily check-in)
  toggleHidden(".float-chip", !t.showHeroChips);
}

function TweaksApp() {
  const [t, setTweak] = window.useTweaks(window.CASHIU_TWEAK_DEFAULTS);

  // Apply on first mount AND any time a tweak changes
  useEffect(() => { applyAll(t); }, [t]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Brand">
        <window.TweakColor
          label="Primary color"
          value={t.primaryColor}
          options={PRIMARY_PALETTE}
          onChange={(v) => setTweak("primaryColor", v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Hero">
        <window.TweakToggle
          label="Show floating chips"
          value={t.showHeroChips}
          onChange={(v) => setTweak("showHeroChips", v)}
        />
      </window.TweakSection>

      <window.TweakSection title="Page">
        <window.TweakToggle
          label="Floating mascot button"
          value={t.showFab}
          onChange={(v) => setTweak("showFab", v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* Apply persisted defaults immediately on load (so the page looks right
   before tweaks panel even opens). */
applyAll(window.CASHIU_TWEAK_DEFAULTS);

/* Mount the panel into a host element. */
const host = document.createElement("div");
host.id = "tweaks-root";
document.body.appendChild(host);
ReactDOM.createRoot(host).render(<TweaksApp />);