"use client";

import { Egg, Loader2, Tv } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { authApi } from "@/lib/api";
import { useStore } from "@/lib/store";

export default function LoginPage() {
	const router = useRouter();
	const { isAuthenticated } = useStore();
	const [isLoading, setIsLoading] = useState(false);
	const [isMounted, setIsMounted] = useState(false);

	useEffect(() => {
		setIsMounted(true);
	}, []);

	useEffect(() => {
		if (isAuthenticated) {
			router.push("/dashboard");
		}
	}, [isAuthenticated, router]);

	const handlePlexLogin = async () => {
		setIsLoading(true);
		try {
			const response = await authApi.getPlexUrl();
			sessionStorage.setItem("plexPinId", response.data.pinId);
			window.location.href = response.data.authUrl;
		} catch (error) {
			toast.error("Failed to initiate Plex login");
			console.error(error);
			setIsLoading(false);
		}
	};

	if (!isMounted) {
		return (
			<div className="min-h-screen flex items-center justify-center bg-background p-4">
				<Card className="w-full max-w-md">
					<CardHeader className="text-center">
						<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
							<Egg className="w-8 h-8 text-primary" />
						</div>
						<CardTitle className="text-2xl font-display">The Coop</CardTitle>
						<CardDescription>Loading...</CardDescription>
					</CardHeader>
				</Card>
			</div>
		);
	}

	return (
		<div className="min-h-screen flex items-center justify-center bg-background p-4">
			<Card className="w-full max-w-md border-2">
				<CardHeader className="text-center">
					<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
						<Egg className="w-8 h-8 text-primary" />
					</div>
					<CardTitle className="text-2xl font-display">
						Enter the Coop
					</CardTitle>
					<CardDescription>
						Sign in with Plex to start earning $COOP tokens
					</CardDescription>
				</CardHeader>
				<CardContent>
					<Button
						onClick={handlePlexLogin}
						disabled={isLoading}
						className="w-full h-12 text-lg"
					>
						{isLoading ? (
							<>
								<Loader2 className="mr-2 h-5 w-5 animate-spin" />
								Connecting...
							</>
						) : (
							<>
								<Tv className="mr-2 h-5 w-5" />
								Sign in with Plex
							</>
						)}
					</Button>
					<p className="mt-4 text-center text-sm text-muted-foreground">
						Join the flock and get rewarded for your watch time
					</p>
					<p className="mt-2 text-center text-xs text-muted-foreground">
						<a
							href="/privacy"
							className="underline hover:text-primary transition-colors"
						>
							Privacy Policy
						</a>
					</p>
				</CardContent>
			</Card>
		</div>
	);
}