// tweaks-app.jsx
// Cafe Mock — Tweaks panel wiring
// Loads after tweaks-panel.jsx (which exports all Tweak* controls to window)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "colorBg": "#FBF7F0",
  "colorText": "#222222",
  "colorHeading": "#3A2A1A",
  "colorAccent": "#D9C5A3",
  "colorBorder": "#D9C5A3",
  "colorFooterBg": "#3A2A1A",
  "fontPair": "serif-sans",
  "fontSize": 16,
  "headingWeight": 400,
  "headingLetterSpacing": 0,
  "logoLetterSpacing": 20,
  "contentWidth": 960,
  "sectionPadding": 6,
  "borderRadius": 8,
  "heroHeight": 560,
  "heroGrayscale": 0,
  "heroDarkness": 55,
  "heroCopyPosition": "center",
  "heroKicker": "コーヒーと、静かな時間を。",
  "heroTitle": "日々の中の\nひとつの<em>余白</em>。",
  "heroSubcopy": "丁寧に淹れた一杯と、くつろぎの空間をご用意しています。",
  "menuDivider": "dotted",
  "menuLineHeight": 1.8,
  "cardOpacity": 100
}/*EDITMODE-END*/;

// ── Palette presets ──────────────────────────────────────────────────────────
const PALETTES = {
  classic: {
    colorBg: "#FBF7F0", colorText: "#222222", colorHeading: "#3A2A1A",
    colorAccent: "#D9C5A3", colorBorder: "#D9C5A3", colorFooterBg: "#3A2A1A"
  },
  cream: {
    colorBg: "#FFF8EE", colorText: "#2E200E", colorHeading: "#6B3E1E",
    colorAccent: "#E8C99A", colorBorder: "#E8C99A", colorFooterBg: "#6B3E1E"
  },
  mist: {
    colorBg: "#F2F4F7", colorText: "#1E2330", colorHeading: "#2C3550",
    colorAccent: "#9DAAC4", colorBorder: "#9DAAC4", colorFooterBg: "#2C3550"
  },
  moss: {
    colorBg: "#F3F5F0", colorText: "#1E2218", colorHeading: "#2E3D28",
    colorAccent: "#8FAF7C", colorBorder: "#8FAF7C", colorFooterBg: "#2E3D28"
  },
  dark: {
    colorBg: "#1A1714", colorText: "#E8DFD0", colorHeading: "#F0E8D8",
    colorAccent: "#8C7355", colorBorder: "#4A3F30", colorFooterBg: "#0E0C0A"
  }
};

// ── Font pair definitions ────────────────────────────────────────────────────
const FONT_PAIRS = {
  "serif-sans":  { body: "'Inter', sans-serif",     heading: "'Fraunces', serif" },
  "serif":       { body: "'Fraunces', serif",        heading: "'Fraunces', serif" },
  "sans":        { body: "'Inter', sans-serif",      heading: "'Inter', sans-serif" },
  "mincho":      { body: "'Shippori Mincho', serif", heading: "'Shippori Mincho', serif" }
};

// ── Apply tweaks to CSS custom properties ────────────────────────────────────
function applyTweaks(t) {
  const root = document.documentElement.style;

  // Colors
  root.setProperty('--bg',          t.colorBg);
  root.setProperty('--text',        t.colorText);
  root.setProperty('--heading',     t.colorHeading);
  root.setProperty('--accent',      t.colorAccent);
  root.setProperty('--border',      t.colorBorder);
  root.setProperty('--footer-bg',   t.colorFooterBg);

  // Also fix html/body forced colors for dark-mode resistance
  document.documentElement.style.backgroundColor = t.colorBg;
  document.body.style.setProperty('background-color', t.colorBg, 'important');
  document.body.style.setProperty('color', t.colorText, 'important');

  // Typography
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["serif-sans"];
  root.setProperty('--font-body',    fp.body);
  root.setProperty('--font-heading', fp.heading);
  root.setProperty('--font-size',    t.fontSize + 'px');
  root.setProperty('--heading-weight', t.headingWeight);
  root.setProperty('--heading-ls',   (t.headingLetterSpacing / 100) + 'em');
  root.setProperty('--logo-ls',      (t.logoLetterSpacing / 100) + 'em');

  // Layout
  root.setProperty('--content-width',   t.contentWidth + 'px');
  root.setProperty('--section-padding', t.sectionPadding + 'rem');
  root.setProperty('--radius',          t.borderRadius + 'px');

  // Hero
  root.setProperty('--hero-height',     t.heroHeight + 'px');
  root.setProperty('--hero-grayscale',  t.heroGrayscale + '%');
  root.setProperty('--hero-darkness',   (t.heroDarkness / 100).toFixed(2));

  // Hero copy position
  const posMap = { top: 'flex-start', center: 'center', bottom: 'flex-end' };
  root.setProperty('--hero-align', posMap[t.heroCopyPosition] || 'center');

  // Menu
  root.setProperty('--menu-divider',    t.menuDivider === 'none' ? 'none' : t.menuDivider);
  root.setProperty('--menu-lh',         t.menuLineHeight);
  root.setProperty('--card-opacity',    (t.cardOpacity / 100).toFixed(2));

  // Hero text
  const kickerEl = document.getElementById('hero-kicker');
  const titleEl  = document.getElementById('hero-title');
  const subcopyEl = document.getElementById('hero-subcopy');
  if (kickerEl)  kickerEl.textContent = t.heroKicker;
  if (titleEl)   titleEl.innerHTML = t.heroTitle.replace(/\n/g, '<br>');
  if (subcopyEl) subcopyEl.textContent = t.heroSubcopy;
}

// ── App component ────────────────────────────────────────────────────────────
function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply all tweaks whenever values change
  React.useEffect(() => {
    applyTweaks(t);
  }, [t]);

  // Apply on first mount
  React.useEffect(() => {
    applyTweaks(TWEAK_DEFAULTS);
  }, []);

  const applyPalette = (name) => {
    const p = PALETTES[name];
    if (!p) return;
    setTweak({ palette: name, ...p });
  };

  return (
    <TweaksPanel title="Tweaks">

      {/* ── カラー ── */}
      <TweakSection label="カラー / Color" />

      <TweakRow label="プリセット">
        <select className="twk-field" value={t.palette}
                onChange={(e) => applyPalette(e.target.value)}>
          <option value="classic">Classic</option>
          <option value="cream">Cream</option>
          <option value="mist">Mist</option>
          <option value="moss">Moss</option>
          <option value="dark">Dark</option>
        </select>
      </TweakRow>

      <TweakColor label="背景"         value={t.colorBg}        onChange={(v) => setTweak('colorBg', v)} />
      <TweakColor label="本文"         value={t.colorText}      onChange={(v) => setTweak('colorText', v)} />
      <TweakColor label="見出し"       value={t.colorHeading}   onChange={(v) => setTweak('colorHeading', v)} />
      <TweakColor label="アクセント"   value={t.colorAccent}    onChange={(v) => setTweak('colorAccent', v)} />
      <TweakColor label="罫線"         value={t.colorBorder}    onChange={(v) => setTweak('colorBorder', v)} />
      <TweakColor label="フッター背景" value={t.colorFooterBg}  onChange={(v) => setTweak('colorFooterBg', v)} />

      {/* ── タイポグラフィ ── */}
      <TweakSection label="タイポグラフィ / Typography" />

      <TweakRadio label="字形ペア" value={t.fontPair}
                  options={[
                    { value: 'serif-sans', label: 'Serif+Sans' },
                    { value: 'serif',      label: 'Serif' },
                    { value: 'sans',       label: 'Sans' },
                    { value: 'mincho',     label: '明朝' }
                  ]}
                  onChange={(v) => setTweak('fontPair', v)} />

      <TweakSlider label="基準サイズ"   value={t.fontSize}           min={13} max={20} step={1} unit="px"
                   onChange={(v) => setTweak('fontSize', v)} />
      <TweakSlider label="見出しウェイト" value={t.headingWeight}    min={300} max={700} step={100} unit=""
                   onChange={(v) => setTweak('headingWeight', v)} />
      <TweakSlider label="見出し字間"   value={t.headingLetterSpacing} min={-3} max={15} step={1} unit="/100em"
                   onChange={(v) => setTweak('headingLetterSpacing', v)} />
      <TweakSlider label="ロゴ字間"     value={t.logoLetterSpacing}  min={0} max={80} step={1} unit="/100em"
                   onChange={(v) => setTweak('logoLetterSpacing', v)} />

      {/* ── レイアウト ── */}
      <TweakSection label="レイアウト / Layout" />

      <TweakSlider label="コンテンツ幅"  value={t.contentWidth}   min={720} max={1280} step={20} unit="px"
                   onChange={(v) => setTweak('contentWidth', v)} />
      <TweakSlider label="セクション余白" value={t.sectionPadding} min={3} max={12} step={0.5} unit="rem"
                   onChange={(v) => setTweak('sectionPadding', v)} />
      <TweakSlider label="角丸"          value={t.borderRadius}   min={0} max={28} step={1} unit="px"
                   onChange={(v) => setTweak('borderRadius', v)} />

      {/* ── ヒーロー ── */}
      <TweakSection label="ヒーロー / Hero" />

      <TweakSlider label="高さ"        value={t.heroHeight}    min={320} max={820} step={10} unit="px"
                   onChange={(v) => setTweak('heroHeight', v)} />
      <TweakSlider label="モノクロ度"  value={t.heroGrayscale} min={0} max={100} step={5} unit="%"
                   onChange={(v) => setTweak('heroGrayscale', v)} />
      <TweakSlider label="暗さ"        value={t.heroDarkness}  min={0} max={75} step={5} unit="%"
                   onChange={(v) => setTweak('heroDarkness', v)} />

      <TweakRadio label="コピー位置" value={t.heroCopyPosition}
                  options={[
                    { value: 'top',    label: '上' },
                    { value: 'center', label: '中' },
                    { value: 'bottom', label: '下' }
                  ]}
                  onChange={(v) => setTweak('heroCopyPosition', v)} />

      <TweakText label="Kicker"    value={t.heroKicker}  onChange={(v) => setTweak('heroKicker', v)} />
      <TweakText label="タイトル"  value={t.heroTitle}   onChange={(v) => setTweak('heroTitle', v)} />
      <TweakText label="サブコピー" value={t.heroSubcopy} onChange={(v) => setTweak('heroSubcopy', v)} />

      {/* ── メニュー表示 ── */}
      <TweakSection label="メニュー表示 / Menu" />

      <TweakRadio label="区切り線" value={t.menuDivider}
                  options={[
                    { value: 'dotted', label: '点線' },
                    { value: 'dashed', label: '破線' },
                    { value: 'solid',  label: '実線' },
                    { value: 'none',   label: 'なし' }
                  ]}
                  onChange={(v) => setTweak('menuDivider', v)} />

      <TweakSlider label="行の高さ" value={t.menuLineHeight} min={1.2} max={2.8} step={0.1} unit=""
                   onChange={(v) => setTweak('menuLineHeight', v)} />
      <TweakSlider label="カード透過度" value={t.cardOpacity} min={20} max={100} step={5} unit="%"
                   onChange={(v) => setTweak('cardOpacity', v)} />

    </TweaksPanel>
  );
}

// Mount
const tweaksRoot = document.getElementById('tweaks-root');
if (tweaksRoot) {
  ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);
}