<template>
  <SidebarProvider>
    <div class="flex h-screen w-full">
      <!-- Main Sidebar -->
      <AppSidebar />
      
      <!-- Main Content Area -->
      <SidebarInset class="flex-1 flex flex-col min-w-0">
        <!-- Header -->
        <AppHeader />
        
        <!-- Content Area -->
        <main class="flex-1 flex overflow-hidden">
          <!-- Main Content -->
          <div class="flex-1 overflow-auto">
            <router-view />
          </div>
          
          <!-- Detail Panel (conditionally shown) -->
          <div 
            v-if="showDetailPanel" 
            class="w-80 border-l bg-background overflow-auto"
          >
            <slot name="detail-panel">
              <!-- Default detail panel content -->
              <div class="p-4">
                <h3 class="text-lg font-semibold mb-4">Details</h3>
                <p class="text-muted-foreground">Select an item to view details</p>
              </div>
            </slot>
          </div>
        </main>
      </SidebarInset>
    </div>
  </SidebarProvider>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
import AppSidebar from './AppSidebar.vue'
import AppHeader from './AppHeader.vue'

// Show detail panel based on route or store state
const route = useRoute()
const showDetailPanel = computed(() => {
  // Show detail panel for certain routes or when an item is selected
  return route.meta?.showDetailPanel || false
})
</script>