<template>
  <div class="min-h-screen flex flex-col">
    <TopBar @open-settings="showSettings = true" @open-files="showFiles = true" />
    <div class="flex-1 min-h-0 grid grid-cols-[300px_1fr_320px] max-[1100px]:grid-cols-1 max-[1100px]:grid-rows-[auto_auto_auto]">
      <SidebarLeft />
      <CanvasArea @open-screen-settings="showScreenSettings = true" />
      <SidebarRight />
    </div>
    <SettingsModal v-if="showSettings" @close="showSettings = false" />
    <ScreenSettingsModal v-if="showScreenSettings" @close="showScreenSettings = false" />
    <FileManager v-if="showFiles" @close="showFiles = false" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import TopBar from './components/TopBar.vue';
import SidebarLeft from './components/SidebarLeft.vue';
import SidebarRight from './components/SidebarRight.vue';
import CanvasArea from './components/CanvasArea.vue';
import SettingsModal from './components/SettingsModal.vue';
import ScreenSettingsModal from './components/ScreenSettingsModal.vue';
import FileManager from './components/FileManager.vue';
import { useEditorStore } from './stores/editor';

const store = useEditorStore();
const showSettings = ref(false);
const showScreenSettings = ref(false);
const showFiles = ref(false);

onMounted(() => {
    store.loadConfig();
    store.loadKnxAddresses();
});
</script>
