// Helm — Lock screen (密碼登入頁). 真驗證:把密碼送後端,對了才進。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Button, Input, Checkbox, HelmMark } = NS;

  function Lock({ onUnlock }) {
    const [pw, setPw] = React.useState("");
    const [err, setErr] = React.useState(false);
    const [errMsg, setErrMsg] = React.useState("密碼不正確，請再試一次");
    const [loading, setLoading] = React.useState(false);
    const [remember, setRemember] = React.useState(true);

    // 朋友版:第一次還沒貼後端網址 → 先顯示「連結後端」步驟(貼好 reload 後才進密碼頁)
    const backend = window.HelmBackend || { friend: false, needsSetup: false };
    const [setupMode] = React.useState(!!backend.needsSetup);
    const [url, setUrl] = React.useState("");
    const [urlErr, setUrlErr] = React.useState("");

    function linkBackend(e) {
      e.preventDefault();
      if (!window.HelmBackend || !window.HelmBackend.save(String(url).trim())) {
        setUrlErr("網址格式不對,要像 https://script.google.com/macros/s/…/exec");
        return;
      }
      window.location.reload();
    }
    function switchBackend() {
      if (window.HelmBackend) window.HelmBackend.clear();
      window.location.reload();
    }

    function submit(e) {
      e.preventDefault();
      if (loading || !pw) return;
      setLoading(true);
      setErr(false);
      window.HelmData.auth(pw, remember).then(function (res) {
        if (res.ok) {
          onUnlock();
        } else {
          setLoading(false);
          setErr(true);
          setErrMsg(res.reason === "network"
            ? "無法連線，稍後再試"
            : "密碼不正確，請再試一次");
        }
      });
    }

    return (
      <div className="lock">
        <div className="lock__texture" aria-hidden="true" />
        <div className="lock__center">
          <img src="./assets/helm-app-icon.svg" width="76" height="76" alt="" className="lock__icon" />
          <div className="lock__word">Helm</div>
          <div className="lock__tag">你親手掌自己財務的舵</div>

          {setupMode ? (
            <form className="lock__form" onSubmit={linkBackend}>
              <div className="lock__setup-title">先連結你的後端</div>
              <div className="lock__setup-desc">
                貼上你的 Apps Script 網頁應用程式網址(<code>/exec</code> 結尾)。
                照著教學做到「部署 → 網頁應用程式」那步就會拿到它。
              </div>
              <Input
                type="url"
                inputMode="url"
                placeholder="https://script.google.com/macros/s/…/exec"
                value={url}
                invalid={!!urlErr}
                onChange={(e) => { setUrl(e.target.value); setUrlErr(""); }}
                autoFocus
              />
              {urlErr && <div className="lock__err">{urlErr}</div>}
              <Button type="submit" variant="primary" size="lg" block>連結後端</Button>
              <div className="lock__setup-hint">只存在這台裝置的瀏覽器。連結後,下一步才輸入你設定的密碼。</div>
            </form>
          ) : (
            <form className={"lock__form" + (err ? " shake" : "")} onSubmit={submit}>
              <Input
                type="password"
                inputMode="text"
                placeholder="輸入密碼"
                value={pw}
                invalid={err}
                onChange={(e) => { setPw(e.target.value); setErr(false); }}
                style={{ textAlign: "center" }}
                autoFocus
              />
              {err && <div className="lock__err">{errMsg}</div>}
              <Button type="submit" variant="primary" size="lg" block loading={loading}>
                {loading ? "驗證中…" : "進入"}
              </Button>
              <div className="lock__remember">
                <Checkbox id="remember" checked={remember} onChange={setRemember}
                  label="記住登入" hint="在這台裝置上保持登入" />
              </div>
            </form>
          )}
          {backend.friend && !setupMode && (
            <button type="button" className="lock__switch" onClick={switchBackend}>換一個後端網址</button>
          )}
        </div>
        <div className="lock__foot">
          <i className="ph ph-lock-simple" aria-hidden="true" />
          你的資料只有你看得到
        </div>
      </div>
    );
  }

  window.Lock = Lock;
})();