// site-tweaks.jsx
// Floating palette + type tweaks for Minh Le's site.
// Swaps CSS custom properties on :root so all pages share the system.

const PALETTES = /*EDITMODE-BEGIN*/{
  "palette": "suit",
  "fontPair": "source-geist",
  "showPanel": true
}/*EDITMODE-END*/;

const PALETTE_DEFS = {
  suit: {
    label: "Suit Navy",
    swatch: ["#243B6B", "#16181D", "#f1f1f3"],
    vars: {
      "--bg": "#f1f1f3",
      "--bg-2": "#e8e8eb",
      "--paper": "#ffffff",
      "--ink": "#16181D",
      "--ink-soft": "#3D424B",
      "--ink-mute": "#767B85",
      "--rule": "#dcdce0",
      "--rule-soft": "#e4e4e8",
      "--accent": "oklch(0.34 0.09 260)",
      "--accent-soft": "oklch(0.92 0.03 260)"
    }
  },
  warm: {
    label: "Warm Terracotta",
    swatch: ["#A8553A", "#1C1916", "#F4EFE6"],
    vars: {
      "--bg": "#F4EFE6",
      "--bg-2": "#ECE5D7",
      "--paper": "#FBF8F1",
      "--ink": "#1C1916",
      "--ink-soft": "#45413B",
      "--ink-mute": "#75706A",
      "--rule": "#D9D2C2",
      "--rule-soft": "#E5DECE",
      "--accent": "oklch(0.55 0.13 45)",
      "--accent-soft": "oklch(0.92 0.04 60)"
    }
  },
  navy: {
    label: "Ivory & Navy",
    swatch: ["#27416D", "#1A1F2E", "#F2EFE6"],
    vars: {
      "--bg": "#F2EFE6",
      "--bg-2": "#E8E3D4",
      "--paper": "#FBF8F1",
      "--ink": "#181B26",
      "--ink-soft": "#3F4554",
      "--ink-mute": "#6E7280",
      "--rule": "#D6D0BF",
      "--rule-soft": "#E3DDCB",
      "--accent": "oklch(0.42 0.10 250)",
      "--accent-soft": "oklch(0.92 0.03 250)"
    }
  },
  olive: {
    label: "Olive & Cream",
    swatch: ["#5C6B3F", "#211F1A", "#EFEADD"],
    vars: {
      "--bg": "#EFEADD",
      "--bg-2": "#E5DECD",
      "--paper": "#F7F2E5",
      "--ink": "#1F1D17",
      "--ink-soft": "#44423A",
      "--ink-mute": "#73706A",
      "--rule": "#D2CBB8",
      "--rule-soft": "#DFD8C4",
      "--accent": "oklch(0.50 0.08 120)",
      "--accent-soft": "oklch(0.92 0.04 120)"
    }
  },
  ink: {
    label: "Bone & Ink",
    swatch: ["#1C1916", "#7E6A52", "#F6F2EA"],
    vars: {
      "--bg": "#F6F2EA",
      "--bg-2": "#ECE5D7",
      "--paper": "#FBF8F1",
      "--ink": "#0F0E0C",
      "--ink-soft": "#3A3833",
      "--ink-mute": "#736E66",
      "--rule": "#D9D2C2",
      "--rule-soft": "#E5DECE",
      "--accent": "oklch(0.30 0.02 60)",
      "--accent-soft": "oklch(0.92 0.02 60)"
    }
  }
};

const FONT_PAIRS = {
  "source-geist": {
    label: "Source Serif / Geist",
    "--serif": "'Source Serif 4', 'Source Serif Pro', Georgia, serif",
    "--sans": "'Geist', -apple-system, system-ui, sans-serif"
  },
  "bodoni-geist": {
    label: "Bodoni Moda / Geist",
    "--serif": "'Bodoni Moda', 'Didot', Georgia, serif",
    "--sans": "'Geist', -apple-system, system-ui, sans-serif",
    googleFonts: "https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Geist:wght@300;400;500;600;700&display=swap"
  },
  "spectral-geist": {
    label: "Spectral / Geist",
    "--serif": "'Spectral', Georgia, serif",
    "--sans": "'Geist', -apple-system, system-ui, sans-serif",
    googleFonts: "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Geist:wght@300;400;500;600;700&display=swap"
  },
  "plex-geist": {
    label: "IBM Plex Serif / Geist",
    "--serif": "'IBM Plex Serif', Georgia, serif",
    "--sans": "'Geist', -apple-system, system-ui, sans-serif",
    googleFonts: "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Geist:wght@300;400;500;600;700&display=swap"
  }
};

const loadedFonts = new Set();
function ensureFont(href) {
  if (!href || loadedFonts.has(href)) return;
  loadedFonts.add(href);
  const l = document.createElement("link");
  l.rel = "stylesheet";
  l.href = href;
  document.head.appendChild(l);
}

function applyTweaks(t) {
  const pal = PALETTE_DEFS[t.palette] || PALETTE_DEFS.warm;
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["newsreader-geist"];
  const root = document.documentElement.style;
  Object.entries(pal.vars).forEach(([k, v]) => root.setProperty(k, v));
  if (fp.googleFonts) ensureFont(fp.googleFonts);
  root.setProperty("--serif", fp["--serif"]);
  root.setProperty("--sans", fp["--sans"]);
}

function App() {
  const [t, setTweak] = useTweaks(PALETTES);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Color scheme"
        value={PALETTE_DEFS[t.palette]?.swatch || PALETTE_DEFS.warm.swatch}
        options={Object.keys(PALETTE_DEFS).map(k => PALETTE_DEFS[k].swatch)}
        onChange={(swatch) => {
          const key = Object.keys(PALETTE_DEFS).find(
            k => JSON.stringify(PALETTE_DEFS[k].swatch) === JSON.stringify(swatch)
          );
          if (key) setTweak("palette", key);
        }}
      />
      <TweakSelect
        label="Named"
        value={t.palette}
        options={Object.keys(PALETTE_DEFS).map(k => ({ value: k, label: PALETTE_DEFS[k].label }))}
        onChange={(v) => setTweak("palette", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Font pairing"
        value={t.fontPair}
        options={Object.keys(FONT_PAIRS).map(k => ({ value: k, label: FONT_PAIRS[k].label }))}
        onChange={(v) => setTweak("fontPair", v)}
      />
    </TweaksPanel>
  );
}

// Mount once. Both pages load this file; the panel is a singleton.
(function mount() {
  if (window.__minhTweaksMounted) return;
  window.__minhTweaksMounted = true;
  const node = document.createElement("div");
  node.id = "tweaks-root";
  document.body.appendChild(node);
  ReactDOM.createRoot(node).render(<App />);
})();