<template>
    <div class="app-layout app-layout--editor" :class="{ 'sidebar-collapsed': collapsed }" id="app">
        <AppSidebar :collapsed="collapsed" @toggle-sidebar="toggleSidebar" />
        <div class="main-wrapper cw-main">
            <slot />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import AppSidebar from '@/Components/AppSidebar.vue';

const collapsed = ref(
    typeof window !== 'undefined' ? localStorage.getItem('sidebar-collapsed') === 'true' : false
);

const toggleSidebar = () => {
    collapsed.value = !collapsed.value;
    if (typeof window !== 'undefined') {
        localStorage.setItem('sidebar-collapsed', collapsed.value ? 'true' : 'false');
    }
};
</script>

<style>
/* Campaign editor - override app shell to lock height */
.app-layout--editor {
    height: 100vh;
    overflow: hidden;
}
.app-layout--editor .main-wrapper.cw-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 0;
}

/* SortableJS fallback ghost - renders on <body>, needs global CSS */
.cw-drag-fallback {
    background: #fff;
    border: 2px dashed #10b981;
    border-radius: 10px;
    opacity: 0.85;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: rotate(2deg);
}
</style>
