/* ============================================================
   AccountModal.jsx — ตั้งค่าบัญชี: เปลี่ยนเฉพาะรหัสผ่าน
   (ชื่อผู้ใช้ kru.. กำหนดโดยระบบ แก้ไขไม่ได้)
   ============================================================ */

function AccountModal({accountId, label, credentials, onSave, onClose}){
  const cur = credentials[accountId] || {username:'', password:''};
  const [curPass, setCurPass] = React.useState('');
  const [newPass, setNewPass] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [err, setErr] = React.useState('');

  const save = ()=>{
    if(curPass !== cur.password){ setErr('รหัสผ่านปัจจุบันไม่ถูกต้อง'); return; }
    if(newPass.length < 4){ setErr('รหัสผ่านใหม่ต้องยาวอย่างน้อย 4 ตัวอักษร'); return; }
    if(newPass !== confirm){ setErr('รหัสผ่านใหม่และการยืนยันไม่ตรงกัน'); return; }
    onSave(accountId, {username:cur.username, password:newPass});
  };

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd">
          <h3>เปลี่ยนรหัสผ่าน</h3>
          <div className="tiny" style={{marginTop:3}}>{label}</div>
        </div>
        <div className="modal-bd">
          <div className="field">
            <label>ชื่อผู้ใช้ (Username)</label>
            <div className="readonly-field"><span className="num">{cur.username}</span><span className="ro-tag">กำหนดโดยระบบ</span></div>
            <div className="hint">ชื่อผู้ใช้กำหนดโดยระบบ ไม่สามารถแก้ไขได้</div>
          </div>
          <div className="field">
            <label>รหัสผ่านปัจจุบัน</label>
            <input className="inp" type="password" value={curPass} onChange={e=>{setCurPass(e.target.value);setErr('');}} placeholder="กรอกรหัสผ่านเดิมเพื่อยืนยันตัวตน" autoFocus/>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field mb0"><label>รหัสผ่านใหม่</label>
              <input className="inp" type="password" value={newPass} onChange={e=>{setNewPass(e.target.value);setErr('');}} placeholder="อย่างน้อย 4 ตัว"/></div>
            <div className="field mb0"><label>ยืนยันรหัสผ่านใหม่</label>
              <input className="inp" type="password" value={confirm} onChange={e=>{setConfirm(e.target.value);setErr('');}} placeholder="พิมพ์อีกครั้ง"/></div>
          </div>
          {err && <div className="login-err mt12" style={{marginBottom:0}}><Icon name="xCircle" size={16}/>{err}</div>}
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="check" onClick={save}>บันทึกรหัสผ่านใหม่</Btn>
        </div>
      </div>
    </div>
  );
}

window.AccountModal = AccountModal;