import { Link } from 'react-router-dom';

const PROVIDERS = [
  { id: 'discord', label: 'Discord' },
  { id: 'github',  label: 'GitHub'  },
  { id: 'google',  label: 'Google'  },
  { id: 'twitch',  label: 'Twitch'  },
] as const;

export default function LoginPage() {
  const base = import.meta.env.VITE_SUPEROAUTH_URL;
  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');

  return (
    <div className="flex flex-col items-center gap-8 pt-20">
      <div className="flex flex-col items-center gap-2">
        <span className="font-mono text-xs font-bold tracking-widest text-od-accent">OD</span>
        <h1 className="text-xl font-semibold text-od-text">Connexion</h1>
        <p className="text-sm text-od-muted">Choisis ton provider pour continuer</p>
      </div>

      <div className="flex w-full max-w-xs flex-col gap-3">
        {PROVIDERS.map(({ id, label }) => (
          <a
            key={id}
            href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${redirectUrl}`}
            className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-3 text-sm text-od-text transition-colors hover:border-od-accent hover:text-od-accent"
          >
            {label}
          </a>
        ))}
      </div>

      <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
        ← Retour
      </Link>
    </div>
  );
}