import type { Metadata } from "next";
import { Suspense } from "react";
import { connection } from "next/server";

import { AnalyticsDashboard } from "@/components/public/analytics-dashboard";
import { SiteFooter } from "@/components/public/site-footer";
import { SiteHeader } from "@/components/public/site-header";
import { Skeleton } from "@/components/ui/skeleton";
import { getCachedPublicAnalytics } from "@/lib/cache/analytics";

export const metadata: Metadata = {
  title: "วิเคราะห์ข้อมูล",
  description: "อันดับตัวละคร อาวุธ และอาร์ติแฟกต์ที่ใช้ในไกด์สาธารณะ พร้อมเลือกข้อมูล Stygian",
};

async function AnalyticsContent() {
  await connection();
  return <AnalyticsDashboard data={await getCachedPublicAnalytics()} />;
}

function AnalyticsSkeleton() {
  return <div aria-label="กำลังโหลดข้อมูลวิเคราะห์" className="flex flex-col gap-6">
    <Skeleton className="h-12 w-64" />
    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
      {Array.from({ length: 6 }, (_, index) => <Skeleton key={index} className="h-28" />)}
    </div>
    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {Array.from({ length: 3 }, (_, index) => <Skeleton key={index} className="h-96" />)}
    </div>
  </div>;
}

export default function AnalyticsPage() {
  return <div className="flex min-h-svh flex-col bg-background">
    <SiteHeader />
    <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
      <header className="flex flex-col gap-3">
        <h1 className="font-heading text-4xl font-semibold">วิเคราะห์ข้อมูล</h1>
        <p className="text-lg text-muted-foreground">ส่องภาพรวมตัวละคร อาวุธ และอาร์ติแฟกต์ที่ใช้ในทีมจากไกด์ทั้งหมด</p>
      </header>
      <Suspense fallback={<AnalyticsSkeleton />}><AnalyticsContent /></Suspense>
    </main>
    <SiteFooter />
  </div>;
}