<script setup lang="ts">
import { ref } from 'vue'
import QuantSplitter from '../components/QuantSplitter.vue'
import QuantStatusChip from '../components/QuantStatusChip.vue'

// Temp/kis_data_collection_v1.json 실증 퀀트 데이터 바인딩
const realQuantData = ref<Array<{ symbol: string; name: string; sector: string; price: string; source: string; status: 'PASS' | 'LIMIT' | 'FAIL' }>>([
  { symbol: '005930', name: '삼성전자', sector: '반도체', price: '340,500', source: 'kis_open_api', status: 'PASS' },
  { symbol: '000660', name: 'SK하이닉스', sector: '반도체', price: '2,580,000', source: 'kis_open_api', status: 'PASS' },
  { symbol: '000270', name: '기아', sector: '자동차', price: '138,900', source: 'kis_open_api', status: 'PASS' },
  { symbol: '091160', name: 'KODEX 반도체', sector: 'ETF/반도체', price: '171,440', source: 'kis_open_api', status: 'PASS' },
  { symbol: '012450', name: '한화에어로스페이스', sector: '방산/항공', price: '1,094,000', source: 'kis_open_api', status: 'LIMIT' },
  { symbol: '010120', name: 'LS ELECTRIC', sector: 'AI전력망', price: '224,500', source: 'kis_open_api', status: 'PASS' },
  { symbol: '494670', name: 'TIGER 조선TOP10', sector: 'ETF/조선', price: '25,645', source: 'kis_open_api', status: 'PASS' },
  { symbol: '471990', name: 'KODEX AI반도체핵심', sector: 'ETF/AI반도체', price: '26,945', source: 'kis_open_api', status: 'FAIL' }
])
</script>

<template>
  <!-- Type 3: Real Quant Engine Live Data Comparison View -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; 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-activity me-1"></i> SCR-05: [실증 현장감 데이터] KIS OpenAPI 실시간 시세 vs 퀀트 엔진 데이터 스플릿 대조</span>
      <div style="display: flex; gap: 8px; align-items: center;">
        <span style="font-size: 11px; background: #27AE60; padding: 2px 8px; border-radius: 4px; font-weight: bold;">LIVE PROD CONNECTED</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>실시간 KIS 패킷 수집
        </button>
      </div>
    </div>

    <!-- Reusable Splitter Component -->
    <div style="flex: 1; overflow: hidden;">
      <QuantSplitter :initial-left-width="50">
        <!-- Left Panel: KIS OpenAPI Live Data -->
        <template #left>
          <div style="background: white; height: 100%; display: flex; flex-direction: column; border-right: 1px solid #CBD5E1;">
            <div style="background: #E2E8F0; padding: 8px 12px; font-weight: bold; color: #2C3E50; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between;">
              <span>KIS OpenAPI 수집 원천 실 시세</span>
              <span style="font-size: 11px; color: #7F8C8D;">Formula ID: KIS_DATA_COLLECTION_V1</span>
            </div>
            <div style="flex: 1; overflow: auto; padding: 8px;">
              <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;">종목명</th>
                    <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: left;">섹터/분류</th>
                    <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: right;">KIS 체결가(원)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in realQuantData" :key="item.symbol" style="border-bottom: 1px solid #ECF0F1;">
                    <td style="padding: 6px; border: 1px solid #CBD5E1; font-family: monospace; font-weight: bold;">{{ item.symbol }}</td>
                    <td style="padding: 6px; border: 1px solid #CBD5E1; font-weight: bold;">{{ item.name }}</td>
                    <td style="padding: 6px; border: 1px solid #CBD5E1; color: #7F8C8D;">{{ item.sector }}</td>
                    <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold; color: #2980B9;">{{ item.price }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </template>

        <!-- Right Panel: Quant Engine Scoring & Risk Gating -->
        <template #right>
          <div style="background: white; height: 100%; display: flex; flex-direction: column;">
            <div style="background: #E2E8F0; padding: 8px 12px; font-weight: bold; color: #2C3E50; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between;">
              <span>퀀트 엔진 알파 스코어 & 게이트 하네스</span>
              <span style="font-size: 11px; color: #7F8C8D;">Budget: 500,000,000 KRW</span>
            </div>
            <div style="flex: 1; overflow: auto; padding: 8px;">
              <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;">데이터 수집원</th>
                    <th style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">리스크 게이트</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in realQuantData" :key="item.symbol" style="border-bottom: 1px solid #ECF0F1;">
                    <td style="padding: 6px; border: 1px solid #CBD5E1; font-weight: bold;">{{ item.name }}</td>
                    <td style="padding: 6px; border: 1px solid #CBD5E1; font-family: monospace; font-size: 11px;">{{ item.source }}</td>
                    <td style="padding: 6px; border: 1px solid #CBD5E1; text-align: center;">
                      <QuantStatusChip :type="item.status" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </template>
      </QuantSplitter>
    </div>

    <!-- Bottom Cadence Bar -->
    <div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
      <span>[현장감 실증 데이터] KIS 수집 종목 11건 연동 완료 | 목표 예산: 5억 원 | D+2 현금비율: 12.4%</span>
      <span style="color: #F1C40F;">Operating Cadence: 주말 리밸런싱 / 월 1·11·21일 중간점검</span>
    </div>
  </div>
</template>
