<script setup lang="ts">
import { useUIStore } from '../stores/ui';
import { storeToRefs } from 'pinia';

const uiStore = useUIStore();
const { isStartMenuOpen } = storeToRefs(uiStore);

// Mock data for app list
const apps = [
  { name: 'File Explorer', icon: '📁' },
  { name: 'Web Browser', icon: '🌐' },
  { name: 'Settings', icon: '⚙️' },
  { name: 'Calculator', icon: '🧮' },
  { name: 'Notepad', icon: '📝' },
];
</script>

<template>
  <transition name="start-menu-fade">
    <div v-if="isStartMenuOpen" class="start-menu">
      <div class="user-profile">
        <div class="avatar"></div>
        <span>Daniel</span>
      </div>
      <ul class="app-list">
        <li v-for="app in apps" :key="app.name" class="app-item">
          <span class="icon">{{ app.icon }}</span>
          <span class="name">{{ app.name }}</span>
        </li>
      </ul>
      <div class="power-controls">
        <button class="power-btn">Power Off</button>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.start-menu-fade-enter-active,
.start-menu-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.start-menu-fade-enter-from,
.start-menu-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.start-menu {
  position: fixed;
  top: 52px; /* Taskbar height + a small gap */
  left: 4px;
  width: 320px;
  height: 450px;
  background: var(--taskbar-background);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid var(--taskbar-item-border-color);
  z-index: calc(var(--z-taskbar) - 1); /* Below taskbar, but above other UI */
  display: flex;
  flex-direction: column;
  color: var(--taskbar-item-text-color);
}

.user-profile {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--taskbar-item-border-color);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 12px;
}

.app-list {
  list-style: none;
  padding: 8px;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.app-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.app-item:hover {
  background-color: var(--taskbar-item-background-hover);
}

.app-item .icon {
  font-size: 20px;
  margin-right: 12px;
}

.power-controls {
  padding: 12px;
  border-top: 1px solid var(--taskbar-item-border-color);
  display: flex;
  justify-content: flex-end;
}

.power-btn {
  background: var(--taskbar-item-background);
  color: var(--taskbar-item-text-color);
  border: 1px solid var(--taskbar-item-border-color);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}
</style>
