"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { catalogProducts, filterCatalog, matchingVariants, paginateCatalog, shopGroups, shopHref, type ShopQuery, type ShopSort } from "@/data/catalog";
import { categoryShowcases } from "@/data/category-showcases";
import { CatalogProductCard } from "./catalog-product-card";

export function ShopCatalog({ query, onProduct }: { query: ShopQuery; onProduct: (id: string, variantId?: string) => void }) {
  const router = useRouter();
  const products = filterCatalog(query);
  const pagination = paginateCatalog(products, query.page);
  const subcategory = categoryShowcases.find((category) => category.id === query.type);
  const colors = [...new Set(catalogProducts.filter((product) => query.category === "All" || product.group === query.category).flatMap((product) => product.variants.map((variant) => variant.color)))];
  const sizes = [...new Set(catalogProducts.filter((product) => query.category === "All" || product.group === query.category).flatMap((product) => product.variants.map((variant) => variant.size)))];
  const active = !!(query.type || query.q || query.color || query.size || query.min != null || query.max != null);
  function apply(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const number = (key: string) => data.get(key) === "" ? null : Number(data.get(key));
    router.push(shopHref(query.category, { ...query, min: number("min"), max: number("max"), color: String(data.get("color")), size: String(data.get("size")), page: 1 }), { scroll: false });
  }
  return <><section className="catalog-hero"><p className="eyebrow">FASHION MART / THE COLLECTION</p><h1>Explore the <em>collection.</em></h1><p>Discover everyday favourites, made exceptional.</p></section><section className="catalog-section section-padding" aria-label="Shop products"><div className="catalog-toolbar"><nav className="catalog-tabs" aria-label="Filter by collection">{shopGroups.map((group) => <Link key={group} href={shopHref(group, { sort: query.sort, q: query.q })} scroll={false} className={group === query.category ? "is-active" : ""} aria-current={group === query.category ? "page" : undefined}>{group}</Link>)}</nav><div className="catalog-sort"><span role="status" aria-live="polite">{products.length} {products.length === 1 ? "product" : "products"}</span><label className="sr-only" htmlFor="catalog-sort">Sort products</label><select id="catalog-sort" value={query.sort} onChange={(event) => router.push(shopHref(query.category, { ...query, sort: event.target.value as ShopSort, page: 1 }), { scroll: false })}><option value="featured">Featured</option><option value="low">Price: Low to High</option><option value="high">Price: High to Low</option><option value="newest">Newest</option></select></div></div><details className="catalog-filter-panel" open><summary>Refine your favourites</summary><form key={shopHref(query.category, query)} className="catalog-filter-form" onSubmit={apply}><label className="form-field"><span>Min price (৳)</span><input name="min" type="number" min="0" max="1000000" step="any" defaultValue={query.min ?? ""} placeholder="Any" /></label><label className="form-field"><span>Max price (৳)</span><input name="max" type="number" min="0" max="1000000" step="any" defaultValue={query.max ?? ""} placeholder="Any" /></label><label className="form-field"><span>Colour</span><select name="color" defaultValue={query.color}><option value="">All colours</option>{colors.map((color) => <option key={color}>{color}</option>)}</select></label><label className="form-field"><span>Size</span><select name="size" defaultValue={query.size}><option value="">All sizes</option>{sizes.map((size) => <option key={size}>{size}</option>)}</select></label><button className="button button-primary" type="submit">Apply filters</button></form></details>{active && <div className="catalog-filter-summary"><span>{[subcategory?.title, query.q && `Search: “${query.q}”`, query.color, query.size && `Size ${query.size}`, query.min != null && `From ৳${query.min}`, query.max != null && `Up to ৳${query.max}`].filter(Boolean).join(" · ")}</span><Link href={shopHref(query.category, { sort: query.sort })} scroll={false}>Clear filters ×</Link></div>}<div className="catalog-grid">{pagination.products.map((product) => { const variants = matchingVariants(product, query); const match = (query.color || query.size || query.min != null || query.max != null) ? [...variants].sort((a, b) => a.price - b.price)[0] : undefined; return <CatalogProductCard key={product.id} product={product} onProduct={onProduct} matchedVariant={match} />; })}</div>{!products.length && <div className="catalog-empty"><h2>No products found.</h2><p>Try a different collection or clear the current filters.</p><Link href="/shop" className="button button-primary">Show all products</Link></div>}{pagination.pages > 1 && <nav className="catalog-pagination" aria-label="Product pages">{pagination.page > 1 && <Link href={shopHref(query.category, { ...query, page: pagination.page - 1 })}>← Previous</Link>}{Array.from({ length: pagination.pages }, (_, index) => index + 1).map((page) => <Link key={page} href={shopHref(query.category, { ...query, page })} aria-current={pagination.page === page ? "page" : undefined}>{page}</Link>)}{pagination.page < pagination.pages && <Link href={shopHref(query.category, { ...query, page: pagination.page + 1 })}>Next →</Link>}<span>Page {pagination.page} of {pagination.pages}</span></nav>}</section></>;
}