// tweaks-app.jsx — Cafe Mock Tweaks layer
// CSS vars are applied via document.documentElement.style.setProperty

const PALETTE_PRESETS = {
  "Classic": { colorBg:"#FBF7F0", colorText:"#222222", colorHeading:"#3A2A1A", colorAccent:"#D9C5A3", colorBorder:"#E8DDD0", colorFooterBg:"#3A2A1A" },
  "Cream":   { colorBg:"#FFFDF5", colorText:"#2D2416", colorHeading:"#5C3D1E", colorAccent:"#F0D9A8", colorBorder:"#EAD9B5", colorFooterBg:"#5C3D1E" },
  "Mist":    { colorBg:"#F4F5F6", colorText:"#1E2225", colorHeading:"#2C3A45", colorAccent:"#B8C9D3", colorBorder:"#CDD8DF", colorFooterBg:"#2C3A45" },
  "Moss":    { colorBg:"#F3F5EF", colorText:"#1E241A", colorHeading:"#2E3D28", colorAccent:"#A8BEA0", colorBorder:"#C3D0BC", colorFooterBg:"#2E3D28" },
  "Dark":    { colorBg:"#1A1A18", colorText:"#D8D4CC", colorHeading:"#EDE9E0", colorAccent:"#6B5F4A", colorBorder:"#3A3730", colorFooterBg:"#111110" },
};

const FONT_PAIRS = {
  "Serif+Sans": { heading:"'Cormorant Garamond', serif", body:"'Inter', sans-serif",              ja:"'Shippori Mincho', serif" },
  "Serif":      { heading:"'Cormorant Garamond', serif", body:"'Cormorant Garamond', serif",       ja:"'Shippori Mincho', serif" },
  "Sans":       { heading:"'Inter', sans-serif",         body:"'Inter', sans-serif",              ja:"'Shippori Mincho', serif" },
  "明朝":        { heading:"'Shippori Mincho', serif",   body:"'Shippori Mincho', serif",          ja:"'Shippori Mincho', serif" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Classic",
  "colorBg": "#FBF7F0",
  "colorText": "#222222",
  "colorHeading": "#3A2A1A",
  "colorAccent": "#D9C5A3",
  "colorBorder": "#E8DDD0",
  "colorFooterBg": "#3A2A1A",
  "fontPair": "Serif+Sans",
  "fontSize": 16,
  "headingWeight": 400,
  "headingLetterSpacing": 0,
  "logoLetterSpacing": 15,
  "contentWidth": 960,
  "sectionPadding": 6,
  "borderRadius": 8,
  "heroHeight": 560,
  "heroGrayscale": 20,
  "heroDarkness": 40,
  "heroPosition": "center",
  "heroKicker": "A place to pause",
  "heroTitle": "Good coffee,\ngood company.",
  "heroSubcopy": "ゆっくりと流れる時間を、ここで。",
  "menuDivider": "dotted",
  "menuLineHeight": 2.0,
  "cardOpacity": 100
}/*EDITMODE-END*/;

// hex → rgba helper
function hexToRgba(hex, alpha) {
  if (!hex || hex.length < 7) return `rgba(0,0,0,${alpha})`;
  const r = parseInt(hex.slice(1,3), 16);
  const g = parseInt(hex.slice(3,5), 16);
  const b = parseInt(hex.slice(5,7), 16);
  return `rgba(${r},${g},${b},${alpha})`;
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply all CSS vars whenever tweaks change
  React.useEffect(() => {
    const r = document.documentElement;

    // Colors
    r.style.setProperty('--bg',         t.colorBg);
    r.style.setProperty('--text',       t.colorText);
    r.style.setProperty('--heading',    t.colorHeading);
    r.style.setProperty('--accent',     t.colorAccent);
    r.style.setProperty('--border',     t.colorBorder);
    r.style.setProperty('--footer-bg',  t.colorFooterBg);
    r.style.setProperty('--nav-bg',     hexToRgba(t.colorBg, 0.82));

    // Force body bg (overrides !important in CSS for dark palette)
    document.body.style.setProperty('background-color', t.colorBg, 'important');
    document.body.style.setProperty('color', t.colorText, 'important');
    document.documentElement.style.setProperty('background-color', t.colorBg, 'important');

    // Fonts
    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["Serif+Sans"];
    r.style.setProperty('--font-heading', fp.heading);
    r.style.setProperty('--font-body',    fp.body);
    r.style.setProperty('--font-ja',      fp.ja);

    // Typography numbers
    r.style.setProperty('--font-size',      t.fontSize + 'px');
    r.style.setProperty('--heading-weight', t.headingWeight);
    r.style.setProperty('--heading-ls',     (t.headingLetterSpacing / 100) + 'em');
    r.style.setProperty('--logo-ls',        (t.logoLetterSpacing / 100) + 'em');

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

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

    // Hero content alignment
    const heroContent = document.getElementById('hero-content');
    if (heroContent) {
      const jc = t.heroPosition === 'top' ? 'flex-start'
               : t.heroPosition === 'bottom' ? 'flex-end'
               : 'center';
      heroContent.style.justifyContent = jc;
      const pt = t.heroPosition === 'top' ? '80px' : t.heroPosition === 'bottom' ? '0' : '0';
      heroContent.style.paddingTop = pt;
      const pb = t.heroPosition === 'bottom' ? '80px' : '0';
      heroContent.style.paddingBottom = pb;
    }

    // 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;

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

  }, [t]);

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

  return (
    <TweaksPanel>
      <TweakSection label="カラープリセット" />
      <TweakSelect label="プリセット" value={t.palette}
        options={["Classic","Cream","Mist","Moss","Dark"]}
        onChange={applyPalette} />

      <TweakSection label="個別カラー" />
      <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="タイポグラフィ" />
      <TweakRadio label="字形ペア" value={t.fontPair}
        options={["Serif+Sans","Serif","Sans","明朝"]}
        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}
        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="レイアウト" />
      <TweakSlider label="コンテンツ幅"   value={t.contentWidth}    min={720}  max={1280} step={40}  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={2}   unit="px"
        onChange={v => setTweak('borderRadius', v)} />

      <TweakSection label="ヒーロー" />
      <TweakSlider label="高さ"       value={t.heroHeight}    min={320} max={820} step={20} 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.heroPosition}
        options={["top","center","bottom"]}
        onChange={v => setTweak('heroPosition', 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="メニュー表示" />
      <TweakSelect label="区切り線" value={t.menuDivider}
        options={["dotted","dashed","solid","none"]}
        onChange={v => setTweak('menuDivider', v)} />
      <TweakSlider label="行の高さ"     value={t.menuLineHeight} min={1.4} max={3.0} step={0.1}
        onChange={v => setTweak('menuLineHeight', v)} />
      <TweakSlider label="カードの透過度" value={t.cardOpacity}  min={0}   max={100} step={5}  unit="%"
        onChange={v => setTweak('cardOpacity', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);