import { Suspense } from "react";
import type { Metadata } from "next";
import ProgramMcuMain from "./_components/ProgramMcuMain";
import McuService from "@/services/mcu.service";
import type { MCUContent } from "@/services/mcu.service";
import { Skeleton } from "@/components/ui/skeleton";

export const metadata: Metadata = {
  title: "Medical Check Up",
  description: "Pemeriksaan kesehatan lengkap, cepat, dan akurat untuk anak hingga dewasa. Pilih paket MCU sesuai kebutuhan Anda di Klinik Adera Yogyakarta.",
  keywords: ["medical check up", "MCU", "pemeriksaan kesehatan", "MCU Yogyakarta", "MCU anak", "MCU dewasa", "MCU pre-employment", "cek kesehatan"],
  openGraph: {
    title: "Medical Check Up | Klinik Adera",
    description: "Pemeriksaan kesehatan lengkap, cepat, dan akurat untuk anak hingga dewasa di Klinik Adera.",
    images: ["/assets/program/hero.png"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Medical Check Up | Klinik Adera",
    description: "Pemeriksaan kesehatan lengkap, cepat, dan akurat untuk anak hingga dewasa.",
    images: ["/assets/program/hero.png"],
  },
  alternates: {
    canonical: "/layanan/mcu",
  },
};

// Loading fallback component
const MCUSkeleton = () => (
  <div className="space-y-8">
    {/* Hero Skeleton */}
    <div className="bg-background-custom p-6">
      <div className="max-w-7xl mx-auto space-y-12">
        <div className="text-center space-y-6">
          <Skeleton className="w-96 h-16 mx-auto" />
          <Skeleton className="w-[500px] h-8 mx-auto" />
          <div className="flex gap-4 justify-center">
            <Skeleton className="w-48 h-14 rounded-full" />
            <Skeleton className="w-48 h-14 rounded-full" />
          </div>
        </div>
        <Skeleton className="w-full aspect-video rounded-xl" />
      </div>
    </div>

    {/* Services Skeleton */}
    <div className="bg-gradient-to-r from-[#5D8BFF] to-[#104CE4] py-10">
      <div className="max-w-7xl mx-auto space-y-6">
        <Skeleton className="w-80 h-10 bg-white/20" />
        <Skeleton className="w-96 h-6 bg-white/20" />
        <div className="flex gap-2 overflow-hidden">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <Skeleton key={i} className="min-w-70 h-80 bg-white/20 rounded-lg" />
          ))}
        </div>
      </div>
    </div>

    {/* Advantage Skeleton */}
    <div className="bg-background-custom py-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <Skeleton className="w-96 h-10" />
        <Skeleton className="w-[500px] h-6" />
        <div className="flex justify-between">
          <div className="flex flex-col gap-2 max-w-125">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="flex gap-4">
                <Skeleton className="w-4 h-4 rounded-full" />
                <div className="flex-1 space-y-1">
                  <Skeleton className="w-48 h-6" />
                  <Skeleton className="w-full h-16" />
                </div>
              </div>
            ))}
          </div>
          <div className="flex gap-3">
            <Skeleton className="w-88.5 h-128 rounded-4xl" />
            <Skeleton className="w-88.5 h-128 rounded-4xl" />
          </div>
        </div>
      </div>
    </div>
  </div>
);

// Fallback data when CMS is unavailable
const fallbackContent: MCUContent = {
  hero: {
    title: "Medical Check Up",
    subtitle: "Pemeriksaan kesehatan lengkap, cepat, dan akurat untuk anak hingga dewasa.",
    primaryCtaLabel: "Reservasi Sekarang",
    secondaryCtaLabel: "Lihat Layanan",
  },
  pageContent: {
    serviceSectionTitle: "Jenis Layanan Medical Check Up",
    serviceSectionSubtitle: "Beragam paket pemeriksaan kesehatan tersedia sesuai kebutuhan usia dan tujuan.",
    advantageSectionTitle: "Kenapa Medical Check Up di Klinik Adera",
    advantageSectionSubtitle: "Pelayanan pemeriksaan kesehatan lengkap dengan proses cepat, akurat, dan terpercaya.",
    advantageImagePrimaryUrl: "/assets/program/advantage.jpg",
    advantageImageSecondaryUrl: "/assets/program/advantage.jpg",
    advantageStatValue: "342",
    advantageStatLabel: "Pasien Pemberian layanan dirumah",
    flowSectionTitle: "Cara melakukan MCU di Klinik Adera",
    flowSectionSubtitle: "Pemesanan home care mudah, cepat, bisa online atau langsung hubungi admin klinik.",
    flowImageUrl: "/assets/program/advantage.jpg",
    testimonialSectionTitle: "Testimonial Pasien MCU",
    testimonialSectionSubtitle: "Cerita dari pasien yang telah melakukan medical check up di Klinik Adera.",
  },
  serviceCards: [
    {
      id: "1",
      title: "MCU Anak",
      description: "Pemeriksaan kesehatan dasar untuk memantau tumbuh kembang anak",
      items: [
        "Pemeriksaan fisik umum",
        "Berat badan & tinggi badan",
        "Cek mata dan telinga",
        "Pemeriksaan gigi dasar",
        "Tes darah ringan",
        "Konsultasi dokter",
      ],
      order: 1,
    },
    {
      id: "2",
      title: "MCU Dewasa",
      description: "Pemeriksaan kesehatan komprehensif untuk deteksi dini penyakit",
      items: [
        "Pemeriksaan fisik lengkap",
        "Tes darah lengkap",
        "Pemeriksaan jantung",
        "Pemeriksaan fungsi hati & ginjal",
        "Pemeriksaan urine",
        "Konsultasi dokter",
      ],
      order: 2,
    },
    {
      id: "3",
      title: "MCU Pre-employment",
      description: "Pemeriksaan kesehatan untuk keperluan melamar pekerjaan",
      items: [
        "Pemeriksaan fisik",
        "Tes darah",
        "Pemeriksaan urine",
        "Rontgen dada",
        "Tes buta warna",
        "Surat keterangan sehat",
      ],
      order: 3,
    },
  ],
  advantages: [
    {
      id: "1",
      title: "Hasil cepat & akurat",
      description: "Proses pemeriksaan efisien dengan laporan hasil yang jelas dan mudah dipahami.",
      color: "#FFAE00",
      order: 1,
    },
    {
      id: "2",
      title: "Tenaga medis berpengalaman",
      description: "Ditangani dokter dan perawat berpengalaman yang memastikan pemeriksaan dilakukan dengan standar terbaik.",
      color: "#3EFF75",
      order: 2,
    },
    {
      id: "3",
      title: "Jadwal fleksibel",
      description: "Pemesanan layanan bisa dilakukan kapan saja tanpa perlu datang langsung ke klinik.",
      color: "#FF4DCF",
      order: 3,
    },
    {
      id: "4",
      title: "Alat pemeriksaan modern",
      description: "Menggunakan peralatan medis terkini untuk hasil yang lebih akurat dan terpercaya. Serta alat medis steril dan standar kesehatan.",
      color: "#5F91FF",
      order: 4,
    },
  ],
  steps: [
    { id: "1", title: "Hubungi Klinik", description: "Telepon, WhatsApp, atau email resmi Klinik Adera.", order: 1 },
    { id: "2", title: "Sampaikan Kebutuhan", description: "Informasikan jenis layanan, lokasi pasien, dan jadwal.", order: 2 },
    { id: "3", title: "Konfirmasi Tenaga Medis", description: "Klinik menyesuaikan tenaga medis berpengalaman sesuai kebutuhan.", order: 3 },
    { id: "4", title: "Terima Jadwal & Biaya", description: "Pasien menerima rincian jadwal kunjungan dan biaya layanan.", order: 4 },
    { id: "5", title: "Layanan Dilaksanakan", description: "Tenaga medis datang ke rumah pasien dengan peralatan lengkap dan steril.", order: 5 },
  ],
};

async function getMCUContent(): Promise<MCUContent> {
  try {
    const data = await McuService.getContent();
    return data || fallbackContent;
  } catch (error) {
    console.error("Failed to fetch MCU content:", error);
    return fallbackContent;
  }
}

const Page = async () => {
  const content = await getMCUContent();

  return (
    <Suspense fallback={<MCUSkeleton />}>
      <ProgramMcuMain content={content} />
    </Suspense>
  );
};

export default Page;