/* global React, Icon, Btn, Logo */
// Taxai — Login (split: dark brand panel + light form)
const { useState: useLoginState } = React;

function Login({ onLogin }) {
  const [email, setEmail] = useLoginState('chu.quan@gmail.com');
  const [pw, setPw] = useLoginState('demo1234');
  return (
    <div style={{ display: 'flex', height: '100%', background: 'var(--bg-1)' }}>
      {/* brand panel */}
      <div className="adflex-dark" style={{ width: '46%', background: 'var(--ink-950)', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 48 }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px)', backgroundSize: '26px 26px' }} />
        <div style={{ position: 'absolute', top: -120, right: -90, width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(221,16,0,.38), transparent 68%)' }} />
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo size={26} light />
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em', color: 'var(--ink-500)', textTransform: 'uppercase', borderLeft: '1px solid var(--ink-700)', paddingLeft: 10 }}>by AdFlex</span>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(221,16,0,.14)', color: 'var(--red-300)', fontSize: 12, fontWeight: 700, letterSpacing: '.06em', marginBottom: 22 }}>
            <Icon name="sparkles" size={14} /> TRỢ LÝ THUẾ AI
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, color: '#fff', lineHeight: 1.12, letterSpacing: '-.02em', margin: 0 }}>
            Hiểu đúng nghĩa vụ thuế.<br /><span style={{ color: 'var(--red-400)' }}>Tối ưu</span> từng đồng.
          </h2>
          <p style={{ color: 'var(--ink-300)', fontSize: 15.5, lineHeight: 1.65, marginTop: 18, maxWidth: 400 }}>
            Hỏi đáp tức thì về thuế cho hộ kinh doanh & freelancer. Khi cần, đặt lịch chuyên gia chỉ trong vài chạm.
          </p>
        </div>
        <div style={{ position: 'relative', display: 'flex', gap: 32 }}>
          {[['12k+', 'Người dùng'], ['98%', 'Câu hỏi giải đáp'], ['200+', 'Chuyên gia']].map(([v, l]) => (
            <div key={l}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: '#fff' }}>{v}</div><div style={{ color: 'var(--ink-500)', fontSize: 12, fontWeight: 600, marginTop: 2 }}>{l}</div></div>
          ))}
        </div>
      </div>
      {/* form */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
        <div style={{ width: 366 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 27, letterSpacing: '-.01em' }}>Chào mừng trở lại</div>
          <div style={{ color: 'var(--fg-2)', fontSize: 14.5, marginTop: 6 }}>Đăng nhập để tiếp tục với trợ lý Taxai.</div>
          <LoginField label="Email" icon="mail" value={email} onChange={setEmail} />
          <LoginField label="Mật khẩu" icon="lock" value={pw} onChange={setPw} type="password" />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '14px 0 22px' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 13.5, color: 'var(--fg-2)', fontWeight: 600, cursor: 'pointer' }}>
              <input type="checkbox" defaultChecked style={{ accentColor: 'var(--brand)', width: 15, height: 15 }} />Ghi nhớ đăng nhập
            </label>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--brand)', fontSize: 13.5, fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap' }}>Quên mật khẩu?</a>
          </div>
          <Btn variant="primary" iconRight="arrow-right" glow style={{ width: '100%', padding: 13 }} onClick={onLogin}>Đăng nhập</Btn>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--border-1)' }} /><span style={{ fontSize: 12, color: 'var(--fg-3)', fontWeight: 600 }}>hoặc</span><div style={{ flex: 1, height: 1, background: 'var(--border-1)' }} />
          </div>
          <Btn variant="secondary" icon="smartphone" style={{ width: '100%', padding: 12 }} onClick={onLogin}>Tiếp tục bằng số điện thoại</Btn>
          <div style={{ textAlign: 'center', marginTop: 22, fontSize: 13.5, color: 'var(--fg-2)' }}>
            Chưa có tài khoản? <a href="#" onClick={(e) => { e.preventDefault(); onLogin(); }} style={{ color: 'var(--brand)', fontWeight: 700, textDecoration: 'none' }}>Đăng ký miễn phí</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function LoginField({ label, icon, value, onChange, type = 'text' }) {
  const [f, setF] = useLoginState(false);
  return (
    <div style={{ marginTop: 18 }}>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--fg-2)', marginBottom: 7 }}>{label}</label>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, border: '1px solid', borderColor: f ? 'var(--brand)' : 'var(--border-2)', boxShadow: f ? '0 0 0 3px var(--danger-bg)' : 'none', borderRadius: 'var(--r-md)', padding: '11px 13px', background: 'var(--surface)', transition: 'all var(--dur)' }}>
        <Icon name={icon} size={17} color="var(--fg-3)" />
        <input type={type} value={value} onChange={(e) => onChange(e.target.value)} onFocus={() => setF(true)} onBlur={() => setF(false)}
          style={{ border: 0, outline: 0, background: 'transparent', flex: 1, fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg-1)' }} />
      </div>
    </div>
  );
}
window.Login = Login;