import type { Metadata } from "next";
import { listActiveRoomCategories, countRoomsByCategory, listRoomsPage } from "@/lib/rooms/queries";
import { resolvePageMetadata } from "@/lib/seo/metadata";
import { RoomsBrowser } from "@/components/rooms/RoomsBrowser";

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{ sayfa?: string }>;
}): Promise<Metadata> {
  const { sayfa } = await searchParams;
  const page = Math.max(1, Number(sayfa) || 1);

  return resolvePageMetadata(
    "/odalar",
    {
      title: "Sohbet Odaları",
      description: "SohbeteGir'deki sohbet odalarını keşfet — her biri kendi konusuyla üyeleri bir araya getiriyor.",
    },
    page
  );
}

export default async function RoomsPage({
  searchParams,
}: {
  searchParams: Promise<{ sayfa?: string }>;
}) {
  const { sayfa } = await searchParams;
  const page = Math.max(1, Number(sayfa) || 1);

  const [categories, countsByCategory, { rooms, totalPages }] = await Promise.all([
    listActiveRoomCategories(),
    countRoomsByCategory(),
    listRoomsPage(undefined, page),
  ]);

  return (
    <div className="relative overflow-hidden">
      <div className="pointer-events-none absolute -right-40 -top-20 h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,oklch(88%_0.06_40_/_.5),transparent_70%)]" />

      <div className="relative mx-auto max-w-6xl px-6 py-14">
        <div className="fade-up mb-10 text-center">
          <span className="mb-3 inline-block rounded-full bg-gradient-to-r from-accent to-accent-2 px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-wide text-white">
            Odalar
          </span>
          <h1 className="text-[28px]">Sana Uygun Sohbet Odasını Bul</h1>
        </div>

        <RoomsBrowser
          categories={categories}
          countsByCategory={countsByCategory}
          activeCategorySlug={null}
          rooms={rooms}
          basePath="/odalar"
          currentPage={page}
          totalPages={totalPages}
        />
      </div>
    </div>
  );
}