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

const FixMyBcpTweakDefaults = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "voice": "editorial",
  "density": "standard"
}/*EDITMODE-END*/;

const PALETTES = [
  { id: "warm",   label: "Civic Warm",     swatch: ["#faf6ec","#0d1f3c","#c75d3c"] },
  { id: "slate",  label: "Council Slate",  swatch: ["#eef1f6","#0e1726","#2a5fa3"] },
  { id: "forest", label: "Community Green", swatch: ["#f1efe2","#122418","#2a8d6a"] },
  { id: "ink",    label: "Editorial Ink",  swatch: ["#f5f0e4","#0a0a0a","#c75d3c"] }
];

function FixMyBcpTweaks() {
  const [t, set] = useTweaks(FixMyBcpTweakDefaults);

  // Apply tweaks to <body> as data-* attributes
  useEffect(() => {
    document.body.setAttribute("data-theme", t.theme);
    document.body.setAttribute("data-voice", t.voice);
    document.body.setAttribute("data-density", t.density);
  }, [t.theme, t.voice, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette" subtitle="Reshape the whole feel of the site">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 8,
          marginTop: 4
        }}>
          {PALETTES.map(p => {
            const selected = t.theme === p.id;
            return (
              <button
                key={p.id}
                type="button"
                onClick={() => set("theme", p.id)}
                style={{
                  cursor: "pointer",
                  textAlign: "left",
                  padding: 10,
                  borderRadius: 10,
                  border: selected ? "1.5px solid #0d1f3c" : "1px solid #e5e5e5",
                  background: selected ? "#fafafa" : "#fff",
                  display: "flex",
                  flexDirection: "column",
                  gap: 8
                }}
              >
                <div style={{ display: "flex", gap: 4, height: 22 }}>
                  {p.swatch.map((c, i) => (
                    <div key={i} style={{
                      flex: 1,
                      background: c,
                      borderRadius: 4,
                      border: c === "#fff" || c === "#faf6ec" || c === "#eef1f6" || c === "#f1efe2" || c === "#f5f0e4" ? "1px solid #e5e5e5" : "none"
                    }} />
                  ))}
                </div>
                <span style={{ fontSize: 12, fontWeight: 600, color: "#111" }}>
                  {p.label}
                </span>
              </button>
            );
          })}
        </div>
      </TweakSection>

      <TweakRadio
        label="Headline voice"
        sublabel="How section titles speak"
        value={t.voice}
        onChange={v => set("voice", v)}
        options={[
          { value: "editorial",  label: "Editorial" },
          { value: "grotesk",    label: "Grotesk" },
          { value: "monumental", label: "Monumental" }
        ]}
      />

      <TweakRadio
        label="Density"
        sublabel="Air between sections"
        value={t.density}
        onChange={v => set("density", v)}
        options={[
          { value: "compact",  label: "Compact" },
          { value: "standard", label: "Standard" },
          { value: "roomy",    label: "Roomy" }
        ]}
      />
    </TweaksPanel>
  );
}

const fmbTweaksRoot = document.getElementById("tweaks-root");
if (fmbTweaksRoot) {
  ReactDOM.createRoot(fmbTweaksRoot).render(<FixMyBcpTweaks />);
}
