// Login screen

const Login = ({ onLogin, data }) => {
  const [email, setEmail] = React.useState('admin@example.com');
  const [password, setPassword] = React.useState('');
  const [err, setErr] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const doLogin = async (overrideEmail, overridePassword) => {
    setErr(null); setBusy(true);
    try {
      const res = await window.API.login(overrideEmail || email, overridePassword || password);
      await onLogin(res.user);
    } catch (e) {
      setErr(e.message === 'invalid credentials' ? 'อีเมลหรือรหัสผ่านไม่ถูกต้อง' : e.message);
    } finally {
      setBusy(false);
    }
  };

  const doKey = (e) => { if (e.key === 'Enter') doLogin(); };

  return (
    <div className="login-wrap" data-screen-label="Login">
      <div className="login-art">
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div className="row" style={{ gap: 10, marginBottom: 40 }}>
            <div className="brand-logo" style={{ width: 42, height: 42, fontSize: 17 }}>WC</div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 17 }}>Work Calendar</div>
              <div style={{ fontSize: 12, opacity: .75 }}>ระบบจัดการปฏิทินการทำงาน</div>
            </div>
          </div>

          <h1 style={{ fontSize: 38, fontWeight: 700, lineHeight: 1.15, margin: 0, letterSpacing: '-.02em' }}>
            จัดตารางงาน<br/>ลา OT และสลับวันหยุด<br/>
            <span style={{ opacity: .65 }}>ง่ายในที่เดียว</span>
          </h1>
          <p style={{ fontSize: 15, opacity: .8, lineHeight: 1.6, marginTop: 20, maxWidth: 380 }}>
            สำหรับร้านเล็ก ทีมเล็ก ที่ต้องดูแลตารางพนักงานหลายคนทุกวัน — ไม่ต้องใช้สเปรดชีตอีกต่อไป
          </p>
        </div>

        <div style={{ position: 'relative', zIndex: 1, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {data.employees.slice(0, 6).map(e => (
            <div key={e.id} className="row" style={{
              gap: 8, padding: '6px 10px 6px 6px', borderRadius: 999,
              background: 'rgba(255,255,255,.12)', backdropFilter: 'blur(6px)'
            }}>
              <span className="avatar" style={{ background: e.color, width: 22, height: 22, fontSize: 9 }}>{e.avatar}</span>
              <span style={{ fontSize: 12 }}>{e.name.split(' ')[0]}</span>
            </div>
          ))}
          <div className="row" style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,.12)', fontSize: 12 }}>
            +3 คน
          </div>
        </div>
      </div>

      <div className="login-form">
        <div className="login-form-inner">
          <div className="text-xs" style={{ color: 'var(--brand-700)', fontWeight: 600, marginBottom: 6, letterSpacing: '.06em' }}>
            เข้าสู่ระบบ · LOGIN
          </div>
          <h2 style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-.02em' }}>ยินดีต้อนรับกลับมา</h2>
          <p className="text-sm muted mt-2 mb-3">ใช้บัญชีพนักงานของคุณเพื่อเข้าใช้งาน</p>

          <div className="field">
            <label>อีเมล</label>
            <div style={{ position: 'relative' }}>
              <Icon name="mail" size={15} style={{ position: 'absolute', left: 12, top: 11, color: 'var(--ink-400)' }}/>
              <input value={email} onChange={e => setEmail(e.target.value)} onKeyDown={doKey} style={{ paddingLeft: 36 }}/>
            </div>
          </div>
          <div className="field">
            <label>รหัสผ่าน</label>
            <div style={{ position: 'relative' }}>
              <Icon name="lock" size={15} style={{ position: 'absolute', left: 12, top: 11, color: 'var(--ink-400)' }}/>
              <input type="password" value={password} onChange={e => setPassword(e.target.value)} onKeyDown={doKey} style={{ paddingLeft: 36 }}/>
            </div>
          </div>

          {err && (
            <div style={{ background:'#fef2f2', border:'1px solid #fecaca', color:'#b91c1c', padding:'8px 12px', borderRadius:8, fontSize:12, marginBottom:12 }}>
              {err}
            </div>
          )}

          <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '11px 14px' }} onClick={() => doLogin()} disabled={busy}>
            {busy ? 'กำลังเข้าสู่ระบบ…' : 'เข้าสู่ระบบ'} <Icon name="arrowRight" size={14}/>
          </button>

          <div style={{ position: 'relative', textAlign: 'center', margin: '20px 0' }}>
            <div style={{ height: 1, background: 'var(--ink-200)' }}/>
            <span style={{ position: 'absolute', top: -8, left: '50%', transform: 'translateX(-50%)', background: 'var(--paper)', padding: '0 12px', fontSize: 11, color: 'var(--ink-500)' }}>
              บัญชีทดสอบ
            </span>
          </div>

          <div className="row" style={{ gap: 8 }}>
            <button className="btn btn-ghost flex-1" disabled={busy} onClick={() => doLogin('admin@example.com', 'admin123')}>
              <Icon name="users" size={14}/> Admin
            </button>
            <button className="btn btn-ghost flex-1" disabled={busy} onClick={() => doLogin('napha@example.com', 'password123')}>
              <Icon name="user" size={14}/> พนักงาน
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Login = Login;