GearBox/src/client/components/PlanningView.tsx

import { useState } from "react";
import { useCategories } from "../hooks/useCategories";
import { useThreads } from "../hooks/useThreads";
import { useUIStore } from "../stores/uiStore";
import { CategoryFilterDropdown } from "./CategoryFilterDropdown";
import { CreateThreadModal } from "./CreateThreadModal";
import { ThreadCard } from "./ThreadCard";

export 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-gray-700 hover:bg-gray-800 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-gray-700 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-gray-700 text-white"
								: "text-gray-600 hover:bg-gray-200"
						}`}
					>
						Resolved
					</button>
				</div>

				{/* Category filter */}
				<CategoryFilterDropdown
					value={categoryFilter}
					onChange={setCategoryFilter}
					categories={categories ?? []}
				/>
			</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-gray-200 text-gray-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-gray-200 text-gray-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-gray-200 text-gray-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-gray-700 hover:bg-gray-800 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>
	);
}