/* tweaks-panel.jsx
   右端固定パネル（幅 280px）。折りたたみ可能。
   tweaks-app.jsx から TweaksPanel としてインポートされる。
*/

// =====================================================================
// 小コンポーネント
// =====================================================================

function Section({ title, children }) {
  const [open, setOpen] = React.useState(true);
  return React.createElement("div", { style: styles.section },
    React.createElement("button", {
      style: styles.sectionToggle,
      onClick: () => setOpen(!open),
      "aria-expanded": open,
    },
      React.createElement("span", { style: styles.sectionTitle }, title),
      React.createElement("span", { style: { opacity: 0.5, fontSize: "10px" } }, open ? "▲" : "▼")
    ),
    open && React.createElement("div", { style: styles.sectionBody }, children)
  );
}

function Row({ label, children }) {
  return React.createElement("div", { style: styles.row },
    React.createElement("label", { style: styles.label }, label),
    React.createElement("div", { style: styles.control }, children)
  );
}

function Slider({ value, min, max, step = 1, onChange, unit = "" }) {
  return React.createElement("div", { style: styles.sliderWrap },
    React.createElement("input", {
      type: "range",
      min, max, step,
      value,
      onChange: e => onChange(Number(e.target.value)),
      style: styles.slider,
    }),
    React.createElement("span", { style: styles.sliderVal }, value + unit)
  );
}

function ColorPicker({ value, onChange }) {
  return React.createElement("input", {
    type: "color",
    value,
    onChange: e => onChange(e.target.value),
    style: styles.colorPicker,
  });
}

function RadioGroup({ options, value, onChange }) {
  return React.createElement("div", { style: styles.radioGroup },
    options.map(opt =>
      React.createElement("label", { key: opt.value, style: styles.radioLabel },
        React.createElement("input", {
          type: "radio",
          value: opt.value,
          checked: value === opt.value,
          onChange: () => onChange(opt.value),
          style: { marginRight: "4px", accentColor: "#888" },
        }),
        opt.label
      )
    )
  );
}

function TextArea({ value, onChange, rows = 2 }) {
  return React.createElement("textarea", {
    value,
    rows,
    onChange: e => onChange(e.target.value),
    style: styles.textarea,
  });
}

// =====================================================================
// TweaksPanel メイン
// =====================================================================
function TweaksPanel({ tweaks, setTweaks, applyPreset, reset, COLOR_PRESETS }) {
  const [panelOpen, setPanelOpen] = React.useState(true);

  const set = (key) => (val) => setTweaks(key, val);

  const presetNames = Object.keys(COLOR_PRESETS);

  return React.createElement("div", { style: {
    ...styles.panelWrapper,
    width: panelOpen ? "280px" : "44px",
  }},
    // タブ（開閉ボタン）
    React.createElement("button", {
      onClick: () => setPanelOpen(!panelOpen),
      style: styles.tabButton,
      title: panelOpen ? "パネルを閉じる" : "Tweaksパネルを開く",
      "aria-label": panelOpen ? "パネルを閉じる" : "Tweaksパネルを開く",
    },
      panelOpen ? "›" : "‹"
    ),

    panelOpen && React.createElement("div", { style: styles.panel },
      // ヘッダー
      React.createElement("div", { style: styles.panelHeader },
        React.createElement("span", { style: styles.panelTitle }, "Tweaks"),
        React.createElement("button", {
          onClick: reset,
          style: styles.resetBtn,
          title: "デフォルトに戻す",
        }, "Reset")
      ),

      // スクロールコンテンツ
      React.createElement("div", { style: styles.panelScroll },

        // ===== カラー =====
        React.createElement(Section, { title: "カラー" },

          // プリセット
          React.createElement("div", { style: { marginBottom: "10px" } },
            React.createElement("div", { style: styles.presetLabel }, "プリセット"),
            React.createElement("div", { style: styles.presetRow },
              presetNames.map(name =>
                React.createElement("button", {
                  key: name,
                  onClick: () => applyPreset(name),
                  style: {
                    ...styles.presetBtn,
                    background: COLOR_PRESETS[name].bg,
                    border: tweaks.colorPreset === name
                      ? "2px solid #555"
                      : "1px solid #ccc",
                  },
                  title: name,
                },
                  React.createElement("span", { style: {
                    fontSize: "9px",
                    color: COLOR_PRESETS[name].text,
                    fontWeight: tweaks.colorPreset === name ? "700" : "400",
                  }}, name)
                )
              )
            )
          ),

          React.createElement(Row, { label: "背景" },
            React.createElement(ColorPicker, { value: tweaks.colorBg,      onChange: set("colorBg") })
          ),
          React.createElement(Row, { label: "本文" },
            React.createElement(ColorPicker, { value: tweaks.colorText,    onChange: set("colorText") })
          ),
          React.createElement(Row, { label: "見出し" },
            React.createElement(ColorPicker, { value: tweaks.colorHeading, onChange: set("colorHeading") })
          ),
          React.createElement(Row, { label: "アクセント" },
            React.createElement(ColorPicker, { value: tweaks.colorAccent,  onChange: set("colorAccent") })
          ),
          React.createElement(Row, { label: "罫線" },
            React.createElement(ColorPicker, { value: tweaks.colorBorder,  onChange: set("colorBorder") })
          ),
          React.createElement(Row, { label: "フッター背景" },
            React.createElement(ColorPicker, { value: tweaks.colorFooter,  onChange: set("colorFooter") })
          ),
        ),

        // ===== タイポグラフィ =====
        React.createElement(Section, { title: "タイポグラフィ" },

          React.createElement(Row, { label: "字形ペア" },
            React.createElement(RadioGroup, {
              options: [
                { value: "Serif+Sans", label: "Serif+Sans" },
                { value: "Serif",      label: "Serif" },
                { value: "Sans",       label: "Sans" },
                { value: "Mincho",     label: "明朝" },
              ],
              value: tweaks.fontPair,
              onChange: set("fontPair"),
            })
          ),

          React.createElement(Row, { label: "基準サイズ" },
            React.createElement(Slider, { value: tweaks.fontSizeBase, min: 13, max: 20, onChange: set("fontSizeBase"), unit: "px" })
          ),

          React.createElement(Row, { label: "見出しW" },
            React.createElement(Slider, { value: tweaks.headingWeight, min: 300, max: 700, step: 100, onChange: set("headingWeight") })
          ),

          React.createElement(Row, { label: "見出し字間" },
            React.createElement(Slider, { value: tweaks.headingTracking, min: -3, max: 15, onChange: set("headingTracking"), unit: "/100em" })
          ),

          React.createElement(Row, { label: "ロゴ字間" },
            React.createElement(Slider, { value: tweaks.logoTracking, min: 0, max: 80, onChange: set("logoTracking"), unit: "/100em" })
          ),
        ),

        // ===== レイアウト =====
        React.createElement(Section, { title: "レイアウト" },
          React.createElement(Row, { label: "コンテンツ幅" },
            React.createElement(Slider, { value: tweaks.contentWidth, min: 720, max: 1280, step: 10, onChange: set("contentWidth"), unit: "px" })
          ),
          React.createElement(Row, { label: "セクション余白" },
            React.createElement(Slider, { value: tweaks.sectionPadding, min: 3, max: 12, step: 0.5, onChange: set("sectionPadding"), unit: "rem" })
          ),
          React.createElement(Row, { label: "角丸" },
            React.createElement(Slider, { value: tweaks.radius, min: 0, max: 28, onChange: set("radius"), unit: "px" })
          ),
        ),

        // ===== ヒーロー =====
        React.createElement(Section, { title: "ヒーロー" },
          React.createElement(Row, { label: "高さ" },
            React.createElement(Slider, { value: tweaks.heroHeight, min: 320, max: 820, step: 10, onChange: set("heroHeight"), unit: "px" })
          ),
          React.createElement(Row, { label: "モノクロ度" },
            React.createElement(Slider, { value: tweaks.heroGrayscale, min: 0, max: 100, onChange: set("heroGrayscale"), unit: "%" })
          ),
          React.createElement(Row, { label: "暗さ" },
            React.createElement(Slider, { value: tweaks.heroDarkness, min: 0, max: 75, onChange: set("heroDarkness"), unit: "%" })
          ),
          React.createElement(Row, { label: "コピー位置" },
            React.createElement(RadioGroup, {
              options: [
                { value: "top",    label: "上" },
                { value: "middle", label: "中" },
                { value: "bottom", label: "下" },
              ],
              value: tweaks.heroPosition,
              onChange: set("heroPosition"),
            })
          ),
          React.createElement(Row, { label: "kicker" },
            React.createElement(TextArea, { value: tweaks.heroKicker, rows: 1, onChange: set("heroKicker") })
          ),
          React.createElement(Row, { label: "タイトル" },
            React.createElement(TextArea, { value: tweaks.heroTitle, rows: 2, onChange: set("heroTitle") })
          ),
          React.createElement(Row, { label: "サブコピー" },
            React.createElement(TextArea, { value: tweaks.heroSub, rows: 3, onChange: set("heroSub") })
          ),
        ),

        // ===== メニュー表示 =====
        React.createElement(Section, { title: "メニュー表示" },
          React.createElement(Row, { label: "区切り線" },
            React.createElement(RadioGroup, {
              options: [
                { value: "dashed", label: "点線" },
                { value: "dotted", label: "破線" },
                { value: "solid",  label: "実線" },
                { value: "none",   label: "なし" },
              ],
              value: tweaks.menuDivider,
              onChange: set("menuDivider"),
            })
          ),
          React.createElement(Row, { label: "行の高さ" },
            React.createElement(Slider, { value: tweaks.menuLineHeight, min: 1.4, max: 2.8, step: 0.1, onChange: set("menuLineHeight") })
          ),
          React.createElement(Row, { label: "カード透過" },
            React.createElement(Slider, { value: tweaks.menuCardOpacity, min: 0, max: 1, step: 0.05, onChange: set("menuCardOpacity") })
          ),
        ),

      ) // panelScroll
    ) // panel
  ); // panelWrapper
}

// =====================================================================
// インラインスタイル定義
// =====================================================================
const styles = {
  panelWrapper: {
    position: "fixed",
    top: "50%",
    right: 0,
    transform: "translateY(-50%)",
    zIndex: 9999,
    display: "flex",
    alignItems: "stretch",
    fontFamily: "'Inter', system-ui, sans-serif",
    fontSize: "12px",
    color: "#1a1a1a",
    filter: "drop-shadow(-4px 0 16px rgba(0,0,0,0.12))",
    transition: "width 0.2s ease",
  },
  tabButton: {
    width: "22px",
    flexShrink: 0,
    background: "#f5f0e8",
    border: "1px solid #ddd",
    borderRight: "none",
    borderRadius: "6px 0 0 6px",
    cursor: "pointer",
    fontSize: "16px",
    color: "#555",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: 0,
    alignSelf: "center",
    height: "64px",
  },
  panel: {
    width: "258px",
    background: "#faf9f6",
    borderLeft: "1px solid #e0d8cc",
    display: "flex",
    flexDirection: "column",
    maxHeight: "88vh",
  },
  panelHeader: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "10px 14px 8px",
    borderBottom: "1px solid #e0d8cc",
    background: "#f0ece4",
  },
  panelTitle: {
    fontFamily: "'Fraunces', Georgia, serif",
    fontWeight: 400,
    fontSize: "15px",
    letterSpacing: "0.06em",
    color: "#2a2018",
  },
  resetBtn: {
    fontSize: "10px",
    padding: "2px 8px",
    background: "transparent",
    border: "1px solid #bbb",
    borderRadius: "4px",
    cursor: "pointer",
    color: "#666",
  },
  panelScroll: {
    overflowY: "auto",
    flex: 1,
    padding: "0 0 12px",
    scrollbarWidth: "thin",
  },
  section: {
    borderBottom: "1px solid #e8e2d8",
  },
  sectionToggle: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "7px 14px",
    background: "transparent",
    border: "none",
    cursor: "pointer",
    textAlign: "left",
  },
  sectionTitle: {
    fontWeight: 600,
    fontSize: "11px",
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "#3a2a1a",
  },
  sectionBody: {
    padding: "4px 14px 10px",
  },
  row: {
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "space-between",
    gap: "8px",
    marginBottom: "7px",
  },
  label: {
    fontSize: "11px",
    color: "#555",
    whiteSpace: "nowrap",
    paddingTop: "2px",
    minWidth: "68px",
    flexShrink: 0,
  },
  control: {
    flex: 1,
    minWidth: 0,
  },
  sliderWrap: {
    display: "flex",
    alignItems: "center",
    gap: "6px",
  },
  slider: {
    flex: 1,
    height: "4px",
    accentColor: "#8a7a5a",
    cursor: "pointer",
  },
  sliderVal: {
    fontSize: "10px",
    color: "#888",
    whiteSpace: "nowrap",
    minWidth: "38px",
    textAlign: "right",
  },
  colorPicker: {
    width: "40px",
    height: "24px",
    padding: "1px",
    border: "1px solid #ccc",
    borderRadius: "4px",
    cursor: "pointer",
    background: "transparent",
  },
  radioGroup: {
    display: "flex",
    flexWrap: "wrap",
    gap: "4px 10px",
  },
  radioLabel: {
    fontSize: "11px",
    color: "#444",
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
  },
  presetLabel: {
    fontSize: "10px",
    color: "#888",
    marginBottom: "4px",
    textTransform: "uppercase",
    letterSpacing: "0.06em",
  },
  presetRow: {
    display: "flex",
    gap: "5px",
    flexWrap: "wrap",
  },
  presetBtn: {
    width: "44px",
    height: "28px",
    borderRadius: "4px",
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    transition: "border 0.15s",
  },
  textarea: {
    width: "100%",
    fontSize: "11px",
    padding: "4px 6px",
    border: "1px solid #d0c8bc",
    borderRadius: "4px",
    background: "#fff",
    color: "#222",
    resize: "vertical",
    lineHeight: 1.5,
    fontFamily: "'Inter', system-ui, sans-serif",
  },
};