import { createFileRoute } from "@tanstack/react-router";
import { DashboardCard } from "../components/DashboardCard";
import { useFormatters } from "../hooks/useFormatters";
import { useSetups } from "../hooks/useSetups";
import { useThreads } from "../hooks/useThreads";
import { useTotals } from "../hooks/useTotals";

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

function DashboardPage() {
	const { data: totals } = useTotals();
	const { data: threads } = useThreads(false);
	const { data: setups } = useSetups();
	const { weight, price } = useFormatters();

	const global = totals?.global;
	const activeThreadCount = threads?.length ?? 0;
	const setupCount = setups?.length ?? 0;

	return (
		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
			<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
				<DashboardCard
					to="/collection"
					title="Collection"
					icon="backpack"
					stats={[
						{ label: "Items", value: String(global?.itemCount ?? 0) },
						{
							label: "Weight",
							value: weight(global?.totalWeight ?? null),
						},
						{
							label: "Cost",
							value: price(global?.totalCost ?? null),
						},
					]}
					emptyText="Get started"
				/>
				<DashboardCard
					to="/collection"
					search={{ tab: "planning" }}
					title="Planning"
					icon="search"
					stats={[
						{ label: "Active threads", value: String(activeThreadCount) },
					]}
				/>
				<DashboardCard
					to="/collection"
					search={{ tab: "setups" }}
					title="Setups"
					icon="tent"
					stats={[{ label: "Setups", value: String(setupCount) }]}
				/>
			</div>
		</div>
	);
}