/* 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);

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

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

  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 VIDEO ── loop contínuo */}
      <video
        aria-hidden
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover',
          zIndex: 0,
          pointerEvents: 'none',
        }}
      >
        <source src="assets/login-bg.mp4" type="video/mp4" />
      </video>

      {/* Gradient subtil só para legibilidade do texto no fundo */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, rgba(5,7,13,0.15) 0%, rgba(5,7,13,0.35) 100%)',
        pointerEvents: 'none',
      }} />

      {/* ── LOGO ── centrado em altura e largura do viewport */}
      <img
        src="assets/logo-digidelta.svg"
        alt="Digidelta"
        style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          zIndex: 2,
          width: 560, maxWidth: '88vw',
          height: 'auto',
          filter: 'drop-shadow(0 10px 32px rgba(0,0,0,0.5))',
          pointerEvents: 'none',
        }}
      />

      {/* ── BLOCO INFERIOR ── começa logo abaixo do logo. CTAs centrados em altura entre base do logo e topo do disclaimer */}
      <main style={{
        position: 'absolute', left: 0, right: 0,
        top: 'calc(50% + 80px)', bottom: 0,
        zIndex: 2,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: '0 24px 16px',
      }}>

        {_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,
            marginBottom: 12,
          }}>
            {_urlError === 'unauthorized'
              ? 'Acesso não autorizado. Contacta o administrador.'
              : 'Erro de autenticação. Tenta de novo.'}
          </div>
        )}

        {/* Auth section — flex:1 centra os CTAs em altura entre topo do bloco (base do logo) e topo do disclaimer */}
        <div style={{
          flex: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          width: '100%',
        }}>
          <div style={{
            display: 'flex', flexDirection: 'row', alignItems: 'stretch',
            gap: 14, flexWrap: 'wrap', justifyContent: 'center',
            width: '100%', maxWidth: 560,
          }}>

            {/* Microsoft / @digidelta.pt — colaboradores */}
            <button
              onClick={handleMs}
              disabled={msBusy}
              style={{
                flex: '1 1 240px', minWidth: 0,
                padding: '12px 16px',
                display: 'flex', alignItems: 'center', gap: 12,
                background: 'rgba(255,255,255,0.04)',
                color: '#fff',
                border: '1px solid rgba(255,255,255,0.85)',
                borderRadius: 12,
                cursor: msBusy ? 'wait' : 'pointer',
                transition: 'transform 0.18s, background 0.18s',
                backdropFilter: 'blur(6px)',
                WebkitBackdropFilter: 'blur(6px)',
                boxShadow: '0 14px 40px -16px rgba(0,0,0,0.55)',
                opacity: msBusy ? 0.7 : 1,
                textAlign: 'left',
              }}
              onMouseEnter={e => {
                if (msBusy) return;
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.background = 'rgba(255,255,255,0.10)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = 'none';
                e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
              }}
            >
              <svg width="18" height="18" 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, fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em', color: '#fff' }}>
                {msBusy ? 'A contactar Microsoft…' : 'Entrar @digidelta.pt'}
              </div>
              {msBusy && (
                <span style={{
                  width: 14, height: 14, borderRadius: '50%',
                  border: '2px solid rgba(255,255,255,0.85)', borderTopColor: 'transparent',
                  animation: 'login-spin 0.7s linear infinite',
                }} />
              )}
            </button>

            {/* CTA — não és da Digidelta? */}
            <a
              href="https://www.digidelta.pt"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                flex: '1 1 240px', minWidth: 0,
                padding: '12px 16px',
                display: 'flex', alignItems: 'center', gap: 12,
                background: 'transparent',
                color: '#fff',
                border: '1px dashed rgba(255,255,255,0.55)',
                borderRadius: 12,
                cursor: 'pointer',
                transition: 'transform 0.18s, background 0.18s, border-color 0.18s',
                backdropFilter: 'blur(6px)',
                WebkitBackdropFilter: 'blur(6px)',
                textDecoration: 'none',
                textAlign: 'left',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.85)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = 'none';
                e.currentTarget.style.background = 'transparent';
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.55)';
              }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0, color: 'rgba(255,255,255,0.85)' }}>
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" fill="none"/>
                <path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.5V14" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
                <circle cx="12" cy="17" r="1" fill="currentColor"/>
              </svg>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em', color: '#fff' }}>
                Não és da Digidelta?
              </div>
            </a>

          </div>
        </div>

        {/* Disclaimer — antes do copyright, no fundo do bloco */}
        <div style={{
          fontSize: 11, lineHeight: 1.5, maxWidth: 720,
          textAlign: 'center',
          color: 'rgba(255,255,255,0.55)',
          padding: '0 16px',
          marginBottom: 8,
        }}>
          O acesso a esta plataforma é restrito a colaboradores da Digidelta. Toda a actividade é registada para fins de segurança e conformidade. Os dados tratados nesta plataforma estão sujeitos à política de privacidade interna e ao RGPD.
        </div>

        {/* Copyright — linha fina no fundo */}
        <div style={{
          textAlign: 'center',
          fontSize: 10, color: 'rgba(255,255,255,0.4)',
          letterSpacing: '0.04em',
        }}>
          © 2026 Digidelta · Todos os direitos reservados · AI Workspace v1.0
        </div>
      </main>


      <style>{`
        @keyframes login-spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
};

window.LoginScreen = LoginScreen;