"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { RiSearchLine as Search, RiStarFill as Star } from "@remixicon/react";

export type FilterOption = {
  slug: string;
  label: string;
  count: number;
};

export default function FilterContent({
  categories = [],
  brandOptions = [],
  parentCategories = [],
  priceMax = 5000,
  currencySymbol = "৳",
}: {
  categories?: FilterOption[];
  brandOptions?: FilterOption[];
  parentCategories?: { slug: string; label: string; hasChildren: boolean }[];
  /** Dynamic top of the price slider — the store's most expensive active product. */
  priceMax?: number;
  currencySymbol?: string;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const activeCategory = searchParams.get("category") ?? "";
  const minPrice = searchParams.get("minPrice") ?? "";
  const maxPrice = searchParams.get("maxPrice") ?? "";
  const q = searchParams.get("q") ?? "";

  const [search, setSearch] = useState(q);
  const [min, setMin] = useState(minPrice || "");
  const [max, setMax] = useState(maxPrice || "");
  const [brandSlugs, setBrandSlugs] = useState<string[]>(
    (searchParams.get("brand") ?? "").split(",").filter(Boolean),
  );

  /** Mutate the search params with the given overrides and navigate. */
  function apply(overrides: Record<string, string | null>) {
    const params = new URLSearchParams(searchParams.toString());
    for (const [key, value] of Object.entries(overrides)) {
      if (value === null || value === "") {
        params.delete(key);
      } else {
        params.set(key, value);
      }
    }
    router.push(`?${params.toString()}`, { scroll: false });
  }

  function toggleCategory(slug: string) {
    apply({ category: activeCategory === slug ? null : slug });
  }

  function toggleBrand(slug: string) {
    const next = brandSlugs.includes(slug)
      ? brandSlugs.filter((s) => s !== slug)
      : [...brandSlugs, slug];
    setBrandSlugs(next);
    apply({ brand: next.length ? next.join(",") : null });
  }

  const rating = searchParams.get("rating") ?? "";
  const sliderMax = Math.max(priceMax, Number(maxPrice) || 0);

  function applyPrice() {
    if (!min && !max) return;
    const validatedMin = min ? Math.max(0, Number(min)) : "";
    const validatedMax = max ? Math.max(0, Number(max)) : "";
    if (validatedMax && validatedMin && validatedMax < validatedMin) {
      apply({ minPrice: validatedMax.toString(), maxPrice: validatedMin.toString() });
    } else {
      apply({
        minPrice: validatedMin === "" ? null : validatedMin.toString(),
        maxPrice: validatedMax === "" ? null : validatedMax.toString(),
      });
    }
  }

  const shownCategories =
    parentCategories.length > 0
      ? parentCategories
      : categories.map((c) => ({ slug: c.slug, label: c.label, hasChildren: false }));

  return (
    <div className="space-y-1">
      <div className="relative mb-4">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          placeholder="Search products..."
          className="pl-9"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") apply({ q: search.trim() || null });
          }}
        />
      </div>

      <Accordion
        defaultValue={["categories", "price", "brands", "ratings"]}
        className="w-full"
      >
        <AccordionItem value="categories">
          <AccordionTrigger className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Categories
          </AccordionTrigger>
          <AccordionContent className="space-y-3">
            {shownCategories.length === 0 && (
              <p className="text-sm text-muted-foreground">
                No categories yet.
              </p>
            )}
            {shownCategories.map((c) => (
              <label
                key={c.slug}
                className="flex cursor-pointer items-center justify-between"
              >
                <div className="flex items-center gap-3">
                  <input
                    type="checkbox"
                    className="h-4 w-4"
                    checked={activeCategory === c.slug}
                    onChange={() => toggleCategory(c.slug)}
                  />
                  <span
                    className={
                      activeCategory === c.slug
                        ? "text-sm font-medium text-primary"
                        : "text-sm"
                    }
                  >
                    {c.label}
                  </span>
                </div>
              </label>
            ))}
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="price">
          <AccordionTrigger className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Price Range
          </AccordionTrigger>
          <AccordionContent>
            <div className="space-y-3">
              <Slider
                min={0}
                max={sliderMax}
                step={50}
                defaultValue={[
                  Number(minPrice) || 0,
                  Number(maxPrice) || sliderMax,
                ]}
                onValueChange={(v) => {
                  if (Array.isArray(v)) {
                    setMin(String(v[0]));
                    setMax(String(v[1]));
                  }
                }}
                onValueCommitted={() => applyPrice()}
              />
              <div className="flex items-center gap-3">
                <div className="relative flex-1">
                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
                    {currencySymbol}
                  </span>
                  <Input
                    type="number"
                    className="pl-6"
                    value={min}
                    onChange={(e) => setMin(e.target.value)}
                  />
                </div>
                <span className="text-sm text-muted-foreground">to</span>
                <div className="relative flex-1">
                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
                    {currencySymbol}
                  </span>
                  <Input
                    type="number"
                    className="pl-6"
                    value={max}
                    onChange={(e) => setMax(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") applyPrice();
                    }}
                  />
                </div>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="brands">
          <AccordionTrigger className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Brands
          </AccordionTrigger>
          <AccordionContent className="space-y-3">
            {brandOptions.length === 0 && (
              <p className="text-sm text-muted-foreground">No brands yet.</p>
            )}
            {brandOptions.map((b) => (
              <label
                key={b.slug}
                className="flex cursor-pointer items-center gap-3"
              >
                <input
                  type="checkbox"
                  className="h-4 w-4"
                  checked={brandSlugs.includes(b.slug)}
                  onChange={() => toggleBrand(b.slug)}
                />
                <span
                  className={
                    brandSlugs.includes(b.slug)
                      ? "text-sm font-medium text-primary"
                      : "text-sm"
                  }
                >
                  {b.label}
                </span>
                {b.count > 0 && (
                  <span className="ml-auto text-xs text-muted-foreground">
                    {b.count}
                  </span>
                )}
              </label>
            ))}
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="ratings" className="border-b-0">
          <AccordionTrigger className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Ratings
          </AccordionTrigger>
          <AccordionContent>
            <RadioGroup value={rating} onValueChange={(v) => apply({ rating: v || null })}>
              {[
                { n: 5, label: "5 & up" },
                { n: 4, label: "4 & up" },
              ].map(({ n, label }) => (
                <label key={n} className="flex items-center gap-3">
                  <RadioGroupItem value={String(n)} />
                  <div className="flex text-yellow-500">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${i < n ? "" : "text-muted"}`}
                      />
                    ))}
                  </div>
                  <span className="text-sm">{label}</span>
                </label>
              ))}
            </RadioGroup>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}