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

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

function LoginPage() {
	const navigate = useNavigate();
	const { data: auth } = useAuth();
	const login = useLogin();
	const setup = useSetup();

	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [error, setError] = useState("");

	const isSetup = auth?.setupRequired ?? false;

	async function handleSubmit(e: React.FormEvent) {
		e.preventDefault();
		setError("");

		try {
			if (isSetup) {
				await setup.mutateAsync({ username, password });
			} else {
				await login.mutateAsync({ username, password });
			}
			navigate({ to: "/" });
		} catch (err) {
			setError((err as Error).message);
		}
	}

	const isPending = login.isPending || setup.isPending;

	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">
					{isSetup ? "Create Account" : "Sign In"}
				</h1>

				<form
					onSubmit={handleSubmit}
					className="bg-white rounded-xl border border-gray-100 p-6 space-y-4"
				>
					{isSetup && (
						<p className="text-sm text-gray-500">
							Create your admin account to manage your gear collection.
						</p>
					)}

					<div>
						<label
							htmlFor="username"
							className="block text-sm font-medium text-gray-700 mb-1"
						>
							Username
						</label>
						<input
							id="username"
							type="text"
							value={username}
							onChange={(e) => setUsername(e.target.value)}
							required
							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
						/>
					</div>

					<div>
						<label
							htmlFor="password"
							className="block text-sm font-medium text-gray-700 mb-1"
						>
							Password
						</label>
						<input
							id="password"
							type="password"
							value={password}
							onChange={(e) => setPassword(e.target.value)}
							required
							minLength={isSetup ? 6 : undefined}
							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
						/>
					</div>

					{error && <p className="text-sm text-red-600">{error}</p>}

					<button
						type="submit"
						disabled={isPending}
						className="w-full py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
					>
						{isPending ? "..." : isSetup ? "Create Account" : "Sign In"}
					</button>
				</form>
			</div>
		</div>
	);
}