<script setup lang="ts">
  /**
   * Vue 3 Script Setup Format
   * -------------------------------
   * This is Vue's Composition API with the <script setup> syntax - Vue 3's modern approach.
   * It's similar to React's functional components with hooks.
   *
   * Key differences from React:
   * - No need to return JSX - template is separate (like having JSX in a different section)
   * - No explicit useState - just use 'ref' or 'reactive' directly
   * - No useEffect - use 'onMounted', 'onUpdated', 'watch', etc.
   * - Variables/functions declared here are automatically available in the template
   */

  import { ref, onMounted } from "vue";
  import NotificationsProvider from "@/components/NotificationsProvider.vue";

  // 'ref' is like React's useState - creates a reactive variable
  // In React: const [isPageLoaded, setIsPageLoaded] = useState(false)
  const isPageLoaded = ref(false);

  // 'onMounted' is like React's useEffect with empty dependency array
  // In React: useEffect(() => { ... }, [])
  onMounted(() => {
    // Small delay to ensure DOM is fully loaded
    setTimeout(() => {
      // To update a ref value, use .value (this is different from React)
      // In React: setIsPageLoaded(true)
      isPageLoaded.value = true;
    }, 50);
  });
</script>

<template>
  <!-- 
    Template Section
    ---------------
    This is where Vue's template syntax (similar to JSX) goes
    Key differences from React:
    - Uses HTML-like syntax instead of JSX
    - v-bind: (or :) is like React's {}
    - v-on: (or @) is like React's onClick={} etc.
    - v-if, v-else, v-for instead of {condition && <element>} or {items.map()}
    - No fragments needed - templates can have multiple root elements
  -->

  <!-- Dynamic class binding similar to React's className={isPageLoaded ? 'opacity-100' : 'opacity-0'} -->
  <div :class="{ 'opacity-0': !isPageLoaded, 'opacity-100': isPageLoaded }">
    <!-- 
      Router View Component
      --------------------
      Similar to React Router's <Routes>/<Route> system, but more concise
      The v-slot exposes the component that should be rendered for the current route
      This is like React Router's element prop but with more capabilities
    -->
    <router-view v-slot="{ Component }">
      <!-- 
        Dynamic component rendering
        In React, this would be similar to a switch statement with routes
        The :key ensures the component is completely re-rendered when the route changes
      -->
      <component :is="Component" :key="$route.fullPath" />
    </router-view>
    
    <!-- Notifications provider for in-app push notifications -->
    <NotificationsProvider />
  </div>
</template>

<!-- 
  Notes:
  1. Vue files combine script, template, and style in one file (Single File Component)
  2. No need for explicit exports like in React
  3. There's no direct equivalent to React's Context API - Vue uses 'provide/inject' or Pinia store
  4. Vue's reactivity system is more granular than React's
  5. No need for useCallback or useMemo - Vue optimizes renders differently
-->
