import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect } from "react";
import { useAuth } from "../hooks/useAuth";

export const Route = createFileRoute("/login")({
	component: LoginPage,
});

function LoginPage() {
	const navigate = useNavigate();
	const { data: auth, isLoading } = useAuth();

	useEffect(() => {
		if (auth?.authenticated) {
			navigate({ to: "/" });
		}
	}, [auth, navigate]);

	if (isLoading) {
		return (
			<div className="min-h-screen bg-gray-50 flex items-center justify-center">
				<p className="text-gray-500 text-sm">Loading...</p>
			</div>
		);
	}

	return (
		<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
			<div className="w-full max-w-sm">
				<h1 className="text-xl font-semibold text-gray-900 text-center mb-6">
					Sign in to GearBox
				</h1>
				<div className="bg-white rounded-xl border border-gray-100 p-6 space-y-4">
					<p className="text-sm text-gray-500 text-center">
						You will be redirected to sign in with your account.
					</p>
					<button
						type="button"
						onClick={() => {
							window.location.href = "/login";
						}}
						className="w-full py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
					>
						Sign In
					</button>
				</div>
			</div>
		</div>
	);
}
