"use client";

/**
 * پنل فیلتر لیست محصولات: برند، دسته، نوع پوست، محدوده قیمت، امتیاز و موجودی.
 * هر تغییر بلافاصله در آدرس صفحه اعمال می‌شود تا نتیجه قابل اشتراک‌گذاری باشد.
 */
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, useTransition, type ReactNode } from "react";
import { PRICE_PRESETS, listingHref, type ListingFilters } from "@/lib/listing-params";
import { toLatinDigits } from "@/lib/persian";
import { faNumber } from "@/lib/format";
import type { ListingResult } from "@/server/services/catalog";

export interface FilterPanelProps {
  basePath: string;
  filters: ListingFilters;
  facets: ListingResult["facets"];
  subcategories: { name: string; href: string; active?: boolean }[];
  lockedBrand?: boolean;
}

function Group({ title, children, defaultOpen = true }: { title: string; children: ReactNode; defaultOpen?: boolean }) {
  return (
    <details open={defaultOpen} className="group border-b border-line py-4 [&_summary::-webkit-details-marker]:hidden">
      <summary className="flex cursor-pointer list-none items-center justify-between text-sm font-bold">
        {title}
        <span className="text-lg leading-none text-muted transition-transform group-open:rotate-45">+</span>
      </summary>
      <div className="pt-3">{children}</div>
    </details>
  );
}

function Check({ checked, onChange, label, count }: { checked: boolean; onChange: () => void; label: string; count?: number }) {
  return (
    <label className="flex cursor-pointer items-center gap-3 py-1.5 text-sm">
      <input type="checkbox" checked={checked} onChange={onChange} className="size-4 accent-ink" />
      <span className="flex-1">{label}</span>
      {count !== undefined && <span className="text-xs text-muted">{faNumber(count)}</span>}
    </label>
  );
}

export function FilterPanel({ basePath, filters, facets, subcategories, lockedBrand }: FilterPanelProps) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [min, setMin] = useState(filters.min?.toString() ?? "");
  const [max, setMax] = useState(filters.max?.toString() ?? "");

  const apply = (patch: Partial<ListingFilters>) =>
    startTransition(() => router.replace(listingHref(basePath, filters, patch, { lockedBrand }), { scroll: false }));

  const toggle = (list: string[], value: string) => (list.includes(value) ? list.filter((v) => v !== value) : [...list, value]);

  const parseMoney = (s: string) => {
    const n = Number(toLatinDigits(s).replace(/[^\d]/g, ""));
    return s.trim() && Number.isFinite(n) ? n : undefined;
  };

  return (
    <div className={`px-5 md:px-0 ${pending ? "opacity-60 transition-opacity" : ""}`} aria-busy={pending}>
      {subcategories.length > 0 && (
        <Group title="دسته‌بندی">
          <ul className="space-y-1">
            {subcategories.map((c) => (
              <li key={c.href}>
                <Link href={c.href} className={`block py-1.5 text-sm ${c.active ? "font-bold" : "text-ink-soft hover:text-ink"}`}>
                  {c.name}
                </Link>
              </li>
            ))}
          </ul>
        </Group>
      )}

      {!lockedBrand && facets.brands.length > 0 && (
        <Group title="برند">
          {facets.brands.map((b) => (
            <Check key={b.slug} label={b.name} count={b.count} checked={filters.brands.includes(b.slug)} onChange={() => apply({ brands: toggle(filters.brands, b.slug) })} />
          ))}
        </Group>
      )}

      {facets.skinTypes.length > 0 && (
        <Group title="نوع پوست">
          {facets.skinTypes.map((s) => (
            <Check key={s.id} label={`پوست ${s.name}`} count={s.count} checked={filters.skin.includes(s.id)} onChange={() => apply({ skin: toggle(filters.skin, s.id) })} />
          ))}
        </Group>
      )}

      <Group title="محدوده قیمت (تومان)">
        <div className="flex flex-wrap gap-2">
          {PRICE_PRESETS.map((p) => {
            const active = filters.min === p.min && filters.max === p.max;
            return (
              <button
                key={p.label}
                type="button"
                className={`chip ${active ? "chip-active" : ""}`}
                onClick={() => {
                  setMin(active ? "" : (p.min?.toString() ?? ""));
                  setMax(active ? "" : (p.max?.toString() ?? ""));
                  apply(active ? { min: undefined, max: undefined } : { min: p.min, max: p.max });
                }}
              >
                {p.label}
              </button>
            );
          })}
        </div>
        <form
          className="mt-3 flex items-end gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            apply({ min: parseMoney(min), max: parseMoney(max) });
          }}
        >
          <label className="flex-1">
            <span className="label">از</span>
            <input inputMode="numeric" value={min} onChange={(e) => setMin(e.target.value)} className="field h-10" placeholder="0" />
          </label>
          <label className="flex-1">
            <span className="label">تا</span>
            <input inputMode="numeric" value={max} onChange={(e) => setMax(e.target.value)} className="field h-10" placeholder={String(facets.priceBounds[1])} />
          </label>
          <button className="btn-outline h-10 px-4">اعمال</button>
        </form>
      </Group>

      <Group title="امتیاز کاربران">
        {[4, 3].map((r) => (
          <label key={r} className="flex cursor-pointer items-center gap-3 py-1.5 text-sm">
            <input type="radio" name="rating" checked={filters.rating === r} onChange={() => apply({ rating: r })} className="size-4 accent-ink" />
            {faNumber(r)} ستاره و بالاتر
          </label>
        ))}
        {filters.rating && (
          <button type="button" className="mt-1 text-xs text-muted underline" onClick={() => apply({ rating: undefined })}>
            حذف فیلتر امتیاز
          </button>
        )}
      </Group>

      <div className="py-4">
        <Check label="فقط کالاهای موجود" checked={filters.inStock} onChange={() => apply({ inStock: !filters.inStock })} />
      </div>
    </div>
  );
}