<template>
  <div id="app" class="ms-app" :data-current-login="'guest'">
    <aside class="ms-side">
      <div class="gs-logo">Workspace</div>
      <nav class="gs-nav">
        <router-link to="/search" class="gs-nav-item" active-class="active">
          <img class="gs-nav-icon" src="/icons/Search.png" alt="">
          <span>Search</span>
        </router-link>
        <router-link to="/library" class="gs-nav-item" active-class="active">
          <img class="gs-nav-icon" src="/icons/Library.png" alt="">
          <span>Library</span>
        </router-link>
        <router-link to="/people" class="gs-nav-item" active-class="active">
          <img class="gs-nav-icon" src="/icons/People.png" alt="">
          <span>People</span>
        </router-link>
      </nav>
      <div class="gs-divider"></div>
      <div class="gs-footer">
        <div class="gs-theme-switcher">
          <button class="gs-theme-btn active">☀️</button>
          <button class="gs-theme-btn">🌙</button>
          <button class="gs-theme-btn">🌗</button>
        </div>
        <div class="gs-account"><span class="gs-account-name">Demo</span></div>
      </div>
    </aside>
    <main class="ms-main">
      <div class="ms-content"><router-view /></div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const appZoom = ref(100)

function handleKeydown(e: KeyboardEvent) {
  if ((e.metaKey || e.ctrlKey)) {
    if (e.key === '=' || e.key === '+') {
      e.preventDefault()
      appZoom.value = Math.min(appZoom.value + 10, 300)
      document.documentElement.style.zoom = appZoom.value + '%'
    } else if (e.key === '-') {
      e.preventDefault()
      appZoom.value = Math.max(appZoom.value - 10, 50)
      document.documentElement.style.zoom = appZoom.value + '%'
    } else if (e.key === '0') {
      e.preventDefault()
      appZoom.value = 100
      document.documentElement.style.zoom = '100%'
    }
  }
}

onMounted(() => document.addEventListener('keydown', handleKeydown))
onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
</script>

<style>
@import './assets/wordpress-exact.css';
</style>

<style scoped>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; color: #202124; }
#app { display: flex; min-height: 100vh; }
.ms-side { width: 260px; background: #fff; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
.gs-logo { padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid #e8eaed; }
.gs-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.gs-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: #5f6368; text-decoration: none; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; cursor: pointer; }
.gs-nav-item:hover { background: #f1f3f4; color: #202124; }
.gs-nav-item.active { background: #e8f0fe; color: #1967d2; border-left-color: #1967d2; font-weight: 600; }
.gs-nav-icon { width: 24px; height: 24px; object-fit: contain; }
.gs-divider { height: 1px; background: #e8eaed; margin: 4px 0; }
.gs-footer { padding: 12px 20px; border-top: 1px solid #e8eaed; }
.gs-theme-switcher { display: flex; gap: 6px; margin-bottom: 10px; }
.gs-theme-btn { width: 32px; height: 32px; border: 1px solid #dadce0; background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; }
.gs-theme-btn:hover { background: #f1f3f4; }
.gs-theme-btn.active { border-color: #1967d2; background: #e8f0fe; }
.gs-account-name { font-size: 12px; color: #80868b; }
.ms-main { margin-left: 260px; flex: 1; min-height: 100vh; background: #fff; }
.ms-content { padding: 24px 32px; max-width: 1200px; }
</style>
