// shima会計 — Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "fresh",
  "displayFont": "zen-maru",
  "heroVariant": "default"
}/*EDITMODE-END*/;

const PALETTES = {
  fresh: {
    label: "薄緑 + 薄黄（デフォルト）",
    swatches: ["#7cb992", "#fff59d", "#e8f5e9"],
    vars: {
      "--c-primary": "#7cb992",
      "--c-primary-soft": "#c8e6c9",
      "--c-primary-mist": "#e8f5e9",
      "--c-accent": "#fff59d",
      "--c-accent-soft": "#fffbe5",
      "--c-ink": "#2a3a2e",
      "--c-ink-2": "#5a6b5e",
      "--c-paper": "#fafdfa",
    },
  },
  forest: {
    label: "深い森（モス + クリーム）",
    swatches: ["#5a8f6f", "#f5e9b0", "#e6efe5"],
    vars: {
      "--c-primary": "#5a8f6f",
      "--c-primary-soft": "#b9d3bf",
      "--c-primary-mist": "#e6efe5",
      "--c-accent": "#f5e9b0",
      "--c-accent-soft": "#fdf7d8",
      "--c-ink": "#23332a",
      "--c-ink-2": "#52635a",
      "--c-paper": "#f8faf7",
    },
  },
  warm: {
    label: "温かみ（草色 + 山吹）",
    swatches: ["#8fb87a", "#f5d57c", "#f4f7e8"],
    vars: {
      "--c-primary": "#8fb87a",
      "--c-primary-soft": "#d4e3bf",
      "--c-primary-mist": "#f4f7e8",
      "--c-accent": "#f5d57c",
      "--c-accent-soft": "#fdf3cf",
      "--c-ink": "#2e2f23",
      "--c-ink-2": "#5b5d4e",
      "--c-paper": "#fbfaf3",
    },
  },
};

const FONTS = {
  "zen-maru": {
    label: "Zen Maru Gothic（丸ゴシック・あたたかい）",
    display: '"Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif',
  },
  "noto-serif": {
    label: "Noto Serif JP（明朝・上品）",
    display: '"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif',
  },
  "noto-sans": {
    label: "Noto Sans JP（モダンゴシック）",
    display: '"Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif',
  },
};

// inject Google Fonts for non-default display fonts
const FONT_LINK_ID = "tweak-font-link";
function ensureFontLoaded(key) {
  let link = document.getElementById(FONT_LINK_ID);
  const families = {
    "zen-maru": null, // already loaded
    "noto-serif": "Noto+Serif+JP:wght@500;700;900",
    "noto-sans": "Noto+Sans+JP:wght@500;700;900",
  };
  const fam = families[key];
  if (!fam) { if (link) link.remove(); return; }
  const href = `https://fonts.googleapis.com/css2?family=${fam}&display=swap`;
  if (link) link.href = href;
  else {
    link = document.createElement("link");
    link.id = FONT_LINK_ID;
    link.rel = "stylesheet";
    link.href = href;
    document.head.appendChild(link);
  }
}

function applyTweaks(t) {
  const palette = PALETTES[t.palette] || PALETTES.fresh;
  Object.entries(palette.vars).forEach(([k, v]) => {
    document.documentElement.style.setProperty(k, v);
  });
  const font = FONTS[t.displayFont] || FONTS["zen-maru"];
  document.documentElement.style.setProperty("--font-display", font.display);
  ensureFontLoaded(t.displayFont);

  // hero variant
  document.documentElement.dataset.heroVariant = t.heroVariant || "default";
}

function App() {
  const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  // build palette options as arrays of swatches for TweakColor
  const paletteOptions = Object.entries(PALETTES).map(([key, p]) => ({
    value: key,
    swatches: p.swatches,
    label: p.label,
  }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="配色">
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {paletteOptions.map((p) => (
            <button
              key={p.value}
              onClick={() => setTweak("palette", p.value)}
              style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "10px 12px", borderRadius: 10,
                border: t.palette === p.value ? "2px solid #2a3a2e" : "1px solid #e3ece5",
                background: t.palette === p.value ? "#fafdfa" : "white",
                cursor: "pointer", textAlign: "left",
                fontSize: 12, color: "#2a3a2e",
                fontFamily: "inherit",
              }}
            >
              <div style={{ display: "flex", gap: 4 }}>
                {p.swatches.map((c, i) => (
                  <div key={i} style={{ width: 18, height: 18, borderRadius: "50%", background: c, border: "1px solid rgba(0,0,0,0.05)" }} />
                ))}
              </div>
              <span>{p.label}</span>
            </button>
          ))}
        </div>
      </TweakSection>

      <TweakSection title="見出しフォント">
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {Object.entries(FONTS).map(([key, f]) => (
            <button
              key={key}
              onClick={() => setTweak("displayFont", key)}
              style={{
                padding: "12px 14px", borderRadius: 10,
                border: t.displayFont === key ? "2px solid #2a3a2e" : "1px solid #e3ece5",
                background: t.displayFont === key ? "#fafdfa" : "white",
                cursor: "pointer", textAlign: "left",
                fontSize: 13,
                fontFamily: f.display,
                color: "#2a3a2e",
              }}
            >
              {f.label}
            </button>
          ))}
        </div>
      </TweakSection>

      <TweakRadio
        label="ヒーロー"
        value={t.heroVariant}
        options={[
          { value: "default", label: "対話カード" },
          { value: "minimal", label: "ミニマル" },
          { value: "clinic", label: "問診票" },
        ]}
        onChange={(v) => setTweak("heroVariant", v)}
      />
    </TweaksPanel>
  );
}

const root = document.getElementById("tweaks-root");
if (root) ReactDOM.createRoot(root).render(<App />);