frontend/app/app.vue

<script setup>
import Taskbar from '~/components/Taskbar.vue';
import AboutMeWindow from '~/components/AboutMeWindow.vue';
import TerminalWindow from '~/components/TerminalWindow.vue';
import WinampWindow from '~/components/WinampWindow.vue';
import { ref, reactive, onMounted, computed, provide, onUnmounted } from 'vue';

// --- Data Definitions ---

// Reactive array to hold all window states
const windows = reactive([]);

// Keep track of the highest z-index
const currentZIndex = ref(100);

// Desktop icons container position
const iconsContainerX = ref(0);
const iconsContainerY = ref(0);

// Dragging state for desktop icons container
const isIconsContainerDragging = ref(false);
const iconsContainerStartX = ref(0);
const iconsContainerStartY = ref(0);
const initialIconsContainerX = ref(0);
const initialIconsContainerY = ref(0);

// Define Start Menu Items with icons and actions
const startMenuItems = ref([
  {
    labelKey: 'terminal',
    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMiAxNlY4QzIyIDYuODk1NDMgMjEuMTA0NiA2IDIwIDZIMTRMMTIgNEg0QzIuODk1NDMgNCAyIDQuODk1NDMgMiA2VjE4QzIgMTkuMTA0NiAyLjg5NTQzIDIwIDQgMjBIMjBDMjEuMTA0NiAyMCAyMiAxOS4xMDQ2IDIyIDE4VjE2WiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPHBhdGggZD0iTTggMTJMMTAgMTQuNUwxMiAxMkwxMCA5LjVMOCAxMloiIGZpbGw9IndoaXRlIi8+CiAgICA8cGF0aCBkPSJNMTAgMTZIMTRWMThIMTBWMTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=',
    action: 'openTerminal',
  },
  {
    labelKey: 'about_me',
    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjRkZGRjAwIi8+CiAgICA8cGF0aCBkPSJNMTEgN0gxM1Y5SDExVjdaTTExIDExSDEzVjE3SDExVjExWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==',
    action: 'openAboutMe',
  },
  {
    labelKey: 'close_all_windows',
    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOC41IDUuNUw1LjUgMTguNU01LjUgNS41TDE4LjUgMTguNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=',
    action: 'closeAllWindows',
  },
]);

// --- Window Management Functions ---

const generateUniqueId = () => Date.now().toString(36) + Math.random().toString(36).substr(2);

const saveWindowsToLocalStorage = () => localStorage.setItem('windows', JSON.stringify(windows));

const openWindow = (type, titleKey, initialWidth = 600, initialHeight = 400) => {
  const existingWindow = windows.find(w => w.type === type);
  if (existingWindow) {
    bringWindowToFront(existingWindow.id);
    if (existingWindow.isMinimized) restoreWindow(existingWindow.id);
    existingWindow.isVisible = true;
  } else {
    currentZIndex.value++;
    const desktopWidth = window.innerWidth;
    const desktopHeight = window.innerHeight - 40;
    const initialX = (desktopWidth - initialWidth) / 2;
    const initialY = (desktopHeight - initialHeight) / 2 + 40;

    windows.push({
      id: generateUniqueId(),
      type, title: titleKey, isVisible: true, isMinimized: false,
      x: initialX, y: initialY, width: initialWidth, height: initialHeight,
      zIndex: currentZIndex.value,
    });
  }
  saveWindowsToLocalStorage();
};

const closeWindow = (id) => {
  const index = windows.findIndex(w => w.id === id);
  if (index !== -1) {
    windows.splice(index, 1);
    saveWindowsToLocalStorage();
  }
};

const closeAllWindows = () => {
  windows.length = 0;
  saveWindowsToLocalStorage();
};

const minimizeWindow = (id) => {
  const win = windows.find(w => w.id === id);
  if (win) {
    console.log(`Minimizing window ${id}. Before: isMinimized=${win.isMinimized}`);
    win.isMinimized = true;
    console.log(`Minimizing window ${id}. After: isMinimized=${win.isMinimized}`);
    saveWindowsToLocalStorage();
  }
};

const restoreWindow = (id) => {
  const win = windows.find(w => w.id === id);
  if (win) {
    console.log(`Restoring window ${id}. Before: isMinimized=${win.isMinimized}`);
    win.isMinimized = false;
    console.log(`Restoring window ${id}. After: isMinimized=${win.isMinimized}`);
    bringWindowToFront(id);
    saveWindowsToLocalStorage();
  }
};

const bringWindowToFront = (id) => {
  const win = windows.find(w => w.id === id);
  if (win) {
    currentZIndex.value++;
    win.zIndex = currentZIndex.value;
    console.log(`Bringing window ${id} to front. New zIndex: ${win.zIndex}`);
    saveWindowsToLocalStorage();
  }
};

const updateWindowPosition = (id, { x, y }) => {
  const win = windows.find(w => w.id === id);
  if (win) {
    win.x = x;
    win.y = y;
    saveWindowsToLocalStorage();
  }
};

const updateWindowDimensions = (id, { width, height }) => {
  const win = windows.find(w => w.id === id);
  if (win) {
    win.width = width;
    win.height = height;
    saveWindowsToLocalStorage();
  }
};

// --- Action Handlers ---

const openAboutMeWindow = () => openWindow('about-me', 'about_me');
const openTerminalWindow = () => openWindow('terminal', 'terminal');
const openWinampWindow = () => {
  console.log('Opening Winamp window via provide/inject.');
  openWindow('winamp', 'Winamp', 400, 200);
};

// Provide the openWinampWindow function
provide('openWinamp', openWinampWindow);

const menuActions = {
  openTerminal: openTerminalWindow,
  openAboutMe: openAboutMeWindow,
  closeAllWindows: closeAllWindows,
};

const handleMenuAction = (action) => {
  const func = menuActions[action];
  if (func) func();
};

// --- Desktop Icons Container Dragging Functions ---
const handleIconsContainerMouseDown = (e) => {
  // Only drag if not clicking on a window or taskbar
  if (e.target.closest('.window-wrapper') || e.target.closest('.taskbar')) {
    console.log('Clicked on a window or taskbar, not dragging desktop icons container.');
    return;
  }
  isIconsContainerDragging.value = true;
  iconsContainerStartX.value = e.clientX;
  iconsContainerStartY.value = e.clientY;
  initialIconsContainerX.value = iconsContainerX.value;
  initialIconsContainerY.value = iconsContainerY.value;
  console.log(`Icons container drag started. Initial pos: (${initialIconsContainerX.value}, ${initialIconsContainerY.value})`);
};

const handleIconsContainerMouseMove = (e) => {
  if (!isIconsContainerDragging.value) return;
  const dx = e.clientX - iconsContainerStartX.value;
  const dy = e.clientY - iconsContainerStartY.value;

  let newX = initialIconsContainerX.value + dx;
  let newY = initialIconsContainerY.value + dy;

  // Get desktop content dimensions
  const desktopContent = document.querySelector('.desktop-content');
  const desktopWidth = desktopContent.offsetWidth;
  const desktopHeight = desktopContent.offsetHeight;

  // Get NuxtPage (icons container) dimensions
  const nuxtPage = document.querySelector('.desktop-icons-container');
  const nuxtPageWidth = nuxtPage.offsetWidth;
  const nuxtPageHeight = nuxtPage.offsetHeight;

  // Define boundaries
  const minX = -(nuxtPageWidth - desktopWidth);
  const minY = -(nuxtPageHeight - desktopHeight);
  const maxX = 0;
  const maxY = 0;

  // Clamp newX and newY within boundaries
  iconsContainerX.value = Math.max(minX, Math.min(maxX, newX));
  iconsContainerY.value = Math.max(minY, Math.min(maxY, newY));

  console.log(`Icons container dragging. Current pos: (${iconsContainerX.value}, ${iconsContainerY.value})`);
};

const handleIconsContainerMouseUp = () => {
  if (isIconsContainerDragging.value) {
    isIconsContainerDragging.value = false;
    console.log(`Icons container drag ended. Final pos: (${iconsContainerX.value}, ${iconsContainerY.value})`);
  }
};

// --- Lifecycle Hooks ---

onMounted(() => {
  const savedWindows = localStorage.getItem('windows');
  if (savedWindows) {
    const parsedWindows = JSON.parse(savedWindows);
    parsedWindows.forEach(win => {
      if (win.zIndex > currentZIndex.value) currentZIndex.value = win.zIndex;
      windows.push(win);
    });
  }
  window.addEventListener('mousemove', handleIconsContainerMouseMove);
  window.addEventListener('mouseup', handleIconsContainerMouseUp);
});

onUnmounted(() => {
  window.removeEventListener('mousemove', handleIconsContainerMouseMove);
  window.removeEventListener('mouseup', handleIconsContainerMouseUp);
});

const minimizedWindows = computed(() => windows.filter(win => win.isMinimized));

</script>

<template>
  <div>
    <Taskbar
      :menu-items="startMenuItems"
      :minimized-windows="minimizedWindows"
      @menu-action="handleMenuAction"
      @restore-window="restoreWindow"
    />
    <div class="desktop-content">
      <div
        class="desktop-icons-container"
        :style="{ left: `${iconsContainerX}px`, top: `${iconsContainerY}px`, cursor: isIconsContainerDragging ? 'grabbing' : 'grab' }"
        @mousedown="handleIconsContainerMouseDown"
      >
        <NuxtPage />
      </div>
    </div>

    <template v-for="window in windows" :key="window.id">
      <AboutMeWindow
        v-if="window.type === 'about-me' && window.isVisible && !window.isMinimized"
        :window-data="window"
        @close="closeWindow(window.id)"
        @minimize="minimizeWindow(window.id)"
        @bring-to-front="bringWindowToFront(window.id)"
        @update-position="updateWindowPosition(window.id, $event)"
        @update-dimensions="updateWindowDimensions(window.id, $event)"
      />
      <TerminalWindow
        v-if="window.type === 'terminal' && window.isVisible && !window.isMinimized"
        :window-data="window"
        @close="closeWindow(window.id)"
        @minimize="minimizeWindow(window.id)"
        @bring-to-front="bringWindowToFront(window.id)"
        @update-position="updateWindowPosition(window.id, $event)"
        @update-dimensions="updateWindowDimensions(window.id, $event)"
      />
      <WinampWindow
        v-if="window.type === 'winamp' && window.isVisible && !window.isMinimized"
        :window-data="window"
        @close="closeWindow(window.id)"
        @minimize="minimizeWindow(window.id)"
        @bring-to-front="bringWindowToFront(window.id)"
        @update-position="updateWindowPosition(window.id, $event)"
        @update-dimensions="updateWindowDimensions(window.id, $event)"
      />
    </template>
  </div>
</template>

<style>
html {
  background-color: #008080;
  background-image: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Use vh for full viewport height */
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh; /* Use vh for full viewport height */
  font-family: 'Courier New', Courier, monospace;
}

.taskbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1000;
}

.desktop-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100vh - 40px); /* Changed to 100vh - 40px */
  box-sizing: border-box;
  background-color: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden; /* Prevent scrollbars on the desktop content itself */
}

.desktop-icons-container {
  position: relative; /* Allow positioning of children (NuxtPage) */
  width: 100%;
  height: 100%;
  cursor: grab;
}
</style>