/* global React, YUNO_AUTH */
/*
 * Login page — Yuno-branded login card with a single "Sign in with Google"
 * button. The button calls YUNO_AUTH.signIn() which navigates the whole page
 * to Google's auth endpoint. After successful sign-in Google redirects back
 * to this page with the id_token in the URL fragment; auth.js parses it on
 * init() and YUNO_AUTH.onAuthChange fires → AuthWrapper swaps in the
 * dashboard.
 *
 * Why a redirect (not popup/iframe) flow: iOS Safari's ITP blocks the
 * iframe / postMessage paths that GSI button + popup OAuth rely on, so
 * users on iPhone Safari got the sign-in screen but never came back to a
 * signed-in dashboard. A full-page redirect has no iframes and no cross-
 * frame messaging — works on every browser.
 */
(function() {
  const { useEffect, useState } = React;

  function LoginPage({ onAuthSuccess }) {
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
      // Initialize auth — this also handles the case where we just got
      // redirected back from Google (parses #id_token, validates, fires
      // onAuthChange immediately).
      YUNO_AUTH.init();

      YUNO_AUTH.onAuthChange((isSignedIn, user) => {
        if (isSignedIn && user) {
          onAuthSuccess(user);
        } else {
          // We just attempted sign-in but it failed (e.g. wrong domain).
          // Stop the spinner so the user can try again.
          setIsLoading(false);
        }
      });
    }, [onAuthSuccess]);

    const handleSignIn = () => {
      setIsLoading(true);
      // signIn() navigates the page. The spinner shows for the moment
      // between the click and the navigation actually firing.
      YUNO_AUTH.signIn();
    };

    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
        padding: '20px',
      }}>
        <div style={{
          background: 'white',
          borderRadius: '16px',
          padding: '48px 32px',
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1)',
          textAlign: 'center',
          maxWidth: '400px',
          width: '100%',
        }}>
          {/* Yuno logo */}
          <div style={{
            fontSize: '32px',
            fontWeight: 'bold',
            color: '#3E4FE0',
            marginBottom: '8px',
            letterSpacing: '-0.02em',
          }}>
            YUNO
          </div>

          <h1 style={{
            fontSize: '26px',
            fontWeight: '700',
            color: '#1a202c',
            margin: '0 0 8px 0',
            lineHeight: '1.2',
          }}>
            KPI Dashboard 2026
          </h1>

          <p style={{
            fontSize: '15px',
            color: '#64748b',
            margin: '0 0 28px 0',
            lineHeight: '1.5',
          }}>
            Sign in with your Yuno account to access the executive KPI dashboard
          </p>

          {/* Sign-in button. Clicking → navigates to Google. */}
          <button
            onClick={handleSignIn}
            disabled={isLoading}
            style={{
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '12px',
              padding: '14px 20px',
              backgroundColor: '#4285f4',
              color: 'white',
              border: 'none',
              borderRadius: '8px',
              fontSize: '16px',
              fontWeight: '500',
              cursor: isLoading ? 'wait' : 'pointer',
              opacity: isLoading ? 0.7 : 1,
              transition: 'background 0.15s ease, transform 0.1s ease',
              WebkitTapHighlightColor: 'transparent',
            }}
            onMouseOver={e => { if (!isLoading) e.target.style.backgroundColor = '#3367d6'; }}
            onMouseOut={e => { if (!isLoading) e.target.style.backgroundColor = '#4285f4'; }}
          >
            {isLoading ? (
              <>
                <div style={{
                  width: '18px',
                  height: '18px',
                  border: '2px solid rgba(255,255,255,0.3)',
                  borderTop: '2px solid white',
                  borderRadius: '50%',
                  animation: 'spin 0.8s linear infinite',
                }} />
                <span>Redirecting…</span>
              </>
            ) : (
              <>
                {/* Google "G" logo. Inline SVG so it works without a CDN. */}
                <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill="#fff" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path fill="#fff" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path fill="#fff" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                  <path fill="#fff" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
                <span>Sign in with Google</span>
              </>
            )}
          </button>

          <div style={{
            marginTop: '20px',
            padding: '12px 16px',
            backgroundColor: '#f1f5f9',
            borderRadius: '8px',
            fontSize: '13px',
            color: '#475569',
            lineHeight: '1.4',
          }}>
            <strong>Access restricted:</strong>&nbsp;
            Only <code>@y.uno</code> Google accounts can access this dashboard.
          </div>
        </div>

        <style>{`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}</style>
      </div>
    );
  }

  window.YUNO_LOGIN = { LoginPage };
})();