import Link from "next/link";
import { prisma } from "@/lib/db";
import { Button } from "@/components/ui/button";
import { AddonCard } from "@/components/public/AddonCard";
import { HeroBanner } from "@/components/public/HeroBanner";
import { Sparkles, Shield, Zap } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  const [featuredAddons, totalDownloads, launcher] = await Promise.all([
    prisma.addon.findMany({
      where: { published: true },
      include: {
        releases: {
          where: { isLatest: true },
          select: { version: true },
        },
      },
      orderBy: { totalDownloads: "desc" },
      take: 6,
    }),
    prisma.addon.aggregate({
      _sum: { totalDownloads: true },
    }),
    prisma.software.findUnique({
      where: { slug: "nanami-launcher" },
      include: {
        versions: {
          where: { isLatest: true },
          take: 1,
        },
      },
    }),
  ]);

  const launcherVersion = launcher?.versions[0]?.version ?? null;

  return (
    <>
      <HeroBanner
        totalDownloads={totalDownloads._sum.totalDownloads ?? undefined}
        launcherVersion={launcherVersion}
      />

      {/* Features */}
      <section className="relative border-t border-amber-900/20 bg-gradient-to-b from-[#0d0b15] to-[#110f1a] dark:from-[#0d0b15] dark:to-[#110f1a]">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(168,85,247,0.06)_0%,transparent_70%)]" />
        <div className="relative mx-auto max-w-6xl px-4 py-16">
          <div className="grid gap-8 md:grid-cols-3">
            <div className="flex flex-col items-center rounded-xl border border-amber-500/10 bg-white/5 p-6 text-center backdrop-blur transition-colors hover:border-amber-500/25">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-500/10">
                <Sparkles className="h-6 w-6 text-amber-400" />
              </div>
              <h3 className="mt-4 font-semibold text-amber-100">深度适配</h3>
              <p className="mt-2 text-sm text-gray-400">
                专为乌龟服 1.18.0 打造，兼容自定义内容与新种族，稳定流畅
              </p>
            </div>
            <div className="flex flex-col items-center rounded-xl border border-amber-500/10 bg-white/5 p-6 text-center backdrop-blur transition-colors hover:border-amber-500/25">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500/10">
                <Shield className="h-6 w-6 text-purple-400" />
              </div>
              <h3 className="mt-4 font-semibold text-amber-100">
                一键安装管理
              </h3>
              <p className="mt-2 text-sm text-gray-400">
                通过 Nanami 启动器自动安装、更新，告别手动拖拽文件夹
              </p>
            </div>
            <div className="flex flex-col items-center rounded-xl border border-amber-500/10 bg-white/5 p-6 text-center backdrop-blur transition-colors hover:border-amber-500/25">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-500/10">
                <Zap className="h-6 w-6 text-cyan-400" />
              </div>
              <h3 className="mt-4 font-semibold text-amber-100">
                内置 AI 翻译
              </h3>
              <p className="mt-2 text-sm text-gray-400">
                自带智能翻译引擎，轻松畅玩英文服务器，语言不再是障碍
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Addons */}
      {featuredAddons.length > 0 && (
        <section className="border-t border-amber-900/20 bg-gradient-to-b from-[#110f1a] to-[#0d0b15] dark:from-[#110f1a] dark:to-[#0d0b15]">
          <div className="mx-auto max-w-6xl px-4 py-16">
            <div className="mb-8 flex items-center justify-between">
              <h2 className="text-2xl font-bold text-amber-100">热门插件</h2>
              <Button
                variant="outline"
                className="border-amber-500/20 text-amber-200 hover:border-amber-500/40 hover:bg-amber-500/10 hover:text-amber-100"
                render={<Link href="/addons" />}
              >
                查看全部
              </Button>
            </div>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {featuredAddons.map((addon) => (
                <AddonCard key={addon.id} addon={addon} />
              ))}
            </div>
          </div>
        </section>
      )}
    </>
  );
}
