// tweaks.jsx — Tweaks panel for 野勢工務店 redesign

const NOSE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "orange",
  "heading": "mincho",
  "density": "comfortable",
  "showStats": true,
  "showMap": true
}/*EDITMODE-END*/;

const THEME_OPTIONS = [
  ['#ED7B2C', '#FCEFDC', '#3A2418'],  // orange (default — bright & warm)
  ['#C84A1F', '#F4E2C9', '#4A1F0E'],  // terracotta (deeper)
  ['#F4A26D', '#FFE6D2', '#5A3320'],  // peach (softer pastel)
  ['#B89968', '#ECE4D3', '#14213D'],  // indigo (the original cool palette)
];
const THEME_NAMES = ['orange', 'terracotta', 'peach', 'indigo'];

function NoseTweaksApp() {
  const [t, setTweak] = useTweaks(NOSE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.setAttribute('data-theme', t.theme);
    document.body.setAttribute('data-heading', t.heading);
    document.body.setAttribute('data-density', t.density);
  }, [t.theme, t.heading, t.density]);

  React.useEffect(() => {
    const stats = document.querySelector('.visual-stats');
    if (stats) stats.style.display = t.showStats ? '' : 'none';
    const map = document.querySelector('.area-map');
    if (map) map.style.display = t.showMap ? '' : 'none';
  }, [t.showStats, t.showMap]);

  const themePaletteValue = THEME_OPTIONS[THEME_NAMES.indexOf(t.theme)] || THEME_OPTIONS[0];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Visual theme" />
      <TweakColor
        label="Palette"
        value={themePaletteValue}
        options={THEME_OPTIONS}
        onChange={(v) => {
          const idx = THEME_OPTIONS.findIndex(p => p[0] === v[0]);
          if (idx >= 0) setTweak('theme', THEME_NAMES[idx]);
        }}
      />

      <TweakSection label="Typography" />
      <TweakRadio
        label="Heading"
        value={t.heading}
        options={[
          { value: 'mincho', label: '明朝' },
          { value: 'sans', label: 'ゴシック' },
        ]}
        onChange={(v) => setTweak('heading', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={[
          { value: 'compact', label: '密' },
          { value: 'comfortable', label: '標準' },
          { value: 'spacious', label: '疎' },
        ]}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle
        label="社屋スタッツ"
        value={t.showStats}
        onChange={(v) => setTweak('showStats', v)}
      />
      <TweakToggle
        label="エリア・マップ"
        value={t.showMap}
        onChange={(v) => setTweak('showMap', v)}
      />
    </TweaksPanel>
  );
}

const noseTweakRoot = ReactDOM.createRoot(document.getElementById('tweaks-root'));
noseTweakRoot.render(<NoseTweaksApp />);