// login.jsx — split-screen login. CHỈ đăng nhập bằng Google @swo.vn (đã bỏ mật khẩu + "Demo nhanh").
// Lọc domain @swo.vn enforce ở app-level (main.jsx) — KHÔNG đặt cấp project vì Supabase dùng chung.
function Login({ branding }) {
  const { t, lang, setLang } = useLang();
  const toast = useToast();
  const b = Object.assign({}, (typeof DEFAULT_BRANDING !== 'undefined' ? DEFAULT_BRANDING : {}), branding || {});

  // Đăng nhập qua Google OAuth. queryParams.hd gợi ý chỉ tài khoản Workspace @swo.vn.
  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, queryParams:{ hd:'swo.vn', prompt:'select_account' } },
    });
    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"><BrandLogo branding={b} size={34} fontSize={12} />{b.name || 'My S.W.O'}</div>
        <div>
          <h2>{t('login.tagline')}</h2>
          <p>{b.description || 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 col" style={{ color:'rgba(255,255,255,.5)', fontSize:'var(--fs-sm)', gap:3 }}>
          {(b.contactEmail || b.contactPhone) && (
            <span>{[b.contactEmail, b.contactPhone].filter(Boolean).join(' · ')}</span>
          )}
          <span>{b.copyright || '© 2026 S.W.O Technology · Smart Works · Optimal & Simple'}</span>
        </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>

          {window.SWO_CONFIG.IS_DEMO ? (
            /* DEMO: đăng nhập nhanh theo vai trò (demo/demo-ui.jsx) — project demo không cấu hình Google provider */
            <DemoLoginButtons />
          ) : (
            <>
              <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>

              <p className="muted" style={{ margin:'14px 0 0', fontSize:'var(--fs-md)' }}>
                {lang === 'vi' ? 'Chỉ đăng nhập bằng tài khoản Google @swo.vn.' : 'Sign in with your @swo.vn Google account only.'}
              </p>
            </>
          )}

          <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 });