import { Metadata } from "next";
import { Search } from "lucide-react";
import ProductGrid from "@/components/products/ProductGrid";
import { prisma } from "@/lib/prisma";
import { serialize } from "@/lib/serialize";

export const metadata: Metadata = { title: "Search Results" };

export default async function SearchPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q } = await searchParams;

  if (!q) return (
    <div className="max-w-7xl mx-auto px-4 py-20 text-center">
      <Search className="w-16 h-16 text-slate-200 mx-auto mb-4" />
      <h1 className="text-2xl font-black text-slate-700">Search for products</h1>
      <p className="text-slate-500 mt-2">Use the search bar above to find laptops, iPhones, and more</p>
    </div>
  );

  const rawProducts = await prisma.product.findMany({
    where: {
      status: "ACTIVE",
      OR: [
        { name: { contains: q, mode: "insensitive" } },
        { description: { contains: q, mode: "insensitive" } },
        { brand: { name: { contains: q, mode: "insensitive" } } },
        { category: { name: { contains: q, mode: "insensitive" } } },
        { tags: { some: { tag: { contains: q, mode: "insensitive" } } } },
      ],
    },
    include: { brand: true, category: true, reviews: { select: { rating: true } } },
    take: 24,
    orderBy: { featured: "desc" },
  });

  const products = serialize(rawProducts) as unknown as Parameters<typeof ProductGrid>[0]["products"];

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="mb-6">
        <h1 className="text-2xl font-black text-slate-900">Search Results</h1>
        <p className="text-slate-500 text-sm mt-1">
          {products.length} result{products.length !== 1 ? "s" : ""} for &ldquo;<span className="font-bold text-sky-600">{q}</span>&rdquo;
        </p>
      </div>
      <ProductGrid products={products} cols={4} />
    </div>
  );
}