// Helm — 設定 → 個人資料(跨工具身分:生日/家庭/工作型態/每週提醒)+ 外觀(主題)。
//   個人資料是「多個工具共用、卻沒有家」的身分事實(生日→年齡、家庭→壽險缺口/報稅、工作型態→社會保險後盾)。
//   工具各自的數字(薪資、房貸、報酬率…)留在各工具裡。生日走後端 setBirth(cfg B4);其餘走 HelmPrefs(跨裝置同步)。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { SegmentedControl, Field } = NS;

  const PREFS = ["跟隨系統", "淺色", "深色"];
  const PREF_TO_KEY = { "跟隨系統": "system", "淺色": "light", "深色": "dark" };
  const KEY_TO_PREF = { system: "跟隨系統", light: "淺色", dark: "深色" };
  // 社會保險後盾預設(與 InsuranceScreen pickWork 一致):受僱=勞保+勞退;僱主/自營=只有國保。
  const SOCIAL = { employee: { survivor: "1500000", disBenefit: "170000" }, employer: { survivor: "160000", disBenefit: "65000" } };

  function pget(k) { try { return (window.HelmPrefs && window.HelmPrefs.get(k)) || ""; } catch (e) { return ""; } }
  function pset(k, v) { try { if (window.HelmPrefs) window.HelmPrefs.set(k, v); } catch (e) {} }

  function Stepper({ label, value, min, max, onChange }) {
    return (
      <div className="pl-step">
        <span>{label}</span>
        <span className="pl-step__ctrl">
          <button type="button" onClick={function () { onChange(Math.max(min, value - 1)); }} disabled={value <= min} aria-label="減">−</button>
          <b>{value}</b>
          <button type="button" onClick={function () { onChange(Math.min(max, value + 1)); }} disabled={value >= max} aria-label="加">＋</button>
        </span>
      </div>
    );
  }

  function Settings({ themePref, setThemePref }) {
    const H = window.HELM || {};
    const [birth, setBirthS] = React.useState((H.birth || "").slice(0, 10).replace(/\//g, "-"));
    const [birthMsg, setBirthMsg] = React.useState("");
    function saveBirth(v) {
      setBirthS(v); setBirthMsg("儲存中…");
      if (v && window.HelmData && window.HelmData.setBirth) {
        window.HelmData.setBirth(v).then(function () { setBirthMsg("已儲存 ✓"); setTimeout(function () { setBirthMsg(""); }, 1500); })
          .catch(function () { setBirthMsg("儲存失敗,稍後再試"); });
      } else { setBirthMsg(""); }
    }
    const [dep, setDep] = React.useState(function () {
      try { return Object.assign({ spouse: false, parents: 0, children: 0 }, JSON.parse(pget("helm-dependents") || "{}")); }
      catch (e) { return { spouse: false, parents: 0, children: 0 }; }
    });
    function saveDep(next) { setDep(next); pset("helm-dependents", JSON.stringify(next)); }
    const [work, setWork] = React.useState(function () { return pget("helm-prot-worktype") || "employee"; });
    function saveWork(w) {
      setWork(w); pset("helm-prot-worktype", w);
      pset("helm-prot-survivor", SOCIAL[w].survivor); pset("helm-prot-disbenefit", SOCIAL[w].disBenefit);
    }
    const [rem, setRem] = React.useState(function () { return pget("helm-reminders"); });
    function saveRem(v) { setRem(v); pset("helm-reminders", v); }

    const age = birth && birth.length >= 4 ? (new Date().getFullYear() - Number(birth.slice(0, 4))) : null;

    return (
      <div className="set">
        <section className="set__card">
          <div className="set__head"><span className="t-overline">個人資料</span></div>
          <p className="set__note">這幾項是「多個工具共用」的基本資料——退休、保障規劃、報稅會用你的真實情況去算。只存在你自己的試算表、不外流。工具裡各自的數字(薪資、房貸…)在那些工具裡改就好。</p>

          <Field label="生日" hint={birthMsg || (age != null ? ("目前約 " + age + " 歲(自動推算)") : "退休/FIRE、保障規劃靠它推算你現在幾歲")}>
            <input type="date" className="set__inp" value={birth} onChange={function (e) { saveBirth(e.target.value); }} />
          </Field>

          <Field label="家庭狀況" hint="影響壽險缺口與報稅扣除額">
            <label className="pl-toggle"><input type="checkbox" checked={dep.spouse} onChange={function (e) { saveDep(Object.assign({}, dep, { spouse: e.target.checked })); }} /><span>有配偶</span></label>
            <Stepper label="受扶養父母" value={dep.parents} min={0} max={4} onChange={function (v) { saveDep(Object.assign({}, dep, { parents: v })); }} />
            <Stepper label="子女" value={dep.children} min={0} max={8} onChange={function (v) { saveDep(Object.assign({}, dep, { children: v })); }} />
          </Field>

          <Field label="工作型態" hint="決定社會保險後盾:受僱有勞保/勞退;僱主·自營只有國保(給付小很多)。保障規劃、退休會用到">
            <SegmentedControl options={["受僱", "僱主 · 自營"]} value={work === "employer" ? "僱主 · 自營" : "受僱"} onChange={function (v) { saveWork(v.indexOf("僱主") === 0 ? "employer" : "employee"); }} />
          </Field>

          <Field label="每週提醒(選填)" hint="每行一則,會出現在每週提醒信裡(需先在後端啟用主動提醒)">
            <textarea className="set__area" rows={3} placeholder={"例:6 月要繳保費\n年底跟銀行對一次帳"} value={rem} onChange={function (e) { saveRem(e.target.value); }} />
          </Field>
        </section>

        <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={function (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-check" 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;
})();