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

const activeTab = ref('kpi')
</script>

<template>
  <div style="display: flex; flex-direction: column; height: 100%;">
    <!-- Vue 3 Anti-Scroll Tab Navigation -->
    <div style="background: #E2E8F0; padding: 6px 12px; display: flex; gap: 8px; border-bottom: 1px solid #CBD5E1;">
      <button
        type="button"
        :style="{ backgroundColor: activeTab === 'kpi' ? '#2C3E50' : '#FFFFFF', color: activeTab === 'kpi' ? '#FFFFFF' : '#2C3E50' }"
        style="padding: 6px 16px; border: 1px solid #CBD5E1; font-weight: bold; border-radius: 4px; cursor: pointer;"
        @click="activeTab = 'kpi'">
        핵심 자산 KPI
      </button>
      <button
        type="button"
        :style="{ backgroundColor: activeTab === 'actions' ? '#2C3E50' : '#FFFFFF', color: activeTab === 'actions' ? '#FFFFFF' : '#2C3E50' }"
        style="padding: 6px 16px; border: 1px solid #CBD5E1; font-weight: bold; border-radius: 4px; cursor: pointer;"
        @click="activeTab = 'actions'">
        빠른 제어
      </button>
      <button
        type="button"
        :style="{ backgroundColor: activeTab === 'system' ? '#2C3E50' : '#FFFFFF', color: activeTab === 'system' ? '#FFFFFF' : '#2C3E50' }"
        style="padding: 6px 16px; border: 1px solid #CBD5E1; font-weight: bold; border-radius: 4px; cursor: pointer;"
        @click="activeTab = 'system'">
        시스템 가동 상태
      </button>
    </div>

    <!-- Tab Pane 1: KPI -->
    <div v-if="activeTab === 'kpi'" style="padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
      <div style="background: #FFFFFF; padding: 20px; border-radius: 6px; border: 1px solid #CBD5E1; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
        <span style="font-size: 12px; color: #7F8C8D; font-weight: bold;">등록 관리자</span>
        <h2 style="margin: 8px 0; color: #2C3E50;">1 명</h2>
        <span style="background: #E8F8F5; color: #117864; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">PASS</span>
      </div>
      <div style="background: #FFFFFF; padding: 20px; border-radius: 6px; border: 1px solid #CBD5E1; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
        <span style="font-size: 12px; color: #7F8C8D; font-weight: bold;">수집 실행 이력</span>
        <h2 style="margin: 8px 0; color: #2C3E50;">42 회</h2>
        <span style="background: #E8F8F5; color: #117864; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">정상 작동</span>
      </div>
      <div style="background: #FFFFFF; padding: 20px; border-radius: 6px; border: 1px solid #CBD5E1; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
        <span style="font-size: 12px; color: #7F8C8D; font-weight: bold;">PostgreSQL DB 연결</span>
        <h2 style="margin: 8px 0; color: #2ECC71;">Active</h2>
        <span style="background: #E8F8F5; color: #117864; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">3NF 스토어 연결됨</span>
      </div>
    </div>

    <!-- Tab Pane 2: Actions -->
    <div v-if="activeTab === 'actions'" style="padding: 16px;">
      <div style="background: #FFFFFF; padding: 20px; border-radius: 6px; border: 1px solid #CBD5E1;">
        <h4 style="margin-top: 0; color: #2C3E50;">엔진 제어 명령</h4>
        <div style="display: flex; gap: 12px;">
          <button style="background: #2C3E50; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer;">
            데이터 수집 시작 (F3)
          </button>
          <button style="background: #34495E; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer;">
            사용자 권한 설정
          </button>
        </div>
      </div>
    </div>

    <!-- Tab Pane 3: System -->
    <div v-if="activeTab === 'system'" style="padding: 16px;">
      <div style="background: #FFFFFF; padding: 20px; border-radius: 6px; border: 1px solid #CBD5E1;">
        <h4 style="margin-top: 0; color: #2C3E50;">Vite 8 + Vue 3 SPA 가동 진단</h4>
        <p>프론트엔드 모듈: <strong>Vue 3.5 + TypeScript (SPA)</strong></p>
        <p>번들러: <strong>Vite 8</strong></p>
        <p>백엔드 API: <strong>ASP.NET Core 10 REST API</strong></p>
      </div>
    </div>
  </div>
</template>
