// tweaks-app.jsx — Cafe Mock Tweaks Panel
// Requires: tweaks-panel.jsx (starter), React 18, Babel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "bg": "#f9f7f4",
  "text": "#2a2520",
  "heading": "#1a1510",
  "accent": "#8b6f47",
  "border": "#d4c4b0",
  "footerBg": "#1a1510",
  "fontPair": "serif-sans",
  "baseSize": 16,
  "headingWeight": 400,
  "headingSpacing": 0,
  "logoSpacing": 20,
  "contentWidth": 960,
  "sectionPadding": 6,
  "radius": 8,
  "heroHeight": 560,
  "heroGrayscale": 0,
  "heroDarkness": 40,
  "heroPosition": "center",
  "heroKicker": "— Workshop Mock —",
  "heroTitle": "A Place for Good Coffee",
  "heroSub": "Specialty coffee and seasonal food in a quiet space",
  "menuBorderStyle": "dotted",
  "menuLineHeight": 1.8,
  "menuCardOpacity": 1
}/*EDITMODE-END*/;

const PALETTES = {
  classic: { bg:"#f9f7f4", text:"#2a2520", heading:"#1a1510", accent:"#8b6f47", border:"#d4c4b0", footerBg:"#1a1510" },
  cream:   { bg:"#fdf8f0", text:"#3d3020", heading:"#2a1f0a", accent:"#c8964e", border:"#e8d5b0", footerBg:"#2a1f0a" },
  mist:    { bg:"#f4f5f7", text:"#2a2d35", heading:"#1a1d25", accent:"#6b8caa", border:"#c5ccd8", footerBg:"#1a1d25" },
  moss:    { bg:"#f4f6f2", text:"#252d20", heading:"#151d10", accent:"#6b8a5a", border:"#c0cdb8", footerBg:"#151d10" },
  dark:    { bg:"#1a1714", text:"#c8c0b8", heading:"#e8e0d8", accent:"#c8a070", border:"#3a3530", footerBg:"#0d0b08" },
};

const FONT_PAIRS = {
  "serif-sans": { heading:"'Fraunces', Georgia, serif", body:"'Inter', system-ui, sans-serif" },
  "serif":      { heading:"'Fraunces', Georgia, serif", body:"'Fraunces', Georgia, serif" },
  "sans":       { heading:"'Inter', system-ui, sans-serif", body:"'Inter', system-ui, sans-serif" },
  "mincho":     { heading:"'Shippori Mincho', 'Times New Roman', serif", body:"'Inter', system-ui, sans-serif" },
};

function applyTweaks(t) {
  const R = document.documentElement;
  const set = (k, v) => R.style.setProperty(k, v);

  // Colors
  set('--bg', t.bg);
  set('--text', t.text);
  set('--heading', t.heading);
  set('--accent', t.accent);
  set('--border', t.border);
  set('--footer-bg', t.footerBg);

  // Typography
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS['serif-sans'];
  set('--font-heading', fp.heading);
  set('--font-body', fp.body);
  set('--base-size', t.baseSize + 'px');
  set('--heading-weight', t.headingWeight);
  set('--heading-spacing', (t.headingSpacing / 100) + 'em');
  set('--logo-spacing', (t.logoSpacing / 100) + 'em');

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

  // Hero
  set('--hero-height', t.heroHeight + 'px');
  set('--hero-grayscale', t.heroGrayscale + '%');
  set('--hero-darkness', t.heroDarkness / 100);
  set('--hero-align', t.heroPosition === 'top' ? 'flex-start' :
                       t.heroPosition === 'bottom' ? 'flex-end' : 'center');

  // Menu
  set('--menu-border-style', t.menuBorderStyle);
  set('--menu-line-height', t.menuLineHeight);
  set('--menu-card-opacity', t.menuCardOpacity);

  // Hero text DOM
  const kicker = document.getElementById('hero-kicker');
  const title  = document.getElementById('hero-title');
  const sub    = document.getElementById('hero-sub');
  if (kicker) kicker.textContent = t.heroKicker;
  if (title)  title.innerHTML = t.heroTitle.replace(/\n/g, '<br>');
  if (sub)    sub.textContent = t.heroSub;
}

function CafeTweaksApp() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

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

  return (
    <TweaksPanel title="Tweaks">

      {/* ── COLOR ─────────────────────────────────── */}
      <TweakSection label="カラー / Color">
        <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:10 }}>
          {Object.keys(PALETTES).map(name => (
            <button key={name}
              onClick={() => applyPalette(name)}
              style={{
                flex:'1 1 auto', padding:'5px 4px', fontSize:11,
                border: tweaks.palette === name ? '2px solid #555' : '1px solid #ccc',
                borderRadius:4, background: PALETTES[name].bg,
                color: PALETTES[name].text, cursor:'pointer',
                fontWeight: tweaks.palette === name ? 700 : 400,
                textTransform:'capitalize',
              }}>
              {name.charAt(0).toUpperCase() + name.slice(1)}
            </button>
          ))}
        </div>
        <TweakColor label="背景 Background"  value={tweaks.bg}        onChange={v => setTweak({ bg: v, palette:'custom' })} />
        <TweakColor label="本文 Body"        value={tweaks.text}      onChange={v => setTweak({ text: v, palette:'custom' })} />
        <TweakColor label="見出し Heading"   value={tweaks.heading}   onChange={v => setTweak({ heading: v, palette:'custom' })} />
        <TweakColor label="アクセント Accent" value={tweaks.accent}  onChange={v => setTweak({ accent: v, palette:'custom' })} />
        <TweakColor label="罫線 Border"      value={tweaks.border}    onChange={v => setTweak({ border: v, palette:'custom' })} />
        <TweakColor label="フッター Footer BG" value={tweaks.footerBg} onChange={v => setTweak({ footerBg: v, palette:'custom' })} />
      </TweakSection>

      {/* ── TYPOGRAPHY ───────────────────────────── */}
      <TweakSection label="タイポグラフィ / Typography">
        <TweakRadio
          label="字形ペア Font Pair"
          value={tweaks.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="基準サイズ Base (px)" value={tweaks.baseSize}       min={13} max={20} step={1}    onChange={v => setTweak('baseSize', v)} />
        <TweakSlider label="見出しウェイト Weight" value={tweaks.headingWeight} min={300} max={700} step={100} onChange={v => setTweak('headingWeight', v)} />
        <TweakSlider label="見出し字間 Spacing (/100em)" value={tweaks.headingSpacing} min={-3} max={15} step={1} onChange={v => setTweak('headingSpacing', v)} />
        <TweakSlider label="ロゴ字間 Logo (/100em)"      value={tweaks.logoSpacing}    min={0}  max={80} step={1} onChange={v => setTweak('logoSpacing', v)} />
      </TweakSection>

      {/* ── LAYOUT ───────────────────────────────── */}
      <TweakSection label="レイアウト / Layout">
        <TweakSlider label="コンテンツ幅 Width (px)"   value={tweaks.contentWidth}   min={720} max={1280} step={40}  onChange={v => setTweak('contentWidth', v)} />
        <TweakSlider label="セクション余白 Padding (rem)" value={tweaks.sectionPadding} min={3}   max={12}  step={0.5} onChange={v => setTweak('sectionPadding', v)} />
        <TweakSlider label="角丸 Radius (px)"           value={tweaks.radius}         min={0}   max={28}  step={1}   onChange={v => setTweak('radius', v)} />
      </TweakSection>

      {/* ── HERO ─────────────────────────────────── */}
      <TweakSection label="ヒーロー / Hero">
        <TweakSlider label="高さ Height (px)"    value={tweaks.heroHeight}    min={320} max={820} step={10}  onChange={v => setTweak('heroHeight', v)} />
        <TweakSlider label="モノクロ度 Grayscale (%)" value={tweaks.heroGrayscale} min={0}   max={100} step={5}   onChange={v => setTweak('heroGrayscale', v)} />
        <TweakSlider label="暗さ Darkness (%)"   value={tweaks.heroDarkness}  min={0}   max={75}  step={5}   onChange={v => setTweak('heroDarkness', v)} />
        <TweakRadio
          label="コピー位置 Copy Position"
          value={tweaks.heroPosition}
          options={[
            { value:'top',    label:'上 Top' },
            { value:'center', label:'中 Center' },
            { value:'bottom', label:'下 Bottom' },
          ]}
          onChange={v => setTweak('heroPosition', v)}
        />
        <TweakText label="Kicker"    value={tweaks.heroKicker} onChange={v => setTweak('heroKicker', v)} />
        <TweakText label="Title"     value={tweaks.heroTitle}  onChange={v => setTweak('heroTitle', v)} />
        <TweakText label="Sub copy"  value={tweaks.heroSub}    onChange={v => setTweak('heroSub', v)} />
      </TweakSection>

      {/* ── MENU ─────────────────────────────────── */}
      <TweakSection label="メニュー / Menu">
        <TweakSelect
          label="区切り線 Border Style"
          value={tweaks.menuBorderStyle}
          options={[
            { value:'dotted', label:'点線 Dotted' },
            { value:'dashed', label:'破線 Dashed' },
            { value:'solid',  label:'実線 Solid' },
            { value:'none',   label:'なし None' },
          ]}
          onChange={v => setTweak('menuBorderStyle', v)}
        />
        <TweakSlider label="行の高さ Line Height" value={tweaks.menuLineHeight}    min={1.2} max={2.6} step={0.1} onChange={v => setTweak('menuLineHeight', v)} />
        <TweakSlider label="カード透過 Card Opacity" value={tweaks.menuCardOpacity} min={0.4} max={1}   step={0.05} onChange={v => setTweak('menuCardOpacity', v)} />
      </TweakSection>

    </TweaksPanel>
  );
}

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