<template>
  <div class="drawer lg:drawer-open">
    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />

    <!--
      DRAWER CONTENT: Main page content area.
      Uses min-h-screen and flex to create sticky footer layout.
    -->
    <div class="drawer-content flex flex-col min-h-screen relative">
      <HeaderAuth />
      <main class="flex-1 p-4 md:p-8 bg-base-200">
        <PageTransition name="fade">
          <router-view />
        </PageTransition>
      </main>

      <!-- Footer stays at bottom: pushed down by flex-1 on main -->
      <Footer />

      <!-- The SearchResults component now lives here and will appear as an overlay -->
      <SearchResults v-if="searchStore.showResults" />

      <notifications position="top center" />
    </div>

    <!-- DRAWER SIDE: This is your main navigation sidebar. It is no longer conditional. -->
    <div class="drawer-side">
      <label for="my-drawer-2" class="drawer-overlay"></label>
      <SideBar />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSearchStore } from '../stores/search';
import { useOilPriceStore } from '../stores/oilPrice'; // [NEW]
import { useSettingsStore } from '../stores/settings';
import HeaderAuth from './headers/headerauth.vue';
import SideBar from './sidebar/sidebar.vue';
import Footer from './footers/footer.vue';
import SearchResults from '../components/SearchResults.vue';
import PageTransition from '../components/PageTransition.vue';
import { onMounted } from 'vue'; // [NEW]

const searchStore = useSearchStore();
const oilPriceStore = useOilPriceStore(); // [NEW]
const settingsStore = useSettingsStore();

onMounted(() => {
  oilPriceStore.fetchPrices(); // [NEW] Global check
  settingsStore.fetchSettings();
});
</script>
