/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "photoTreatment": "color",
  "seniorEmphasis": "featured"
}/*EDITMODE-END*/;

const PALETTE_SWATCHES = {
  cream:  ["#f7f3ec", "#1a1815", "#b85c3c"],
  sage:   ["#f7f3ec", "#1a1815", "#6b8a5e"],
  navy:   ["#f7f3ec", "#1a1815", "#234a72"],
  ochre:  ["#1d1a16", "#f5efe4", "#c69749"],
};
const PALETTE_KEYS = ["cream", "sage", "navy", "ochre"];
const PALETTE_LABELS = { cream: "Cream & Clay", sage: "Sage", navy: "Navy", ochre: "Charcoal & Ochre" };

const SobiTweaks = ({ tweaks, setTweak }) => {
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
    document.documentElement.setAttribute("data-photo", tweaks.photoTreatment);
  }, [tweaks.palette, tweaks.photoTreatment]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color palette">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
          {PALETTE_KEYS.map((k) => {
            const isActive = tweaks.palette === k;
            const [bg, ink, accent] = PALETTE_SWATCHES[k];
            return (
              <button
                key={k}
                type="button"
                onClick={() => setTweak("palette", k)}
                style={{
                  padding: 8, borderRadius: 8,
                  border: isActive ? "1.5px solid #29261b" : "1px solid rgba(0,0,0,.12)",
                  background: bg, color: ink,
                  textAlign: "left", cursor: "pointer",
                  display: "flex", flexDirection: "column", gap: 6,
                }}
              >
                <div style={{ display: "flex", gap: 3 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 3, background: bg, border: "1px solid rgba(0,0,0,.1)" }}/>
                  <span style={{ width: 14, height: 14, borderRadius: 3, background: ink }}/>
                  <span style={{ width: 14, height: 14, borderRadius: 3, background: accent }}/>
                </div>
                <div style={{ fontSize: 10.5, fontWeight: 500 }}>{PALETTE_LABELS[k]}</div>
              </button>
            );
          })}
        </div>
      </TweakSection>

      <TweakSection label="Photos">
        <TweakRadio
          label="Treatment"
          value={tweaks.photoTreatment}
          options={[
            { value: "color", label: "Color" },
            { value: "bw", label: "B&W" },
            { value: "duotone", label: "Duo" },
          ]}
          onChange={v => setTweak("photoTreatment", v)}
        />
      </TweakSection>

      <TweakSection label="Senior Moving feature">
        <TweakRadio
          label="On homepage"
          value={tweaks.seniorEmphasis}
          options={[
            { value: "subtle", label: "Hidden" },
            { value: "featured", label: "Featured" },
          ]}
          onChange={v => setTweak("seniorEmphasis", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

window.SobiTweaks = SobiTweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;