/* YeYe Expat Portal — Login screen (Google sign-in gate) */

function LoginScreen({ error, checking }) {
  const { t } = useT();
  const [busy, setBusy] = useState(false);
  const cfg = window.YEYE_AUTH.configured();
  const onClick = () => {
    setBusy(true);
    window.YEYE_AUTH.signIn();
    setTimeout(() => setBusy(false), 4000);
  };
  const showSpinner = busy || checking;
  const label = checking ? 'Verifying YeYe access…' : (busy ? 'Opening Google…' : 'Continue with Google');
  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--surface, #f7f6f1)', padding: 24,
    }}>
      <div style={{
        width: 'min(420px, 100%)', background: 'var(--surface-2, #fff)',
        border: '1px solid var(--line, #e5e3da)', borderRadius: 20,
        padding: '36px 32px', textAlign: 'center',
        boxShadow: '0 24px 60px -24px rgba(10,14,19,.18), 0 6px 14px -4px rgba(10,14,19,.06)',
      }}>
        <div style={{ width: 64, height: 64, margin: '0 auto 18px', borderRadius: 18, background: 'var(--brand-50,#fbeede)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <BrandLogo mini />
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0 }}>YeYe Expat Centre</h1>
        <p style={{ marginTop: 8, color: 'var(--muted, #6b7280)', fontSize: 14 }}>
          Continue with your Google account.
        </p>

        {error && (
          <div className="alert bad" style={{ marginTop: 18, textAlign: 'left' }}>
            <div className="a-ic"><Icon name="alert-triangle" size={16} /></div>
            <div className="grow"><div className="a-t">{error}</div></div>
          </div>
        )}

        {!cfg && (
          <div className="alert warn" style={{ marginTop: 18, textAlign: 'left' }}>
            <div className="a-ic"><Icon name="info" size={16} /></div>
            <div className="grow">
              <div className="a-t">Google OAuth not yet configured</div>
              <div className="a-s">Replace GOOGLE_CLIENT_ID in auth.js to enable sign-in.</div>
            </div>
          </div>
        )}

        <button
          onClick={onClick}
          disabled={showSpinner || !cfg}
          style={{
            marginTop: 24, width: '100%', height: 48, borderRadius: 12,
            background: '#0f1115', color: '#fff', fontSize: 14.5, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            border: '1px solid #0f1115', cursor: cfg && !showSpinner ? 'pointer' : 'not-allowed',
            opacity: cfg ? 1 : 0.6,
          }}>
          {checking
            ? <Icon name="loader" size={18} className="spin" />
            : (<svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
                <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3.1l5.7-5.7C34 6 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z"/>
                <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.8 1.2 8 3.1l5.7-5.7C34 6 29.3 4 24 4 16.3 4 9.6 8.3 6.3 14.7z"/>
                <path fill="#4CAF50" d="M24 44c5.2 0 10-2 13.6-5.2l-6.3-5.2c-2 1.4-4.6 2.4-7.3 2.4-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z"/>
                <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.1 4.1-3.9 5.5l6.3 5.2C41.9 35.6 44 30.2 44 24c0-1.3-.1-2.4-.4-3.5z"/>
              </svg>)}
          {label}
        </button>

        <p style={{ marginTop: 18, color: 'var(--muted, #6b7280)', fontSize: 11.5, lineHeight: 1.6 }}>
          We will request access to Calendar, Gmail, Tasks, Drive and Sheets to sync your case data.
          Only YeYe-registered expats can sign in.
        </p>
      </div>
    </div>
  );
}