<template>
  <div class="zeno-chatbot-ai-admin-app font-sans text-gray-800 w-full">
    <!-- Navigation -->
    <AppNavbar />

    <!-- Main Content -->
    <main class="w-full ps-0 pr-[1rem] pb-6">
      <!-- Vue Router will render components here with smooth transitions -->
      <router-view v-slot="{ Component, route }">
        <transition name="page" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>

    <!-- Toast Notifications -->
    <ToastNotification />
  </div>
</template>

<script setup>
import { onMounted, provide } from 'vue'
import AppNavbar from './AppNavbar.vue'
import ToastNotification from './ToastNotification.vue'
import { useToast } from '@/Admin/js/composables/useToast.js'

// Global notifications
const toast = useToast()

// Provide notifications and toast globally
provide('toast', toast)

// Initialize app
onMounted(() => {
  // Hide all WordPress admin notices when our SPA loads
  hideWordPressNotices()
})

// Function to hide WordPress admin notices
const hideWordPressNotices = () => {
  // Hide notices in the current page
  const notices = document.querySelectorAll('.notice, .error, .updated, .update-nag')
  notices.forEach(notice => {
    notice.style.display = 'none'
  })

  // Also hide notices that might be added after our app loads
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === 1) { // Element node
          if (node.matches && node.matches('.notice, .error, .updated, .update-nag')) {
            node.style.display = 'none'
          }
          // Also check child elements
          const childNotices = node.querySelectorAll && node.querySelectorAll('.notice, .error, .updated, .update-nag')
          if (childNotices) {
            childNotices.forEach(notice => notice.style.display = 'none')
          }
        }
      })
    })
  })

  // Start observing
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
}
</script>

<!-- No scoped styles needed - using Tailwind classes directly -->

<!-- Global styles to hide WordPress admin notices on our pages -->
<style>
/* Hide all WordPress admin notices when our SPA is mounted */
.zeno-chatbot-ai-admin .notice,
.zeno-chatbot-ai-admin .error,
.zeno-chatbot-ai-admin .updated,
.zeno-chatbot-ai-admin .update-nag {
  display: none !important;
}

/* Hide WordPress admin notices globally on our admin pages */
body.toplevel_page_zeno-chatbot-ai .notice,
body.toplevel_page_zeno-chatbot-ai .error,
body.toplevel_page_zeno-chatbot-ai .updated,
body.toplevel_page_zeno-chatbot-ai .update-nag,
body.ai-chat-support_page_zeno-chatbot-ai-settings .notice,
body.ai-chat-support_page_zeno-chatbot-ai-settings .error,
body.ai-chat-support_page_zeno-chatbot-ai-settings .updated,
body.ai-chat-support_page_zeno-chatbot-ai-settings .update-nag {
  display: none !important;
}

/* Ensure full-width layout for our admin app */
.zeno-chatbot-ai-admin {
  width: 100%;
  max-width: none;
}

.zeno-chatbot-ai-admin .wrap {
  margin: 0;
  padding: 1.5rem;
  width: 100%;
  max-width: none;
}

#zeno-chatbot-ai-admin-app {
  width: 100%;
  max-width: none;
}

/* Override WordPress admin container constraints */
body.toplevel_page_zeno-chatbot-ai #wpbody-content,
body.ai-chat-support_page_zeno-chatbot-ai-settings #wpbody-content {
  padding-right: 0;
}

body.toplevel_page_zeno-chatbot-ai .wrap,
body.ai-chat-support_page_zeno-chatbot-ai-settings .wrap {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* Smooth page transition styles */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

.page-enter-to,
.page-leave-from {
  opacity: 1;
}
</style>
