import { prisma } from "@/lib/prisma";
import { SITE } from "@/lib/site";
import SeoTabs from "@/components/admin/SeoTabs";

export default async function AdminSitemapPage() {
  const [productCount, categoryCount, collectionCount, pageCount] = await Promise.all([
    prisma.product.count({ where: { active: true } }),
    prisma.category.count(),
    prisma.collection.count(),
    prisma.pageSeo.count(),
  ]);
  const total = productCount + categoryCount + collectionCount + pageCount;

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Sitemap</h1>
      <p className="mt-1 text-sm text-stone-500">
        A real, auto-generated <code className="rounded bg-stone-100 px-1">sitemap.xml</code> — it updates itself
        whenever a product, category, or page changes. Nothing to edit here.
      </p>

      <SeoTabs active="/iv-manage-84x2/seo/sitemap" />

      <div className="max-w-xl rounded-lg border border-rose-100 bg-white p-4">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-stone-700">Live sitemap</span>
          <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-rose-700 hover:underline">
            View sitemap.xml →
          </a>
        </div>
        <div className="mt-3 grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
          <div>
            <p className="text-xs uppercase text-stone-500">Pages</p>
            <p className="font-semibold text-stone-800">{pageCount}</p>
          </div>
          <div>
            <p className="text-xs uppercase text-stone-500">Categories</p>
            <p className="font-semibold text-stone-800">{categoryCount}</p>
          </div>
          <div>
            <p className="text-xs uppercase text-stone-500">Collections</p>
            <p className="font-semibold text-stone-800">{collectionCount}</p>
          </div>
          <div>
            <p className="text-xs uppercase text-stone-500">Products</p>
            <p className="font-semibold text-stone-800">{productCount}</p>
          </div>
        </div>
        <p className="mt-3 text-xs text-stone-400">{total} URLs total, all pointing at {SITE.siteUrl}.</p>
      </div>

      <div className="mt-4 max-w-xl rounded-lg border border-rose-100 bg-white p-4">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-stone-700">robots.txt</span>
          <a href="/robots.txt" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-rose-700 hover:underline">
            View robots.txt →
          </a>
        </div>
        <p className="mt-1 text-xs text-stone-500">Allows search engines everywhere except /iv-manage-84x2, /account, /checkout, and /cart, and points them at the sitemap above.</p>
      </div>
    </div>
  );
}