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

const leftWidthPercent = ref(50)
const isDragging = ref(false)

const startDrag = () => {
  isDragging.value = true
  window.addEventListener('mousemove', onDrag)
  window.addEventListener('mouseup', stopDrag)
}

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return
  const containerWidth = window.innerWidth
  const newPercent = (e.clientX / containerWidth) * 100
  if (newPercent > 20 && newPercent < 80) {
    leftWidthPercent.value = newPercent
  }
}

const stopDrag = () => {
  isDragging.value = false
  window.removeEventListener('mousemove', onDrag)
  window.removeEventListener('mouseup', stopDrag)
}

const etfRows = ref([
  { symbol: '069500', name: 'KODEX 200', nav: '36,450', price: '36,420', gap: '-0.08%', tracking_error: '0.04%', status: 'PASS' },
  { symbol: '102110', name: 'TIGER 200', nav: '36,480', price: '36,510', gap: '+0.08%', tracking_error: '0.05%', status: 'PASS' },
  { symbol: '305540', name: 'TIGER 2차전지', nav: '18,200', price: '18,500', gap: '+1.65%', tracking_error: '0.42%', status: 'LIMIT' }
])
</script>

<template>
  <!-- Type 3: Resizable 5:5 Splitter View (EtfNavAnalysisView) -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; user-select: none; background: #F4F6F9;">
    <!-- Top Bar -->
    <div style="background: #34495E; color: white; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-weight: bold;"><i class="ti ti-chart-pie me-1"></i> SCR-06: ETF NAV vs 주가 괴리율 및 추적오차 분석 (Type 3 동적 스플릿)</span>
      <button style="background: #2C3E50; color: white; border: 1px solid #5D7D9A; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer;">
        <span class="hotkey-badge">F3</span>NAV 괴리율 재계산
      </button>
    </div>

    <!-- Resizable Splitter Container -->
    <div style="flex: 1; display: flex; overflow: hidden; position: relative;">
      <!-- Left Panel (ETF Basic Info) -->
      <div :style="{ width: leftWidthPercent + '%' }" style="background: white; padding: 12px; overflow-y: auto;">
        <h4 style="margin-top: 0; color: #2C3E50; border-bottom: 2px solid #2C3E50; padding-bottom: 4px;">ETF 종목 시세 정보</h4>
        <table style="width: 100%; border-collapse: collapse; border: 1px solid #CBD5E1;">
          <thead>
            <tr style="background: #F8FAFC;">
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">종목코드</th>
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">ETF명</th>
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">현재가</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in etfRows" :key="row.symbol">
              <td style="padding: 6px; border: 1px solid #CBD5E1; font-family: monospace;">{{ row.symbol }}</td>
              <td style="padding: 6px; border: 1px solid #CBD5E1; font-weight: bold;">{{ row.name }}</td>
              <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">{{ row.price }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Resizable Splitter Bar -->
      <div
        style="width: 8px; background: #CBD5E1; cursor: col-resize; display: flex; align-items: center; justify-content: center; z-index: 10;"
        title="드래그하여 비율 조절"
        @mousedown="startDrag">
        <div style="width: 2px; height: 24px; background: #7F8C8D;"></div>
      </div>

      <!-- Right Panel (NAV & Tracking Error) -->
      <div :style="{ width: (100 - leftWidthPercent) + '%' }" style="background: white; padding: 12px; overflow-y: auto;">
        <h4 style="margin-top: 0; color: #2C3E50; border-bottom: 2px solid #2C3E50; padding-bottom: 4px;">NAV 및 추적오차 분석</h4>
        <table style="width: 100%; border-collapse: collapse; border: 1px solid #CBD5E1;">
          <thead>
            <tr style="background: #F8FAFC;">
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">순자산가치(NAV)</th>
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">괴리율</th>
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">추적오차율</th>
              <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">상태</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in etfRows" :key="row.symbol">
              <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold;">{{ row.nav }}</td>
              <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold;">{{ row.gap }}</td>
              <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">{{ row.tracking_error }}</td>
              <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">
                <span
                  :style="{
                    backgroundColor: row.status === 'PASS' ? '#E8F8F5' : '#FEF9E7',
                    color: row.status === 'PASS' ? '#117864' : '#B9770E',
                    border: '1px solid ' + (row.status === 'PASS' ? '#2ECC71' : '#F39C12')
                  }"
                  style="padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">
                  {{ row.status }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Bottom Footer Bar -->
    <div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
      <span>ETF 괴리율 분석: 3건 | 동적 스플릿 비율: {{ leftWidthPercent.toFixed(0) }} : {{ (100 - leftWidthPercent).toFixed(0) }}</span>
      <span style="color: #F1C40F;">추적오차 임계값 가드 정상</span>
    </div>
  </div>
</template>
