import { ArticleCard } from "@/components/article-card";
import { articleInclude } from "@/lib/data";
import { prisma } from "@/lib/prisma";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Search", path: "/search" });

export default async function SearchPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q = "" } = await searchParams;
  const articles = q
    ? await prisma.article.findMany({
        where: {
          status: "PUBLISHED",
          OR: [
            { title: { contains: q } },
            { excerpt: { contains: q } },
            { content: { contains: q } },
            { tags: { some: { tag: { slug: { contains: q } } } } }
          ]
        },
        include: articleInclude,
        orderBy: { publishedAt: "desc" },
        take: 24
      })
    : [];

  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <h1 className="font-display text-4xl font-black text-white">Search Infomix</h1>
        <form className="mt-6 flex max-w-2xl overflow-hidden rounded-lg border border-white/12 bg-white/5">
          <input name="q" defaultValue={q} placeholder="Search news, travel, AI, countries..." className="min-w-0 flex-1 bg-transparent px-4 py-4 text-white outline-none" />
          <button className="bg-cyanx px-5 font-black text-ink">Search</button>
        </form>
        {q && <p className="mt-5 text-sm text-white/55">{articles.length} results for “{q}”</p>}
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => <ArticleCard key={article.id} article={article} />)}
        </div>
      </div>
    </section>
  );
}