<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useWindowsStore } from '../stores/windows';
import { useUIStore } from '../stores/ui';
import { useSettingsStore } from '../stores/settings'; // Import settings store
import Window from './Window.vue';
import Taskbar from './Taskbar.vue';
import SnapPreview from './SnapPreview.vue';
import StartMenu from './StartMenu.vue';
import type { SnapType } from '../composables/useDraggable';

const windowsStore = useWindowsStore();
const uiStore = useUIStore();
const settingsStore = useSettingsStore();

const { orderedWindows } = storeToRefs(windowsStore);
const { isStartMenuOpen } = storeToRefs(uiStore); // Get start menu state
const { createWindow, snapWindow, closeAllWindows } = windowsStore;
const { closeStartMenu } = uiStore;
const { toggleTheme } = settingsStore;

const snapPreview = ref<{ x: number; y: number; width: number; height: number; } | null>(null);

// --- Start Menu Event Handlers ---
function handleMenuAction(action: () => void) {
  action();
  closeStartMenu();
}

function handleAbout() { handleMenuAction(() => console.log('About clicked')); }
function handleSettings() { handleMenuAction(() => console.log('Settings clicked')); }
function handleSignOut() { handleMenuAction(() => console.log('Sign Out clicked')); }
function handleToggleTheme() { handleMenuAction(toggleTheme); }
function handleCloseAllWindows() { handleMenuAction(closeAllWindows); }
// --------------------------------

function handleSnapPreview(snapType: SnapType) {
  if (!snapType) {
    snapPreview.value = null;
    return;
  }

  const taskbarHeight = 22;
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight - taskbarHeight;

  switch (snapType) {
    case 'left':
      snapPreview.value = { x: 0, y: taskbarHeight, width: screenWidth / 2, height: screenHeight };
      break;
    case 'right':
      snapPreview.value = { x: screenWidth / 2, y: taskbarHeight, width: screenWidth / 2, height: screenHeight };
      break;
    case 'top':
      snapPreview.value = { x: 0, y: taskbarHeight, width: screenWidth, height: screenHeight };
      break;
  }
}

function handleSnapExecute({ windowId, snapType }: { windowId: string; snapType: SnapType }) {
  snapPreview.value = null;
  if (snapType) {
    snapWindow(windowId, snapType);
  }
}

function handleDesktopClick() {
  closeStartMenu();
}

</script>

<template>
  <div class="desktop" @click.self="handleDesktopClick">
    <Window
      v-for="window in orderedWindows"
      :key="window.id"
      :window="window"
      @snap-preview="handleSnapPreview"
      @snap-execute="handleSnapExecute"
    />

    <SnapPreview v-if="snapPreview" :preview="snapPreview" />
    <StartMenu 
      v-if="isStartMenuOpen"
      @about="handleAbout"
      @settings="handleSettings"
      @toggle-theme="handleToggleTheme"
      @sign-out="handleSignOut"
      @close-all-windows="handleCloseAllWindows"
    />

    <div class="fixed top-14 left-4 z-[9999] flex flex-col gap-2">
        <button @click="() => createWindow('New App')" class="bg-white/20 backdrop-blur-md text-white font-bold py-2 px-4 rounded-lg shadow-lg">
            + Create Window
        </button>
    </div>

    <Taskbar />
  </div>
</template>

<style scoped>
.desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--background-desktop);
  overflow: hidden;
  padding-top: 22px;
}
</style>
