import { Suspense } from "react";
import type { Metadata } from "next";
import PaketDetailMain from "../_components/PaketDetailMain";
import SunatRacingService from "@/services/sunat-racing.service";
import { Skeleton } from "@/components/ui/skeleton";

export const metadata: Metadata = {
  title: "Paket Turbo",
  description: "Paket Turbo Sunat Racing Adera - Rapi Premium, Nyaman Maksimal, Pemulihan Lebih Cepat. Sunat cetak lem dengan bius tanpa jarum dan perawatan premium.",
  keywords: ["paket turbo", "sunat premium", "sunat Yogyakarta", "sunat cetak lem", "bius tanpa jarum", "sunat anak premium"],
  openGraph: {
    title: "Paket Turbo | Sunat Racing - Klinik Adera",
    description: "Paket Turbo Sunat Racing Adera - Rapi Premium, Nyaman Maksimal, Pemulihan Lebih Cepat.",
    images: ["/assets/sunat-racing/hero-logo.png"],
    type: "article",
  },
  twitter: {
    card: "summary_large_image",
    title: "Paket Turbo | Sunat Racing - Klinik Adera",
    description: "Paket Turbo Sunat Racing Adera - Rapi Premium, Nyaman Maksimal, Pemulihan Lebih Cepat.",
    images: ["/assets/sunat-racing/hero-logo.png"],
  },
  alternates: {
    canonical: "/sunat-racing/paket/turbo",
  },
};

// Loading fallback component
const PaketDetailSkeleton = () => (
  <div className="min-h-screen bg-gradient-to-b from-[#1b63ff] to-[#001e5f] pt-[120px] pb-20">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
      <Skeleton className="w-32 h-12 bg-white/20" />
      <Skeleton className="w-96 h-16 bg-white/20" />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <Skeleton className="h-96 bg-white/20 rounded-[26px]" />
        <Skeleton className="h-96 bg-white/20 rounded-[19px]" />
      </div>
    </div>
  </div>
);

async function getTurboPackage() {
  try {
    const data = await SunatRacingService.getPackageBySlug("turbo");
    return data;
  } catch (error) {
    console.warn("[Build Warning] Failed to fetch Turbo package:", error instanceof Error ? error.message : "");
    return null;
  }
}

const Page = async () => {
  const packageData = await getTurboPackage();

  // Fallback data if CMS fails
  const fallbackData = {
    name: "Turbo",
    description: "Paket sunat premium dengan metode cauter lem dan bius tanpa jarum.",
    summary: "Rapi Premium, Nyaman Maksimal, Pemulihan Lebih Cepat.",
    price: 3300000,
    priceText: "Rp. 3.300.000",
    benefits: [
      "Sunat cetak lem yang lebih rapi, bius tanpa jarum lebih nyaman, perawatan premium, serta suplement booster untuk pemulihan lebih cepat.",
    ],
    tableRows: [
      { label: "Metode Sunat:", value: "Cetak Lem" },
      { label: "Bius:", value: "2 - 4 jam (bius tanpa jarum)" },
      { label: "Perawat luka:", value: "Spray Premium" },
      { label: "Penyulit:", value: "Ada" },
      { label: "Obat:", value: "Sirup/Tablet" },
      { label: "Suplement Booster:", value: "Ada" },
      { label: "Paket Dokumentasi:", value: "Ada" },
      { label: "Hadiah:", value: "Mobil mainan" },
    ],
    galleryImages: [],
  };

  const data = packageData || fallbackData;

  const tableRows = data.tableRows?.map((row) => ({
    label: row.label,
    value: row.value,
    isNone: row.value.toLowerCase() === "none" || row.value === "-",
  })) || [];

  return (
    <Suspense fallback={<PaketDetailSkeleton />}>
      <PaketDetailMain
        packageName={data.name}
        title={data.name}
        description={data.summary || data.description || ""}
        tableRows={tableRows}
        price={data.priceText || `Rp. ${data.price?.toLocaleString("id-ID")}`}
        kelebihan={Array.isArray(data.benefits) ? data.benefits.join(" ") : data.description || ""}
        iconGradient="from-[#00ff6a] to-[#00ffa1]"
        tableGradient="from-[#00d776] to-[#0aab40]"
        activeTab="turbo"
        galleryImages={data.galleryImages || []}
      />
    </Suspense>
  );
};

export default Page;