import type { Metadata } from "next";
import { Empty, ProductCard } from "@/components/products";
import Link from "next/link";
import { PageHeader } from "@/components/status";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { api, getMe, unwrap } from "@/lib/api";

export const metadata: Metadata = { title: "Products" };

export default async function Products({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
  const raw = (await searchParams).q;
  const q = typeof raw === "string" ? raw.trim().slice(0, 100) : "";
  const [me, { products }] = await Promise.all([getMe(), api.products.get({ query: q ? { q } : {} }).then(unwrap)]);

  return (
    <>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <PageHeader title="Products">Community products for T5DE.</PageHeader>
        {me && (
          <Link href="/products/new" className={buttonVariants({ className: "px-4" })}>
            New product
          </Link>
        )}
      </div>
      <form action="/products" className="mb-6 flex w-full max-w-md gap-2">
        <Input type="search" name="q" defaultValue={q} placeholder="Search products" aria-label="Search" />
        <Button type="submit" variant="outline">
          Search
        </Button>
      </form>
      {products.length === 0 ? (
        <Empty>{q ? "Nothing found." : "No products yet."}</Empty>
      ) : (
        <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((p) => (
            <li key={p.id}>
              <ProductCard product={p} />
            </li>
          ))}
        </ul>
      )}
    </>
  );
}