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

const leftWidthPercent = ref(30)
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 > 15 && newPercent < 60) {
    leftWidthPercent.value = newPercent
  }
}

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

const selectedTable = ref('public.market_raw_history')
const tableList = ref([
  'public.market_raw_history',
  'public.factor_version_history',
  'public.factor_output_history',
  'public.decision_result_history',
  'public.order_waterfall_execution_history',
  'public.shadow_ledger_history',
  'public.scheduler_state_history'
])

const sampleRows = ref([
  { symbol: '005930', name: '삼성전자', close: '72,500', pe_ratio: '12.4', rsi14: '54.2', status: 'PASS' },
  { symbol: '000660', name: 'SK하이닉스', close: '184,000', pe_ratio: '15.1', rsi14: '61.8', status: 'PASS' },
  { symbol: '035420', name: 'NAVER', close: '172,100', pe_ratio: '22.8', rsi14: '48.5', status: 'LIMIT' },
  { symbol: '035720', name: '카카오', close: '41,200', pe_ratio: '34.2', rsi14: '38.1', status: 'FAIL' }
])
</script>

<template>
  <!-- Vue 3 Type 2 Resizable Master-Detail Splitter View (DatabaseView) -->
  <div style="display: flex; height: 100%; width: 100%; user-select: none;">
    <!-- Master Panel (Dynamic Width) -->
    <div :style="{ width: leftWidthPercent + '%' }" style="background: #FFFFFF; display: flex; flex-direction: column; overflow: hidden;">
      <div style="background: #34495E; color: white; padding: 10px 14px; font-weight: bold; font-size: 13px;">
        PostgreSQL 3NF 테이블 목록 (동적 스플릿)
      </div>
      <div style="flex: 1; overflow-y: auto;">
        <div
          v-for="table in tableList"
          :key="table"
          :style="{ backgroundColor: selectedTable === table ? '#D6E4FF' : 'transparent', fontWeight: selectedTable === table ? 'bold' : 'normal' }"
          style="padding: 10px 14px; border-bottom: 1px solid #ECF0F1; cursor: pointer; display: flex; justify-content: space-between; align-items: center;"
          @click="selectedTable = table">
          <span style="font-size: 12px; font-family: monospace;">{{ table }}</span>
          <span style="color: #7F8C8D;">›</span>
        </div>
      </div>
    </div>

    <!-- Resizable Splitter Bar (Drag Handle) -->
    <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>

    <!-- Detail Panel (Dynamic Remaining Width High-Density Grid) -->
    <div :style="{ width: (100 - leftWidthPercent) + '%' }" style="display: flex; flex-direction: column; background: #F4F6F9; overflow: hidden;">
      <div style="background: #FFFFFF; padding: 10px 16px; border-bottom: 1px solid #CBD5E1; display: flex; justify-content: space-between; align-items: center;">
        <div>
          <strong style="color: #2C3E50; font-size: 14px;">{{ selectedTable }} 고밀도 데이터 그리드</strong>
          <span style="font-size: 11px; color: #7F8C8D; margin-left: 8px;">(스플릿 비율: {{ leftWidthPercent.toFixed(0) }} : {{ (100 - leftWidthPercent).toFixed(0) }})</span>
        </div>
        <button style="background: #2C3E50; color: white; border: none; padding: 6px 12px; border-radius: 3px; font-weight: bold; cursor: pointer;">
          + 데이터 추가 (F4)
        </button>
      </div>

      <div style="flex: 1; overflow: auto; padding: 12px;">
        <table style="width: 100%; border-collapse: collapse; background: white; border: 1px solid #CBD5E1;">
          <thead>
            <tr style="background: #E2E8F0; color: #2C3E50;">
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">종목코드</th>
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: left;">종목명</th>
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">종가(원)</th>
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">PER</th>
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">RSI(14)</th>
              <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">상태</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in sampleRows" :key="row.symbol" style="border-bottom: 1px solid #ECF0F1;">
              <td style="padding: 8px; border: 1px solid #CBD5E1; font-family: monospace;">{{ row.symbol }}</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; font-weight: bold;">{{ row.name }}</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">{{ row.close }}</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">{{ row.pe_ratio }}</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">{{ row.rsi14 }}</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">
                <span
                  :style="{
                    backgroundColor: row.status === 'PASS' ? '#E8F8F5' : row.status === 'LIMIT' ? '#FEF9E7' : '#FDEDEC',
                    color: row.status === 'PASS' ? '#117864' : row.status === 'LIMIT' ? '#B9770E' : '#922B21',
                    border: '1px solid ' + (row.status === 'PASS' ? '#2ECC71' : row.status === 'LIMIT' ? '#F39C12' : '#E74C3C')
                  }"
                  style="padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">
                  {{ row.status }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
