/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c5ee4a",
  "density": "comfortable",
  "showCountdown": true,
  "headlineVariant": "own"
}/*EDITMODE-END*/;

// Curated accent swatches — all bright, ~same lightness/chroma as the brand green.
const ACCENT_OPTIONS = [
  "#c5ee4a", // brand green (≈ oklch(0.88 0.18 130))
  "#ffc46b", // amber
  "#ff8b6b", // coral
  "#7ab8ff", // blue
];

const HEADLINES = {
  own:   ["A job search that", "completes", "on its", " own"],
  brief: ["Your weekly", "job brief —", "already ", "written"],
  sleep: ["Apply to jobs", "while you", "are still ", "asleep"],
};

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // accent — set var on :root, derive soft via rgba
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    // hex → rgba(...,0.12) for accent-soft
    const hex = t.accent.replace("#", "");
    const full = hex.length === 3 ? hex.split("").map(c => c + c).join("") : hex;
    const num = parseInt(full, 16);
    const rr = (num >> 16) & 255;
    const gg = (num >> 8) & 255;
    const bb = num & 255;
    r.style.setProperty("--accent-soft", `rgba(${rr},${gg},${bb},0.12)`);
  }, [t.accent]);

  // density
  useEffect(() => {
    document.body.dataset.density = t.density;
  }, [t.density]);

  // countdown widget visibility
  useEffect(() => {
    const card = document.getElementById("nextRun");
    if (card) card.parentElement.parentElement.style.display = t.showCountdown ? "" : "none";
  }, [t.showCountdown]);

  // headline variant
  useEffect(() => {
    const h1 = document.querySelector(".hero h1");
    if (!h1) return;
    const v = HEADLINES[t.headlineVariant] || HEADLINES.own;
    h1.innerHTML =
      `${v[0]}<br />${v[1]}<br />` +
      `<span class="stroke">${v[2]}</span>${v[3]}<span class="cursor"></span>`;
  }, [t.headlineVariant]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={v => setTweak("accent", v)}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: "comfortable", label: "Comfy" },
            { value: "compact", label: "Compact" },
          ]}
          onChange={v => setTweak("density", v)}
        />
        <TweakToggle
          label="Next-run widget"
          value={t.showCountdown}
          onChange={v => setTweak("showCountdown", v)}
        />
      </TweakSection>

      <TweakSection label="Hero copy">
        <TweakRadio
          label="Headline"
          value={t.headlineVariant}
          options={[
            { value: "own",   label: "own" },
            { value: "brief", label: "brief" },
            { value: "sleep", label: "sleep" },
          ]}
          onChange={v => setTweak("headlineVariant", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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