// tweaks-app.jsx — Tweaks panel for 夏沐荏苒 homepage
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm-coffee",
  "headingFont": "serif",
  "bodyFont": "sans",
  "introMood": "balanced",
  "gridLayout": "asymmetric",
  "showWatercolor": false
}/*EDITMODE-END*/;

const PALETTES = {
  "warm-coffee": {
    bg: "#f6efe4", bgSoft: "#ede4d3", paper: "#faf6ed",
    ink: "#2e2117", inkSoft: "#574438", inkMute: "#8a7461",
    moss: "oklch(40% 0.055 135)",
    sage: "oklch(58% 0.045 145)",
    line: "rgba(46, 33, 23, 0.18)",
  },
  "fresh-sage": {
    bg: "#eef0e8", bgSoft: "#e1e6d8", paper: "#f6f8ef",
    ink: "#222a1f", inkSoft: "#41513d", inkMute: "#7d8a7a",
    moss: "oklch(42% 0.06 145)",
    sage: "oklch(56% 0.05 150)",
    line: "rgba(34, 42, 31, 0.18)",
  },
  "ink-paper": {
    bg: "#f1ede3", bgSoft: "#e6e1d5", paper: "#faf8f1",
    ink: "#1c1a16", inkSoft: "#3d3a32", inkMute: "#7c766a",
    moss: "oklch(35% 0.02 100)",
    sage: "oklch(50% 0.025 110)",
    line: "rgba(28, 26, 22, 0.18)",
  },
  "twilight": {
    bg: "#251f1a", bgSoft: "#1c1814", paper: "#2e2820",
    ink: "#f4ead8", inkSoft: "#d4c6ae", inkMute: "#9d8d76",
    moss: "oklch(72% 0.07 130)",
    sage: "oklch(80% 0.05 140)",
    line: "rgba(244, 234, 216, 0.18)",
  },
};

const FONT_OPTIONS = {
  heading: {
    serif:    `"Noto Serif TC", "Songti TC", serif`,
    songti:   `"Source Han Serif TC", "Noto Serif TC", "Songti TC", serif`,
    kaiti:    `"DFKai-SB", "BiauKai", "Noto Serif TC", serif`,
    sans:     `"Noto Sans TC", "PingFang TC", sans-serif`,
  },
  body: {
    sans:     `"Noto Sans TC", "PingFang TC", sans-serif`,
    serif:    `"Noto Serif TC", "Songti TC", serif`,
  },
};

function useTweaksLocal(defaults) {
  const [state, setState] = React.useState(defaults);
  const set = React.useCallback((keyOrObj, value) => {
    const edits = typeof keyOrObj === 'string' ? { [keyOrObj]: value } : keyOrObj;
    setState(s => ({ ...s, ...edits }));
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
    } catch (e) {}
  }, []);
  return [state, set];
}

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES["warm-coffee"];
  const r = document.documentElement;
  r.style.setProperty('--bg', p.bg);
  r.style.setProperty('--bg-soft', p.bgSoft);
  r.style.setProperty('--paper', p.paper);
  r.style.setProperty('--ink', p.ink);
  r.style.setProperty('--ink-soft', p.inkSoft);
  r.style.setProperty('--ink-mute', p.inkMute);
  r.style.setProperty('--moss', p.moss);
  r.style.setProperty('--sage', p.sage);
  r.style.setProperty('--line', p.line);
}
function applyFonts(h, b) {
  const r = document.documentElement;
  r.style.setProperty('--serif-zh', FONT_OPTIONS.heading[h] || FONT_OPTIONS.heading.serif);
  r.style.setProperty('--sans-zh',  FONT_OPTIONS.body[b]    || FONT_OPTIONS.body.sans);
}
function applyIntroMood(mood) {
  const el = document.querySelector('.intro');
  if (!el) return;
  el.dataset.mood = mood;
}
function applyGridLayout(layout) {
  const el = document.querySelector('.explore-grid');
  if (!el) return;
  el.dataset.layout = layout;
}
function applyWatercolor(on) {
  document.body.dataset.watercolor = on ? 'on' : 'off';
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyFonts(t.headingFont, t.bodyFont); }, [t.headingFont, t.bodyFont]);
  React.useEffect(() => { applyIntroMood(t.introMood); }, [t.introMood]);
  React.useEffect(() => { applyGridLayout(t.gridLayout); }, [t.gridLayout]);
  React.useEffect(() => { applyWatercolor(t.showWatercolor); }, [t.showWatercolor]);

  return (
    <TweaksPanel>
      <TweakSection label="配色" />
      <TweakRadio
        label="色票"
        value={t.palette}
        options={[
          { value: 'warm-coffee', label: '暖咖啡' },
          { value: 'fresh-sage',  label: '青苔綠' },
          { value: 'ink-paper',   label: '紙墨色' },
          { value: 'twilight',    label: '夜幕' },
        ]}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="字型" />
      <TweakRadio
        label="標題"
        value={t.headingFont}
        options={[
          { value: 'serif',  label: '思源宋體' },
          { value: 'kaiti',  label: '楷體' },
          { value: 'sans',   label: '黑體' },
        ]}
        onChange={(v) => setTweak('headingFont', v)}
      />
      <TweakRadio
        label="內文"
        value={t.bodyFont}
        options={[
          { value: 'sans',  label: '黑體' },
          { value: 'serif', label: '宋體' },
        ]}
        onChange={(v) => setTweak('bodyFont', v)}
      />

      <TweakSection label="第二屏 對比" />
      <TweakRadio
        label="氛圍"
        value={t.introMood}
        options={[
          { value: 'balanced', label: '平衡' },
          { value: 'soft',     label: '輕柔' },
          { value: 'deep',     label: '深沉' },
        ]}
        onChange={(v) => setTweak('introMood', v)}
      />

      <TweakSection label="第三屏 排版" />
      <TweakRadio
        label="網格"
        value={t.gridLayout}
        options={[
          { value: 'asymmetric', label: '不等大' },
          { value: 'uniform',    label: '齊整 3×2' },
          { value: 'masonry',    label: '錯落' },
        ]}
        onChange={(v) => setTweak('gridLayout', v)}
      />

      <TweakSection label="裝飾" />
      <TweakToggle
        label="水彩潑墨點綴"
        value={t.showWatercolor}
        onChange={(v) => setTweak('showWatercolor', v)}
      />
    </TweaksPanel>
  );
}

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