<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const currentTitle = computed(() => (route.meta.title as string) || 'SupplyAgent')
</script>

<template>
  <div class="app-shell">
    <nav class="nav">
      <RouterLink class="brand" to="/">SupplyAgent</RouterLink>
      <div class="links">
        <RouterLink to="/" exact-active-class="active">平台全局需求地图</RouterLink>
        <RouterLink to="/video-discovery" active-class="active">需求汇总</RouterLink>
      </div>
      <span class="current">{{ currentTitle }}</span>
    </nav>
    <main class="main">
      <RouterView />
    </main>
  </div>
</template>

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

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 28px;
  height: 48px;
  flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
}

.brand {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.links {
  display: flex;
  gap: 6px;
}

.links a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.links a:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.links a.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: none;
}

.current {
  margin-left: auto;
  font-size: 12px;
  color: #94a3b8;
}

.main {
  flex: 1;
  min-height: 0;
  padding: 20px 28px 24px;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
