import { count } from "drizzle-orm";
import { getTranslations } from "next-intl/server";

import { Link } from "@/i18n/navigation";
import { db } from "@/lib/db";
import { leads, siteTests, sites, user } from "@/lib/db/schema";

export default async function AdminPage() {
  const t = await getTranslations("Admin");
  const [
    [{ value: usersCount }],
    [{ value: sitesCount }],
    [{ value: testsCount }],
    [{ value: leadsCount }],
  ] = await Promise.all([
    db.select({ value: count() }).from(user),
    db.select({ value: count() }).from(sites),
    db.select({ value: count() }).from(siteTests),
    db.select({ value: count() }).from(leads),
  ]);

  const cards = [
    { href: "/admin/users", label: t("nav.users"), value: usersCount },
    { href: "/admin/sites", label: t("nav.sites"), value: sitesCount },
    { href: "/admin/tests", label: t("nav.tests"), value: testsCount },
    { href: "/admin/leads", label: t("nav.leads"), value: leadsCount },
  ];

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {cards.map((c) => (
          <Link
            key={c.href}
            href={c.href}
            className="rounded-lg border p-6 transition-colors hover:bg-muted/50"
          >
            <div className="text-3xl font-semibold tracking-tight">{c.value}</div>
            <div className="mt-1 text-sm text-muted-foreground">{c.label}</div>
          </Link>
        ))}
      </div>
    </div>
  );
}