import { buildAuthUrl, saveVerifier } from '../lib/oauth';

const PROVIDERS = [
  { id: 'discord', label: 'Discord',  emoji: '🎮' },
  { id: 'github',  label: 'GitHub',   emoji: '🐙' },
  { id: 'google',  label: 'Google',   emoji: '🌐' },
  { id: 'twitch',  label: 'Twitch',   emoji: '🎬' },
];

export function LoginPage() {
  const login = async (provider: string) => {
    const redirectUri = `${window.location.origin}/auth/callback`;
    const { url, verifier } = await buildAuthUrl(redirectUri, provider);
    saveVerifier(verifier);
    window.location.href = url;
  };

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'radial-gradient(ellipse at 50% 0%, #1a1f2e 0%, #0d0f14 60%)',
    }}>
      <div style={{ textAlign: 'center', maxWidth: 380, width: '100%', padding: '0 1rem' }}>
        {/* Logo */}
        <div style={{ marginBottom: 32 }}>
          <div style={{ fontSize: 64, marginBottom: 8 }}>🐸</div>
          <h1 style={{ margin: 0, fontSize: 36, fontWeight: 900, color: '#f4c94e', letterSpacing: '-1px' }}>TetaRdPG</h1>
          <p style={{ margin: '8px 0 0', color: '#6b7a99', fontSize: 14 }}>
            RPG communautaire asynchrone
          </p>
        </div>

        {/* Card login */}
        <div className="card" style={{ padding: '1.5rem' }}>
          <p style={{ margin: '0 0 1.25rem', color: '#9ca3af', fontSize: 13 }}>
            Connecte-toi pour commencer ton aventure
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {PROVIDERS.map(p => (
              <button
                key={p.id}
                onClick={() => login(p.id)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  padding: '0.625rem 1rem',
                  background: '#1e2535',
                  border: '1px solid #2a3448',
                  borderRadius: 8,
                  color: '#dce4f0',
                  cursor: 'pointer',
                  fontSize: 14,
                  fontWeight: 600,
                  transition: 'border-color 0.2s',
                  width: '100%',
                }}
                onMouseEnter={e => (e.currentTarget.style.borderColor = '#f4c94e')}
                onMouseLeave={e => (e.currentTarget.style.borderColor = '#2a3448')}
              >
                <span style={{ fontSize: 18 }}>{p.emoji}</span>
                <span>Continuer avec {p.label}</span>
              </button>
            ))}
          </div>
        </div>

        <p style={{ marginTop: 20, fontSize: 11, color: '#3a4558' }}>
          En te connectant, tu acceptes les règles de la taverne du Têtard Prophétique.
        </p>
      </div>
    </div>
  );
}
