// Helm — 設定 → 外觀(主題切換)。Claude Design 重設計新增。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { SegmentedControl } = NS;

  const PREFS = ["跟隨系統", "淺色", "深色"];
  const PREF_TO_KEY = { "跟隨系統": "system", "淺色": "light", "深色": "dark" };
  const KEY_TO_PREF = { system: "跟隨系統", light: "淺色", dark: "深色" };

  function Settings({ themePref, setThemePref }) {
    return (
      <div className="set">
        <section className="set__card">
          <div className="set__head"><span className="t-overline">外觀</span></div>
          <div className="set__row">
            <div className="set__row-main">
              <div className="set__row-title">主題</div>
              <div className="set__row-sub">深色／淺色,或跟隨系統設定</div>
            </div>
          </div>
          <SegmentedControl options={PREFS} value={KEY_TO_PREF[themePref] || "跟隨系統"}
            onChange={(v) => setThemePref(PREF_TO_KEY[v])} />
        </section>

        <section className="set__card set__card--muted">
          <div className="set__head"><span className="t-overline">帳戶與資料</span></div>
          <div className="set__soonrow"><i className="ph ph-cloud-arrow-up" aria-hidden="true" /><span>同步與備份</span><em>即將推出</em></div>
          <div className="set__soonrow"><i className="ph ph-export" aria-hidden="true" /><span>匯出資料</span><em>即將推出</em></div>
          <div className="set__soonrow"><i className="ph ph-lock-key" aria-hidden="true" /><span>密碼與安全</span><em>即將推出</em></div>
        </section>
      </div>
    );
  }

  window.Settings = Settings;
})();