// tweaks-app.jsx — Hassan Hashmi CV Tweaks panel
// Clean, CV-document tone. No display fonts, no decorative options.

const TWEAK_DEFAULTS = window.__hh_tweaks || {
  theme: "clean",
  density: "comfy",
  hero: "editorial",
  accent: "#36A200",
  __v: 3,
};

const THEMES = [
  { id: "clean",         label: "Clean White",     palette: ["#5A2E04", "#36A200", "#FFFFFF"], aliases: ["espresso", "cream-soft"] },
  { id: "paper",         label: "Off-White",       palette: ["#5A2E04", "#36A200", "#FAF8F3"] },
  { id: "cool",          label: "Cool Gray",       palette: ["#1F2937", "#36A200", "#F8FAFC"] },
  { id: "mint-light",    label: "Light Mint",      palette: ["#2A5A1F", "#5A2E04", "#F5F8F2"] },
  { id: "dark",          label: "Dark Mode",       palette: ["#E6E6E6", "#6DD400", "#0F1216"] },
];

const ACCENTS = [
  "#36A200", // CV green
  "#5A2E04", // CV brown
  "#2A6FDB", // blue
  "#D97757", // terracotta
  "#7A5AE0", // violet
  "#0F766E", // teal
];

function applyTweaks(t) {
  const r = document.documentElement;
  r.setAttribute("data-theme", t.theme);
  r.setAttribute("data-density", t.density);
  r.setAttribute("data-hero", t.hero);
  if (t.accent) r.style.setProperty("--c-accent", t.accent);
}

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

  React.useEffect(() => {
    applyTweaks(t);
    try { localStorage.setItem("hh_tweaks", JSON.stringify({ ...t, __v: 3 })); } catch (e) {}
  }, [t.theme, t.density, t.hero, t.accent]);

  const ThemeCard = ({ theme }) => {
    const active = t.theme === theme.id || (theme.aliases && theme.aliases.includes(t.theme));
    return (
      <button
        onClick={() => setTweak("theme", theme.id)}
        style={{
          appearance: "none",
          border: active ? "1.5px solid rgba(41,38,27,.7)" : ".5px solid rgba(0,0,0,.12)",
          background: "rgba(255,255,255,.6)",
          padding: "8px 8px 6px",
          borderRadius: 9,
          cursor: "pointer",
          display: "flex",
          flexDirection: "column",
          gap: 6,
          alignItems: "stretch",
          textAlign: "left",
          minHeight: 56,
          width: "100%",
          font: "inherit",
          color: "inherit",
          transition: "border-color 120ms ease",
        }}
      >
        <span style={{ display: "flex", gap: 3, height: 18 }}>
          {theme.palette.map((c, i) => (
            <span
              key={i}
              style={{
                flex: 1,
                background: c,
                borderRadius: 4,
                border: ["#FFFFFF", "#FFFEF7", "#FBF8F2", "#FAF8F3", "#F8FAFC", "#F5F8F2", "#FFF7EC"].includes(c) ? "1px solid rgba(0,0,0,.08)" : "none",
              }}
            />
          ))}
        </span>
        <span style={{ fontSize: 10.5, fontWeight: 500, lineHeight: 1.2 }}>{theme.label}</span>
      </button>
    );
  };

  const AccentSwatch = ({ color }) => {
    const active = (t.accent || "").toLowerCase() === color.toLowerCase();
    return (
      <button
        onClick={() => setTweak("accent", color)}
        title={color}
        style={{
          appearance: "none",
          width: 28, height: 28, borderRadius: "50%",
          background: color,
          border: active ? "2px solid rgba(41,38,27,.9)" : "1px solid rgba(0,0,0,.18)",
          boxShadow: active ? "0 0 0 2px #fff inset" : "none",
          cursor: "pointer",
          padding: 0,
        }}
      />
    );
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {THEMES.map((th) => <ThemeCard key={th.id} theme={th} />)}
      </div>

      <TweakSection label="Accent color" />
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {ACCENTS.map((c) => <AccentSwatch key={c} color={c} />)}
      </div>

      <TweakSection label="Hero layout" />
      <TweakRadio
        value={t.hero}
        options={[
          { value: "editorial", label: "Standard" },
          { value: "centered",  label: "Centered" },
        ]}
        onChange={(v) => setTweak("hero", v)}
      />

      <TweakSection label="Density" />
      <TweakRadio
        value={t.density}
        options={[
          { value: "compact",  label: "Compact"  },
          { value: "comfy",    label: "Comfy"    },
          { value: "spacious", label: "Spacious" },
        ]}
        onChange={(v) => setTweak("density", v)}
      />
    </TweaksPanel>
  );
}

const mount = document.getElementById("tweaks-root");
if (mount && window.React && window.ReactDOM) {
  ReactDOM.createRoot(mount).render(<App />);
}