/* ============================================================
   LoginView.jsx — เข้าสู่ระบบ (username / password)
   ============================================================ */

function LoginView({onLogin, credentials, approverRoles}){
  const creds = credentials || defaultCredentials();
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [err, setErr] = React.useState('');

  const submit = (e)=>{
    e && e.preventDefault();
    const res = authenticate(creds, username, password);
    if(!res){ setErr('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง'); return; }
    onLogin(res);
  };

  return (
    <div className="login-wrap">
      <div className="login-aside">
        <div className="login-crest"><img src="logo.png" alt="ตราโรงเรียนหนองตาคงพิทยาคาร"/></div>
        <h1>ระบบการลา</h1>
        <div className="la-eng">Leave Control System</div>
        <div className="la-school">โรงเรียนหนองตาคงพิทยาคาร</div>
        <div className="la-office">สำนักงานเขตพื้นที่การศึกษามัธยมศึกษาจันทบุรี ตราด</div>
        <p className="la-desc">ระบบแจ้งลา จัดครูสอนแทน และติดตามการสอนชดเชย แจ้งเตือนผ่านเบราว์เซอร์ (Web Push) — อ้างอิงตารางสอนภาคเรียนที่ 1 ปีการศึกษา 2569</p>
        <div className="la-feats">
          {[['calendar','แจ้งลา & ขอเปลี่ยนคาบสอน'],['users','ระบบแนะนำครูสอนแทนที่ว่าง'],['bell','แจ้งเตือน & กดรับทราบผ่านเบราว์เซอร์'],['clipboard','บันทึกภาระงานสอนของตนเอง']].map(([ic,tx])=>(
            <div key={tx} className="la-feat"><Icon name={ic} size={17}/>{tx}</div>
          ))}
        </div>
      </div>

      <div className="login-main">
        <div className="login-card">
          <h2>เข้าสู่ระบบ</h2>
          <p className="lc-sub">กรุณาเข้าสู่ระบบด้วยบัญชีของท่าน</p>
          <form onSubmit={submit}>
            <div className="field">
              <label>ชื่อผู้ใช้ (Username)</label>
              <input className="inp" value={username} autoComplete="username"
                onChange={e=>{setUsername(e.target.value);setErr('');}} placeholder="เช่น kru01 หรือ admin"/>
            </div>
            <div className="field">
              <label>รหัสผ่าน (Password)</label>
              <input className="inp" type="password" value={password} autoComplete="current-password"
                onChange={e=>{setPassword(e.target.value);setErr('');}} placeholder="••••••"/>
            </div>
            {err && <div className="login-err"><Icon name="xCircle" size={16}/>{err}</div>}
            <Btn variant="primary" block type="submit" iconRight="chevronRight">เข้าสู่ระบบ</Btn>
          </form>
        </div>
        <div className="login-foot">© 2569 โรงเรียนหนองตาคงพิทยาคาร · สพม.จันทบุรี ตราด</div>
      </div>
    </div>
  );
}

window.LoginView = LoginView;