<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 relative overflow-hidden">
    <!-- Navigation -->
    <nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
      <ul
        class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
        <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
        <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
        <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
      </ul>
    </nav>

    <main
      class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">

      <!-- Landing Section -->
      <Landing
        v-if="currentSection === 'landing'"
        :childName="formData.nama_lengkap"
        @open-invitation="switchSection('introduction')"
      />

      <!-- Introduction Section -->
      <Introduction
        v-if="currentSection === 'introduction'"
        :childName="formData.nama_lengkap"
        :age="formData.umur_yang_dirayakan"
        :childPhoto="photoUrl(formData.foto_1)"
      />

      <!-- Event Section -->
      <Event
        v-if="currentSection === 'event'"
        :hari_tanggal_acara="formData.hari_tanggal_acara"
        :waktu="formData.waktu"
        :alamat="formData.alamat"
      />

      <!-- Gallery Section -->
      <Gallery
        v-if="currentSection === 'gallery'"
        :images="galleryImages"
      />

      <!-- Thank You Section -->
      <ThankYou
        v-if="currentSection === 'thanks'"
        :childName="formData.nama_lengkap"
        :jsonData="formData"
      />
    </main>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useRuntimeConfig } from '#app'

// Komponen dasar
import Landing from '~/components/templates/Ultah/Landing.vue'
import Introduction from '~/components/templates/Ultah/Introduction.vue'
import Event from '~/components/templates/Ultah/Event.vue'
import Gallery from '~/components/templates/Ultah/Gallery.vue'
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'

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

// Runtime config
const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl

// Data dari backend
const formData = computed(() => props.data.form || {})

// ✅ Fungsi pembentuk URL aman untuk gambar
const photoUrl = (path) => {
  if (!path) return null
  if (path.startsWith('storage/') || path.startsWith('uploads/')) {
    return `${backendUrl}/${path}`
  }
  return `${backendUrl}/storage/${path}`
}

// ✅ Ambil foto_1 dan foto_2 untuk galeri
const galleryImages = computed(() => {
  return [formData.value.foto_1, formData.value.foto_2]
    .filter(Boolean)
    .map(photoUrl)
})

// Navigasi antar section
const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s)

// Style untuk navigasi aktif
const navClass = (s) =>
  currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600'

// Debugging
watchEffect(() => {
  console.log('🎂 formData Starter:', formData.value)
  console.log('🖼️ galleryImages:', galleryImages.value)
})
</script>
