import {useState, ChangeEvent} from "react";
import {useNavigate} from "react-router-dom";
import {useAuth} from "@/context/AuthContext";

import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {Button} from "@/components/ui/button";

export default function Login() {
	const navigate = useNavigate();
	const {login} = useAuth();

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

	async function handleLogin() {
		try {
			setLoading(true);
			setError("");

			await login(username, password);

			navigate("/dashboard");
		} catch (err) {
			setError("Invalid credentials");
		}

		setLoading(false);
	}

	return (
		<div className="flex min-h-screen items-center justify-center bg-slate-100">
			<Card className="w-[420px] shadow-xl border">
				<CardHeader className="space-y-1 text-center">
					<CardTitle className="text-2xl font-semibold">Admin Login</CardTitle>

					<p className="text-sm text-muted-foreground">
						Enter your credentials to access the dashboard
					</p>
				</CardHeader>

				<CardContent className="space-y-5">
					{error && (
						<div className="p-3 text-sm text-red-600 bg-red-100 rounded-md">
							{error}
						</div>
					)}

					<div className="space-y-2">
						<Label htmlFor="username">Username</Label>

						<Input
							id="username"
							placeholder="Enter username"
							value={username}
							onChange={(e: ChangeEvent<HTMLInputElement>) =>
								setUsername(e.target.value)
							}
							disabled={loading}
						/>
					</div>

					<div className="space-y-2">
						<Label htmlFor="password">Password</Label>

						<Input
							id="password"
							type="password"
							placeholder="Enter password"
							value={password}
							onChange={(e: ChangeEvent<HTMLInputElement>) =>
								setPassword(e.target.value)
							}
							disabled={loading}
						/>
					</div>

					<Button
						onClick={handleLogin}
						className="w-full"
						disabled={loading || !username || !password}
					>
						{loading ? "Logging in..." : "Login"}
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}