import { prisma } from "@/lib/prisma";
import { QuizCard } from "@/components/quiz/QuizCard";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Jelajahi Quiz",
  description: "Temukan quiz dari ratusan topik berbeda",
};

export const dynamic = "force-dynamic";

async function getQuizzes(category?: string) {
  return prisma.quiz.findMany({
    where: {
      isPublished: true,
      ...(category ? { category: { slug: category } } : {}),
    },
    orderBy: { playCount: "desc" },
    take: 24,
    include: {
      author: { select: { name: true, image: true } },
      category: { select: { name: true, icon: true, color: true } },
      _count: { select: { questions: true, results: true } },
    },
  });
}

async function getCategories() {
  return prisma.category.findMany({
    orderBy: { quizCount: "desc" },
    take: 10,
  });
}

export default async function ExplorePage({
  searchParams,
}: {
  searchParams: { category?: string };
}) {
  const [quizzes, categories] = await Promise.all([
    getQuizzes(searchParams.category).catch(() => []),
    getCategories().catch(() => []),
  ]);

  return (
    <div className="container mx-auto px-4 py-8 pt-24">
      <h1 className="text-3xl font-bold mb-2">Jelajahi Quiz</h1>
      <p className="text-muted-foreground mb-8">Temukan quiz yang cocok untukmu</p>

      {/* Category Filter */}
      {categories.length > 0 && (
        <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-4 mb-8">
          <a
            href="/explore"
            className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium border transition-colors ${
              !searchParams.category
                ? "border-primary bg-primary text-white"
                : "border-border hover:border-primary/50"
            }`}
          >
            Semua
          </a>
          {categories.map((cat) => (
            <a
              key={cat.id}
              href={`/explore?category=${cat.slug}`}
              className={`flex-shrink-0 flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium border transition-colors ${
                searchParams.category === cat.slug
                  ? "border-primary bg-primary text-white"
                  : "border-border hover:border-primary/50"
              }`}
            >
              <span>{cat.icon}</span>
              {cat.name}
            </a>
          ))}
        </div>
      )}

      {/* Quiz Grid */}
      {quizzes.length === 0 ? (
        <div className="text-center py-20">
          <p className="text-5xl mb-4">📭</p>
          <h2 className="text-xl font-bold mb-2">Belum ada quiz</h2>
          <p className="text-muted-foreground">Quiz akan segera hadir!</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          {quizzes.map((quiz, i) => (
            <QuizCard key={quiz.id} quiz={{
              ...quiz,
              _count: { questions: quiz._count.questions, results: quiz._count.results },
            }} index={i} />
          ))}
        </div>
      )}
    </div>
  );
}