const { createApp, ref, onMounted, computed } = Vue;

createApp({
  setup() {
    const carData = ref({});
    const isLoading = ref(true);
    const error = ref(null);

    // Function to load configuration from data.json
    const loadCarData = async () => {
      try {
        const dataJsonPath = './data.json';
        const response = await fetch(dataJsonPath, { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        carData.value = data;
        isLoading.value = false;
      } catch (err) {
        console.error('Error loading car data:', err);
        error.value = err.message;
        isLoading.value = false;
      }
    };

    onMounted(async () => {
      // Set page title based on device
      document.title = window.innerWidth <= 768 ? 'Auto en Venta' : (carData.value?.pageTitle);

      // Load car data from data.json
      await loadCarData();

      // Initialize carousel and animations after data is loaded
      if (!error.value) {
        // Wait for DOM to be fully updated
        setTimeout(() => {
          // Initialize AOS animations
          AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            mirror: false,
            offset: 50
          });

          // Initialize enhanced mobile-friendly carousel
          try {
            // Make sure the carousel element exists before initializing
            const carouselElement = document.getElementById('carCarousel');
            
            // Check if carousel element exists and has carousel items
            if (carouselElement && carData.value && carData.value.carImages && carData.value.carImages.length > 0) {
              // Wait a bit more for images to load
              setTimeout(() => {
                // Initialize with simpler options to ensure compatibility
                bulmaCarousel.attach('#carCarousel', {
                  slidesToScroll: 1,
                  slidesToShow: 1,
                  loop: true,
                  autoplay: true,
                  autoplaySpeed: 3000,
                  pagination: true
                });
                console.log('Carousel initialized successfully');
              }, 200);
            } else {
              console.error('Carousel element not found or no images available');
            }
          } catch (error) {
            console.error('Error initializing carousel:', error);
            
            // Fallback: Create a simple manual carousel if Bulma carousel fails
            try {
              const carouselElement = document.getElementById('carCarousel');
              if (carouselElement) {
                // Add a class to indicate fallback mode
                carouselElement.classList.add('fallback-carousel');
                
                // Get all carousel items
                const items = carouselElement.querySelectorAll('.carousel-item');
                if (items.length > 0) {
                  // Show only the first item initially
                  items.forEach((item, index) => {
                    item.style.display = index === 0 ? 'block' : 'none';
                  });
                  
                  console.log('Fallback carousel initialized');
                }
              }
            } catch (fallbackError) {
              console.error('Error initializing fallback carousel:', fallbackError);
            }
          }

          // Add fade-in animation to elements with class 'fade-in'
          document.querySelectorAll('.fade-in').forEach((el, index) => {
            setTimeout(() => {
              el.classList.add('visible');
            }, 100 * index);
          });
        }, 300); // Increased timeout to ensure DOM is ready
      }
    });

    return {
      carData,
      isLoading,
      error
    };
  }
}).mount('#app');