/* tweaks-app.jsx
   Tweaksパネルのエントリポイント。
   TWEAK_DEFAULTS を /*EDITMODE-BEGIN*/ ... /*EDITMODE-END*/ で囲み、
   useTweaks フックで localStorage に永続化する。
*/

// =====================================================================
// デフォルト値
// =====================================================================
/*EDITMODE-BEGIN*/
const TWEAK_DEFAULTS = {
  // ---- カラープリセット ----
  colorPreset: "Classic",

  // ---- 個別カラー ----
  colorBg:      "#FBF7F0",
  colorText:    "#222222",
  colorHeading: "#3A2A1A",
  colorAccent:  "#D9C5A3",
  colorBorder:  "#E5DDD0",
  colorFooter:  "#3A2A1A",

  // ---- タイポグラフィ ----
  fontPair:        "Serif+Sans",   // "Serif+Sans" | "Serif" | "Sans" | "Mincho"
  fontSizeBase:    16,             // px  13-20
  headingWeight:   400,            // 300-700
  headingTracking: 4,              // /100em  -3 〜 15
  logoTracking:    18,             // /100em  0 〜 80

  // ---- レイアウト ----
  contentWidth:    960,   // px 720-1280
  sectionPadding:  6,     // rem 3-12
  radius:          8,     // px 0-28

  // ---- ヒーロー ----
  heroHeight:     600,     // px 320-820
  heroGrayscale:  0,       // % 0-100
  heroDarkness:   45,      // % 0-75
  heroPosition:   "middle", // "top" | "middle" | "bottom"
  heroKicker:     "A quiet place for your day",
  heroTitle:      "A Cup of\nGood Time",
  heroSub:        "ゆっくりと流れる時間の中で、一杯の飲み物とともに。\n日常に、やすらぎの場所を。",

  // ---- メニュー表示 ----
  menuDivider:     "dashed",  // "dashed" | "dotted" | "solid" | "none"
  menuLineHeight:  1.9,       // 1.4-2.8
  menuCardOpacity: 1,         // 0-1
};
/*EDITMODE-END*/

// =====================================================================
// カラープリセット定義
// =====================================================================
const COLOR_PRESETS = {
  Classic: { bg:"#FBF7F0", text:"#222222", heading:"#3A2A1A", accent:"#D9C5A3", border:"#E5DDD0", footer:"#3A2A1A" },
  Cream:   { bg:"#FFFDF7", text:"#333333", heading:"#5C4A2A", accent:"#E8D5A3", border:"#EDE3CC", footer:"#5C4A2A" },
  Mist:    { bg:"#F4F6F8", text:"#2C3A47", heading:"#1A2A3A", accent:"#A3B8C8", border:"#C8D8E8", footer:"#1A2A3A" },
  Moss:    { bg:"#F2F4F0", text:"#2A3A2A", heading:"#1A2A1A", accent:"#8A9A7A", border:"#C0CDB8", footer:"#1A2A1A" },
  Dark:    { bg:"#1A1A1A", text:"#E0D8CC", heading:"#F5EFE0", accent:"#8A7A5A", border:"#3A3A3A", footer:"#111111" },
};

// =====================================================================
// useTweaks カスタムフック（localStorage 永続化）
// =====================================================================
function useTweaks() {
  const { useState, useEffect } = React;

  const [tweaks, setTweaksState] = useState(() => {
    try {
      const saved = localStorage.getItem("cafe-tweaks");
      return saved ? { ...TWEAK_DEFAULTS, ...JSON.parse(saved) } : { ...TWEAK_DEFAULTS };
    } catch {
      return { ...TWEAK_DEFAULTS };
    }
  });

  // localStorage に保存
  useEffect(() => {
    try {
      localStorage.setItem("cafe-tweaks", JSON.stringify(tweaks));
    } catch {}
  }, [tweaks]);

  // CSS カスタムプロパティに反映
  useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty("--bg",        tweaks.colorBg);
    root.setProperty("--text",      tweaks.colorText);
    root.setProperty("--heading",   tweaks.colorHeading);
    root.setProperty("--accent",    tweaks.colorAccent);
    root.setProperty("--border",    tweaks.colorBorder);
    root.setProperty("--footer-bg", tweaks.colorFooter);

    // タイポグラフィ
    const fonts = {
      "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', serif",         body: "'Shippori Mincho', serif" },
    };
    const pair = fonts[tweaks.fontPair] || fonts["Serif+Sans"];
    root.setProperty("--font-heading",           pair.heading);
    root.setProperty("--font-body",              pair.body);
    root.setProperty("--font-size-base",         tweaks.fontSizeBase + "px");
    root.setProperty("--heading-weight",         String(tweaks.headingWeight));
    root.setProperty("--heading-letter-spacing", (tweaks.headingTracking / 100) + "em");
    root.setProperty("--logo-letter-spacing",    (tweaks.logoTracking / 100) + "em");

    // レイアウト
    root.setProperty("--content-width",   tweaks.contentWidth + "px");
    root.setProperty("--section-padding", tweaks.sectionPadding + "rem");
    root.setProperty("--radius",          tweaks.radius + "px");

    // ヒーロー
    root.setProperty("--hero-height",     tweaks.heroHeight + "px");
    root.setProperty("--hero-grayscale",  tweaks.heroGrayscale + "%");
    root.setProperty("--hero-darkness",   (tweaks.heroDarkness / 100).toFixed(2));

    // メニュー
    root.setProperty("--menu-divider",      tweaks.menuDivider === "none" ? "solid" : tweaks.menuDivider);
    root.setProperty("--menu-line-height",  String(tweaks.menuLineHeight));
    root.setProperty("--menu-card-opacity", String(tweaks.menuCardOpacity));

    // メニュー区切り線 none 対応（border-style を transparent で）
    if (tweaks.menuDivider === "none") {
      root.setProperty("--border-style-menu", "solid");
      root.setProperty("--border-color-menu", "transparent");
    } else {
      root.setProperty("--border-style-menu", tweaks.menuDivider);
      root.setProperty("--border-color-menu", tweaks.colorBorder);
    }

    // ヒーローコピー位置
    const heroCopy = document.getElementById("hero-copy");
    if (heroCopy) {
      heroCopy.className = "hero__copy hero__copy--" + tweaks.heroPosition;
    }

    // ヒーローテキスト
    const kikEl = document.getElementById("hero-kicker");
    const titEl = document.getElementById("hero-title");
    const subEl = document.getElementById("hero-sub");
    if (kikEl) kikEl.textContent = tweaks.heroKicker;
    if (titEl) titEl.innerHTML = tweaks.heroTitle.replace(/\n/g, "<br>");
    if (subEl) subEl.innerHTML = tweaks.heroSub.replace(/\n/g, "<br>");

    // ダークモード対策：html/body 色固定
    document.documentElement.style.backgroundColor = tweaks.colorBg;
    document.documentElement.style.color           = tweaks.colorText;
    document.body.style.backgroundColor = tweaks.colorBg;
    document.body.style.color           = tweaks.colorText;
  }, [tweaks]);

  const setTweaks = (key, value) => {
    setTweaksState(prev => ({ ...prev, [key]: value }));
  };

  const applyPreset = (name) => {
    const p = COLOR_PRESETS[name];
    if (!p) return;
    setTweaksState(prev => ({
      ...prev,
      colorPreset: name,
      colorBg:      p.bg,
      colorText:    p.text,
      colorHeading: p.heading,
      colorAccent:  p.accent,
      colorBorder:  p.border,
      colorFooter:  p.footer,
    }));
  };

  const reset = () => {
    setTweaksState({ ...TWEAK_DEFAULTS });
  };

  return { tweaks, setTweaks, applyPreset, reset };
}

// =====================================================================
// TweaksPanel コンポーネント（tweaks-panel.jsx を外部読み込み）
// =====================================================================
// tweaks-panel.jsx が別ファイルなので、ここでは ReactDOM.createRoot でマウント
// tweaks-panel.jsx 側の TweaksPanel コンポーネントを使う

// DOM Ready 後にマウント
function mountTweaksApp() {
  const root = document.getElementById("tweaks-root");
  if (!root) return;
  // TweaksPanel は tweaks-panel.jsx で定義済み（同じ Babel scope にロード済み）
  if (typeof TweaksPanel === "undefined") {
    console.warn("TweaksPanel が見つかりません。tweaks-panel.jsx を確認してください。");
    return;
  }

  function App() {
    const { tweaks, setTweaks, applyPreset, reset } = useTweaks();
    return React.createElement(TweaksPanel, { tweaks, setTweaks, applyPreset, reset, COLOR_PRESETS });
  }

  ReactDOM.createRoot(root).render(React.createElement(App));
}

// Babel type="text/babel" は非同期評価なので、全スクリプトが揃ってからマウント
// tweaks-panel.jsx → tweaks-app.jsx の順にロードされるが、
// Babel の変換完了タイミングを待つため requestIdleCallback / setTimeout で遅延
function tryMount(retries) {
  if (typeof TweaksPanel !== "undefined") {
    mountTweaksApp();
  } else if (retries > 0) {
    setTimeout(() => tryMount(retries - 1), 100);
  } else {
    console.warn("TweaksPanel を 3 秒待ちましたが見つかりませんでした。");
  }
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => tryMount(30));
} else {
  tryMount(30);
}