/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakText, TweakSelect */
// Shared Tweaks integration for every PixFixCo page:
//   - DEFAULTS / FONT_PAIRS in one place
//   - useAppTweaks(): hooks into localStorage + applies CSS variables
//   - <AppTweaks pageContext="home|sub"/>: renders the panel with the
//     right control set for the page

const TWEAK_DEFAULTS = {
  accentHue: 42,
  accentChroma: 0.16,
  fontPair: "instrument-geist",
  headline: "Your home isn't the problem.\nYour photos are.",
  tagline: "We can't sell your home for $1M. But we can make it look like it.",
  dark: false,
  heroVariant: "split"
};

const FONT_PAIRS = {
  "instrument-geist": {
    display: "\"Instrument Serif\", Georgia, serif",
    sans: "\"Geist\", ui-sans-serif, system-ui, sans-serif",
    import: "Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600"
  },
  "fraunces-manrope": {
    display: "\"Fraunces\", Georgia, serif",
    sans: "\"Manrope\", ui-sans-serif, system-ui, sans-serif",
    import: "Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400&family=Manrope:wght@400;500;600;700"
  },
  "dmserif-dmsans": {
    display: "\"DM Serif Display\", Georgia, serif",
    sans: "\"DM Sans\", ui-sans-serif, system-ui, sans-serif",
    import: "DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700"
  },
  "spectral-plexmono": {
    display: "\"Spectral\", Georgia, serif",
    sans: "\"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif",
    import: "Spectral:ital,wght@0,300;0,400;1,400&family=IBM+Plex+Sans:wght@400;500;600"
  }
};

function injectFont(key) {
  const pair = FONT_PAIRS[key];
  if (!pair) return;
  const id = "font-" + key;
  if (document.getElementById(id)) return;
  const l = document.createElement("link");
  l.id = id;
  l.rel = "stylesheet";
  l.href = `https://fonts.googleapis.com/css2?family=${pair.import}&display=swap`;
  document.head.appendChild(l);
}

function useAppTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const l = 0.64;
    const c = tweaks.accentChroma;
    const h = tweaks.accentHue;
    root.style.setProperty("--accent", `oklch(${l} ${c} ${h})`);
    root.style.setProperty("--accent-ink", `oklch(0.28 ${Math.min(0.14, c * 0.75)} ${h})`);
    root.style.setProperty("--accent-soft", `oklch(0.95 ${Math.min(0.05, c * 0.25)} ${h})`);
    root.setAttribute("data-theme", tweaks.dark ? "dark" : "light");

    injectFont(tweaks.fontPair);
    const pair = FONT_PAIRS[tweaks.fontPair];
    root.style.setProperty("--ff-display", pair.display);
    root.style.setProperty("--ff-sans", pair.sans);
  }, [tweaks]);

  return [tweaks, setTweak];
}

function AccentPreset({ label, hue, chroma, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", gap: 6,
        padding: "5px 7px",
        border: `1px solid ${active ? "rgba(0,0,0,0.55)" : "rgba(0,0,0,0.1)"}`,
        background: "rgba(255,255,255,0.6)",
        borderRadius: 6, cursor: "pointer", fontSize: 11.5,
        textAlign: "left", color: "inherit"
      }}>
      <span style={{
        width: 12, height: 12, borderRadius: 999,
        background: `oklch(0.64 ${chroma} ${hue})`,
        border: "1px solid rgba(0,0,0,0.1)", flexShrink: 0
      }} />
      {label}
    </button>
  );
}

function setAccent(setTweak, hue, chroma) {
  setTweak('accentHue', hue);
  setTweak('accentChroma', chroma);
}

function AppTweaks({ tweaks, setTweak, pageContext = "sub" }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakSelect
          label="Font pairing"
          value={tweaks.fontPair}
          onChange={(v) => setTweak('fontPair', v)}
          options={[
            { value: "instrument-geist", label: "Instrument × Geist" },
            { value: "fraunces-manrope", label: "Fraunces × Manrope" },
            { value: "dmserif-dmsans", label: "DM Serif × DM Sans" },
            { value: "spectral-plexmono", label: "Spectral × IBM Plex" }
          ]} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          <AccentPreset label="Terracotta" hue={42} chroma={0.16}
            active={Math.round(tweaks.accentHue) === 42}
            onClick={() => setAccent(setTweak, 42, 0.16)} />
          <AccentPreset label="Forest" hue={155} chroma={0.11}
            active={Math.round(tweaks.accentHue) === 155}
            onClick={() => setAccent(setTweak, 155, 0.11)} />
          <AccentPreset label="Navy" hue={255} chroma={0.14}
            active={Math.round(tweaks.accentHue) === 255}
            onClick={() => setAccent(setTweak, 255, 0.14)} />
          <AccentPreset label="Electric" hue={245} chroma={0.22}
            active={Math.round(tweaks.accentHue) === 245}
            onClick={() => setAccent(setTweak, 245, 0.22)} />
        </div>
        <TweakToggle
          label="Dark mode"
          value={tweaks.dark}
          onChange={(v) => setTweak('dark', v)} />
      </TweakSection>

      {pageContext === "home" && (
        <TweakSection label="Hero (homepage)">
          <TweakRadio
            label="Layout"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: "split", label: "Split" },
              { value: "stacked", label: "Stacked" },
              { value: "editorial", label: "Editorial" }
            ]} />
          <TweakText
            label="Headline"
            value={tweaks.headline}
            onChange={(v) => setTweak('headline', v)} />
          <TweakText
            label="Tagline"
            value={tweaks.tagline}
            onChange={(v) => setTweak('tagline', v)} />
        </TweakSection>
      )}
    </TweaksPanel>
  );
}

Object.assign(window, { useAppTweaks, AppTweaks, TWEAK_DEFAULTS, FONT_PAIRS, injectFont });