// Login screen — gates the whole app. Authenticates against the USERS list
// (email match). Password is demo-only (any non-empty value). Session is stored
// in localStorage 'finx_session' so a refresh keeps you signed in.
function LoginScreen({ onLogin }){
  const [email, setEmail] = useState('');
  const [pw, setPw]       = useState('');
  const [show, setShow]   = useState(false);
  const [remember, setRemember] = useState(true);
  const [err, setErr]     = useState('');
  const [busy, setBusy]   = useState(false);

  const submit = (e) => {
    e && e.preventDefault();
    setErr('');
    const users = window.USERS || [];
    const u = users.find(x => x.email.toLowerCase() === email.trim().toLowerCase());
    if (!u){ setErr('ไม่พบบัญชีอีเมลนี้ในระบบ'); return; }
    if (!pw.trim()){ setErr('กรุณากรอกรหัสผ่าน'); return; }
    if (u.status === 'inactive'){ setErr('บัญชีนี้ถูกระงับการใช้งาน · ติดต่อผู้ดูแลระบบ'); return; }
    setBusy(true);
    setTimeout(()=>{
      try { localStorage.setItem('finx_session', JSON.stringify({ email:u.email, ts:Date.now(), remember })); } catch(_){}
      setBusy(false);
      onLogin(u);
    }, 550);
  };

  const fillDemo = () => { setEmail('thongchai.h.bam@gmail.com'); setPw('finx1234'); };

  return (
    <div className="login-wrap">
      {/* Left brand panel */}
      <div className="login-brand">
        <div className="login-brand-inner">
          <div className="login-logo">
            <div>
              <div className="login-logo-name">Smart FINX</div>
              <div className="login-logo-sub">Cash Flow OS</div>
            </div>
          </div>
          <div style={{flex:1}}/>
          <div className="login-tagline">
            <div className="login-tagline-big">บริหารกระแสเงินสด<br/>อย่างชาญฉลาด</div>
            <div className="login-tagline-sub">บันทึก · อนุมัติ · วิเคราะห์ กระแสเงินสดรายวันในที่เดียว</div>
          </div>
          <div className="login-stats">
            <div><div className="ls-v">6</div><div className="ls-k">เมนูหลัก</div></div>
            <div><div className="ls-v">Real-time</div><div className="ls-k">Cash Flow</div></div>
            <div><div className="ls-v">Role-based</div><div className="ls-k">Permissions</div></div>
          </div>
        </div>
        <div className="login-glow login-glow-1"/>
        <div className="login-glow login-glow-2"/>
      </div>

      {/* Right form */}
      <div className="login-form-side">
        <form className="login-card" onSubmit={submit}>
          <div className="login-card-head">
            <div className="login-card-title">เข้าสู่ระบบ</div>
            <div className="login-card-sub">ยินดีต้อนรับกลับ · กรุณาเข้าสู่ระบบเพื่อดำเนินการต่อ</div>
          </div>

          {err && <div className="login-err"><I.AlertCircle size={14}/> {err}</div>}

          <div className="field">
            <label>อีเมล</label>
            <div className="login-input">
              <I.Mail size={15} stroke="#7b87a8"/>
              <input type="email" value={email} autoFocus autoComplete="username"
                onChange={e=>setEmail(e.target.value)} placeholder="name@finx.co"/>
            </div>
          </div>

          <div className="field">
            <label>รหัสผ่าน</label>
            <div className="login-input">
              <I.Lock size={15} stroke="#7b87a8"/>
              <input type={show?'text':'password'} value={pw} autoComplete="current-password"
                onChange={e=>setPw(e.target.value)} placeholder="••••••••"
                onKeyDown={e=>{ if(e.key==='Enter') submit(e); }}/>
              <button type="button" className="login-eye" onClick={()=>setShow(s=>!s)} tabIndex={-1}>
                {show ? <I.EyeOff size={15}/> : <I.Eye size={15}/>}
              </button>
            </div>
          </div>

          <div className="login-row">
            <label className="login-check">
              <input type="checkbox" checked={remember} onChange={e=>setRemember(e.target.checked)}/>
              <span>จดจำการเข้าสู่ระบบ</span>
            </label>
            <button type="button" className="login-link" onClick={()=>window.toast('ติดต่อผู้ดูแลระบบเพื่อรีเซ็ตรหัสผ่าน',{tone:'info'})}>ลืมรหัสผ่าน?</button>
          </div>

          <button type="submit" className="login-btn" disabled={busy}>
            {busy ? <span className="login-spin"/> : <><I.Logout size={15}/> เข้าสู่ระบบ</>}
          </button>

          <button type="button" className="login-demo" onClick={fillDemo}>
            ใช้บัญชีทดลอง (Admin)
          </button>

          <div className="login-foot">© 2026 Smart FINX · Cash Flow Operating System</div>
        </form>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;