import Link from "next/link";
import { RoomCard } from "@/components/rooms/RoomCard";
import { FadeInSection } from "@/components/ui/FadeInSection";
import { Pagination } from "@/components/ui/Pagination";
import type { listActiveRoomCategories, listRoomsPage } from "@/lib/rooms/queries";

type Category = Awaited<ReturnType<typeof listActiveRoomCategories>>[number];
type Room = Awaited<ReturnType<typeof listRoomsPage>>["rooms"][number];

export function RoomsBrowser({
  categories,
  countsByCategory,
  activeCategorySlug,
  rooms,
  basePath,
  currentPage,
  totalPages,
}: {
  categories: Category[];
  countsByCategory: Map<string, number>;
  activeCategorySlug: string | null;
  rooms: Room[];
  basePath: string;
  currentPage: number;
  totalPages: number;
}) {
  const totalCount = [...countsByCategory.values()].reduce((sum, n) => sum + n, 0);

  return (
    <div className="grid grid-cols-1 gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
      <aside className="fade-up fade-up-d1 lg:sticky lg:top-24 lg:self-start">
        <h2 className="mb-3 px-1 text-[12px] font-bold uppercase tracking-wide text-text-muted">Kategoriler</h2>
        <nav className="flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:overflow-visible lg:pb-0">
          <Link
            href="/odalar"
            className={`flex shrink-0 items-center justify-between gap-2 rounded-xl px-3.5 py-2.5 text-[13.5px] font-semibold transition-colors ${
              !activeCategorySlug
                ? "bg-gradient-to-r from-accent to-accent-2 text-white shadow-[0_4px_12px_rgba(228,67,46,.25)]"
                : "text-text-muted hover:bg-bg-alt"
            }`}
          >
            Tümü
            <span
              className={`rounded-full px-1.5 py-0.5 text-[10.5px] font-bold ${
                !activeCategorySlug ? "bg-white/20" : "bg-bg-alt text-text-muted"
              }`}
            >
              {totalCount}
            </span>
          </Link>
          {categories.map((category) => {
            const count = countsByCategory.get(category.id) ?? 0;
            const active = activeCategorySlug === category.slug;
            return (
              <Link
                key={category.id}
                href={`/odalar/kategori/${category.slug}`}
                className={`flex shrink-0 items-center justify-between gap-2 rounded-xl px-3.5 py-2.5 text-[13.5px] font-semibold transition-colors ${
                  active
                    ? "bg-gradient-to-r from-accent to-accent-2 text-white shadow-[0_4px_12px_rgba(228,67,46,.25)]"
                    : "text-text-muted hover:bg-bg-alt"
                }`}
              >
                {category.name}
                <span
                  className={`rounded-full px-1.5 py-0.5 text-[10.5px] font-bold ${
                    active ? "bg-white/20" : "bg-bg-alt text-text-muted"
                  }`}
                >
                  {count}
                </span>
              </Link>
            );
          })}
        </nav>
      </aside>

      <div className="self-start">
        {rooms.length === 0 ? (
          <p className="text-center text-[13.5px] text-text-muted">Bu kategoride henüz oda yok.</p>
        ) : (
          <>
            <FadeInSection className="grid grid-cols-1 items-start gap-5 sm:grid-cols-2">
              {rooms.map((room) => (
                <RoomCard key={room.id} room={room} />
              ))}
            </FadeInSection>
            <Pagination basePath={basePath} currentPage={currentPage} totalPages={totalPages} />
          </>
        )}
      </div>
    </div>
  );
}