<template>
    <div
      class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
    >
      <!-- ================= BACKGROUND ELEMENTS ================= -->
      <!-- Bintang berkedip -->
      <div class="absolute inset-0">
        <div
          v-for="(star, index) in stars"
          :key="index"
          class="absolute rounded-full bg-white animate-twinkle"
          :class="star.class"
          :style="{
            top: star.top + '%',
            left: star.left + '%',
            width: star.size + 'px',
            height: star.size + 'px',
            animationDelay: star.delay + 's',
            opacity: star.opacity
          }"
        ></div>
      </div>
  
      <!-- Bulan -->
      <div class="absolute top-8 right-8 w-24 h-24">
        <div class="absolute inset-0 bg-yellow-100 rounded-full shadow-lg shadow-yellow-200/50"></div>
        <div class="absolute top-4 left-6 w-8 h-8 bg-yellow-50 rounded-full opacity-20"></div>
        <div class="absolute bottom-6 right-4 w-6 h-6 bg-yellow-50 rounded-full opacity-30"></div>
        <div class="absolute top-8 left-8 w-4 h-4 bg-yellow-50 rounded-full opacity-40"></div>
      </div>
  
      <!-- Awan dekoratif -->
      <div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
      <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
  
      <!-- ================= NAVIGATION ================= -->
      <nav
        v-if="currentSection !== 'landing'"
        class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
      >
        <ul
          class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
        >
          <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('say')" :class="navClass('say')">💫 Ucapan</button></li>
          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
        </ul>
      </nav>
  
      <!-- ================= MUSIK CONTROL ================= -->
      <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
        <button 
          @click="toggleMusic" 
          class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
        >
          {{ isPlaying ? '⏸️' : '▶️' }}
        </button>
        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
      </div>
  
      <!-- ================= MAIN CONTENT ================= -->
      <main
        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
      >
        <!-- Landing Page -->
        <KhitanALanding
          v-if="currentSection === 'landing'"
          :childName="formData.nama_panggilan"
          :guestName="data.nama_tamu"
          @next-page="switchSection('introduction')"
        />
  
        <!-- Introduction -->
        <KhitanIntroduction
          v-if="currentSection === 'introduction'"
          :form="formData"
          @next="switchSection('event')"
        />
  
        <!-- Event -->
        <KhitanEvent
          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"
          @next="switchSection('gallery')"
        />
  
        <!-- Gallery -->
        <KhitanGallery
          v-if="currentSection === 'gallery'"
          :images="galleryImages"
          @next="switchSection('say')"
        />
  
        <!-- Guest Book -->
        <KhitanSay
          v-if="currentSection === 'say'"
          :guestName="data.nama_tamu"
          :saySomething="formData.say_something"
          :messages="messages"
          @addMessage="addMessage"
          @next="switchSection('thanks')"
        />
  
        <!-- Thank You -->
        <KhitanThankYou
          v-if="currentSection === 'thanks'"
          :childName="formData.nama_panggilan"
          :jsonData="formData"
        />
      </main>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue'
  import { useRuntimeConfig } from '#app'
  
  // ================== IMPORT KOMPONEN ==================
  import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
  import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
  import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
  import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
  import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
  import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
  
  // ================== PROPS ==================
  const props = defineProps({
    data: { type: Object, required: true }
  })
  
  // ================== BACKEND CONFIG ==================
  const config = useRuntimeConfig()
  const backendUrl = config.public.apiBaseUrl
  
  // ================== FORM DATA ==================
  const formData = computed(() => props.data.form || {})
  
  // ================== GALERI ==================
  const galleryImages = computed(() => {
    const f = formData.value
    return [
      f.foto_1,
      f.foto_2,
      f.foto_3,
      f.foto_4
    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
  })
  
  // ================== NAVIGASI SECTION ==================
  const currentSection = ref('landing')
  const switchSection = (s) => (currentSection.value = s)
  
  // ================== BINTANG ANIMASI ==================
  const stars = ref([])
  
  const generateStars = () => {
    const starCount = 50
    const newStars = []
    
    for (let i = 0; i < starCount; i++) {
      newStars.push({
        top: Math.random() * 100,
        left: Math.random() * 100,
        size: Math.random() * 3 + 1,
        delay: Math.random() * 5,
        opacity: Math.random() * 0.7 + 0.3,
        class: `star-${i % 3}`
      })
    }
    stars.value = newStars
  }
  
  // ================== MUSIK ==================
  const audioPlayer = ref(null)
  const isPlaying = ref(false)
  const musicUrl = computed(() =>
    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
  )
  
  const toggleMusic = () => {
    if (!audioPlayer.value) return
    if (isPlaying.value) {
      audioPlayer.value.pause()
    } else {
      audioPlayer.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
  
  // ================== GUEST BOOK ==================
  const messages = ref([])
  const addMessage = (msg) => messages.value.push(msg)
  
  // ================== STYLE NAV ==================
  const navClass = (s) =>
    currentSection.value === s
      ? 'text-yellow-300 glow'
      : 'hover:text-yellow-200 transition-colors duration-300'
  
  // ================== LIFECYCLE ==================
  onMounted(() => {
    generateStars()
  })
  </script>
  
  <style scoped>
  /* Animasi bintang berkedip */
  @keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
  }
  
  .animate-twinkle {
    animation: twinkle 3s ease-in-out infinite;
  }
  
  /* Efek glow untuk navigasi aktif */
  .glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                 0 0 20px rgba(255, 255, 255, 0.6),
                 0 0 30px rgba(255, 255, 255, 0.4);
  }
  
  /* Transisi halus untuk konten utama */
  main {
    transition: all 0.7s ease-in-out;
  }
  
  /* Scrollbar custom */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  </style>