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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "kinari",
  "showWashi": true,
  "monoAccents": true,
  "heroLayout": "split",
  "contactUrl": "#"
}/*EDITMODE-END*/;

function applyPalette(p) {
  const r = document.documentElement;
  if (p === "kinari") {
    r.style.setProperty("--kinari", "#efe6d4");
    r.style.setProperty("--ink", "#211c16");
    r.style.setProperty("--moss", "#2c3a2f");
    r.style.setProperty("--moss-deep", "#1d2a26");
    r.style.setProperty("--kincha", "#b08842");
    r.style.setProperty("--tea", "#6b5a3e");
    r.style.setProperty("--mist", "#cdd9dc");
  } else if (p === "sumi") {
    r.style.setProperty("--kinari", "#e7dec9");
    r.style.setProperty("--ink", "#1a1714");
    r.style.setProperty("--moss", "#1a1714");
    r.style.setProperty("--moss-deep", "#0f0d0b");
    r.style.setProperty("--kincha", "#9b7a3e");
    r.style.setProperty("--tea", "#5d4f37");
    r.style.setProperty("--mist", "#c2cdd2");
  } else if (p === "shu") {
    r.style.setProperty("--kinari", "#f1e8d4");
    r.style.setProperty("--ink", "#231a14");
    r.style.setProperty("--moss", "#7a2e22");
    r.style.setProperty("--moss-deep", "#4a1c14");
    r.style.setProperty("--kincha", "#c08a3a");
    r.style.setProperty("--tea", "#7a5236");
    r.style.setProperty("--mist", "#d6cfc1");
  } else if (p === "seiji") {
    // 青磁 / 水縹 - misty Japanese blue accent
    r.style.setProperty("--kinari", "#efe6d4");
    r.style.setProperty("--ink", "#1f2a2e");
    r.style.setProperty("--moss", "#3a5560");
    r.style.setProperty("--moss-deep", "#243842");
    r.style.setProperty("--kincha", "#a78a4a");
    r.style.setProperty("--tea", "#5a6e74");
    r.style.setProperty("--mist", "#b9ccd1");
  }
}

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

  useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);

  useEffect(() => {
    document.body.style.backgroundImage = tweaks.showWashi ? "url('assets/washi-cream.jpg')" : "none";
  }, [tweaks.showWashi]);

  useEffect(() => {
    const btn = document.getElementById("contact-btn");
    if (btn && tweaks.contactUrl && tweaks.contactUrl !== "#") {
      btn.setAttribute("href", tweaks.contactUrl);
    }
  }, [tweaks.contactUrl]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="配色">
        <TweakRadio
          label="パレット"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "kinari", label: "生成り×深緑" },
            { value: "sumi",   label: "墨×金茶" },
            { value: "shu",    label: "朱×生成り" },
            { value: "seiji",  label: "青磁×霞" },
          ]}
        />
      </TweakSection>
      <TweakSection title="質感">
        <TweakToggle
          label="和紙テクスチャ"
          value={tweaks.showWashi}
          onChange={(v) => setTweak("showWashi", v)}
        />
      </TweakSection>
      <TweakSection title="お問い合わせ先">
        <TweakText
          label="Googleフォーム URL"
          value={tweaks.contactUrl}
          onChange={(v) => setTweak("contactUrl", v)}
          placeholder="https://forms.gle/..."
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);