<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
</script>

<template>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="sidebar-brand" @click="router.push('/')">
        <div class="brand-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
          </svg>
        </div>
        <span class="brand-text">CI Hub</span>
      </div>

      <nav class="sidebar-nav">
        <router-link to="/" class="nav-item" :class="{ active: route.path === '/' }">
          <span class="nav-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
          </span>
          <span class="nav-label">Projects</span>
        </router-link>
      </nav>

      <div class="sidebar-footer">
        <button class="btn-new-project" @click="router.push('/projects/new')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          New Project
        </button>
      </div>
    </aside>

    <main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<style>
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body, #app {
  height: 100%;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f0f2f5;
}

/* Page transition */
.page-enter-active,
.page-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.page-enter-from { opacity: 0; transform: translateY(8px); }
.page-leave-to   { opacity: 0; transform: translateY(-8px); }
</style>

<style scoped>
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1a1d2e 0%, #16192a 100%);
  color: #c8ccd8;
  display: flex;
  flex-direction: column;
  user-select: none;
  border-right: 1px solid #ffffff08;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  cursor: pointer;
  border-bottom: 1px solid #ffffff0a;
}

.brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #409eff, #337ecc);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.brand-icon svg { width: 20px; height: 20px; }

.brand-text {
  font-size: 18px;
  font-weight: 700;
  color: #e8eaef;
  letter-spacing: -0.3px;
}

/* ── Nav ── */
.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #9ca0b0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}
.nav-item:hover {
  background: #ffffff08;
  color: #d0d4e0;
}
.nav-item.active {
  background: #ffffff0f;
  color: #fff;
  font-weight: 600;
}
.nav-icon svg { width: 18px; height: 18px; display: block; }

/* ── Footer button ── */
.sidebar-footer {
  padding: 16px 14px 20px;
  border-top: 1px solid #ffffff0a;
}

.btn-new-project {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(135deg, #409eff, #337ecc);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-new-project:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px #409eff40;
}
.btn-new-project:active { transform: translateY(0); }
.btn-new-project svg { width: 16px; height: 16px; }

/* ── Main ── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  background: #f0f2f5;
}
</style>
