"use client";

/** نوار ابزار لیست: دکمه فیلتر (موبایل) و انتخاب مرتب‌سازی */
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Icon } from "@/components/ui/Icon";
import { Sheet } from "@/components/ui/Sheet";
import { SORT_OPTIONS, activeFilterCount, listingHref, type SortKey } from "@/lib/listing-params";
import { faNumber } from "@/lib/format";
import { FilterPanel, type FilterPanelProps } from "./FilterPanel";

export function ListingToolbar(props: FilterPanelProps & { total: number }) {
  const { basePath, filters, lockedBrand, total } = props;
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const active = activeFilterCount(filters, lockedBrand);

  return (
    <div className="flex items-center gap-2">
      <button type="button" onClick={() => setOpen(true)} className="chip h-10 md:hidden">
        <Icon name="filter" size={16} />
        فیلترها
        {active > 0 && <span className="grid size-5 place-items-center rounded-full bg-ink text-[10px] text-paper">{faNumber(active)}</span>}
      </button>
      <label className="relative ms-auto flex items-center">
        <span className="sr-only">مرتب‌سازی</span>
        <select
          value={filters.sort}
          onChange={(e) => router.replace(listingHref(basePath, filters, { sort: e.target.value as SortKey }, { lockedBrand }), { scroll: false })}
          className="h-10 appearance-none rounded-full border border-line bg-paper ps-4 pe-9 text-xs outline-none hover:border-ink"
        >
          {SORT_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
        <Icon name="chevron-down" size={16} className="pointer-events-none absolute end-3" />
      </label>

      <Sheet
        open={open}
        onClose={() => setOpen(false)}
        title="فیلترها"
        footer={
          <div className="flex gap-2">
            <button type="button" className="btn-outline flex-1" onClick={() => router.replace(listingHref(basePath, { ...filters, brands: lockedBrand ? filters.brands : [], skin: [], min: undefined, max: undefined, rating: undefined, inStock: false }, {}, { lockedBrand }), { scroll: false })}>
              حذف همه
            </button>
            <button type="button" className="btn-primary flex-[2]" onClick={() => setOpen(false)}>
              مشاهده {faNumber(total)} کالا
            </button>
          </div>
        }
      >
        <FilterPanel {...props} />
      </Sheet>
    </div>
  );
}