import Link from "next/link";
import { Plus } from "lucide-react";
import { listProducts, listTags, type ProductStatus } from "@/lib/data";
import { ProductCard } from "@/components/ProductCard";
import { StatusTabs } from "@/components/StatusTabs";
import { TagFilter } from "@/components/TagFilter";
import { SortSelect } from "@/components/SortSelect";
import { buttonVariants } from "@/components/ui/button";

type Sort = "recent" | "score" | "discussed";

export default async function HomePage({
  searchParams,
}: {
  searchParams: Promise<{ status?: string; tag?: string; sort?: string }>;
}) {
  const params = await searchParams;
  const status = params.status as ProductStatus | undefined;
  const sort = (params.sort as Sort) ?? "recent";

  const [products, tags] = await Promise.all([
    listProducts({ status, tag: params.tag, sort }),
    listTags(),
  ]);

  return (
    <div className="mx-auto max-w-5xl px-4 py-6">
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold">Produits repérés</h1>
          <p className="text-sm text-muted-foreground">
            {products.length} produit{products.length > 1 ? "s" : ""}
          </p>
        </div>
        <Link href="/products/new" className={buttonVariants()}>
          <Plus className="mr-1 h-4 w-4" /> Ajouter un produit
        </Link>
      </div>

      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <StatusTabs active={status ?? "all"} searchParams={params} />
        <div className="flex gap-2">
          <TagFilter tags={tags} />
          <SortSelect />
        </div>
      </div>

      {products.length === 0 ? (
        <div className="flex flex-col items-center gap-3 rounded-xl border border-dashed py-20 text-center text-muted-foreground">
          <p>
            {status || params.tag
              ? "Aucun produit ne correspond à ces filtres."
              : "Aucun produit pour l'instant."}
          </p>
          {!status && !params.tag && (
            <Link
              href="/products/new"
              className={buttonVariants({ variant: "outline" })}
            >
              Ajouter le premier produit
            </Link>
          )}
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      )}
    </div>
  );
}