import { cn } from "@/lib/utils";
import { env } from "@/lib/env";

/**
 * Bouton SSO réutilisable (Google, Microsoft, …).
 *
 * IMPORTANT — c'est un `<a href>`, PAS un fetch button :
 * OAuth nécessite un full-page redirect (le browser doit naviguer vers
 * l'écran de consentement du provider avec ses cookies). Un fetch ne
 * peut pas suivre les redirections cross-origin avec cookies.
 *
 * L'URL est construite avec VITE_API_URL pour fonctionner aussi bien
 * en dev (http://localhost:3333) qu'en prod (https://app.rubis...) où
 * nginx reverse-proxy /api/* vers le service rubis-api.
 */
type SsoProvider = "google" | "microsoft";

const LABELS: Record<SsoProvider, string> = {
  google: "Continuer avec Google",
  microsoft: "Continuer avec Microsoft",
};

const LOGOS: Record<SsoProvider, () => JSX.Element> = {
  google: () => <GoogleLogo aria-hidden="true" />,
  microsoft: () => <MicrosoftLogo aria-hidden="true" />,
};

export function SsoButton({
  provider,
  label,
  className,
}: {
  provider: SsoProvider;
  /** Override label (par défaut "Continuer avec X"). */
  label?: string;
  className?: string;
}) {
  const Logo = LOGOS[provider];
  return (
    <a
      href={`${env.VITE_API_URL}/api/v1/auth/${provider}/redirect`}
      className={cn(
        "inline-flex items-center justify-center gap-2.5 w-full",
        "h-11 px-5 rounded-default border border-line bg-white",
        "font-sans text-[14px] font-semibold text-ink",
        "transition-[transform,background,box-shadow] duration-150",
        "hover:bg-cream-2 hover:-translate-y-px hover:shadow-soft",
        "active:translate-y-0",
        "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
        className,
      )}
    >
      <Logo />
      {label ?? LABELS[provider]}
    </a>
  );
}

/** Logo Google officiel — 4 couleurs, 18px. */
function GoogleLogo(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" {...props}>
      <path
        fill="#4285F4"
        d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
      />
      <path
        fill="#34A853"
        d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.836.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"
      />
      <path
        fill="#FBBC05"
        d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"
      />
      <path
        fill="#EA4335"
        d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"
      />
    </svg>
  );
}

/** Logo Microsoft officiel — 4 carrés, 18px. */
function MicrosoftLogo(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg width="18" height="18" viewBox="0 0 23 23" {...props}>
      <path fill="#F25022" d="M1 1h10v10H1z" />
      <path fill="#7FBA00" d="M12 1h10v10H12z" />
      <path fill="#00A4EF" d="M1 12h10v10H1z" />
      <path fill="#FFB900" d="M12 12h10v10H12z" />
    </svg>
  );
}

/** Séparateur "ou" entre la pile SSO et le formulaire email/password. */
export function AuthDivider({ label = "ou" }: { label?: string }) {
  return (
    <div className="flex items-center gap-3 my-4">
      <div className="h-px flex-1 bg-line" />
      <span className="text-[11px] uppercase tracking-[0.1em] text-ink-3">
        {label}
      </span>
      <div className="h-px flex-1 bg-line" />
    </div>
  );
}
