// ====================================================================
// Shell — SketchApp ラッパー（Tweaks 機能は削除済み、必要なら git history を参照）
// ====================================================================
const { useEffect: useEffectShell } = React;

// サイト既定値（旧 Tweaks の defaults と同じ）
const SITE_DEFAULTS = {
  density: "comfy",
  showAutoBadge: true,
  heroVariant: "A",
  komaLayout: "tall",
  fontPair: "mono",
  sketchAccent: "terra",
};

const SKETCH_ACCENTS = {
  terra: "#c0532a", forest: "#3b6b46", plum: "#8a3b6b", indigo: "#2a4a8a",
};

// 旧 Tweaks の localStorage 残骸を一度だけクリア
try { localStorage.removeItem("octopachi-tweaks-v2"); } catch {}

function applyDefaults() {
  const root = document.documentElement;
  const t = SITE_DEFAULTS;
  root.setAttribute("data-density", t.density);
  root.setAttribute("data-auto-badge", t.showAutoBadge ? "on" : "off");
  root.setAttribute("data-hero", t.heroVariant);
  root.setAttribute("data-koma", t.komaLayout);
  root.setAttribute("data-font-pair", t.fontPair);

  const densityMap = { tight: 0.85, comfy: 1, airy: 1.18 };
  root.style.setProperty("--tw-density", densityMap[t.density] ?? 1);
  root.style.setProperty("--tw-auto-badge", t.showAutoBadge ? "inline-flex" : "none");
  if (SKETCH_ACCENTS[t.sketchAccent]) {
    root.style.setProperty("--tw-sketch-accent", SKETCH_ACCENTS[t.sketchAccent]);
  }
}

// レイアウト系 CSS（density / auto-badge / sketch accent / font-pair / 4コマレイアウト）
function injectSiteStyles() {
  if (document.getElementById("__site_styles")) return;
  const s = document.createElement("style");
  s.id = "__site_styles";
  s.textContent = `
    /* density — scale padding/gap utilities */
    html[data-density="tight"] .p-5 { padding: 12px !important; }
    html[data-density="tight"] .p-4 { padding: 10px !important; }
    html[data-density="tight"] .p-3 { padding: 8px !important; }
    html[data-density="tight"] .gap-5 { gap: 12px !important; }
    html[data-density="tight"] .mb-8 { margin-bottom: 16px !important; }
    html[data-density="tight"] .mt-10, html[data-density="tight"] .mt-12 { margin-top: 20px !important; }
    html[data-density="airy"] .p-5 { padding: 32px !important; }
    html[data-density="airy"] .p-4 { padding: 24px !important; }
    html[data-density="airy"] .gap-5 { gap: 32px !important; }
    html[data-density="airy"] .mb-8 { margin-bottom: 48px !important; }
    html[data-density="airy"] .mt-10 { margin-top: 64px !important; }

    /* auto-badge — kill chips marked with data-auto-badge-chip */
    html[data-auto-badge="off"] [data-auto-badge-chip="1"] { display: none !important; }

    /* sketch accent variable swap */
    html { --accent: var(--tw-sketch-accent) !important; }
    .squiggle { background-image: none !important; border-bottom: 2px wavy var(--tw-sketch-accent) !important; }

    /* font pairs — data-screen-label 配下全体に適用 */
    html[data-font-pair="serif"] [data-screen-label],
    html[data-font-pair="serif"] [data-screen-label] * { font-family: 'Kaisei Decol','Noto Serif JP',serif !important; }

    html[data-font-pair="mono"] [data-screen-label],
    html[data-font-pair="mono"] [data-screen-label] * { font-family: 'JetBrains Mono','Noto Sans JP',monospace !important; }

    /* koma layout — home hero mini-koma */
    html[data-koma="1x4"] .grid.grid-cols-2.gap-2,
    html[data-koma="1x4"] .grid.grid-cols-2.gap-3 { grid-template-columns: repeat(4, 1fr) !important; max-width: none !important; }
    html[data-koma="tall"] .grid.grid-cols-2.gap-2,
    html[data-koma="tall"] .grid.grid-cols-2.gap-3 { grid-template-columns: 1fr !important; max-width: 320px !important; }

    /* 4コマ panel の native アスペクトは Trickster tmpl_4koma の 1x4縦ストリップを分割した 928/288 (≈3.22:1)。 */

    /* 1x4: 4パネルを横一列。狭い画面では縦積みに折り返す */
    html[data-koma="1x4"] .sk-manga-page { max-width: 1040px !important; }
    html[data-koma="1x4"] .sk-manga-grid { grid-template-columns: repeat(4, 1fr) !important; }
    html[data-koma="1x4"] .sk-manga-panel { aspect-ratio: var(--panel-aspect, 928/288) !important; border-bottom: none !important; }
    html[data-koma="1x4"] .sk-manga-panel:not(:last-child) { border-right: 2px solid var(--ink) !important; }
    html[data-koma="1x4"] .sk-manga-panel:last-child { border-right: none !important; }
    @media (max-width: 720px) {
      html[data-koma="1x4"] .sk-manga-grid { grid-template-columns: 1fr !important; }
      html[data-koma="1x4"] .sk-manga-panel { border-right: none !important; }
      html[data-koma="1x4"] .sk-manga-panel:not(:last-child) { border-bottom: 2px solid var(--ink) !important; }
    }

    /* 2x2: 2列×2段 */
    html[data-koma="2x2"] .sk-manga-page { max-width: 720px !important; }
    html[data-koma="2x2"] .sk-manga-grid { grid-template-columns: 1fr 1fr !important; }
    html[data-koma="2x2"] .sk-manga-panel { aspect-ratio: var(--panel-aspect, 928/288) !important; border-bottom: none !important; border-right: none !important; }
    html[data-koma="2x2"] .sk-manga-panel:nth-child(1),
    html[data-koma="2x2"] .sk-manga-panel:nth-child(2) { border-bottom: 2px solid var(--ink) !important; }
    html[data-koma="2x2"] .sk-manga-panel:nth-child(1),
    html[data-koma="2x2"] .sk-manga-panel:nth-child(3) { border-right: 2px solid var(--ink) !important; }
    @media (max-width: 560px) {
      html[data-koma="2x2"] .sk-manga-grid { grid-template-columns: 1fr !important; }
      html[data-koma="2x2"] .sk-manga-panel { border-right: none !important; }
      html[data-koma="2x2"] .sk-manga-panel:nth-child(3) { border-right: none !important; }
    }

    /* tall: 1列×4段（既定、横長帯をそのまま積む） */
    html[data-koma="tall"] .sk-manga-page { max-width: 640px !important; }
    html[data-koma="tall"] .sk-manga-grid { grid-template-columns: 1fr !important; }
    html[data-koma="tall"] .sk-manga-panel { aspect-ratio: var(--panel-aspect, 928/288) !important; border-right: none !important; }
    html[data-koma="tall"] .sk-manga-panel:not(:last-child) { border-bottom: 2px solid var(--ink) !important; }
    html[data-koma="tall"] .sk-manga-panel:last-child { border-bottom: none !important; }
  `;
  document.head.appendChild(s);
}

function Shell() {
  useEffectShell(() => {
    injectSiteStyles();
    applyDefaults();
  }, []);

  const Comp = window.SketchApp;
  return Comp ? <Comp /> : <div style={{padding: 40, color: "#e8e1cf"}}>Loading SketchApp…</div>;
}

setTimeout(() => {
  ReactDOM.createRoot(document.getElementById("root")).render(<Shell />);
}, 50);