"use client";

import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import { Check, ChevronDown, CircleX, SlidersHorizontal, X } from "lucide-react";
import { buildFilterQuery, SORT_OPTIONS, type FilterParams } from "@/lib/filters";
import { PetIcon } from "./pet-icon";

type CategoryLite = { name: string; slug: string; icon: string; count: number };
type BrandLite = { name: string; slug: string; count: number };

export function FiltersPanel({
  categories,
  brands,
  params,
  onNavigate,
}: {
  categories: CategoryLite[];
  brands: BrandLite[];
  params: FilterParams;
  onNavigate?: () => void;
}) {
  const router = useRouter();
  const [priceKey, setPriceKey] = useState(0);

  const hasAny =
    !!params.kategori ||
    params.marka.length > 0 ||
    !!params.kampanya ||
    !!params.min ||
    !!params.max ||
    !!params.q;

  const go = (next: FilterParams) => {
    router.push(buildFilterQuery(next));
    onNavigate?.();
  };

  const toggleBrand = (slug: string) => {
    const marka = params.marka.includes(slug)
      ? params.marka.filter((m) => m !== slug)
      : [...params.marka, slug];
    go({ ...params, marka });
  };

  return (
    <div className="space-y-6">
      {hasAny && (
        <button
          type="button"
          onClick={() => {
            router.push("/urunler");
            onNavigate?.();
          }}
          className="flex w-full items-center justify-center gap-1.5 rounded-full border-2 border-dashed border-brand-300 py-2 text-xs font-extrabold text-brand-700 transition-colors hover:bg-brand-50"
        >
          <CircleX className="size-4" aria-hidden />
          Tüm Filtreleri Temizle
        </button>
      )}

      {/* Kategoriler */}
      <div>
        <h3 className="mb-3 font-display text-sm font-extrabold uppercase tracking-wider text-ink">
          Kategoriler
        </h3>
        <ul className="space-y-1">
          {categories.map((cat) => {
            const active = params.kategori === cat.slug;
            return (
              <li key={cat.slug}>
                <button
                  type="button"
                  onClick={() =>
                    go({ ...params, kategori: active ? undefined : cat.slug })
                  }
                  aria-pressed={active}
                  className={`flex w-full items-center gap-2 rounded-2xl px-3 py-2 text-sm font-bold transition-all ${
                    active
                      ? "bg-brand-500 text-white shadow-md shadow-brand-500/30"
                      : "text-cocoa hover:bg-sand"
                  }`}
                >
                  <PetIcon
                    icon={cat.icon}
                    className={`size-4.5 ${active ? "text-white" : "text-brand-500"}`}
                  />
                  <span className="flex-1 text-left">{cat.name}</span>
                  <span
                    className={`rounded-full px-2 py-0.5 text-[10px] font-extrabold ${
                      active ? "bg-white/20 text-white" : "bg-sand text-mocha"
                    }`}
                  >
                    {cat.count}
                  </span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>

      {/* Markalar */}
      <div>
        <h3 className="mb-3 font-display text-sm font-extrabold uppercase tracking-wider text-ink">
          Markalar
        </h3>
        <ul className="max-h-64 space-y-1 overflow-y-auto pr-1">
          {brands.map((brand) => {
            const active = params.marka.includes(brand.slug);
            return (
              <li key={brand.slug}>
                <button
                  type="button"
                  onClick={() => toggleBrand(brand.slug)}
                  aria-pressed={active}
                  className="flex w-full items-center gap-2.5 rounded-xl px-2 py-1.5 text-sm font-bold text-cocoa transition-colors hover:bg-sand"
                >
                  <span
                    className={`grid size-5 place-items-center rounded-md border-2 transition-all ${
                      active
                        ? "border-brand-500 bg-brand-500 text-white"
                        : "border-sand-dark bg-white"
                    }`}
                  >
                    {active && <Check className="size-3.5" aria-hidden />}
                  </span>
                  <span className="flex-1 text-left">{brand.name}</span>
                  <span className="text-[11px] font-bold text-latte">{brand.count}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>

      {/* Fiyat */}
      <div key={priceKey}>
        <h3 className="mb-3 font-display text-sm font-extrabold uppercase tracking-wider text-ink">
          Fiyat Aralığı
        </h3>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            const fd = new FormData(e.currentTarget);
            const min = (fd.get("min") as string)?.trim() || undefined;
            const max = (fd.get("max") as string)?.trim() || undefined;
            go({ ...params, min, max });
          }}
          className="flex items-center gap-2"
        >
          <input
            name="min"
            type="number"
            min={0}
            defaultValue={params.min ?? ""}
            placeholder="En az"
            aria-label="En düşük fiyat"
            className="w-full rounded-xl border-2 border-sand-dark bg-white px-3 py-2 text-sm font-bold text-ink outline-none transition-colors placeholder:text-latte focus:border-brand-400"
          />
          <span className="font-extrabold text-latte">—</span>
          <input
            name="max"
            type="number"
            min={0}
            defaultValue={params.max ?? ""}
            placeholder="En çok"
            aria-label="En yüksek fiyat"
            className="w-full rounded-xl border-2 border-sand-dark bg-white px-3 py-2 text-sm font-bold text-ink outline-none transition-colors placeholder:text-latte focus:border-brand-400"
          />
          <button
            type="submit"
            onClick={() => setPriceKey((k) => k)}
            className="shrink-0 rounded-xl bg-ink px-3.5 py-2.5 text-xs font-extrabold text-white transition-colors hover:bg-brand-600"
          >
            Uygula
          </button>
        </form>
      </div>

      {/* Kampanya */}
      <button
        type="button"
        onClick={() => go({ ...params, kampanya: params.kampanya ? undefined : "1" })}
        aria-pressed={!!params.kampanya}
        className={`flex w-full items-center gap-2.5 rounded-2xl px-3 py-2.5 text-sm font-extrabold transition-all ${
          params.kampanya
            ? "bg-red-500 text-white shadow-md shadow-red-500/30"
            : "bg-red-50 text-red-600 hover:bg-red-100"
        }`}
      >
        <span
          className={`grid size-5 place-items-center rounded-md border-2 ${
            params.kampanya ? "border-white bg-white text-red-500" : "border-red-300 bg-white"
          }`}
        >
          {params.kampanya && <Check className="size-3.5" aria-hidden />}
        </span>
        Sadece Kampanyalı Ürünler
      </button>
    </div>
  );
}

export function MobileFilterBar({
  categories,
  brands,
  params,
}: {
  categories: CategoryLite[];
  brands: BrandLite[];
  params: FilterParams;
}) {
  const [open, setOpen] = useState(false);

  const activeCount = useMemo(
    () =>
      (params.kategori ? 1 : 0) +
      params.marka.length +
      (params.kampanya ? 1 : 0) +
      (params.min || params.max ? 1 : 0),
    [params]
  );

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="flex items-center gap-2 rounded-full border-2 border-ink bg-white px-4 py-2.5 text-sm font-extrabold text-ink transition-colors hover:bg-ink hover:text-white lg:hidden"
      >
        <SlidersHorizontal className="size-4" aria-hidden />
        Filtrele
        {activeCount > 0 && (
          <span className="grid size-5 place-items-center rounded-full bg-brand-500 text-[10px] font-extrabold text-white">
            {activeCount}
          </span>
        )}
      </button>

      {open && (
        <div className="fixed inset-0 z-[70] lg:hidden">
          <div className="absolute inset-0 bg-ink/45 backdrop-blur-sm" onClick={() => setOpen(false)} />
          <div className="animate-pop-in absolute bottom-0 left-0 right-0 max-h-[85dvh] overflow-y-auto rounded-t-[2rem] bg-cream p-5 pb-8">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="flex items-center gap-2 font-display text-lg font-extrabold text-ink">
                <SlidersHorizontal className="size-5 text-brand-500" aria-hidden />
                Filtreler
              </h2>
              <button
                type="button"
                onClick={() => setOpen(false)}
                className="grid size-9 place-items-center rounded-full bg-white text-cocoa shadow-sm"
                aria-label="Filtreleri kapat"
              >
                <X className="size-5" />
              </button>
            </div>
            <FiltersPanel
              categories={categories}
              brands={brands}
              params={params}
              onNavigate={() => setOpen(false)}
            />
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="mt-5 w-full rounded-full bg-gradient-to-r from-brand-500 to-brand-600 py-3.5 text-sm font-extrabold text-white shadow-lg shadow-brand-500/30"
            >
              Sonuçları Göster
            </button>
          </div>
        </div>
      )}
    </>
  );
}

export function SortSelect({ params }: { params: FilterParams }) {
  const router = useRouter();
  const current = params.sort ?? "onerilen";

  return (
    <div className="relative">
      <label htmlFor="siralama" className="sr-only">
        Sıralama
      </label>
      <select
        id="siralama"
        value={current}
        onChange={(e) =>
          router.push(
            buildFilterQuery({
              ...params,
              sort: e.target.value === "onerilen" ? undefined : e.target.value,
            })
          )
        }
        className="w-full appearance-none rounded-full border-2 border-sand-dark bg-white py-2.5 pl-4 pr-10 text-sm font-extrabold text-ink outline-none transition-colors focus:border-brand-400 sm:w-auto"
      >
        {SORT_OPTIONS.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
      <ChevronDown className="pointer-events-none absolute right-3.5 top-1/2 size-4 -translate-y-1/2 text-mocha" aria-hidden />
    </div>
  );
}