// Admin login modal — gates the Admin (edit) mode with username/password.
(function () {
  const { useState, useEffect, useRef } = React;
  const IC = window.IC;

  window.LoginModal = function LoginModal() {
    const [open, setOpen] = useState(false);
    const [user, setUser] = useState("");
    const [pass, setPass] = useState("");
    const [err, setErr] = useState(false);
    const [show, setShow] = useState(false);
    const uref = useRef(null);

    useEffect(() => {
      const fn = () => { setOpen(true); setUser(""); setPass(""); setErr(false); setShow(false); setTimeout(() => uref.current && uref.current.focus(), 40); };
      const esc = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("open-login", fn);
      window.addEventListener("keydown", esc);
      return () => { window.removeEventListener("open-login", fn); window.removeEventListener("keydown", esc); };
    }, []);

    if (!open) return null;
    const submit = async (e) => {
      e.preventDefault();
      const ok = await window.adminLogin(user.trim(), pass);
      if (ok) { setOpen(false); window.toast("เข้าสู่โหมดผู้ดูแลระบบแล้ว"); }
      else { setErr(true); setPass(""); }
    };

    const safeClose = () => {
      const dirty = !!(user || pass);
      if (window.confirmDiscard(dirty)) setOpen(false);
    };
    return (
      <div className="login-overlay" onClick={window.NOOP}>
        <form className="login-card" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
          <button type="button" className="login-x icon-btn" onClick={safeClose}>{IC.x}</button>
          <div className="login-badge">{IC.shield}</div>
          <h2>เข้าสู่ระบบผู้ดูแลระบบ</h2>
          <p>โหมดนี้สามารถเพิ่ม ลบ และแก้ไขข้อมูลได้ทั้งหมด — กรุณายืนยันตัวตนเพื่อป้องกันการแก้ไขโดยไม่ได้รับอนุญาต</p>

          <label className="login-field">
            <span>ชื่อผู้ใช้ (Username)</span>
            <div className={"login-input" + (err ? " err" : "")}>
              {IC.user}
              <input ref={uref} value={user} onChange={(e) => { setUser(e.target.value); setErr(false); }} placeholder="username" autoCapitalize="off" autoCorrect="off" />
            </div>
          </label>
          <label className="login-field">
            <span>รหัสผ่าน (Password)</span>
            <div className={"login-input" + (err ? " err" : "")}>
              {IC.lock}
              <input type={show ? "text" : "password"} value={pass} onChange={(e) => { setPass(e.target.value); setErr(false); }} placeholder="password" />
              <button type="button" className="login-eye" onClick={() => setShow(!show)}>{IC.eye}</button>
            </div>
          </label>

          {err && <div className="login-err">{IC.warn}<span>ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง</span></div>}

          <div className="login-acts">
            <button type="button" className="btn" onClick={safeClose}>ยกเลิก</button>
            <button type="submit" className="btn pri">{IC.lock} เข้าสู่ระบบ</button>
          </div>
        </form>
      </div>
    );
  };
})();