import { notFound } from "next/navigation";
import { AppMetaInfo, ChangelogTimeline, DownloadButtons, QRCodeSection, VersionHistory } from "@/components/app-detail";
import { AppGrid, UnlockSection } from "@/components/sections";
import { ScrollReveal } from "@/components/scroll-reveal";
import { DetailScrollShowcase } from "@/components/detail-scroll-showcase";
import { getAppBySlug, getApps } from "@/services/apps.service";
import { ScreenshotGallery } from "@/components/screenshot-gallery";
import { AccessGate } from "@/components/access-gate";

export default async function AppDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const app = await getAppBySlug(slug);
  if (!app) return notFound();

  const appResources = await getApps();
  const related = appResources.filter((i) => i.slug !== slug).slice(0, 3);
  return (
    <div className="space-y-5 py-6 md:space-y-6 md:py-8">
      <ScrollReveal>
      <section className="panel-strong">
        <div className="grid gap-4 md:grid-cols-12 md:items-center">
          <div className="md:col-span-8">
            <div className="flex items-center gap-4">
              <div className="grid h-14 w-14 place-items-center rounded-2xl border border-white/10 bg-slate-900/45 text-3xl">{app.icon}</div>
              <div>
                <h1 className="text-2xl font-bold md:text-3xl">{app.name}</h1>
                <p className="text-sm text-slate-300 md:text-base">{app.subtitle}</p>
              </div>
            </div>
            <div className="mt-3 flex flex-wrap gap-2">
              {app.tags.map((t) => <span key={t} className="pill">{t}</span>)}
            </div>
          </div>
          <div className="md:col-span-4">
            <div className="rounded-xl border border-cyan-300/25 bg-cyan-400/10 p-3 text-sm">
              <p className="text-xs uppercase tracking-wide text-cyan-200/80">下载提示</p>
              <p className="mt-2 text-slate-100">建议优先使用主线路，若下载慢可切换备用源或历史版本。</p>
            </div>
          </div>
        </div>
      </section>
      </ScrollReveal>
      <ScrollReveal delay={0.03}>
        <AppMetaInfo app={app} />
      </ScrollReveal>
      <ScrollReveal delay={0.06}>
        <AccessGate slug={app.slug}>
          <DownloadButtons app={app} />
        </AccessGate>
      </ScrollReveal>
      <DetailScrollShowcase name={app.name} />
      <ScrollReveal delay={0.08}>
        <VersionHistory app={app} />
      </ScrollReveal>
      <ScrollReveal delay={0.1}>
        <ChangelogTimeline app={app} />
      </ScrollReveal>
      <section className="grid gap-4 lg:grid-cols-12">
        <div className="space-y-4 lg:col-span-8">
          <ScrollReveal delay={0.12}>
          <section className="panel">
            <h3 className="text-base font-semibold">软件介绍</h3>
            <p className="mt-2 text-sm text-slate-300">{app.description}</p>
            <h4 className="mt-4 text-sm font-medium">使用说明</h4>
            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
              {app.usage.map((u) => <li key={u}>{u}</li>)}
            </ul>
          </section>
          </ScrollReveal>
          <ScrollReveal delay={0.14}>
            <ScreenshotGallery slug={app.slug} shots={app.screenshots} />
          </ScrollReveal>
        </div>
        <div className="space-y-4 lg:col-span-4">
          <ScrollReveal delay={0.16}>
            <QRCodeSection />
          </ScrollReveal>
          <ScrollReveal delay={0.18}>
            <UnlockSection />
          </ScrollReveal>
        </div>
      </section>
      <ScrollReveal delay={0.2}>
        <section className="space-y-3">
          <h3 className="text-base font-semibold">相关推荐</h3>
          <AppGrid apps={related} />
        </section>
      </ScrollReveal>
    </div>
  );
}