import { categoryLabels } from "@/lib/mock-data";
import { AppGrid, HeroSection, StatsPanel, UnlockSection } from "@/components/sections";
import { ScrollReveal } from "@/components/scroll-reveal";
import { getApps } from "@/services/apps.service";
import Link from "next/link";

export default async function Home() {
  const appResources = await getApps();
  const latest = [...appResources].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
  const featured = appResources.filter((a) => a.featured).slice(0, 6);
  return (
    <div className="space-y-8 py-6 md:space-y-10 md:py-8">
      <ScrollReveal>
        <HeroSection />
      </ScrollReveal>

      <ScrollReveal delay={0.02}>
        <StatsPanel />
      </ScrollReveal>

      <section className="panel">
        <div className="mb-3 flex items-center justify-between">
          <h2 className="text-base font-semibold md:text-lg">热门分类</h2>
          <Link href="/apps" className="text-xs text-cyan-300 md:text-sm">按分类浏览</Link>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <span className="pill pill-active shrink-0">全部</span>
          {Object.values(categoryLabels).map((label) => (
            <span key={label} className="pill shrink-0">{label}</span>
          ))}
        </div>
      </section>

      <section className="space-y-3">
        <div className="flex min-w-0 flex-wrap items-baseline justify-between gap-2">
          <h2 className="section-title shrink-0">精选资源推荐</h2>
          <Link href="/apps" className="shrink-0 text-sm text-cyan-300">查看更多</Link>
        </div>
        <AppGrid apps={featured} />
      </section>

      <section className="grid min-w-0 grid-cols-1 gap-6 lg:grid-cols-12">
        <div className="min-w-0 lg:col-span-8">
          <div className="mb-3 flex min-w-0 flex-wrap items-end justify-between gap-2">
            <h2 className="section-title shrink-0">最新更新</h2>
            <Link href="/apps" className="shrink-0 text-sm text-cyan-300">查看全部</Link>
          </div>
          <div className="panel overflow-hidden p-0">
            <div className="hidden grid-cols-12 border-b border-white/10 bg-slate-900/25 px-4 py-2 text-xs text-slate-400 md:grid">
              <span className="col-span-6">资源信息</span>
              <span className="col-span-2 text-center">版本</span>
              <span className="col-span-2 text-center">大小</span>
              <span className="col-span-2 text-center">更新日期</span>
            </div>
            {latest.slice(0, 8).map((app) => (
              <Link
                key={app.id}
                href={`/apps/${app.slug}`}
                className="grid gap-2 border-b border-white/10 px-4 py-3 transition hover:bg-white/5 last:border-b-0 md:grid-cols-12 md:items-center"
              >
                <div className="col-span-6 flex min-w-0 items-start gap-3 sm:items-center">
                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-white/10 bg-slate-900/45 text-lg leading-none">{app.icon}</span>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-semibold">{app.name}</p>
                    <p className="truncate text-xs text-slate-400">{app.subtitle}</p>
                  </div>
                </div>
                <div className="col-span-6 grid grid-cols-3 pl-12 text-xs text-slate-300 sm:pl-0 md:text-sm">
                  <span className="text-center tabular-nums">{app.version}</span>
                  <span className="text-center tabular-nums">{app.size}</span>
                  <span className="text-center tabular-nums">{app.updatedAt}</span>
                </div>
              </Link>
            ))}
          </div>
        </div>

        <aside className="min-w-0 space-y-4 lg:col-span-4">
          <div className="panel">
            <div className="mb-2 flex items-center justify-between">
              <p className="text-sm font-semibold">下载热榜</p>
              <span className="text-xs text-slate-400">按下载量</span>
            </div>
            <div className="space-y-2">
              {latest.slice(0, 6).map((app, index) => (
                <Link
                  key={app.id}
                  href={`/apps/${app.slug}`}
                  className="flex min-w-0 items-center justify-between gap-3 rounded-xl border border-white/10 bg-slate-900/20 px-3 py-2 text-xs text-slate-200 transition hover:border-cyan-300/30 hover:bg-slate-900/35"
                >
                  <span className="flex min-w-0 items-center gap-2.5 truncate">
                    <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-cyan-300/35 bg-cyan-400/10 text-[10px] font-semibold text-cyan-200">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <span className="truncate">{app.name}</span>
                  </span>
                  <span className="shrink-0 tabular-nums text-cyan-200">{app.downloads.toLocaleString()}</span>
                </Link>
              ))}
            </div>
          </div>
        </aside>
      </section>

      <ScrollReveal delay={0.04}>
        <UnlockSection />
      </ScrollReveal>
    </div>
  );
}