"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import Link from "next/link"; import Image from "next/image"; import type { Product } from "@/lib/products"; import { fmtINR } from "@/lib/format"; import { imgFabric } from "@/lib/images"; import WishlistButton from "./WishlistButton"; import { useModalA11y } from "./useModalA11y"; type Props = { open: boolean; onClose: () => void; products: Product[] }; type CatChip = "all" | "men" | "women" | "accessories" | "fabrics" | "festive"; type FabricChip = "Wool" | "Linen" | "Cotton" | "Silk" | "Velvet"; const CAT_CHIPS: { value: CatChip; label: string }[] = [ { value: "all", label: "All" }, { value: "men", label: "Men" }, { value: "women", label: "Women" }, { value: "accessories", label: "Accessories" }, { value: "fabrics", label: "Fabrics" }, { value: "festive", label: "Festive" }, ]; const FABRIC_CHIPS: FabricChip[] = ["Wool", "Linen", "Cotton", "Silk", "Velvet"]; // Build a flat haystack per product, lowercased, for substring matching. function haystack(p: Product) { return [ p.name, p.cat, p.fabric, p.fit, p.occasion, p.colour ?? "", p.description ?? "", p.line, p.gender, p.category, ...(p.colourVariants ?? []).map(c => c.name), ].join(" ").toLowerCase(); } function matchesQuery(p: Product, tokens: string[]) { if (tokens.length === 0) return true; const hs = haystack(p); return tokens.every(t => hs.includes(t)); } function matchesCat(p: Product, cat: CatChip) { switch (cat) { case "all": return true; case "men": return p.gender === "men" && p.category !== "accessories"; case "women": return p.gender === "women" && p.category !== "accessories"; case "accessories": return p.category === "accessories"; case "fabrics": return p.kind === "fabric"; case "festive": return p.occasion === "Festive" || p.category === "festive"; } } export default function SearchOverlay({ open, onClose, products }: Props) { const [q, setQ] = useState(""); const [cat, setCat] = useState("all"); const [fabFilter, setFabFilter] = useState>(new Set()); const inputRef = useRef(null); const overlayRef = useModalA11y(open, onClose); // Prefer focusing the search input specifically. useEffect(() => { if (!open) return; const t = setTimeout(() => inputRef.current?.focus(), 50); return () => clearTimeout(t); }, [open]); // Reset on close useEffect(() => { if (open) return; setQ(""); }, [open]); const tokens = useMemo( () => q.trim().toLowerCase().split(/\s+/).filter(Boolean), [q] ); const results = useMemo(() => { return products.filter(p => { if (!matchesQuery(p, tokens)) return false; if (!matchesCat(p, cat)) return false; if (fabFilter.size > 0 && !fabFilter.has(p.fabric as FabricChip)) return false; return true; }).slice(0, 24); }, [products, tokens, cat, fabFilter]); const toggleFab = (f: FabricChip) => { setFabFilter(prev => { const next = new Set(prev); if (next.has(f)) next.delete(f); else next.add(f); return next; }); }; const clearAll = () => { setQ(""); setCat("all"); setFabFilter(new Set()); }; return ( <>