<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import AppSidebar from './AppSidebar.vue';
import AppHeader from './AppHeader.vue';
import { useDashboardStore } from '@/stores/dashboard';

const dashStore = useDashboardStore();

onMounted(() => {
  dashStore.initResize();
});

onUnmounted(() => {
  dashStore.destroyResize();
});
</script>

<template>
  <div class="app-layout">
    <!-- Mobile overlay backdrop -->
    <div
      v-if="dashStore.isMobile && dashStore.mobileSidebarOpen"
      class="sidebar-overlay"
      @click="dashStore.closeMobileSidebar"
    />

    <AppSidebar />

    <div
      class="main-container"
      :class="{
        collapsed: !dashStore.isMobile && dashStore.sidebarCollapsed,
        mobile: dashStore.isMobile,
      }"
    >
      <AppHeader />
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<style scoped>
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-container {
  flex: 1;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--duration-collapse) var(--ease-default);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

.main-container.collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* Mobile: main content takes full width, no margin for sidebar */
.main-container.mobile {
  margin-left: 0;
}

.main-content {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
  background: var(--color-bg);
}

/* Overlay backdrop for mobile sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-sticky) + 1);
}

@media (max-width: 768px) {
  .main-content {
    padding: var(--space-4);
  }
}
</style>
