/**
 * نمای مشترک لیست محصولات (دسته، برند، جستجو):
 * عنوان، فیلترهای فعال، نوار ابزار، سایدبار فیلتر (دسکتاپ)، شبکه محصولات و صفحه‌بندی.
 */
import Link from "next/link";
import type { ReactNode } from "react";
import { ProductCard } from "@/components/product/ProductCard";
import { Icon } from "@/components/ui/Icon";
import { faNumber, formatToman } from "@/lib/format";
import { listingHref, type ListingFilters } from "@/lib/listing-params";
import type { ListingResult } from "@/server/services/catalog";
import { FilterPanel } from "./FilterPanel";
import { ListingToolbar } from "./ListingToolbar";

interface Props {
  title: string;
  description?: string;
  breadcrumbs?: ReactNode;
  basePath: string;
  filters: ListingFilters;
  result: ListingResult;
  subcategories: { name: string; href: string; active?: boolean }[];
  lockedBrand?: boolean;
}

export function ListingView({ title, description, breadcrumbs, basePath, filters, result, subcategories, lockedBrand }: Props) {
  const href = (patch: Partial<ListingFilters>) => listingHref(basePath, filters, patch, { lockedBrand });

  // برچسب‌های فیلتر فعال با لینک حذف
  const chips: { label: string; href: string }[] = [
    ...(lockedBrand ? [] : filters.brands.map((b) => ({ label: result.facets.brands.find((x) => x.slug === b)?.name ?? b, href: href({ brands: filters.brands.filter((x) => x !== b) }) }))),
    ...filters.skin.map((s) => ({ label: `پوست ${result.facets.skinTypes.find((x) => x.id === s)?.name ?? s}`, href: href({ skin: filters.skin.filter((x) => x !== s) }) })),
    ...(filters.min !== undefined || filters.max !== undefined
      ? [{ label: `${filters.min !== undefined ? `از ${formatToman(filters.min)}` : ""} ${filters.max !== undefined ? `تا ${formatToman(filters.max)}` : ""}`.trim(), href: href({ min: undefined, max: undefined }) }]
      : []),
    ...(filters.rating ? [{ label: `${faNumber(filters.rating)} ستاره به بالا`, href: href({ rating: undefined }) }] : []),
    ...(filters.inStock ? [{ label: "فقط موجود", href: href({ inStock: false }) }] : []),
  ];

  const panelProps = { basePath, filters, facets: result.facets, subcategories, lockedBrand };

  return (
    <div className="container-z py-6 md:py-10">
      {breadcrumbs}
      <header className="mt-4 mb-6 md:mb-8">
        <h1 className="text-2xl font-extrabold md:text-3xl">{title}</h1>
        {description && <p className="mt-2 max-w-2xl text-sm leading-7 text-muted">{description}</p>}
      </header>

      <div className="md:grid md:grid-cols-[240px_1fr] md:gap-10">
        <aside className="hidden md:block" aria-label="فیلترها">
          <FilterPanel {...panelProps} />
        </aside>

        <div>
          <div className="sticky top-16 z-30 -mx-4 bg-paper/95 px-4 py-2 backdrop-blur md:static md:mx-0 md:px-0">
            <div className="flex items-center gap-3">
              <p className="hidden text-xs text-muted md:block">{faNumber(result.total)} کالا</p>
              <div className="flex-1">
                <ListingToolbar {...panelProps} total={result.total} />
              </div>
            </div>
            {chips.length > 0 && (
              <div className="scrollbar-none mt-2 flex gap-2 overflow-x-auto">
                {chips.map((c) => (
                  <Link key={c.label} href={c.href} scroll={false} className="chip chip-active h-8 shrink-0">
                    {c.label}
                    <Icon name="close" size={12} />
                  </Link>
                ))}
              </div>
            )}
          </div>
          <p className="mt-2 text-xs text-muted md:hidden">{faNumber(result.total)} کالا</p>

          {result.items.length === 0 ? (
            <div className="card-surface mt-6 flex flex-col items-center gap-3 px-6 py-16 text-center">
              <Icon name="search" size={32} />
              <p className="font-bold">کالایی با این مشخصات پیدا نشد</p>
              <p className="text-sm text-muted">فیلترها را کمتر کنید یا عبارت دیگری جستجو کنید.</p>
              {chips.length > 0 && (
                <Link href={href({ brands: lockedBrand ? filters.brands : [], skin: [], min: undefined, max: undefined, rating: undefined, inStock: false })} className="btn-outline mt-2">
                  حذف همه فیلترها
                </Link>
              )}
            </div>
          ) : (
            <ul className="mt-4 grid grid-cols-2 gap-x-3 gap-y-8 sm:grid-cols-3 lg:grid-cols-4 lg:gap-x-5">
              {result.items.map((p) => (
                <li key={p.id}>
                  <ProductCard product={p} />
                </li>
              ))}
            </ul>
          )}

          {result.pageCount > 1 && (
            <nav aria-label="صفحه‌بندی" className="mt-12 flex items-center justify-center gap-2">
              {Array.from({ length: result.pageCount }, (_, i) => i + 1).map((n) => (
                <Link
                  key={n}
                  href={href({ page: n })}
                  aria-current={n === result.page ? "page" : undefined}
                  className={`grid size-10 place-items-center rounded-full text-sm ${n === result.page ? "bg-ink text-paper" : "hover:bg-mist"}`}
                >
                  {faNumber(n)}
                </Link>
              ))}
            </nav>
          )}
        </div>
      </div>
    </div>
  );
}