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[]; creator?: string | string[]; tag?: string | string[] }>;
}) {
  const params = await searchParams;
  const one = (v: string | string[] | undefined, max: number) => (typeof v === "string" ? v.trim().slice(0, max) : "");
  const q = one(params.q, 100);
  const creator = one(params.creator, 64);
  const tag = one(params.tag, 24);
  const [me, { products }] = await Promise.all([
    getMe(),
    api.products
      .get({ query: { ...(q ? { q } : {}), ...(creator ? { creator } : {}), ...(tag ? { tag } : {}) } })
      .then(unwrap),
  ]);

  return (
    <>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <PageHeader title="Products">
          {[creator && `By ${creator}.`, tag && `Tagged “${tag}”.`].filter(Boolean).join(" ") || "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" />
        {creator && <input type="hidden" name="creator" value={creator} />}
        {tag && <input type="hidden" name="tag" value={tag} />}
        <Button type="submit" variant="outline">
          Search
        </Button>
      </form>
      {products.length === 0 ? (
        <Empty>{q || tag || creator ? "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>
      )}
    </>
  );
}