/* global React, window, Icon */
const { useState: useStateLogin } = React;

function LoginPage({ onLogin }) {
  const [user, setUser] = useStateLogin('');
  const [pwd, setPwd] = useStateLogin('');
  const [err, setErr] = useStateLogin('');
  const [busy, setBusy] = useStateLogin(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    setBusy(true);
    try {
      await onLogin(user, pwd);
    } catch (e2) {
      setErr(e2.message || 'เข้าสู่ระบบไม่สำเร็จ');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="fit-login" style={{
      minHeight: '100vh', width: '100%', background: 'var(--bg)',
      display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, .95fr)',
    }}>
      {/* hero — ซ่อนบนมือถือ (ดู .fit-login ใน gov.css) */}
      <div className="fit-login-hero" style={{
        position: 'relative', overflow: 'hidden',
        background: 'var(--navy)', color: '#fff',
        padding: '48px 56px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 40,
      }}>
        {/* soft radial glows */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(600px 420px at 78% 8%, rgba(14,165,233,.38), transparent 60%), radial-gradient(520px 360px at 10% 96%, rgba(239,68,68,.26), transparent 62%)',
        }}/>

        <div style={{position: 'relative', display: 'flex', alignItems: 'center', gap: 12}}>
          <img src="/img/logo.svg" alt="Face in Time" style={{ width: 46, height: 46, flex: 'none', borderRadius: 14, boxShadow: '0 8px 24px rgba(14,165,233,.4)' }}/>
          <div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: '#fff', lineHeight: 1.1}}>Face in Time</div>
            <div style={{fontSize: 11.5, letterSpacing: '.08em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase'}}>Time Attendance · 2026</div>
          </div>
        </div>

        <div style={{position: 'relative', maxWidth: 520}}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.15)',
            color: '#BAE6FD',
            padding: '6px 14px',
            borderRadius: 999,
            fontSize: 12, fontWeight: 600,
            marginBottom: 22,
          }}>
            <span style={{width: 6, height: 6, borderRadius: 999, background: 'var(--primary)'}} />
            ระบบลงเวลาทำงาน · เชื่อมต่อ Hikvision Face Terminal
          </div>
          <div style={{fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 700, color: '#fff', lineHeight: 1.08, letterSpacing: '-0.02em', marginBottom: 16}}>
            ลงเวลาเข้า-ออกงาน<br/>
            <span style={{
              background: 'linear-gradient(90deg, var(--primary), #FCA5A5)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}>ด้วยการสแกนใบหน้า</span>
          </div>
          <div style={{color: 'rgba(255,255,255,0.65)', fontSize: 15, lineHeight: 1.55, maxWidth: 460}}>
            บันทึกเวลาทำงานพนักงานอัตโนมัติจากเครื่องสแกนใบหน้า Hikvision —
            สรุปการมา/สาย/ขาด/ลา จัดตารางกะ คำนวณ OT และเงินเดือน แบบเรียลไทม์ในที่เดียว
          </div>
        </div>

        <div style={{position: 'relative', display: 'flex', gap: 24, flexWrap: 'wrap', color: 'rgba(255,255,255,0.7)', fontSize: 13}}>
          <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
            <div style={{width: 32, height: 32, borderRadius: 10, background: 'rgba(14,165,233,0.22)', display: 'grid', placeItems: 'center', color: '#7DD3FC'}}>
              <Icon name="shield" size={16}/>
            </div>
            <div>
              <div style={{color: '#fff', fontWeight: 600, fontSize: 13.5}}>ปลอดภัย</div>
              <div style={{fontSize: 11.5, color: 'rgba(255,255,255,0.5)'}}>เข้ารหัส End-to-end</div>
            </div>
          </div>
          <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
            <div style={{width: 32, height: 32, borderRadius: 10, background: 'rgba(22,163,74,0.22)', display: 'grid', placeItems: 'center', color: '#6EE7B7'}}>
              <Icon name="lightning" size={16}/>
            </div>
            <div>
              <div style={{color: '#fff', fontWeight: 600, fontSize: 13.5}}>เรียลไทม์</div>
              <div style={{fontSize: 11.5, color: 'rgba(255,255,255,0.5)'}}>เวลาตอบสนอง 0.3 วินาที</div>
            </div>
          </div>
          <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
            <div style={{width: 32, height: 32, borderRadius: 10, background: 'rgba(245,158,11,0.22)', display: 'grid', placeItems: 'center', color: '#FCD34D'}}>
              <Icon name="badge" size={16}/>
            </div>
            <div>
              <div style={{color: '#fff', fontWeight: 600, fontSize: 13.5}}>แม่นยำ 99.7%</div>
              <div style={{fontSize: 11.5, color: 'rgba(255,255,255,0.5)'}}>AI Face Recognition</div>
            </div>
          </div>
        </div>
      </div>

      {/* form */}
      <div className="fit-login-form" style={{display: 'grid', placeItems: 'center', padding: 28}}>
        {/* หัวโลโก้แบบย่อ แสดงเฉพาะมือถือแทน hero */}
        <div className="fit-login-mobilehead">
          <img src="/img/logo.svg" alt="Face in Time" style={{ width: 56, height: 56, borderRadius: 16, boxShadow: '0 8px 24px rgba(14,165,233,.35)' }}/>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--ink)', marginTop: 12 }}>Face in Time</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 2 }}>ระบบลงเวลาทำงานด้วยการสแกนใบหน้า</div>
        </div>
        <form onSubmit={submit} className="gv-card" style={{
          width: 'min(400px, 100%)', borderRadius: 24,
          padding: '32px 30px', boxShadow: 'var(--shadow-lg)',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <div>
            <div style={{fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--ink)'}}>ยินดีต้อนรับกลับ</div>
            <div style={{fontSize: 13, color: 'var(--ink-4)', marginTop: 4}}>เข้าสู่ระบบเพื่อจัดการการลงเวลาและพนักงาน</div>
          </div>

          <div className="gv-field" style={{marginBottom: 0}}>
            <label>ชื่อผู้ใช้</label>
            <input className="gv-input" value={user} onChange={(e) => setUser(e.target.value)} placeholder="admin หรือ รหัสพนักงาน" autoComplete="username" autoFocus/>
          </div>

          <div className="gv-field" style={{marginBottom: 0}}>
            <label>รหัสผ่าน</label>
            <input className="gv-input" type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="••••••••" autoComplete="current-password" required/>
          </div>

          {err && (
            <div style={{
              padding: '10px 14px', borderRadius: 10,
              background: 'var(--coral-soft)',
              color: 'var(--coral-ink)', fontSize: 13, fontWeight: 600,
            }}>{err}</div>
          )}

          <button type="submit" className="gv-btn ok" disabled={busy} style={{width: '100%', justifyContent: 'center', padding: '13px 18px'}}>
            <Icon name="log-in" size={16}/>
            {busy ? 'กำลังเข้าสู่ระบบ…' : 'เข้าสู่ระบบ'}
          </button>

          <div style={{display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--ink-4)', justifyContent: 'center'}}>
            <Icon name="lock" size={12}/>
            <span>การเชื่อมต่อปลอดภัย · ระบบเข้ารหัส TLS 1.3</span>
          </div>
        </form>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;