import Link from "next/link";
import { QuoteCard } from "@/components/quotes/QuoteCard";
import { FadeInSection } from "@/components/ui/FadeInSection";
import type { listQuoteCategories, listQuotes } from "@/lib/quotes/queries";

type Category = Awaited<ReturnType<typeof listQuoteCategories>>[number];
type Quote = Awaited<ReturnType<typeof listQuotes>>[number];

export function QuotesBrowser({
  categories,
  countsByCategory,
  activeCategorySlug,
  quotes,
  canSend,
  canLike,
}: {
  categories: Category[];
  countsByCategory: Map<string, number>;
  activeCategorySlug: string | null;
  quotes: Quote[];
  canSend: boolean;
  canLike: boolean;
}) {
  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="/sozler"
            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={`/sozler/${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">
        {quotes.length === 0 ? (
          <p className="text-center text-[13.5px] text-text-muted">Bu kategoride henüz söz yok.</p>
        ) : (
          <FadeInSection className="grid grid-cols-1 items-start gap-5 sm:grid-cols-2 xl:grid-cols-3">
            {quotes.map((quote) => (
              <QuoteCard key={quote.id} quote={quote} canSend={canSend} canLike={canLike} />
            ))}
          </FadeInSection>
        )}
      </div>
    </div>
  );
}