import Link from "next/link";
import { redirect } from "next/navigation";
import { BarChart3, FileCheck2, Shield, Users } from "lucide-react";
import { DashboardStat } from "@/components/dashboard-stat";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatCompactNumber } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function AdminPage() {
  const session = await auth();
  if (!session?.user || !["ADMIN", "EDITOR"].includes(session.user.role)) redirect("/dashboard");

  const [users, pending, published, views, recent] = await Promise.all([
    prisma.user.count(),
    prisma.article.count({ where: { status: "PENDING" } }),
    prisma.article.count({ where: { status: "PUBLISHED" } }),
    prisma.article.aggregate({ _sum: { views: true } }),
    prisma.article.findMany({
      include: { author: { select: { name: true, email: true } }, category: true },
      orderBy: { updatedAt: "desc" },
      take: 12
    })
  ]);

  return (
    <section className="px-4 py-10 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Admin panel</p>
        <h1 className="mt-3 font-display text-4xl font-black text-white">Infomix Command Center</h1>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <DashboardStat label="Users" value={users} icon={Users} />
          <DashboardStat label="Pending approval" value={pending} icon={FileCheck2} />
          <DashboardStat label="Published articles" value={published} icon={Shield} />
          <DashboardStat label="Total views" value={formatCompactNumber(views._sum.views || 0)} icon={BarChart3} />
        </div>

        <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_320px]">
          <div className="glass overflow-hidden rounded-lg">
            <div className="border-b border-white/10 p-5">
              <h2 className="font-display text-xl font-bold text-white">Moderation queue</h2>
            </div>
            <div className="divide-y divide-white/10">
              {recent.map((article) => (
                <div key={article.id} className="grid gap-4 p-5 lg:grid-cols-[1fr_auto] lg:items-center">
                  <div>
                    <p className="font-semibold text-white">{article.title}</p>
                    <p className="mt-1 text-xs text-white/45">{article.category.name} · {article.author.name || article.author.email} · {article.status}</p>
                  </div>
                  <div className="flex gap-2">
                    <form action={`/api/admin/articles/${article.id}/approve`} method="post">
                      <button className="rounded-full bg-cyanx px-4 py-2 text-xs font-black text-ink">Approve</button>
                    </form>
                    <Link href={`/article/${article.slug}`} className="rounded-full border border-white/12 px-4 py-2 text-xs font-semibold text-white/72">Preview</Link>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <aside className="space-y-4">
            <div className="glass rounded-lg p-5">
              <h2 className="font-display text-lg font-bold text-white">Monetization</h2>
              <p className="mt-3 text-sm leading-6 text-white/58">AdSense, sponsored posts, affiliate disclosures, newsletter sponsorships, and premium membership controls are modeled and ready for extension.</p>
            </div>
            <div className="glass rounded-lg p-5">
              <h2 className="font-display text-lg font-bold text-white">SEO controls</h2>
              <p className="mt-3 text-sm leading-6 text-white/58">Per-article metadata, canonical URLs, schema, sitemap, robots, category clusters, and Open Graph assets are enabled.</p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}