// auth.jsx — ChangePasswordScreen component
const { useState: useStateAuth } = React;

function ChangePasswordScreen({ forceMode, onSubmit, onClose }) {
  const [current, setCurrent] = useStateAuth('');
  const [next, setNext] = useStateAuth('');
  const [confirm, setConfirm] = useStateAuth('');
  const [showCurrent, setShowCurrent] = useStateAuth(false);
  const [showNext, setShowNext] = useStateAuth(false);
  const [clientErr, setClientErr] = useStateAuth(null);
  const [serverErr, setServerErr] = useStateAuth(null);
  const [busy, setBusy] = useStateAuth(false);

  const validate = () => {
    if (!current.trim()) return 'Nhập mật khẩu hiện tại';
    if (next.length < 6) return 'Mật khẩu mới tối thiểu 6 ký tự';
    if (next !== confirm) return 'Xác nhận mật khẩu không khớp';
    return null;
  };

  const submit = async () => {
    if (busy) return;
    const err = validate();
    if (err) { setClientErr(err); return; }
    setClientErr(null);
    setServerErr(null);
    setBusy(true);
    try {
      await onSubmit(current, next);
    } catch (e) {
      const code = e?.error;
      setServerErr(
        code === 'wrong_current' ? 'Mật khẩu hiện tại không đúng'
        : code === 'too_short'   ? 'Mật khẩu mới tối thiểu 6 ký tự'
        : 'Có lỗi xảy ra, thử lại'
      );
    } finally {
      setBusy(false);
    }
  };

  const onKey = (e) => { if (e.key === 'Enter') submit(); };
  const clearErr = () => { setClientErr(null); setServerErr(null); };
  const displayErr = clientErr || serverErr;

  // ---------- Force mode: full-screen (no close btn) ----------
  if (forceMode) {
    return (
      <div className="screen login change-pw-screen">
        <div className="login-brand">
          <div className="brand-mark">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="9" />
              <path d="M12 7v5l3 2" />
            </svg>
          </div>
          <div className="brand-name">AiiCafe</div>
          <div className="brand-tag">Hệ thống chấm công nội bộ</div>
        </div>

        <div className="login-body">
          <div className="must-change-banner">
            <strong>Lần đăng nhập đầu tiên</strong> — Vui lòng đổi mật khẩu trước khi sử dụng hệ thống.
          </div>

          <h2 className="login-title">Đổi mật khẩu</h2>

          <div className="login-form">
            <label className="field">
              <span className="field-label">Mật khẩu được cấp</span>
              <div className="pwd-wrap">
                <input
                  type={showCurrent ? 'text' : 'password'}
                  value={current}
                  placeholder="Nhập mật khẩu được cấp"
                  onChange={(e) => { setCurrent(e.target.value); clearErr(); }}
                  onKeyDown={onKey}
                />
                <button type="button" className="pwd-toggle" onClick={() => setShowCurrent(!showCurrent)} tabIndex={-1}>
                  {showCurrent ? 'Ẩn' : 'Hiện'}
                </button>
              </div>
            </label>

            <label className="field">
              <span className="field-label">Mật khẩu mới</span>
              <div className="pwd-wrap">
                <input
                  type={showNext ? 'text' : 'password'}
                  value={next}
                  placeholder="Tối thiểu 6 ký tự"
                  onChange={(e) => { setNext(e.target.value); clearErr(); }}
                  onKeyDown={onKey}
                />
                <button type="button" className="pwd-toggle" onClick={() => setShowNext(!showNext)} tabIndex={-1}>
                  {showNext ? 'Ẩn' : 'Hiện'}
                </button>
              </div>
            </label>

            <label className="field">
              <span className="field-label">Xác nhận mật khẩu mới</span>
              <input
                type="password"
                value={confirm}
                placeholder="Nhập lại mật khẩu mới"
                onChange={(e) => { setConfirm(e.target.value); clearErr(); }}
                onKeyDown={onKey}
              />
            </label>

            {displayErr && <div className="login-error">{displayErr}</div>}
          </div>

          <button className="big-btn primary" onClick={submit} disabled={busy}>
            {busy ? 'Đang lưu…' : 'Đổi mật khẩu'}
          </button>

          <div className="login-foot">Phiên bản 2.4.1 · AiiCafe HCM</div>
        </div>
      </div>
    );
  }

  // ---------- Normal mode: sheet (with close btn) ----------
  return (
    <div className="sheet-overlay" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-handle" />
        <div className="sheet-head">
          <h3>Đổi mật khẩu</h3>
          <button className="x-btn" onClick={onClose}>✕</button>
        </div>

        <div className="sheet-body">
          <label className="field">
            <span className="field-label">Mật khẩu hiện tại</span>
            <div className="pwd-wrap">
              <input
                type={showCurrent ? 'text' : 'password'}
                value={current}
                placeholder="••••••"
                onChange={(e) => { setCurrent(e.target.value); clearErr(); }}
                onKeyDown={onKey}
              />
              <button type="button" className="pwd-toggle" onClick={() => setShowCurrent(!showCurrent)} tabIndex={-1}>
                {showCurrent ? 'Ẩn' : 'Hiện'}
              </button>
            </div>
          </label>

          <label className="field">
            <span className="field-label">Mật khẩu mới</span>
            <div className="pwd-wrap">
              <input
                type={showNext ? 'text' : 'password'}
                value={next}
                placeholder="Tối thiểu 6 ký tự"
                onChange={(e) => { setNext(e.target.value); clearErr(); }}
                onKeyDown={onKey}
              />
              <button type="button" className="pwd-toggle" onClick={() => setShowNext(!showNext)} tabIndex={-1}>
                {showNext ? 'Ẩn' : 'Hiện'}
              </button>
            </div>
          </label>

          <label className="field">
            <span className="field-label">Xác nhận mật khẩu mới</span>
            <input
              type="password"
              value={confirm}
              placeholder="Nhập lại mật khẩu mới"
              onChange={(e) => { setConfirm(e.target.value); clearErr(); }}
              onKeyDown={onKey}
            />
          </label>

          {displayErr && <div className="login-error">{displayErr}</div>}
        </div>

        <div className="sheet-foot">
          <button className="big-btn ghost" onClick={onClose} disabled={busy}>Huỷ</button>
          <button className="big-btn primary" onClick={submit} disabled={busy}>
            {busy ? 'Đang lưu…' : 'Đổi mật khẩu'}
          </button>
        </div>
      </div>
    </div>
  );
}

window.ChangePasswordScreen = ChangePasswordScreen;