<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 selectedSymbol = ref('035720')
const shadowRows = ref([
  { symbol: '035720', name: '카카오', reason: '추격 매수 금지 (Anti-Late Entry Gate)', shadow_qty: '100 주', shadow_pnl: '-4.20%', status: 'SHADOW_BLOCKED' },
  { symbol: '005930', name: '삼성전자', reason: '리스크 버킷 한도 초과', shadow_qty: '50 주', shadow_pnl: '+1.50%', status: 'SHADOW_LIMITED' }
])
</script>

<template>
  <!-- Type 2: Resizable Master-Detail Splitter View (ShadowLedgerView) -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background: #F4F6F9; user-select: none;">
    <!-- 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-notebook me-1"></i> SCR-04: 차단/제한 종목 Shadow Ledger 가상 장부 (Type 2 동적 스플릿)</span>
      <div>
        <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">F4</span>Shadow Ledger 수동 기록
        </button>
      </div>
    </div>

    <!-- Resizable Master-Detail Splitter -->
    <div style="flex: 1; display: flex; overflow: hidden; position: relative;">
      <!-- Master List Panel (Dynamic Width) -->
      <div :style="{ width: leftWidthPercent + '%' }" style="background: white; padding: 8px; overflow-y: auto;">
        <h4 style="margin-top: 0; color: #2C3E50; border-bottom: 2px solid #2C3E50; padding-bottom: 4px;">Shadow 종목 목록</h4>
        <div v-for="item in shadowRows" :key="item.symbol"
             :style="{ background: item.symbol === selectedSymbol ? '#EBF5FB' : 'transparent', borderLeft: item.symbol === selectedSymbol ? '4px solid #2980B9' : 'none' }"
             style="padding: 8px; border-bottom: 1px solid #ECF0F1; cursor: pointer;"
             @click="selectedSymbol = item.symbol">
          <div style="font-weight: bold; color: #2C3E50;">{{ item.name }} ({{ item.symbol }})</div>
          <div style="font-size: 11px; color: #E74C3C; font-weight: bold;">{{ item.status }}</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) -->
      <div :style="{ width: (100 - leftWidthPercent) + '%' }" style="background: white; padding: 16px; overflow-y: auto;">
        <h3 style="margin-top: 0; color: #2C3E50;">Shadow 가상 장부 상세: {{ selectedSymbol }}</h3>
        <table style="width: 100%; border-collapse: collapse; margin-top: 12px;">
          <tbody>
            <tr>
              <td style="width: 160px; font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">차단 게이트 사유</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; color: #E74C3C; font-weight: bold;">
                추격 매수 금지 게이트 (Anti-Late Entry Gate) 발동으로 인한 가상 포지션 격리
              </td>
            </tr>
            <tr>
              <td style="font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">Shadow 수량</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; font-weight: bold;">100 주 (실제 주문 미실행)</td>
            </tr>
            <tr>
              <td style="font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">가상 손익률 (Shadow PnL)</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; color: #E74C3C; font-weight: bold;">-4.20%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Bottom Summary Bar -->
    <div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
      <span>Shadow Ledger 격리 관리: 총 2건 | 투명성 보증 Shadow 장부</span>
      <span>스플릿 비율: {{ leftWidthPercent.toFixed(0) }} : {{ (100 - leftWidthPercent).toFixed(0) }}</span>
    </div>
  </div>
</template>
