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

"use client";

import { ChevronLeft, ChevronRight, Filter, Search } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
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 [isCollapsed, setIsCollapsed] = React.useState(true);
	const [categories, setCategories] = React.useState<Category[]>([]);
	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
	const [query, setQuery] = React.useState(searchParams.get("query") || "");

	// Ouvrir automatiquement si des filtres sont actifs
	React.useEffect(() => {
		const hasFilters =
			searchParams.has("query") ||
			searchParams.has("category") ||
			searchParams.has("tag") ||
			searchParams.get("sort") !== "trend";

		if (hasFilters) {
			setIsCollapsed(false);
		}
	}, [searchParams]);

	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 border-l bg-background transition-all duration-300 relative ${
				isCollapsed ? "w-12" : "w-80"
			}`}
		>
			<Button
				variant="outline"
				size="icon"
				className="absolute -left-4 top-20 h-8 w-8 rounded-full bg-background shadow-md z-50 hover:bg-accent"
				onClick={() => setIsCollapsed(!isCollapsed)}
			>
				{isCollapsed ? (
					<ChevronLeft className="h-4 w-4" />
				) : (
					<ChevronRight className="h-4 w-4" />
				)}
			</Button>

			{isCollapsed ? (
				<div className="flex flex-col items-center py-4 gap-4 overflow-hidden">
					<Tooltip>
						<TooltipTrigger asChild>
							<Button
								variant="ghost"
								size="icon"
								onClick={() => setIsCollapsed(false)}
							>
								<Search className="h-5 w-5" />
							</Button>
						</TooltipTrigger>
						<TooltipContent side="left">Rechercher</TooltipContent>
					</Tooltip>
					<Separator />
					<Tooltip>
						<TooltipTrigger asChild>
							<Button
								variant="ghost"
								size="icon"
								onClick={() => setIsCollapsed(false)}
							>
								<Filter className="h-5 w-5" />
							</Button>
						</TooltipTrigger>
						<TooltipContent side="left">Filtres</TooltipContent>
					</Tooltip>
				</div>
			) : (
				<>
					<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>
	);
}