import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { CategoryHeader } from "../../components/CategoryHeader";
import { CreateThreadModal } from "../../components/CreateThreadModal";
import { ItemCard } from "../../components/ItemCard";
import { ThreadCard } from "../../components/ThreadCard";
import { ThreadTabs } from "../../components/ThreadTabs";
import { useCategories } from "../../hooks/useCategories";
import { useItems } from "../../hooks/useItems";
import { useThreads } from "../../hooks/useThreads";
import { useTotals } from "../../hooks/useTotals";
import { LucideIcon } from "../../lib/iconData";
import { useUIStore } from "../../stores/uiStore";

const searchSchema = z.object({
	tab: z.enum(["gear", "planning"]).catch("gear"),
});

export const Route = createFileRoute("/collection/")({
	validateSearch: searchSchema,
	component: CollectionPage,
});

function CollectionPage() {
	const { tab } = Route.useSearch();
	const navigate = useNavigate();

	function handleTabChange(newTab: "gear" | "planning") {
		navigate({ to: "/collection", search: { tab: newTab } });
	}

	return (
		<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
			<ThreadTabs active={tab} onChange={handleTabChange} />
			<div className="mt-6">
				{tab === "gear" ? <CollectionView /> : <PlanningView />}
			</div>
		</div>
	);
}

function CollectionView() {
	const { data: items, isLoading: itemsLoading } = useItems();
	const { data: totals } = useTotals();
	const openAddPanel = useUIStore((s) => s.openAddPanel);

	if (itemsLoading) {
		return (
			<div className="animate-pulse space-y-6">
				<div className="h-6 bg-gray-200 rounded w-48" />
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
					{[1, 2, 3].map((i) => (
						<div key={i} className="h-40 bg-gray-200 rounded-xl" />
					))}
				</div>
			</div>
		);
	}

	if (!items || items.length === 0) {
		return (
			<div className="py-16 text-center">
				<div className="max-w-md mx-auto">
					<div className="mb-4">
						<LucideIcon
							name="backpack"
							size={48}
							className="text-gray-400 mx-auto"
						/>
					</div>
					<h2 className="text-xl font-semibold text-gray-900 mb-2">
						Your collection is empty
					</h2>
					<p className="text-sm text-gray-500 mb-6">
						Start cataloging your gear by adding your first item. Track weight,
						price, and organize by category.
					</p>
					<button
						type="button"
						onClick={openAddPanel}
						className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
					>
						<svg
							aria-hidden="true"
							className="w-4 h-4"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={2}
								d="M12 4v16m8-8H4"
							/>
						</svg>
						Add your first item
					</button>
				</div>
			</div>
		);
	}

	// Group items by categoryId
	const groupedItems = new Map<
		number,
		{ items: typeof items; categoryName: string; categoryIcon: string }
	>();

	for (const item of items) {
		const group = groupedItems.get(item.categoryId);
		if (group) {
			group.items.push(item);
		} else {
			groupedItems.set(item.categoryId, {
				items: [item],
				categoryName: item.categoryName,
				categoryIcon: item.categoryIcon,
			});
		}
	}

	// Build category totals lookup
	const categoryTotalsMap = new Map<
		number,
		{ totalWeight: number; totalCost: number; itemCount: number }
	>();
	if (totals?.categories) {
		for (const ct of totals.categories) {
			categoryTotalsMap.set(ct.categoryId, {
				totalWeight: ct.totalWeight,
				totalCost: ct.totalCost,
				itemCount: ct.itemCount,
			});
		}
	}

	return (
		<>
			{Array.from(groupedItems.entries()).map(
				([
					categoryId,
					{ items: categoryItems, categoryName, categoryIcon },
				]) => {
					const catTotals = categoryTotalsMap.get(categoryId);
					return (
						<div key={categoryId} className="mb-8">
							<CategoryHeader
								categoryId={categoryId}
								name={categoryName}
								icon={categoryIcon}
								totalWeight={catTotals?.totalWeight ?? 0}
								totalCost={catTotals?.totalCost ?? 0}
								itemCount={catTotals?.itemCount ?? categoryItems.length}
							/>
							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
								{categoryItems.map((item) => (
									<ItemCard
										key={item.id}
										id={item.id}
										name={item.name}
										weightGrams={item.weightGrams}
										priceCents={item.priceCents}
										categoryName={categoryName}
										categoryIcon={categoryIcon}
										imageFilename={item.imageFilename}
										productUrl={item.productUrl}
									/>
								))}
							</div>
						</div>
					);
				},
			)}
		</>
	);
}

function PlanningView() {
	const [activeTab, setActiveTab] = useState<"active" | "resolved">("active");
	const [categoryFilter, setCategoryFilter] = useState<number | null>(null);

	const openCreateThreadModal = useUIStore((s) => s.openCreateThreadModal);
	const { data: categories } = useCategories();
	const { data: threads, isLoading } = useThreads(activeTab === "resolved");

	if (isLoading) {
		return (
			<div className="animate-pulse space-y-4">
				{[1, 2].map((i) => (
					<div key={i} className="h-24 bg-gray-200 rounded-xl" />
				))}
			</div>
		);
	}

	// Filter threads by active tab and category
	const filteredThreads = (threads ?? [])
		.filter((t) => t.status === activeTab)
		.filter((t) => (categoryFilter ? t.categoryId === categoryFilter : true));

	// Determine if we should show the educational empty state
	const isEmptyNoFilters =
		filteredThreads.length === 0 &&
		activeTab === "active" &&
		categoryFilter === null &&
		(!threads || threads.length === 0);

	return (
		<div>
			{/* Header row */}
			<div className="flex items-center justify-between mb-4">
				<h2 className="text-lg font-semibold text-gray-900">
					Planning Threads
				</h2>
				<button
					type="button"
					onClick={openCreateThreadModal}
					className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
				>
					<svg
						aria-hidden="true"
						className="w-4 h-4"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M12 4v16m8-8H4"
						/>
					</svg>
					New Thread
				</button>
			</div>

			{/* Filter row */}
			<div className="flex items-center justify-between mb-6">
				{/* Pill tabs */}
				<div className="flex bg-gray-100 rounded-full p-0.5 gap-0.5">
					<button
						type="button"
						onClick={() => setActiveTab("active")}
						className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
							activeTab === "active"
								? "bg-blue-600 text-white"
								: "text-gray-600 hover:bg-gray-200"
						}`}
					>
						Active
					</button>
					<button
						type="button"
						onClick={() => setActiveTab("resolved")}
						className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
							activeTab === "resolved"
								? "bg-blue-600 text-white"
								: "text-gray-600 hover:bg-gray-200"
						}`}
					>
						Resolved
					</button>
				</div>

				{/* Category filter */}
				<select
					value={categoryFilter ?? ""}
					onChange={(e) =>
						setCategoryFilter(e.target.value ? Number(e.target.value) : null)
					}
					className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
				>
					<option value="">All categories</option>
					{categories?.map((cat) => (
						<option key={cat.id} value={cat.id}>
							{cat.name}
						</option>
					))}
				</select>
			</div>

			{/* Content: empty state or thread grid */}
			{isEmptyNoFilters ? (
				<div className="py-16">
					<div className="max-w-lg mx-auto text-center">
						<h2 className="text-xl font-semibold text-gray-900 mb-8">
							Plan your next purchase
						</h2>
						<div className="space-y-6 text-left mb-10">
							<div className="flex items-start gap-4">
								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
									1
								</div>
								<div>
									<p className="font-medium text-gray-900">Create a thread</p>
									<p className="text-sm text-gray-500">
										Start a research thread for gear you're considering
									</p>
								</div>
							</div>
							<div className="flex items-start gap-4">
								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
									2
								</div>
								<div>
									<p className="font-medium text-gray-900">Add candidates</p>
									<p className="text-sm text-gray-500">
										Add products you're comparing with prices and weights
									</p>
								</div>
							</div>
							<div className="flex items-start gap-4">
								<div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-700 font-bold text-sm shrink-0">
									3
								</div>
								<div>
									<p className="font-medium text-gray-900">Pick a winner</p>
									<p className="text-sm text-gray-500">
										Resolve the thread and the winner joins your collection
									</p>
								</div>
							</div>
						</div>
						<button
							type="button"
							onClick={openCreateThreadModal}
							className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
						>
							<svg
								aria-hidden="true"
								className="w-4 h-4"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d="M12 4v16m8-8H4"
								/>
							</svg>
							Create your first thread
						</button>
					</div>
				</div>
			) : filteredThreads.length === 0 ? (
				<div className="py-12 text-center">
					<p className="text-sm text-gray-500">No threads found</p>
				</div>
			) : (
				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
					{filteredThreads.map((thread) => (
						<ThreadCard
							key={thread.id}
							id={thread.id}
							name={thread.name}
							candidateCount={thread.candidateCount}
							minPriceCents={thread.minPriceCents}
							maxPriceCents={thread.maxPriceCents}
							createdAt={thread.createdAt}
							status={thread.status}
							categoryName={thread.categoryName}
							categoryIcon={thread.categoryIcon}
						/>
					))}
				</div>
			)}

			<CreateThreadModal />
		</div>
	);
}