import { createFileRoute } from "@tanstack/react-router";
import { DashboardCard } from "../components/DashboardCard";
import { useSetups } from "../hooks/useSetups";
import { useThreads } from "../hooks/useThreads";
import { useTotals } from "../hooks/useTotals";
import { useWeightUnit } from "../hooks/useWeightUnit";
import { useCurrency } from "../hooks/useCurrency";
import { formatPrice, formatWeight } from "../lib/formatters";

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

function DashboardPage() {
	const { data: totals } = useTotals();
	const { data: threads } = useThreads(false);
	const { data: setups } = useSetups();
	const unit = useWeightUnit();
	const currency = useCurrency();

	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: formatWeight(global?.totalWeight ?? null, unit),
						},
						{ label: "Cost", value: formatPrice(global?.totalCost ?? null, currency) },
					]}
					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>
	);
}