/* global React */
// ============================================
// Login screen (username + password)
// ============================================

function LoginView() {
  const { login, settings } = useStore();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPw, setShowPw] = useState(false);
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);
  const userRef = useRef(null);

  useEffect(() => { if (userRef.current) userRef.current.focus(); }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!username || !password) { setError('กรุณากรอกชื่อผู้ใช้และรหัสผ่าน'); return; }
    setBusy(true);
    setError('');
    // brief delay to mimic a real sign-in round-trip
    setTimeout(async () => {
      try {
        const res = await login(username, password);
        if (!res.ok) { setError(res.error); setBusy(false); }
      } catch (err) {
        setError('เข้าสู่ระบบไม่สำเร็จ กรุณาลองใหม่'); setBusy(false);
      }
    }, 350);
  };

  return React.createElement('div', { className: 'login-screen' },
    React.createElement('div', { className: 'login-bg' }),

    React.createElement('div', { className: 'login-card' },
      React.createElement('div', { className: 'login-brand' },
        React.createElement('div', { className: 'brand-mark', style: { width: 44, height: 44, borderRadius: 12 } }, React.createElement(Icon, { name: 'building', size: 24 })),
        React.createElement('div', null,
          React.createElement('div', { className: 'login-title' }, 'ระบบสารบรรณ'),
          React.createElement('div', { className: 'login-sub' }, settings.schoolName),
        ),
      ),

      React.createElement('p', { className: 'login-lead' }, 'เข้าสู่ระบบเพื่อจัดการหนังสือรับ–ส่ง'),

      React.createElement('form', { className: 'login-form', onSubmit: submit },
        React.createElement('div', { className: 'field-row' },
          React.createElement('label', null, 'ชื่อผู้ใช้'),
          React.createElement('div', { className: 'input-affix' },
            React.createElement(Icon, { name: 'user', size: 16 }),
            React.createElement('input', {
              ref: userRef,
              className: 'input', type: 'text', autoComplete: 'username',
              placeholder: 'เช่น admin',
              value: username,
              onChange: e => setUsername(e.target.value),
            }),
          ),
        ),
        React.createElement('div', { className: 'field-row' },
          React.createElement('label', null, 'รหัสผ่าน'),
          React.createElement('div', { className: 'input-affix' },
            React.createElement(Icon, { name: 'lock', size: 16 }),
            React.createElement('input', {
              className: 'input', type: showPw ? 'text' : 'password', autoComplete: 'current-password',
              placeholder: '••••••••',
              value: password,
              onChange: e => setPassword(e.target.value),
            }),
            React.createElement('button', {
              type: 'button', className: 'input-eye', title: showPw ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน',
              onClick: () => setShowPw(s => !s),
            }, React.createElement(Icon, { name: 'eye', size: 16 })),
          ),
        ),

        error && React.createElement('div', { className: 'login-error' },
          React.createElement(Icon, { name: 'alert', size: 14 }), error,
        ),

        React.createElement('button', {
          type: 'submit', className: 'btn btn--primary btn--lg', style: { width: '100%', marginTop: 4 },
          disabled: busy,
        }, busy ? 'กำลังเข้าสู่ระบบ…' : 'เข้าสู่ระบบ'),
      ),

      React.createElement('div', { className: 'login-foot', style: { marginTop: 22, borderTop: '1px solid var(--line)', paddingTop: 16 } }, `ระบบงานสารบรรณอิเล็กทรอนิกส์ · ปีการศึกษา ${settings.academicYear}`),
    ),

    React.createElement('div', { className: 'login-credit' }, 'พัฒนาโดย S.directorkachai'),
  );
}

// ============================================
// Change password (self-service, all roles)
// ============================================
function ChangePasswordView() {
  const { currentUser, changePassword, toast } = useStore();
  const [cur, setCur] = useState('');
  const [next, setNext] = useState('');
  const [confirm, setConfirm] = useState('');
  const [show, setShow] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!cur || !next || !confirm) { setError('กรุณากรอกข้อมูลให้ครบทุกช่อง'); return; }
    if (next.length < 4) { setError('รหัสผ่านใหม่ต้องมีอย่างน้อย 4 ตัวอักษร'); return; }
    if (next !== confirm) { setError('รหัสผ่านใหม่และการยืนยันไม่ตรงกัน'); return; }
    if (next === cur) { setError('รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านเดิม'); return; }
    let res;
    try { res = await changePassword(cur, next); } catch (err) { res = { ok: false, error: 'เปลี่ยนรหัสผ่านไม่สำเร็จ' }; }
    if (!res.ok) { setError(res.error); return; }
    toast('เปลี่ยนรหัสผ่านเรียบร้อยแล้ว');
    setCur(''); setNext(''); setConfirm('');
  };

  const eyeBtn = () => React.createElement('button', {
    type: 'button', className: 'input-eye', onClick: () => setShow(s => !s),
    title: show ? 'ซ่อนรหัสผ่าน' : 'แสดงรหัสผ่าน',
  }, React.createElement(Icon, { name: 'eye', size: 16 }));

  const pwField = (label, value, onChange) => React.createElement('div', { className: 'field-row' },
    React.createElement('label', null, label),
    React.createElement('div', { className: 'input-affix' },
      React.createElement(Icon, { name: 'lock', size: 16 }),
      React.createElement('input', {
        className: 'input', type: show ? 'text' : 'password', autoComplete: 'off',
        value, onChange: e => onChange(e.target.value), placeholder: '••••••••',
      }),
      eyeBtn(),
    ),
  );

  return React.createElement('div', { className: 'page', style: { maxWidth: 520 } },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'เปลี่ยนรหัสผ่าน'),
        React.createElement('p', null, currentUser ? `บัญชี: @${currentUser.username}` : 'ตั้งรหัสผ่านใหม่สำหรับบัญชีของคุณ'),
      ),
    ),
    React.createElement('form', { className: 'card', onSubmit: submit },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, 'ตั้งรหัสผ่านใหม่'),
      ),
      React.createElement('div', { className: 'card__body', style: { display: 'flex', flexDirection: 'column', gap: 14 } },
        pwField('รหัสผ่านปัจจุบัน', cur, setCur),
        pwField('รหัสผ่านใหม่', next, setNext),
        pwField('ยืนยันรหัสผ่านใหม่', confirm, setConfirm),

        error && React.createElement('div', { className: 'login-error' },
          React.createElement(Icon, { name: 'alert', size: 14 }), error,
        ),

        React.createElement('div', { className: 'hint' }, 'รหัสผ่านควรมีอย่างน้อย 4 ตัวอักษร — เปลี่ยนแล้วต้องใช้รหัสใหม่ในการเข้าสู่ระบบครั้งถัดไป'),

        React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end' } },
          React.createElement('button', { type: 'submit', className: 'btn btn--primary' },
            React.createElement(Icon, { name: 'check', size: 14 }), 'บันทึกรหัสผ่านใหม่'),
        ),
      ),
    )
  );
}

Object.assign(window, { LoginView, ChangePasswordView });