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

export const metadata: Metadata = {
  title: "Modern & Minim Rasa Sakit",
  description: "Sunat modern dengan teknologi terkini, minim rasa sakit, dan proses cepat di Klinik Adera Yogyakarta. Ditangani dokter berpengalaman dengan metode modern.",
  keywords: ["sunat modern", "sunat minim sakit", "sunat tanpa jahit", "sunat laser", "sunat anak", "sunat Yogyakarta", "sunat nyaman"],
  openGraph: {
    title: "Modern & Minim Rasa Sakit | Sunat Racing - Klinik Adera",
    description: "Sunat modern dengan teknologi terkini, minim rasa sakit, dan proses cepat di Klinik Adera.",
    images: ["/assets/sunat-racing/keunggulan.jpg"],
    type: "article",
  },
  twitter: {
    card: "summary_large_image",
    title: "Modern & Minim Rasa Sakit | Sunat Racing - Klinik Adera",
    description: "Sunat modern dengan teknologi terkini, minim rasa sakit, dan proses cepat.",
    images: ["/assets/sunat-racing/keunggulan.jpg"],
  },
  alternates: {
    canonical: "/sunat-racing/modern-minim-sakit",
  },
};

// Loading fallback component
const AdvantageDetailSkeleton = () => (
  <div className="min-h-screen bg-gradient-to-b from-[#1656e2] to-[#0c2f7c] 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" />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div className="space-y-8">
          <Skeleton className="w-80 h-20 bg-white/20" />
          <Skeleton className="w-full aspect-[557/508] bg-white/20 rounded-[15px]" />
        </div>
        <div className="space-y-12">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex gap-5">
              <Skeleton className="w-12 h-14 bg-white/20" />
              <div className="flex-1 space-y-4">
                <Skeleton className="w-full h-10 bg-white/20" />
                <Skeleton className="w-full h-20 bg-white/20" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

async function getModernMinimSakitAdvantage() {
  try {
    const data = await SunatRacingService.getAdvantageBySlug("modern-minim-sakit");
    return data;
  } catch (error) {
    console.warn("[Build Warning] Failed to fetch Modern Minim Sakit advantage:", error instanceof Error ? error.message : "");
    return null;
  }
}

const Page = async () => {
  const advantageData = await getModernMinimSakitAdvantage();

  // Fallback data if CMS fails
  const fallbackData = {
    id: "1",
    title: "Modern & Minim Rasa Sakit",
    description: "Proses cepat, minim rasa sakit, aman untuk anak.",
    detailTitle: "Modern &\nMinim Rasa Sakit",
    detailImageUrl: "/assets/sunat-racing/keunggulan.jpg",
    detailItems: [
      "Teknologi dengan menggunakan Sunat Modern - Menggunakan teknologi sunat modern yang presisi, proses lebih cepat, aman, dan meminimalkan trauma jaringan untuk kenyamanan serta penyembuhan optimal.",
      "Teknik Minim Nyeri dengan Anestesi Modern - Kombinasi anestesi modern tanpa jarum dan teknik presisi membantu mengurangi rasa nyeri, membuat anak lebih tenang, nyaman selama tindakan, serta mempercepat proses pemulihan pasca sunat.",
      "Proses Cepat & Terkontrol, Aman, Terukur, dan Mempercepat Pemulihan Anak - Tindakan dilakukan singkat, terukur, dan aman, sehingga mempercepat pemulihan anak serta menurunkan risiko komplikasi pasca sunat.",
    ],
    order: 1,
  };

  const data = advantageData ? {
    id: advantageData.id,
    title: advantageData.title,
    description: advantageData.description || "",
    detailTitle: advantageData.detailTitle || advantageData.title,
    detailImageUrl: advantageData.detailImageUrl || "/assets/sunat-racing/keunggulan.jpg",
    detailItems: advantageData.detailItems || [],
    order: advantageData.order,
  } : fallbackData;

  return (
    <Suspense fallback={<AdvantageDetailSkeleton />}>
      <AdvantageDetailMain advantage={data} />
    </Suspense>
  );
};

export default Page;