"use client";

import { motion } from "framer-motion";
import { CalendarDays, Loader2 } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { signIn, useSession } from "@/lib/auth-client";
import type { SignInProvider } from "@/lib/get-sign-in-providers";

// ---------------------------------------------------------------------------
// Provider icon components — inline SVGs keep the bundle lean and avoid
// external CDN requests. Official brand colours per brand guidelines.
// ---------------------------------------------------------------------------

function GoogleIcon({ className }: { className?: string }) {
	return (
		<svg
			viewBox="0 0 24 24"
			aria-hidden="true"
			className={className}
			fill="none"
		>
			<path
				d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
				fill="#4285F4"
			/>
			<path
				d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
				fill="#34A853"
			/>
			<path
				d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
				fill="#FBBC05"
			/>
			<path
				d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
				fill="#EA4335"
			/>
		</svg>
	);
}

function AppleIcon({ className }: { className?: string }) {
	return (
		<svg
			viewBox="0 0 24 24"
			aria-hidden="true"
			className={className}
			fill="currentColor"
		>
			<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
		</svg>
	);
}

function AuthentikIcon({ className }: { className?: string }) {
	// Generic key/lock icon for Authentik (no official SVG logo required)
	return (
		<svg
			viewBox="0 0 24 24"
			aria-hidden="true"
			className={className}
			fill="none"
			stroke="currentColor"
			strokeWidth="2"
			strokeLinecap="round"
			strokeLinejoin="round"
		>
			<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" />
		</svg>
	);
}

const PROVIDER_ICONS: Record<
	string,
	React.ComponentType<{ className?: string }>
> = {
	google: GoogleIcon,
	apple: AppleIcon,
	authentik: AuthentikIcon,
};

// ---------------------------------------------------------------------------

interface SignInFormProps {
	providers: SignInProvider[];
}

export function SignInForm({ providers }: SignInFormProps) {
	const { data: session, isPending } = useSession();
	const router = useRouter();
	const [loadingId, setLoadingId] = useState<string | null>(null);

	useEffect(() => {
		if (session?.user) {
			router.push("/");
		}
	}, [session, router]);

	const handleSignIn = async (provider: SignInProvider) => {
		setLoadingId(provider.id);
		try {
			if (provider.signInMethod === "social") {
				await signIn.social({
					provider: provider.id as
						| "google"
						| "apple"
						| "github"
						| "discord"
						| "spotify"
						| "twitch"
						| "facebook"
						| "microsoft"
						| "github",
					callbackURL: "/",
				});
			} else {
				await signIn.oauth2({
					providerId: provider.id,
					callbackURL: "/",
				});
			}
		} catch {
			toast.error(
				`Failed to sign in with ${provider.label}. Please try again.`,
			);
		} finally {
			setLoadingId(null);
		}
	};

	if (isPending || session?.user) {
		return null;
	}

	const isAnyLoading = loadingId !== null;

	return (
		<div className="min-h-dvh flex items-center justify-center p-4">
			<motion.div
				initial={{ opacity: 0, y: 16 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.3 }}
				className="w-full max-w-sm rounded-[10px] bg-card p-8 shadow-xl"
			>
				{/* Header */}
				<div className="flex items-center justify-center gap-2 mb-2">
					<CalendarDays className="h-6 w-6 text-primary" aria-hidden="true" />
					<h1 className="text-xl font-semibold tracking-[-0.04em]">
						Local Calendar
					</h1>
				</div>

				<p className="text-sm text-muted-foreground text-center mb-7">
					Sign in to keep AI capture and your event timeline in sync
				</p>

				{/* Provider buttons */}
				{providers.length > 0 ? (
					<div className="flex flex-col gap-3">
						{providers.map((provider) => {
							const Icon = PROVIDER_ICONS[provider.id];
							const isLoading = loadingId === provider.id;

							return (
								<Button
									key={provider.id}
									variant="outline"
									className="w-full h-11 gap-3 justify-center font-medium cursor-pointer transition-colors"
									onClick={() => handleSignIn(provider)}
									disabled={isAnyLoading}
									aria-label={`Sign in with ${provider.label}`}
								>
									{isLoading ? (
										<Loader2 className="h-4 w-4 animate-spin shrink-0" />
									) : Icon ? (
										<Icon className="h-5 w-5 shrink-0" />
									) : null}
									<span>
										{isLoading
											? "Signing in…"
											: `Continue with ${provider.label}`}
									</span>
								</Button>
							);
						})}
					</div>
				) : (
					<p className="text-sm text-muted-foreground text-center py-2">
						No sign-in providers configured.
					</p>
				)}

				{/* Divider + guest link */}
				<div className="mt-6 border-t border-border/60 pt-5 text-center">
					<Link
						href="/"
						className="text-xs text-muted-foreground hover:text-foreground transition-colors"
					>
						Continue without signing in
					</Link>
				</div>
			</motion.div>
		</div>
	);
}
