import Link from "next/link";
import { prisma } from "@/lib/db";
import { ScanLine, AlertTriangle, Repeat, Map, FileCode, Image as ImageIcon, Bot } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function SuperSeoOverviewPage() {
  const [
    articleCount,
    avgScore,
    lowScore,
    notFoundCount,
    redirectCount,
    missingAlt,
  ] = await Promise.all([
    prisma.article.count({ where: { status: "published" } }),
    prisma.article.aggregate({
      where: { status: "published" },
      _avg: { seoScore: true },
    }),
    prisma.article.count({
      where: { status: "published", seoScore: { lt: 60 } },
    }),
    prisma.notFoundLog.count({ where: { resolved: false } }),
    prisma.redirect
      .count({ where: { enabled: true } })
      .catch(() => 0),
    prisma.media.count({ where: { OR: [{ alt: null }, { alt: "" }] } }),
  ]);

  const cards: Array<{
    href: string;
    Icon: typeof ScanLine;
    title: string;
    metric: string;
    sub: string;
    tone: string;
  }> = [
    {
      href: "/admin/super-seo/health",
      Icon: ScanLine,
      title: "SEO Health",
      metric: avgScore._avg.seoScore != null ? avgScore._avg.seoScore.toFixed(1) : "—",
      sub: `${articleCount} bài · ${lowScore} bài < 60đ`,
      tone: lowScore > 5 ? "text-amber-300" : "text-emerald-300",
    },
    {
      href: "/admin/super-seo/404-monitor",
      Icon: AlertTriangle,
      title: "404 Monitor",
      metric: notFoundCount.toString(),
      sub: notFoundCount > 0 ? "URL chưa xử lý" : "Không có lỗi",
      tone: notFoundCount > 0 ? "text-rose-300" : "text-emerald-300",
    },
    {
      href: "/admin/super-seo/redirects",
      Icon: Repeat,
      title: "Redirects",
      metric: redirectCount.toString(),
      sub: "Quy tắc đang bật",
      tone: "text-ink-secondary",
    },
    {
      href: "/admin/super-seo/images",
      Icon: ImageIcon,
      title: "Image SEO",
      metric: missingAlt.toString(),
      sub: missingAlt > 0 ? "Ảnh thiếu alt" : "Tất cả ảnh có alt",
      tone: missingAlt > 0 ? "text-amber-300" : "text-emerald-300",
    },
    {
      href: "/admin/super-seo/sitemap",
      Icon: Map,
      title: "Sitemap",
      metric: "auto",
      sub: "Sinh động từ DB",
      tone: "text-ink-secondary",
    },
    {
      href: "/admin/super-seo/robots",
      Icon: Bot,
      title: "Robots.txt",
      metric: "edit",
      sub: "Chặn AI crawler, set rules",
      tone: "text-ink-secondary",
    },
    {
      href: "/admin/super-seo/schema",
      Icon: FileCode,
      title: "Schema markup",
      metric: "11",
      sub: "JSON-LD types",
      tone: "text-ink-secondary",
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {cards.map((c) => (
        <Link
          key={c.href}
          href={c.href}
          className="group rounded-xl border border-stroke-subtle bg-bg-elevated/40 p-5 hover:border-accent-primary/40 hover:bg-bg-elevated/70 transition"
        >
          <div className="flex items-start justify-between gap-3 mb-3">
            <div className="rounded-lg p-2 bg-bg-overlay border border-stroke-subtle group-hover:border-accent-primary/40 transition">
              <c.Icon className="h-5 w-5 text-ink-secondary group-hover:text-accent-primary transition" />
            </div>
            <span className={`text-2xl font-display font-bold ${c.tone}`}>
              {c.metric}
            </span>
          </div>
          <div className="font-display font-semibold text-sm">{c.title}</div>
          <div className="text-xs text-ink-muted mt-0.5">{c.sub}</div>
        </Link>
      ))}
    </div>
  );
}