// ==========================================================================
// Button — 完整規範頁 (尺寸 + Standard + Icon/Avatar)
// ==========================================================================

const { Pill: __Pill_btn, Spinner: __Spinner_btn } = window;
const Pill = __Pill_btn, Spinner = __Spinner_btn;

// MUI 標準顏色 token（hard-coded 對齊 palette）
const BTN_TOKENS = {
  primaryMain:    "#1976D2",
  primaryDark:    "#1565C0",
  primaryDarker:  "#0D47A1",
  primaryAlpha04: "rgba(25,118,210,0.04)",
  primaryAlpha08: "rgba(25,118,210,0.08)",
  primaryAlpha12: "rgba(25,118,210,0.12)",
  white:          "#FFFFFF",
  hover:          "rgba(0,0,0,0.04)",
  selected:       "rgba(0,0,0,0.08)",
  disabledBg:     "rgba(0,0,0,0.12)",
  disabledFg:     "rgba(0,0,0,0.26)",
  focus:          "rgba(0,0,0,0.12)",
};

// ----- 尺寸規範 -----
// 拆解的 CSS 屬性，每個 size 都有完整的值
const SIZES = [
  {
    key: "L", name: "Large",
    h: 40, fs: 16, lh: 24, fw: 500,
    padTop: 8, padBottom: 8, padLeft: 22, padRight: 22,
    radius: 6, gap: 8, iconSize: 20,
  },
  {
    key: "M", name: "Medium",
    h: 32, fs: 14, lh: 20, fw: 500,
    padTop: 6, padBottom: 6, padLeft: 16, padRight: 16,
    radius: 6, gap: 6, iconSize: 18,
  },
  {
    key: "S", name: "Small",
    h: 24, fs: 12, lh: 16, fw: 500,
    padTop: 4, padBottom: 4, padLeft: 10, padRight: 10,
    radius: 4, gap: 4, iconSize: 14,
  },
];

// 7 個狀態
const STATES = [
  { key: "enabled",  label: "Enabled" },
  { key: "hover",    label: "Hover" },
  { key: "pressed",  label: "Pressed" },
  { key: "selected", label: "Selected" },
  { key: "disabled", label: "Disabled" },
  { key: "loadingD", label: "Loading 不可互動" },
  { key: "loadingE", label: "Loading 可互動" },
];

// ----- 各變體 State 對照 -----
const STANDARD_VARIANTS = [
  {
    key: "fill", name: "Fill", subName: "Primary",
    desc: "主要按鈕、每頁僅一個",
    type: "fill",
    states: {
      enabled:  { bg: BTN_TOKENS.primaryMain,    text: BTN_TOKENS.white },
      hover:    { bg: BTN_TOKENS.primaryDark,    text: BTN_TOKENS.white },
      pressed:  { bg: BTN_TOKENS.primaryDarker,  text: BTN_TOKENS.white },
      selected: { bg: BTN_TOKENS.primaryDark,    text: BTN_TOKENS.white },
      disabled: { bg: BTN_TOKENS.disabledBg,     text: BTN_TOKENS.disabledFg },
      loadingD: { bg: BTN_TOKENS.disabledBg,     text: BTN_TOKENS.disabledFg },
      loadingE: { bg: BTN_TOKENS.primaryMain,    text: BTN_TOKENS.white },
    },
  },
  {
    key: "outline", name: "Outline", subName: "Secondary",
    desc: "次要按鈕、與 Fill 並列",
    type: "outline",
    states: {
      enabled:  { bg: "transparent",                border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      hover:    { bg: BTN_TOKENS.primaryAlpha04,    border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      pressed:  { bg: BTN_TOKENS.primaryAlpha12,    border: BTN_TOKENS.primaryDark,  text: BTN_TOKENS.primaryDark },
      selected: { bg: BTN_TOKENS.primaryAlpha08,    border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      disabled: { bg: BTN_TOKENS.disabledBg,        border: "transparent",            text: BTN_TOKENS.disabledFg },
      loadingD: { bg: BTN_TOKENS.disabledBg,        border: "transparent",            text: BTN_TOKENS.disabledFg },
      loadingE: { bg: "transparent",                border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
    },
  },
  {
    key: "dash", name: "Dash", subName: "",
    desc: "虛線變體、再弱一層",
    type: "outline", borderStyle: "dashed",
    states: {
      enabled:  { bg: "transparent",                border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      hover:    { bg: BTN_TOKENS.primaryAlpha04,    border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      pressed:  { bg: BTN_TOKENS.primaryAlpha12,    border: BTN_TOKENS.primaryDark,  text: BTN_TOKENS.primaryDark },
      selected: { bg: BTN_TOKENS.primaryAlpha08,    border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
      disabled: { bg: BTN_TOKENS.disabledBg,        border: "transparent",            text: BTN_TOKENS.disabledFg },
      loadingD: { bg: BTN_TOKENS.disabledBg,        border: "transparent",            text: BTN_TOKENS.disabledFg },
      loadingE: { bg: "transparent",                border: BTN_TOKENS.primaryMain,  text: BTN_TOKENS.primaryMain },
    },
  },
  {
    key: "text", name: "Text", subName: "Ghost",
    desc: "純文字、低層級動作",
    type: "text",
    states: {
      enabled:  { bg: "transparent",                text: BTN_TOKENS.primaryMain },
      hover:    { bg: BTN_TOKENS.primaryAlpha04,    text: BTN_TOKENS.primaryMain },
      pressed:  { bg: BTN_TOKENS.primaryAlpha12,    text: BTN_TOKENS.primaryDark },
      selected: { bg: BTN_TOKENS.primaryAlpha08,    text: BTN_TOKENS.primaryMain },
      disabled: { bg: "transparent",                text: BTN_TOKENS.disabledFg },
      loadingD: { bg: "transparent",                text: BTN_TOKENS.disabledFg },
      loadingE: { bg: "transparent",                text: BTN_TOKENS.primaryMain },
    },
  },
  {
    key: "link", name: "Link", subName: "",
    desc: "內聯連結、帶底線",
    type: "link",
    states: {
      enabled:  { bg: "transparent", text: BTN_TOKENS.primaryMain,    underline: true },
      hover:    { bg: "transparent", text: BTN_TOKENS.primaryDark,    underline: true },
      pressed:  { bg: "transparent", text: BTN_TOKENS.primaryDarker,  underline: true },
      selected: { bg: "transparent", text: BTN_TOKENS.primaryDark,    underline: true },
      disabled: { bg: "transparent", text: BTN_TOKENS.disabledFg,     underline: true },
      loadingD: { bg: "transparent", text: BTN_TOKENS.disabledFg,     underline: true },
      loadingE: { bg: "transparent", text: BTN_TOKENS.primaryMain,    underline: true },
    },
  },
];

// Icon / Avatar 變體
const ICON_VARIANTS = [
  {
    key: "icon-standard", name: "Icon Button", subName: "Standard",
    desc: "純圖示按鈕、預設無背景",
    type: "icon",
    states: {
      enabled:  { bg: "transparent",              icon: "rgba(0,0,0,0.54)" },
      hover:    { bg: BTN_TOKENS.hover,           icon: "rgba(0,0,0,0.54)" },
      pressed:  { bg: BTN_TOKENS.selected,        icon: "rgba(0,0,0,0.87)" },
      selected: { bg: BTN_TOKENS.primaryAlpha08,  icon: BTN_TOKENS.primaryMain },
      disabled: { bg: "transparent",              icon: BTN_TOKENS.disabledFg },
      loadingD: { bg: "transparent",              icon: BTN_TOKENS.disabledFg },
      loadingE: { bg: "transparent",              icon: "rgba(0,0,0,0.54)" },
    },
  },
  {
    key: "icon-filled", name: "Icon Button", subName: "Filled",
    desc: "填色圖示按鈕、用於 CTA / FAB",
    type: "icon", filled: true,
    states: {
      enabled:  { bg: BTN_TOKENS.primaryMain,   icon: BTN_TOKENS.white },
      hover:    { bg: BTN_TOKENS.primaryDark,   icon: BTN_TOKENS.white },
      pressed:  { bg: BTN_TOKENS.primaryDarker, icon: BTN_TOKENS.white },
      selected: { bg: BTN_TOKENS.primaryDark,   icon: BTN_TOKENS.white },
      disabled: { bg: BTN_TOKENS.disabledBg,    icon: BTN_TOKENS.disabledFg },
      loadingD: { bg: BTN_TOKENS.disabledBg,    icon: BTN_TOKENS.disabledFg },
      loadingE: { bg: BTN_TOKENS.primaryMain,   icon: BTN_TOKENS.white },
    },
  },
  {
    key: "avatar", name: "Avatar Button", subName: "Image / Initial",
    desc: "頭像按鈕、可放圖片或首字母",
    type: "avatar",
    states: {
      enabled:  { ring: "transparent",            label: "預設無框" },
      hover:    { ring: BTN_TOKENS.hover,         label: "外圍 4% 黑遮罩" },
      pressed:  { ring: BTN_TOKENS.selected,      label: "外圍 8% 黑遮罩" },
      selected: { ring: BTN_TOKENS.primaryMain,   label: "2px primary 框" },
      disabled: { ring: "transparent",            label: "整體 38% 透明" },
      loadingD: { ring: "transparent",            label: "整體 38% 透明 + spinner" },
      loadingE: { ring: "transparent",            label: "原態 + spinner 疊加" },
    },
  },
];

// ===========================================================================
// 顏色判斷與色塊
// ===========================================================================
const isHexOrRgba = (v) => typeof v === "string" && (/^#[0-9a-f]{3,8}$/i.test(v.trim()) || /^rgba?\(/i.test(v.trim()));

const ColorChip = ({ v }) => (
  <span style={{
    display: "inline-block", width: 16, height: 16, borderRadius: 3,
    background: v === "transparent" ? "repeating-conic-gradient(#fafafa 0% 25%, #d8d8d8 0% 50%) 50% / 8px 8px" : v,
    border: "1px solid rgba(0,0,0,.08)", flexShrink: 0,
  }} />
);

// ===========================================================================
// 尺寸規範 — 三個 card 並排
// ===========================================================================
const ButtonSizeSpecs = () => (
  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
    {SIZES.map(s => (
      <div key={s.key} style={{
        background: "#fff", border: "1px solid var(--n-200)", borderRadius: 12,
        padding: "24px 22px", display: "flex", flexDirection: "column", gap: 18,
      }}>
        {/* Header */}
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{
            display: "inline-flex", width: 32, height: 32, alignItems: "center", justifyContent: "center",
            background: "var(--blue-50)", color: "var(--blue-600)",
            borderRadius: 8, fontFamily: "var(--ff-en)", fontWeight: 700, fontSize: 14,
          }}>{s.key}</span>
          <div>
            <div style={{ fontFamily: "var(--ff-en)", fontSize: 17, fontWeight: 600, color: "var(--n-900)" }}>{s.name}</div>
            <div style={{ fontSize: 12, color: "var(--n-500)" }}>{s.h}px height</div>
          </div>
        </div>

        {/* Annotated preview */}
        <div style={{
          background: "var(--n-50)", borderRadius: 8, padding: "28px 16px",
          display: "flex", alignItems: "center", justifyContent: "center", minHeight: 110,
        }}>
          <ButtonAnnotatedSimple s={s} />
        </div>

        {/* CSS spec */}
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <Pill kind="value">{`height: ${s.h}px`}</Pill>
          <Pill kind="value">{`font-size: ${s.fs}px`}</Pill>
          <Pill kind="value">{`padding: ${s.padTop}px ${s.padLeft}px`}</Pill>
          <Pill kind="value">{`border-radius: ${s.radius}px`}</Pill>
        </div>
      </div>
    ))}
  </div>
);

const ButtonAnnotatedSimple = ({ s }) => (
  <div style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
    {/* 高度標註 */}
    <div style={{
      position: "absolute", right: "calc(100% + 14px)", top: 0, bottom: 0,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between",
      pointerEvents: "none",
    }}>
      <span style={{ width: 10, height: 1, background: "#e43131" }} />
      <span style={{
        fontFamily: "var(--ff-mono)", fontSize: 11, color: "#e43131",
        background: "#fff", padding: "1px 6px", borderRadius: 3, border: "1px solid #e43131",
        whiteSpace: "nowrap", fontWeight: 600,
      }}>{s.h}px</span>
      <span style={{ width: 10, height: 1, background: "#e43131" }} />
    </div>
    <div style={{
      position: "absolute", right: "calc(100% + 4px)", top: 0, bottom: 0,
      width: 1, background: "#e43131",
    }} />

    <button style={{
      height: s.h, padding: `${s.padTop}px ${s.padLeft}px ${s.padBottom}px ${s.padRight}px`,
      background: BTN_TOKENS.primaryMain, color: "#fff",
      border: "none", borderRadius: s.radius,
      fontSize: s.fs, fontWeight: s.fw, lineHeight: `${s.lh}px`,
      cursor: "pointer", fontFamily: "inherit",
    }}>Button</button>
  </div>
);

// ===========================================================================
// 互動式 Prototype — 點擊循環切換狀態
// ===========================================================================
const InteractivePrototype = ({ v, size, type, showIcon }) => {
  const [stateIdx, setStateIdx] = React.useState(0);
  const stateKey = STATES[stateIdx].key;
  const stateLabel = STATES[stateIdx].label;
  const nextState = () => setStateIdx(i => (i + 1) % STATES.length);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
      {/* State label badge */}
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "4px 12px", borderRadius: 999,
        background: "var(--blue-50)", color: "var(--blue-700)",
        fontSize: 12, fontWeight: 600, fontFamily: "var(--ff-en)",
        border: "1px solid var(--blue-200)",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--blue-500)" }} />
        {stateLabel}
      </div>

      {/* Prototype */}
      <div style={{
        background: "var(--n-50)", borderRadius: 8, padding: "28px 24px",
        display: "flex", alignItems: "center", justifyContent: "center", minHeight: 110,
        width: "100%",
      }}>
        {type === "icon" || type === "avatar"
          ? <InteractiveIconBtn v={v} size={size} stateKey={stateKey} onClick={nextState} />
          : <InteractiveStandardBtn v={v} size={size} stateKey={stateKey} onClick={nextState} showIcon={showIcon} />}
      </div>

      <button onClick={nextState} style={{
        fontSize: 11, color: "var(--n-500)", background: "transparent",
        border: "1px dashed var(--n-300)", padding: "4px 10px", borderRadius: 4,
        cursor: "pointer", fontFamily: "inherit",
      }}>點擊按鈕或這裡 → 下一個狀態</button>
    </div>
  );
};

const InteractiveStandardBtn = ({ v, size, stateKey, onClick, showIcon }) => {
  const st = v.states[stateKey];
  const baseStyle = makeBtnStyle(v.type, v, stateKey, size);
  const label = v.type === "link" ? "Link" : "Button";
  const isLoading = stateKey === "loadingD" || stateKey === "loadingE";
  const iconColor = st.text || st.border || "currentColor";
  return (
    <button onClick={onClick} style={baseStyle}>
      {isLoading && <Spinner size={Math.round(size.fs * 0.9)} color={iconColor} />}
      {!isLoading && showIcon && <Icon name="plus" size={size.iconSize} color={iconColor} />}
      <span>{label}</span>
    </button>
  );
};

const InteractiveIconBtn = ({ v, size, stateKey, onClick }) => {
  const st = v.states[stateKey];
  const isAvatar = v.type === "avatar";
  const isLoading = stateKey === "loadingD" || stateKey === "loadingE";
  const isNotInteractive = stateKey === "disabled" || stateKey === "loadingD";
  const cursor = isNotInteractive ? "not-allowed" : "pointer";

  if (isAvatar) {
    const isSelected = stateKey === "selected";
    const dim = isNotInteractive;
    const ringStyle = isSelected
      ? `0 0 0 2px ${st.ring}`
      : (st.ring !== "transparent" ? `0 0 0 6px ${st.ring}` : "none");
    return (
      <button onClick={onClick} style={{
        position: "relative",
        width: size.h, height: size.h, borderRadius: "50%",
        background: "linear-gradient(135deg,#42A5F5,#1976D2)",
        color: "#fff", border: "none", cursor,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--ff-en)", fontWeight: 600, fontSize: size.fs,
        boxShadow: ringStyle,
        opacity: dim ? 0.38 : 1,
      }}>
        {isLoading && (
          <span style={{
            position: "absolute", inset: -2, borderRadius: "50%",
            display: "flex", alignItems: "center", justifyContent: "center",
            background: "rgba(255,255,255,.4)",
          }}>
            <Spinner size={size.fs} color="#fff" />
          </span>
        )}
        A
      </button>
    );
  }

  return (
    <button onClick={onClick} style={{
      width: size.h, height: size.h, borderRadius: "50%",
      background: st.bg, border: "none", cursor,
      display: "flex", alignItems: "center", justifyContent: "center",
      color: st.icon, position: "relative",
    }}>
      {isLoading
        ? <Spinner size={Math.round(size.h * 0.5)} color={st.icon} />
        : <Icon name="plus" size={Math.round(size.h * 0.55)} color={st.icon} />}
    </button>
  );
};

// makeBtnStyle (shared with non-interactive)
const makeBtnStyle = (type, v, stateKey, size) => {
  const st = v.states[stateKey];
  const base = {
    height: size.h, fontSize: size.fs, padding: `${size.padTop}px ${size.padLeft}px ${size.padBottom}px ${size.padRight}px`,
    borderRadius: size.radius, fontWeight: size.fw, lineHeight: `${size.lh}px`,
    cursor: stateKey === "disabled" || stateKey === "loadingD" ? "not-allowed" : "pointer",
    fontFamily: "inherit", display: "inline-flex", alignItems: "center", gap: size.gap,
  };
  if (type === "fill") {
    return { ...base, background: st.bg, color: st.text, border: "none" };
  }
  if (type === "outline") {
    return {
      ...base, background: st.bg, color: st.text,
      border: `1px ${v.borderStyle || "solid"} ${st.border}`,
    };
  }
  if (type === "text") {
    return { ...base, background: st.bg, color: st.text, border: "none" };
  }
  if (type === "link") {
    return {
      ...base, background: "transparent", color: st.text,
      border: "none", textDecoration: st.underline ? "underline" : "none",
      padding: `${size.padTop}px 4px`,
    };
  }
  return base;
};

// ===========================================================================
// State Tokens 顯示 (右側) — 含色塊
// ===========================================================================
const StateGrid = ({ variant }) => (
  <div>
    <div style={{
      fontSize: 11, color: "var(--n-500)", marginBottom: 14,
      textTransform: "uppercase", letterSpacing: ".06em", fontFamily: "var(--ff-en)",
    }}>狀態色值 (State Tokens)</div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 20, rowGap: 12 }}>
      {STATES.map(st => {
        const stateData = variant.states[st.key];
        if (!stateData) return null;
        return (
          <div key={st.key} style={{
            display: "flex", flexDirection: "column", gap: 6,
            paddingBottom: 10, borderBottom: "1px solid var(--n-100)",
          }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--n-800)" }}>{st.label}</div>
            <StateValues data={stateData} />
          </div>
        );
      })}
    </div>
  </div>
);

const StateValues = ({ data }) => {
  const items = [];
  if ("bg" in data) items.push({ k: "bg", v: data.bg });
  if ("border" in data) items.push({ k: "border", v: data.border });
  if ("text" in data) items.push({ k: "text", v: data.text });
  if ("icon" in data) items.push({ k: "icon", v: data.icon });
  if ("ring" in data) items.push({ k: "ring", v: data.ring });

  if (items.length === 0 && data.label) {
    return <div style={{ fontSize: 11.5, color: "var(--n-600)", fontStyle: "italic" }}>{data.label}</div>;
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {items.map(it => (
        <div key={it.k} style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{
            fontSize: 10.5, color: "var(--n-500)", minWidth: 42,
            fontFamily: "var(--ff-mono)",
          }}>{it.k}</span>
          {isHexOrRgba(it.v) || it.v === "transparent"
            ? <ColorChip v={it.v} />
            : null}
          <Pill kind="value">{it.v}</Pill>
        </div>
      ))}
      {data.label && <div style={{ fontSize: 10.5, color: "var(--n-500)", fontStyle: "italic", marginTop: 2 }}>{data.label}</div>}
    </div>
  );
};

// ===========================================================================
// Variant Card — 左互動 Prototype + 右 State Tokens
// ===========================================================================
const VariantCard = ({ v, size, showIcon }) => (
  <div style={{
    background: "#fff", border: "1px solid var(--n-200)", borderRadius: 12,
    padding: 24, display: "grid", gridTemplateColumns: "minmax(280px, 380px) 1fr", gap: 36,
  }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontFamily: "var(--ff-en)", fontSize: 18, fontWeight: 700, color: "var(--n-900)" }}>{v.name}</span>
          {v.subName && <span style={{ fontSize: 13, color: "var(--n-500)" }}>({v.subName})</span>}
        </div>
        <div style={{ fontSize: 13, color: "var(--n-600)", marginTop: 4 }}>{v.desc}</div>
      </div>
      <InteractivePrototype v={v} size={size} type={v.type} showIcon={showIcon} />
    </div>
    <StateGrid variant={v} />
  </div>
);

// ===========================================================================
// Size 切換 tab
// ===========================================================================
const SizeTabs = ({ size, setSize }) => (
  <div style={{
    display: "inline-flex", padding: 4, gap: 4,
    background: "var(--n-100)", borderRadius: 10, marginBottom: 20,
  }}>
    {SIZES.map(s => {
      const on = size === s.key;
      return (
        <button key={s.key} onClick={() => setSize(s.key)} style={{
          padding: "8px 18px", border: "none",
          background: on ? "#fff" : "transparent",
          borderRadius: 8, cursor: "pointer",
          fontSize: 13, fontWeight: on ? 600 : 400,
          color: on ? "var(--n-900)" : "var(--n-600)",
          boxShadow: on ? "var(--shadow-1)" : "none",
          fontFamily: "inherit", minWidth: 100,
        }}>
          <span style={{ fontFamily: "var(--ff-en)" }}>{s.name}</span>
          <span style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: on ? "var(--n-500)" : "var(--n-400)", marginLeft: 6 }}>{s.h}px</span>
        </button>
      );
    })}
  </div>
);

// ===========================================================================
// Showcase
// ===========================================================================
const StandardButtonShowcase = () => {
  const [sizeKey, setSizeKey] = React.useState("M");
  const [showIcon, setShowIcon] = React.useState(false);
  const size = SIZES.find(s => s.key === sizeKey);
  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20, flexWrap: "wrap" }}>
        <SizeTabs size={sizeKey} setSize={setSizeKey} />
        <IconToggle on={showIcon} onChange={setShowIcon} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {STANDARD_VARIANTS.map(v => <VariantCard key={v.key} v={v} size={size} showIcon={showIcon} />)}
      </div>
    </>
  );
};

const IconToggle = ({ on, onChange }) => (
  <div style={{
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "6px 12px", background: "var(--n-100)", borderRadius: 10,
    fontSize: 13, color: "var(--n-700)",
  }}>
    <span>顯示 Icon</span>
    <button onClick={() => onChange(!on)} style={{
      position: "relative", width: 36, height: 20, borderRadius: 999,
      background: on ? "var(--blue-500)" : "var(--n-300)",
      border: "none", cursor: "pointer", padding: 0,
      transition: "background 160ms ease",
    }} aria-label="toggle icon">
      <span style={{
        position: "absolute", top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: "50%", background: "#fff",
        transition: "left 160ms ease",
        boxShadow: "0 1px 3px rgba(0,0,0,.2)",
      }} />
    </button>
  </div>
);

const IconButtonShowcase = () => {
  const [sizeKey, setSizeKey] = React.useState("M");
  const size = SIZES.find(s => s.key === sizeKey);
  return (
    <>
      <SizeTabs size={sizeKey} setSize={setSizeKey} />
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {ICON_VARIANTS.map(v => <VariantCard key={v.key} v={v} size={size} />)}
      </div>
    </>
  );
};

// ===========================================================================
// 主 Section
// ===========================================================================
const ButtonSpec = () => (
  <div style={{ display: "flex", flexDirection: "column", gap: 36 }}>
    {/* Section 1: 尺寸規範 */}
    <section>
      <h2 className="ds-h2" style={{ marginTop: 0 }}>尺寸規範 — 大 / 中 / 小</h2>
      <ButtonSizeSpecs />
    </section>

    {/* Section 2: Standard Button */}
    <section>
      <h2 className="ds-h2">Standard Button — 一般按鈕</h2>
      <StandardButtonShowcase />
    </section>

    {/* Section 3: Icon / Avatar */}
    <section>
      <h2 className="ds-h2">Icon Button / Avatar Button — 圖示 / 頭像按鈕</h2>
      <IconButtonShowcase />
    </section>
  </div>
);

window.ButtonSpec = ButtonSpec;