<template>
  <div>
    <!-- Pastikan data sudah ada -->
    <WeddingA v-if="props.data" :data="formattedData" />
    <div v-else class="text-center py-20">
      <p class="text-red-600 font-semibold">Undangan tidak ditemukan 😢</p>
    </div>
  </div>
</template>

<script setup>
import WeddingA from '~/components/templates/wedding/weddingA.vue'

// Props dari parent (/p/[code].vue)
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

// Format data dari backend agar cocok dengan struktur WeddingA.vue
const formattedData = computed(() => {
  const f = props.data.form || {}

  return {
    id: props.data.id,
    coverImage: f.cover_image || '/default-cover.jpg',
    heroImage: f.hero_image || '/default-hero.jpg',
    greeting: f.say_something || 'Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Anda...',
    eventDate: f.hari_tanggal_resepsi,
    bride: {
      fullname: f.nama_lengkap_wanita,
      nickname: f.nama_panggilan_wanita,
      photo: f.foto_wanita ? `http://localhost:8000/storage/${f.foto_wanita}` : '/wanita.jpg',
      fatherName: f.nama_ayah_wanita || f.nama_bapak_wanita, // fleksibel 
      motherName: f.nama_ibu_wanita,
      instagram: f.instagram_wanita || ''
    },
    groom: {
      fullname: f.nama_lengkap_pria,
      nickname: f.nama_panggilan_pria,
      photo: f.foto_pria ? `http://localhost:8000/storage/${f.foto_pria}` : '/pria.jpg',
      fatherName: f.nama_ayah_pria || f.nama_bapak_pria, // fleksibel
      motherName: f.nama_ibu_pria,
      instagram: f.instagram_pria || ''
    },
    akad: {
      date: f.hari_tanggal_akad,
      time: f.waktu_akad,
      place: f.tempat_akad,
      address: f.alamat_akad,
      mapUrl: f.link_gmaps_akad
    },
    resepsi: {
      date: f.hari_tanggal_resepsi,
      time: f.waktu_resepsi,
      place: f.tempat_resepsi,
      address: f.alamat_resepsi,
      mapUrl: f.link_gmaps_resepsi
    },
    gallery: [1, 2, 3, 4, 5, 6]
      .map(i => f[`foto_${i}`])
      .filter(Boolean)
      .map(x => `http://localhost:8000/storage/${x}`),
    musicUrl: f.link_music || ''
  }
})
</script>
