// login.jsx — split-screen login. Bắt buộc đăng nhập Supabase (đã bỏ "Demo nhanh").
function Login({ onLogin }) {
  const { t, lang, setLang } = useLang();
  const toast = useToast();
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [remember, setRemember] = React.useState(true);
  const [busy, setBusy] = React.useState(false);

  // Đăng nhập thật qua Supabase (GoTrue). Chưa cấu hình → vào thẳng demo (mock).
  const doSignIn = async () => {
    if (!window.SB_READY) { toast(lang === 'vi' ? 'Supabase chưa cấu hình' : 'Supabase not configured', 'error'); return; }
    setBusy(true);
    const { error } = await sb.auth.signInWithPassword({ email, password:pw });
    setBusy(false);
    if (error) { toast(lang === 'vi' ? 'Email hoặc mật khẩu không đúng' : 'Invalid email or password', 'error'); return; }
    onLogin();
  };
  const doGoogle = async () => {
    if (!window.SB_READY) { toast(lang === 'vi' ? 'Supabase chưa cấu hình' : 'Supabase not configured', 'error'); return; }
    const { error } = await sb.auth.signInWithOAuth({ provider:'google', options:{ redirectTo: window.location.href } });
    if (error) toast(error.message, 'error');
  };
  const apps = [
    { icon:'bi-envelope', color:'#1466E0', name:'Email' },
    { icon:'bi-building', color:'#0B4FBF', name:'Khách hàng' },
    { icon:'bi-person-vcard', color:'#C77700', name:'Liên hệ' },
    { icon:'bi-graph-up-arrow', color:'#1F9D57', name:'Cơ hội' },
    { icon:'bi-calendar-check', color:'#0FB0AB', name:'Nghỉ phép' },
  ];
  return (
    <div className="login">
      <div className="login-brand">
        <div className="hero-ph"></div><div className="hero-ov"></div>
        <div className="lb-logo"><span className="swo-mark" style={{ width:34, height:34, fontSize:12 }}>SWO</span>My S.W.O</div>
        <div>
          <h2>{t('login.tagline')}</h2>
          <p>{t('login.heroSub')}</p>
          <div className="lb-thumbs" style={{ marginTop:22 }}>
            {apps.map(a => (
              <div key={a.name} className="lb-thumb"><span className="ic" style={{ background:a.color }}><i className={'bi ' + a.icon}></i></span>{a.name}</div>
            ))}
          </div>
        </div>
        <div className="subtle" style={{ color:'rgba(255,255,255,.45)', fontSize:'var(--fs-sm)' }}>© 2026 S.W.O Technology · Smart Works · Optimal & Simple</div>
      </div>

      <div style={{ position:'relative' }}>
        <div className="login-form">
          <h1>{t('login.title')}</h1>
          <p className="muted" style={{ margin:'0 0 22px' }}>{t('login.sub')}</p>

          <button className="sso-btn" onClick={doGoogle}>
            <svg className="gicon" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.6 30.2 0 24 0 14.6 0 6.4 5.4 2.5 13.3l7.9 6.1C12.2 13.6 17.6 9.5 24 9.5z"/><path fill="#4285F4" d="M46.1 24.6c0-1.6-.1-2.8-.4-4.1H24v7.8h12.4c-.3 2.1-1.6 5.2-4.6 7.3l7.1 5.5c4.2-3.9 6.6-9.6 6.6-16.5z"/><path fill="#FBBC05" d="M10.4 28.6c-.5-1.5-.8-3-.8-4.6s.3-3.1.8-4.6l-7.9-6.1C.9 16.5 0 20.1 0 24s.9 7.5 2.5 10.7l7.9-6.1z"/><path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.1-5.5c-2 1.3-4.6 2.3-8.8 2.3-6.4 0-11.8-4.1-13.6-9.9l-7.9 6.1C6.4 42.6 14.6 48 24 48z"/></svg>
            {t('login.google')}
          </button>

          <div className="or">{lang === 'vi' ? 'hoặc' : 'or'}</div>

          <div className="col g16">
            <Field label={t('login.email')}>
              <input className="input" value={email} onChange={e => setEmail(e.target.value)} type="email" />
            </Field>
            <Field label={t('login.password')}>
              <input className="input" value={pw} onChange={e => setPw(e.target.value)} type="password" />
            </Field>
            <div className="flex items-center justify-between">
              <label className="flex items-center g8" style={{ fontSize:'var(--fs-md)', cursor:'pointer' }}>
                <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />{t('login.remember')}
              </label>
              <a href="#" className="muted" style={{ fontSize:'var(--fs-md)' }} onClick={e => e.preventDefault()}>{t('login.forgot')}</a>
            </div>
            <button className="btn btn-primary btn-lg" onClick={doSignIn} disabled={busy}>{busy ? '…' : t('login.signin')}</button>
          </div>

          <div className="flex items-center g8" style={{ marginTop:24, justifyContent:'center' }}>
            <Segmented value={lang} onChange={setLang} options={[{ value:'vi', label:'Tiếng Việt' }, { value:'en', label:'English' }]} />
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Login });