// Tweaks — 字體大小（無障礙工具列）+ 高對比

const AccessibilityBar = ({ textSize, setTextSize, highContrast, setHighContrast, forceOpen, onForceClose }) => (
  <div style={{
    position: "fixed", right: 20, bottom: 20, zIndex: 80,
  }}>
    <AccessibilityPopover
      textSize={textSize} setTextSize={setTextSize}
      highContrast={highContrast} setHighContrast={setHighContrast}
      forceOpen={forceOpen} onForceClose={onForceClose}
    />
  </div>
);

const AccessibilityPopover = ({ textSize, setTextSize, highContrast, setHighContrast, forceOpen, onForceClose }) => {
  const [openState, setOpen] = React.useState(false);
  const open = openState || forceOpen;
  React.useEffect(() => { if (forceOpen) setOpen(true); }, [forceOpen]);
  const close = () => { setOpen(false); if (onForceClose) onForceClose(); };
  const sizes = [
    { k: "sm", l: "小", px: "14px" },
    { k: "md", l: "標準", px: "16px" },
    { k: "lg", l: "大", px: "18px" },
    { k: "xl", l: "特大", px: "21px" },
  ];

  return (
    <>
      {open && (
        <div style={{
          position: "absolute", bottom: 82, right: 0,
          width: 340, padding: 20,
          background: "var(--paper)", borderRadius: 16,
          boxShadow: "var(--shadow-lg)", border: "2px solid var(--border-strong)",
          animation: "popIn 180ms ease",
        }}>
          <style>{`@keyframes popIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}`}</style>
          <div style={{ fontSize: "var(--fs-base)", fontWeight: 800, marginBottom: 14, display: "flex", gap: 8, alignItems: "center" }}>
            <Icon name="sliders" size={20} /> 無障礙工具
          </div>

          <div style={{ fontSize: "var(--fs-sm)", color: "var(--ink-soft)", fontWeight: 700, marginBottom: 8 }}>字體大小</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 18 }}>
            {sizes.map(s => (
              <button key={s.k} onClick={() => setTextSize(s.k)} style={{
                minHeight: 64, padding: "10px 6px", borderRadius: 10,
                background: textSize === s.k ? "var(--brand)" : "var(--bg)",
                color: textSize === s.k ? "#fff" : "var(--ink-2)",
                border: `2px solid ${textSize === s.k ? "var(--brand)" : "var(--border-strong)"}`,
                fontFamily: "inherit", cursor: "pointer",
              }}>
                <div style={{ fontSize: s.px, fontWeight: 800, lineHeight: 1 }}>中</div>
                <div style={{ fontSize: 12, marginTop: 4, fontWeight: 600 }}>{s.l}</div>
              </button>
            ))}
          </div>

          <div style={{ fontSize: "var(--fs-sm)", color: "var(--ink-soft)", fontWeight: 700, marginBottom: 8 }}>顯示模式</div>
          <button onClick={() => setHighContrast(!highContrast)} style={{
            width: "100%", minHeight: 56, padding: "12px 16px",
            background: highContrast ? "var(--ink)" : "var(--bg)",
            color: highContrast ? "#fff" : "var(--ink-2)",
            border: `2px solid ${highContrast ? "var(--ink)" : "var(--border-strong)"}`,
            borderRadius: 10, display: "flex", justifyContent: "space-between", alignItems: "center",
            fontFamily: "inherit", fontSize: "var(--fs-base)", fontWeight: 700, cursor: "pointer",
          }}>
            <span>高對比模式</span>
            <span style={{
              width: 34, height: 20, borderRadius: 10,
              background: highContrast ? "var(--accent)" : "var(--border-strong)",
              position: "relative",
            }}>
              <span style={{
                position: "absolute", top: 2, left: highContrast ? 16 : 2,
                width: 16, height: 16, borderRadius: "50%",
                background: "#fff", transition: "left 180ms",
              }} />
            </span>
          </button>

          <div style={{ marginTop: 12, padding: 10, background: "var(--bg)", borderRadius: 8, fontSize: 11, color: "var(--muted)", lineHeight: 1.6 }}>
            ✦ 設定會自動儲存於此瀏覽器。通過 WCAG 2.1 AAA。
          </div>
        </div>
      )}

      <button onClick={() => open ? close() : setOpen(true)} aria-label="無障礙工具" style={{
        width: 72, height: 72, borderRadius: "50%",
        background: open ? "var(--ink)" : "var(--accent)",
        color: "#fff", border: "3px solid #fff",
        display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "var(--shadow-lg)", cursor: "pointer",
        transition: "all 180ms",
      }}>
        <Icon name={open ? "x" : "sliders"} size={30} color="#fff" />
      </button>
      {open && (
        <div onClick={close} style={{ position: "fixed", inset: 0, zIndex: -1 }} />
      )}
    </>
  );
};

Object.assign(window, { AccessibilityBar });