import Link from "next/link";
import { createClient } from "@/lib/supabase/server";
import type { Product } from "@/lib/supabase/types";
import ProductCard from "@/components/catalogue/product-card";
import SearchBar from "@/components/catalogue/search-bar";
import { Button } from "@/components/ui/button";
import { LayoutGrid } from "lucide-react";

interface PageProps {
  searchParams: { q?: string; fabricant?: string };
}

export default async function CataloguePage({ searchParams }: PageProps) {
  const supabase = createClient();
  const q = searchParams.q?.trim() ?? "";
  const fabricantFilter = searchParams.fabricant?.trim() ?? "";

  let query = supabase
    .from("products")
    .select("*")
    .eq("actif", true)
    .order("fabricant", { ascending: true })
    .order("modele", { ascending: true })
    .limit(200);

  if (q) {
    const safe = q.replace(/[%,]/g, " ");
    query = query.or(
      `fabricant.ilike.%${safe}%,modele.ilike.%${safe}%`
    );
  }
  if (fabricantFilter) {
    query = query.eq("fabricant", fabricantFilter);
  }

  const { data: products } = await query;

  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <h1 className="text-2xl font-bold">Catalogue</h1>
        <p className="text-sm text-muted-foreground">
          {products?.length ?? 0} clés disponibles
        </p>
      </div>

      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
        <SearchBar defaultValue={q} />
        <Button asChild variant="outline" className="sm:w-auto">
          <Link href="/catalogue/assiste">
            <LayoutGrid className="h-4 w-4" />
            Recherche assistée
          </Link>
        </Button>
      </div>

      {fabricantFilter && (
        <div className="text-sm">
          Filtre :{" "}
          <span className="font-medium">{fabricantFilter}</span>
          {" — "}
          <Link href="/catalogue" className="text-primary hover:underline">
            effacer
          </Link>
        </div>
      )}

      {!products || products.length === 0 ? (
        <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
          Aucun produit trouvé pour cette recherche.
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((p: Product) => (
            <ProductCard key={p.id} product={p} />
          ))}
        </div>
      )}
    </div>
  );
}