import Link from 'next/link';
import CategoryIcon from '@/components/CategoryIcon';
import { listCategories, listProducts } from '@/lib/db';

export const dynamic = 'force-dynamic';

export default async function AdminCategories() {
  const [categories, products] = await Promise.all([listCategories(true), listProducts(true)]);
  const counts = new Map<string, number>();
  for (const p of products) counts.set(p.category_id, (counts.get(p.category_id) ?? 0) + 1);

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="font-display text-3xl">Kategoriler</h1>
          <p className="mt-1.5 text-sm text-cocoa-500">
            Menüdeki gruplama ve sıralamayı buradan yönetin.
          </p>
        </div>
        <Link href="/admin/kategoriler/yeni" className="btn-primary">
          Yeni kategori
        </Link>
      </header>

      <div className="grid gap-4 sm:grid-cols-2">
        {categories.map((c) => (
          <Link
            key={c.id}
            href={`/admin/kategoriler/${encodeURIComponent(c.id)}`}
            className="flex gap-4 rounded-2xl border border-cocoa-800/10 bg-white p-5 transition-all hover:-translate-y-0.5 hover:border-gold-500/40 hover:shadow-soft"
          >
            <CategoryIcon slug={c.slug} className="mt-0.5 h-8 w-8 shrink-0 text-gold-600" />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <h2 className="truncate font-display text-xl">{c.name}</h2>
                {!c.is_active && (
                  <span className="shrink-0 rounded-full bg-cocoa-800/10 px-2 py-0.5 text-[0.62rem] uppercase tracking-wider text-cocoa-500">
                    pasif
                  </span>
                )}
              </div>
              <p className="mt-1.5 line-clamp-2 text-sm text-cocoa-500">{c.description}</p>
              <p className="mt-3 text-xs uppercase tracking-wider text-cocoa-400">
                {counts.get(c.id) ?? 0} ürün · sıra {c.sort_order}
              </p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}