/**
 * 解锁对话框。
 *
 * 它只是**入口**，不是闸门：真正拦住改绑的是后端的 `require_unlocked`。所以这里即使
 * 被人绕过、甚至被改成永远返回成功，配置也改不动。
 *
 * # 它是"校验"而不是"弹窗"
 *
 * 这一层出现时，背后的一切都停了：整屏压暗、面板上扫过一条校验线、左下角挂着 `LOCKED`。
 * 现场有人要改绑定，多半是在出问题的时候；那时候界面必须明确地说"现在这一步是在验证身份"，
 * 而不是给出一个和别处一样的灰色小框。
 */

import { useEffect, useRef, useState } from "react";

import { api } from "../lib/ipc";

interface Props {
  /** 为什么需要密码：显示在标题下。 */
  reason: string;
  onUnlocked: () => void;
  onCancel: () => void;
}

export function UnlockDialog({ reason, onUnlocked, onCancel }: Props) {
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const input = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    input.current?.focus();
  }, []);

  const submit = async () => {
    if (busy) return;

    setBusy(true);
    setError(null);

    try {
      const ok = await api.unlock(password);
      if (ok) {
        onUnlocked();
      } else {
        setError("密码错误");
        setPassword("");
        input.current?.focus();
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="overlay" role="dialog" aria-modal="true" aria-label="需要密码">
      <div className={`lock plate${error ? " is-wrong" : ""}`}>
        <span className="lock__scan" aria-hidden="true" />
        <span className="lock__tag label">LOCKED</span>

        <header className="lock__head">
          <h2 className="lock__title">需要密码</h2>
          <p className="lock__reason">{reason}</p>
        </header>

        <label className="lock__field">
          <span className="lock__field-label label">ACCESS KEY</span>
          <input
            ref={input}
            className="input input--lg"
            type="password"
            value={password}
            placeholder="输入现场密码"
            autoComplete="off"
            onChange={(event) => setPassword(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") void submit();
              if (event.key === "Escape") onCancel();
            }}
          />
        </label>

        {error && <p className="lock__error">{error}</p>}

        <p className="lock__note">
          密码用于防止现场误改设置；能修改本机配置或程序的人仍可绕过。
          忘记密码时，可删除配置文件中的 password 一行。
        </p>

        <div className="lock__actions">
          <button type="button" className="btn btn--ghost" onClick={onCancel}>
            取消
          </button>
          <button
            type="button"
            className="btn btn--primary"
            onClick={() => void submit()}
            disabled={busy || password.length === 0}
          >
            {busy ? "校验中…" : "解锁"}
            <span className="btn__key">⏎</span>
          </button>
        </div>
      </div>
    </div>
  );
}