import Link from "next/link";
import { ChevronRight, Flame, PawPrint, PackageSearch } from "lucide-react";
import type { Metadata } from "next";
import { getBrands, getCategories, getProducts } from "@/lib/queries";
import { ProductCard } from "@/components/product-card";
import {
  FiltersPanel,
  MobileFilterBar,
  SortSelect,
} from "@/components/product-filters";
import { buildFilterQuery, type FilterParams } from "@/lib/filters";
import { PetIcon } from "@/components/pet-icon";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Ürünler",
  description: "Kedi, köpek, kuş ve balık mamalarından oyuncaklara tüm pet shop ürünleri.",
};

type RawParams = Record<string, string | string[] | undefined>;

function parseParams(sp: RawParams): FilterParams {
  const single = (v: string | string[] | undefined) => (Array.isArray(v) ? v[0] : v);
  const markaRaw = sp.marka;
  return {
    kategori: single(sp.kategori) || undefined,
    marka: Array.isArray(markaRaw) ? markaRaw : markaRaw ? [markaRaw] : [],
    q: single(sp.q) || undefined,
    kampanya: single(sp.kampanya) || undefined,
    sort: single(sp.sort) || undefined,
    min: single(sp.min) || undefined,
    max: single(sp.max) || undefined,
  };
}

function toKurus(tl: string | undefined): number | undefined {
  if (!tl) return undefined;
  const n = Number(tl.replace(",", "."));
  if (!Number.isFinite(n) || n < 0) return undefined;
  return Math.round(n * 100);
}

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<RawParams>;
}) {
  const sp = await searchParams;
  const params = parseParams(sp);

  const [allProducts, categories, brands] = await Promise.all([
    getProducts({
      kategori: params.kategori,
      marka: params.marka,
      q: params.q,
      kampanya: params.kampanya === "1",
      sort: params.sort ?? "onerilen",
      min: toKurus(params.min),
      max: toKurus(params.max),
    }),
    getCategories(),
    getBrands(),
  ]);

  const activeCategory = categories.find((c) => c.slug === params.kategori);
  const activeBrands = brands.filter((b) => params.marka.includes(b.slug));

  const title = params.q
    ? `“${params.q}” için sonuçlar`
    : params.kampanya === "1"
      ? "Kampanyalı Ürünler"
      : activeCategory
        ? `${activeCategory.name} Ürünleri`
        : activeBrands.length > 0
          ? activeBrands.map((b) => b.name).join(", ")
          : "Tüm Ürünler";

  const chips: { label: string; href: string; key: string; icon?: string }[] = [];
  if (params.q)
    chips.push({ label: `Arama: “${params.q}”`, href: buildFilterQuery({ ...params, q: undefined }), key: "q" });
  if (activeCategory)
    chips.push({
      label: activeCategory.name,
      href: buildFilterQuery({ ...params, kategori: undefined }),
      key: "kat",
      icon: activeCategory.icon,
    });
  activeBrands.forEach((b) =>
    chips.push({
      label: b.name,
      href: buildFilterQuery({ ...params, marka: params.marka.filter((m) => m !== b.slug) }),
      key: `b-${b.slug}`,
    })
  );
  if (params.kampanya)
    chips.push({ label: "Kampanyalı", href: buildFilterQuery({ ...params, kampanya: undefined }), key: "kamp" });
  if (params.min || params.max)
    chips.push({
      label: `Fiyat: ${params.min ?? "0"}₺ - ${params.max ?? "∞"}`,
      href: buildFilterQuery({ ...params, min: undefined, max: undefined }),
      key: "fiyat",
    });

  return (
    <div className="bg-white">
      {/* Başlık */}
      <div className="border-b border-sand-dark/70 bg-cream">
        <div className="mx-auto w-full max-w-7xl px-3 py-6 sm:px-6 sm:py-8">
          <nav aria-label="breadcrumb" className="flex items-center gap-1.5 text-xs font-bold text-mocha">
            <Link href="/" className="transition-colors hover:text-brand-600">
              Anasayfa
            </Link>
            <ChevronRight className="size-3.5" aria-hidden />
            <span className="text-ink">Ürünler</span>
            {activeCategory && (
              <>
                <ChevronRight className="size-3.5" aria-hidden />
                <span className="flex items-center gap-1 text-brand-700">
                  <PetIcon icon={activeCategory.icon} className="size-3.5" />
                  {activeCategory.name}
                </span>
              </>
            )}
          </nav>
          <div className="mt-3 flex flex-wrap items-end justify-between gap-3">
            <div>
              <h1 className="font-display text-3xl font-extrabold text-ink sm:text-4xl">{title}</h1>
              <p className="mt-1.5 flex items-center gap-1.5 text-sm font-bold text-mocha">
                <PawPrint className="size-4 text-brand-500" aria-hidden />
                {allProducts.length} ürün listeleniyor
              </p>
            </div>
            {params.kampanya === "1" && (
              <span className="flex items-center gap-1.5 rounded-full bg-red-500 px-4 py-2 text-xs font-extrabold text-white shadow-md shadow-red-500/30">
                <Flame className="size-4" aria-hidden /> Sınırlı süreli fırsatlar!
              </span>
            )}
          </div>

          {/* Aktif filtre çipleri */}
          {chips.length > 0 && (
            <div className="mt-4 flex flex-wrap gap-2">
              {chips.map((chip) => (
                <Link
                  key={chip.key}
                  href={chip.href}
                  className="group flex items-center gap-1.5 rounded-full bg-ink px-3.5 py-1.5 text-xs font-extrabold text-white transition-colors hover:bg-brand-600"
                  aria-label={`${chip.label} filtresini kaldır`}
                >
                  {chip.icon && <PetIcon icon={chip.icon} className="size-3.5" />}
                  {chip.label}
                  <span aria-hidden className="grid size-4 place-items-center rounded-full bg-white/20 text-[10px] transition-colors group-hover:bg-white/30">
                    ×
                  </span>
                </Link>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* İçerik */}
      <div className="mx-auto w-full max-w-7xl px-3 py-6 sm:px-6 sm:py-8">
        <div className="grid gap-8 lg:grid-cols-[260px_1fr]">
          {/* Masaüstü filtre */}
          <aside className="sticky top-32 hidden h-fit rounded-4xl border border-sand-dark/70 bg-cream/60 p-5 lg:block">
            <FiltersPanel
              categories={categories}
              brands={brands}
              params={params}
            />
          </aside>

          <div>
            {/* Araç çubuğu */}
            <div className="mb-5 flex flex-wrap items-center justify-between gap-2 sm:gap-3">
              <MobileFilterBar categories={categories} brands={brands} params={params} />
              <p className="hidden text-xs font-bold text-mocha lg:block">
                {allProducts.length} sonuçtan {allProducts.length} tanesi gösteriliyor
              </p>
              <SortSelect params={params} />
            </div>

            {allProducts.length === 0 ? (
              <div className="flex flex-col items-center gap-4 rounded-4xl border-2 border-dashed border-sand-dark bg-cream/50 px-8 py-20 text-center">
                <span className="grid size-24 place-items-center rounded-full bg-sand">
                  <PackageSearch className="size-11 text-brand-400" aria-hidden />
                </span>
                <div>
                  <p className="font-display text-xl font-extrabold text-ink">
                    Hiç sonuç bulunamadı
                  </p>
                  <p className="mx-auto mt-1.5 max-w-sm text-sm font-semibold text-mocha">
                    Patili dostlarımız bu filtrelerde bir şey bulamadı. Filtreleri
                    sadeleştirmeyi ya da farklı bir arama yapmayı deneyin.
                  </p>
                </div>
                <Link
                  href="/urunler"
                  className="rounded-full bg-gradient-to-r from-brand-500 to-brand-600 px-6 py-3 text-sm font-extrabold text-white shadow-lg shadow-brand-500/30 transition-transform hover:-translate-y-0.5"
                >
                  Filtreleri Temizle
                </Link>
              </div>
            ) : (
              <div className="grid grid-cols-2 gap-2.5 sm:gap-4 md:grid-cols-3 xl:grid-cols-4">
                {allProducts.map((product) => (
                  <ProductCard key={product.id} product={product} />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}