memegoat/frontend/src/components/search-sidebar.tsx

"use client";

import { Filter, Search } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { CategoryService } from "@/services/category.service";
import { TagService } from "@/services/tag.service";
import type { Category, Tag } from "@/types/content";

export function SearchSidebar() {
	const router = useRouter();
	const searchParams = useSearchParams();
	const pathname = usePathname();

	const [categories, setCategories] = React.useState<Category[]>([]);
	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
	const [query, setQuery] = React.useState(searchParams.get("query") || "");

	React.useEffect(() => {
		CategoryService.getAll().then(setCategories).catch(console.error);
		TagService.getAll({ limit: 10, sort: "popular" })
			.then(setPopularTags)
			.catch(console.error);
	}, []);

	const updateSearch = React.useCallback(
		(name: string, value: string | null) => {
			const params = new URLSearchParams(searchParams.toString());
			if (value) {
				params.set(name, value);
			} else {
				params.delete(name);
			}
			// If we are not on explore/trends/recent, maybe we should redirect to home?
			// For now, let's just update the URL.
			router.push(`${pathname}?${params.toString()}`);
		},
		[router, pathname, searchParams],
	);

	const handleSearch = (e: React.FormEvent) => {
		e.preventDefault();
		updateSearch("query", query);
	};

	const currentSort = searchParams.get("sort") || "trend";
	const currentCategory = searchParams.get("category");

	return (
		<aside className="hidden lg:flex flex-col w-80 border-l bg-background">
			<div className="p-4 border-b">
				<h2 className="font-semibold mb-4">Rechercher</h2>
				<form onSubmit={handleSearch} className="relative">
					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
					<Input
						type="search"
						placeholder="Rechercher des mèmes..."
						className="pl-8"
						value={query}
						onChange={(e) => setQuery(e.target.value)}
					/>
				</form>
			</div>
			<ScrollArea className="flex-1 p-4">
				<div className="space-y-6">
					<div>
						<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
							<Filter className="h-4 w-4" />
							Filtres
						</h3>
						<div className="space-y-4">
							<div>
								<p className="text-xs text-muted-foreground mb-2">Trier par</p>
								<div className="flex flex-wrap gap-2">
									<Badge
										variant={currentSort === "trend" ? "default" : "outline"}
										className="cursor-pointer"
										onClick={() => updateSearch("sort", "trend")}
									>
										Tendances
									</Badge>
									<Badge
										variant={currentSort === "recent" ? "default" : "outline"}
										className="cursor-pointer"
										onClick={() => updateSearch("sort", "recent")}
									>
										Récent
									</Badge>
								</div>
							</div>
							<Separator />
							<div>
								<p className="text-xs text-muted-foreground mb-2">Catégories</p>
								<div className="flex flex-wrap gap-2">
									<Badge
										variant={!currentCategory ? "default" : "outline"}
										className="cursor-pointer"
										onClick={() => updateSearch("category", null)}
									>
										Tout
									</Badge>
									{categories.map((cat) => (
										<Badge
											key={cat.id}
											variant={currentCategory === cat.slug ? "default" : "outline"}
											className="cursor-pointer"
											onClick={() => updateSearch("category", cat.slug)}
										>
											{cat.name}
										</Badge>
									))}
								</div>
							</div>
						</div>
					</div>

					<div>
						<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
						<div className="flex flex-wrap gap-2">
							{popularTags.map((tag) => (
								<Badge
									key={tag.id}
									variant={searchParams.get("tag") === tag.name ? "default" : "outline"}
									className="cursor-pointer hover:bg-secondary"
									onClick={() =>
										updateSearch(
											"tag",
											searchParams.get("tag") === tag.name ? null : tag.name,
										)
									}
								>
									#{tag.name}
								</Badge>
							))}
							{popularTags.length === 0 && (
								<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
							)}
						</div>
					</div>
				</div>
			</ScrollArea>
		</aside>
	);
}