<script setup lang="ts">
import { useRoute } from 'vue-router'
import QuantHeader from './components/QuantHeader.vue'
import QuantFooter from './components/QuantFooter.vue'

const route = useRoute()
</script>

<template>
  <div v-if="route.path === '/login'" style="width: 100vw; height: 100vh;">
    <router-view />
  </div>

  <div v-else class="douzone-app-container">
    <QuantHeader />
    
    <!-- 12대 QuantEngine WBS 메뉴 네비게이션 바 -->
    <div style="background: #34495E; padding: 4px 16px; display: flex; gap: 8px; border-bottom: 1px solid #1A252F; overflow-x: auto; white-space: nowrap;">
      <router-link to="/dashboard" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-11: 펀드 KPI (Type 6)</router-link>
      <router-link to="/timeseries" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-01: 마켓 시계열 (Type 1)</router-link>
      <router-link to="/factors" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-02: 팩터 관리 (Type 2)</router-link>
      <router-link to="/waterfall" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-03: Waterfall 매도 (Type 1)</router-link>
      <router-link to="/shadow" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-04: Shadow 장부 (Type 2)</router-link>
      <router-link to="/comparison" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-05: KIS 괴리율 (Type 3 Split)</router-link>
      <router-link to="/etf" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-06: ETF NAV (Type 3 Split)</router-link>
      <router-link to="/settings" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-07: 캘리브레이션 (Type 4)</router-link>
      <router-link to="/database" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-09: DB 관리 (Type 2 Split)</router-link>
      <router-link to="/snapshots" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-10: 스냅샷 (Type 1)</router-link>
      <router-link to="/users" style="color: white; text-decoration: none; padding: 4px 10px; font-weight: bold;" active-class="bg-primary">SCR-12: 사용자 관리 (Type 2)</router-link>
    </div>

    <main style="flex: 1; overflow: hidden; background: #F4F6F9;">
      <router-view />
    </main>

    <QuantFooter />
  </div>
</template>
