/* Login screen — minimalista.
   • SVG orb HeyDigi fullscreen background com parallax do cursor
   • Logo Digidelta AI grande, centrado
   • Auth via @digidelta.pt (SSO Microsoft real)
   • Sem topbar/footer/telemetria. */

const LoginScreen = ({ onLogin, fadingOut }) => {
  const [msBusy, setMsBusy] = React.useState(false);
  // Parallax: -1..+1 normalizado da posição do cursor
  const [parallax, setParallax] = React.useState({ x: 0, y: 0 });

  // Detectar erros vindos do callback OAuth2
  const _urlError = new URLSearchParams(window.location.search).get('error');

  const handleMs = () => {
    setMsBusy(true);
    window.location.href = '/auth/login';
  };

  // Track cursor for parallax
  React.useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth) * 2 - 1;
      const y = (e.clientY / window.innerHeight) * 2 - 1;
      setParallax({ x, y });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: '#05070d',
      color: '#E5E7EB',
      fontFamily: 'var(--font-body, Inter), system-ui, sans-serif',
      overflow: 'hidden',
      opacity: fadingOut ? 0 : 1,
      transition: 'opacity 0.42s ease',
    }}>
      {/* ── BACKGROUND LAYERS ── */}
      {/* Vignette subtil para profundidade */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, rgba(99,102,241,0.06), transparent 60%)',
        pointerEvents: 'none',
      }} />

      {/* ── CENTRE STACK ── */}
      <main style={{
        position: 'absolute', inset: 0, zIndex: 2,
        display: 'grid', placeItems: 'center',
        padding: '40px 24px',
      }}>
        <div style={{
          width: 560, maxWidth: '94vw',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36,
          transform: 'scale(1)',
          
          transition: 'transform 0.38s ease, opacity 0.38s ease',
        }}>

          {/* Logo Digidelta + AI lockup — fixo, sem parallax (foreground estável) */}
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 22,
              filter: 'drop-shadow(0 12px 40px rgba(99,102,241,0.22))',
            }}>
              <img
                src="assets/digidelta-light.png"
                alt="Digidelta"
                style={{
                  width: 320, maxWidth: '60vw',
                  height: 'auto',
                }}
              />
              <div style={{
                fontFamily: 'var(--font-display, "Rajdhani"), Inter, sans-serif',
                fontSize: 84, fontWeight: 600,
                letterSpacing: '0.04em',
                color: 'transparent',
                backgroundImage: 'linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #ec4899 100%)',
                WebkitBackgroundClip: 'text',
                backgroundClip: 'text',
                lineHeight: 1,
                paddingLeft: 18,
                borderLeft: '2px solid rgba(148,163,184,0.25)',
              }}>
                AI
              </div>
            </div>
            <div style={{
              fontSize: 11, color: '#64748b',
              fontFamily: 'var(--font-mono, ui-monospace)',
              letterSpacing: '0.32em', textTransform: 'uppercase',
              whiteSpace: 'nowrap',
              marginTop: 8,
            }}>
              AI Workspace · v1.0
            </div>
          </div>

          {_urlError && (
            <div style={{
              width: '100%', maxWidth: 460,
              padding: '10px 16px',
              background: 'rgba(239,68,68,0.12)',
              border: '1px solid rgba(239,68,68,0.28)',
              borderRadius: 8,
              fontSize: 13,
              color: '#fca5a5',
              textAlign: 'center',
              lineHeight: 1.5,
            }}>
              {_urlError === 'unauthorized'
                ? 'Acesso não autorizado. Contacta o administrador.'
                : 'Erro de autenticação. Tenta de novo.'}
            </div>
          )}

          {/* Auth section */}
          <div style={{ width: '100%', maxWidth: 460, display: 'flex', flexDirection: 'column', gap: 14 }}>

            {/* Microsoft / @digidelta.pt button */}
            <button
              onClick={handleMs}
              disabled={msBusy}
              style={{
                width: '100%', padding: '15px 18px',
                display: 'flex', alignItems: 'center', gap: 14,
                background: msBusy ? 'rgba(255,255,255,0.06)' : '#fff',
                color: msBusy ? '#94a3b8' : '#0f172a',
                border: '1px solid rgba(148,163,184,0.18)',
                borderRadius: 10,
                cursor: msBusy ? 'wait' : 'pointer',
                transition: 'transform 0.18s, box-shadow 0.18s, background 0.18s',
                boxShadow: '0 14px 40px -16px rgba(0,0,0,0.55)',
              }}
              onMouseEnter={e => !msBusy && (e.currentTarget.style.transform = 'translateY(-1px)')}
              onMouseLeave={e => (e.currentTarget.style.transform = 'none')}
            >
              <svg width="22" height="22" viewBox="0 0 20 20" aria-hidden style={{ flexShrink: 0 }}>
                <rect x="1" y="1" width="8" height="8" fill="#F25022" />
                <rect x="11" y="1" width="8" height="8" fill="#7FBA00" />
                <rect x="1" y="11" width="8" height="8" fill="#00A4EF" />
                <rect x="11" y="11" width="8" height="8" fill="#FFB900" />
              </svg>
              <div style={{ flex: 1, textAlign: 'left', lineHeight: 1.25 }}>
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em' }}>
                  {msBusy ? 'A contactar Microsoft…' : 'Entrar com a tua conta @digidelta.pt'}
                </div>
                <div style={{ fontSize: 11, color: msBusy ? '#64748B' : '#64748B', marginTop: 2 }}>
                  Single Sign-On via Microsoft 365
                </div>
              </div>
              {msBusy && (
                <span style={{
                  width: 16, height: 16, borderRadius: '50%',
                  border: '2px solid #94a3b8', borderTopColor: 'transparent',
                  animation: 'login-spin 0.7s linear infinite',
                }} />
              )}
            </button>

          </div>
        </div>
      </main>


      <style>{`
        @keyframes login-spin { to { transform: rotate(360deg); } }
        @keyframes login-flash {
          0% { opacity: 0; }
          50% { opacity: 1; }
          100% { opacity: 0.4; }
        }
        @keyframes login-orb-spin {
          0%   { transform: rotate(0deg) scale(1); }
          15%  { transform: rotate(28deg) scale(1.04); }
          32%  { transform: rotate(115deg) scale(0.97); }
          50%  { transform: rotate(180deg) scale(1.06); }
          68%  { transform: rotate(248deg) scale(0.98); }
          85%  { transform: rotate(330deg) scale(1.03); }
          100% { transform: rotate(360deg) scale(1); }
        }
        @keyframes login-orb-pulse {
          0%, 100% { opacity: 0.92; filter: brightness(1) saturate(1); }
          25%      { opacity: 1;    filter: brightness(1.18) saturate(1.15); }
          50%      { opacity: 0.78; filter: brightness(0.85) saturate(0.9); }
          75%      { opacity: 1;    filter: brightness(1.12) saturate(1.1); }
        }
        @media (prefers-reduced-motion: reduce) {
          [style*="login-orb-spin"] { animation: none !important; }
        }
      `}</style>
    </div>
  );
};

window.LoginScreen = LoginScreen;