<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 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('galeri')" :class="navClass('galeri')">Galeri</button></li>
        <li><button @click="switchSection('say')" :class="navClass('say')">Buku Tamu</button></li>
        <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
      </ul>
    </nav>

    <!-- Tombol Musik -->
    <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
      <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
        {{ isPlaying ? '⏸️' : '▶️' }}
      </button>
    </div>

    <main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
      <!-- Landing -->
      <Landing
        v-if="currentSection === 'landing'"
        :childName="formData.nama_panggilan"
        :guestName="tamu.nama_tamu || 'Tamu Undangan'"
        @open-invitation="switchSection('introduction')"
      />

      <!-- Introduction -->
      <Introduction
        v-if="currentSection === 'introduction'"
        :age="formData.umur_yang_dirayakan"
        :childName="formData.nama_lengkap"
        :childOrder="formData.anak_ke"
        :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
        :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[4]}` : null"
      />

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

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

      <!-- Guest Book -->
      <GuestBook v-if="currentSection === 'say'" :guestName="tamu.nama_tamu || 'Tamu Undangan'" :messages="rsvpData" @addMessage="addMessage" />

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

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

// Komponen
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 GuestBook from '~/components/templates/Ultah/GuestBook.vue'
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'

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

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

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

const galleryImages = computed(() => {
  const f = formData.value.foto
  if (Array.isArray(f)) {
    return f.map(img => `${backendUrl}/storage/${img}`)
  }
  return [
    formData.value.foto_1,
    formData.value.foto_2,
    formData.value.foto_3,
    formData.value.foto_4,
    formData.value.foto_5
  ].filter(Boolean).map(img => `${backendUrl}/${img}`)
})

// Debug log
watchEffect(() => {
  console.log("🧾 formData:", formData.value)
  console.log("🧾 rsvpData:", rsvpData.value)
  console.log("🖼️ galleryImages:", galleryImages.value)
  console.log("👤 tamu.nama_tamu:", props.tamu.nama_tamu)
  console.log("🚪 route.query.guest:", route.query.guest)
})

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

// Musik
const isPlaying = ref(false)
const toggleMusic = () => (isPlaying.value = !isPlaying.value)

// Buku tamu
const messages = ref([])
const addMessage = (msg) => messages.value.push(msg)

// Dummy countdown
const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 })

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