<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 selectedVersion = ref('FACTOR-V4.2')
const versions = ref([
  { id: 'FACTOR-V4.2', date: '2026-07-20', status: 'ACTIVE' },
  { id: 'FACTOR-V4.1', date: '2026-07-10', status: 'ARCHIVED' },
  { id: 'FACTOR-V4.0', date: '2026-06-25', status: 'ARCHIVED' }
])
</script>

<template>
  <!-- Type 2: Resizable Master-Detail Splitter View (FactorHistoryView) -->
  <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-math-function me-1"></i> SCR-02: 팩터 산출 공식 버전 관리 (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>새 버전 신규 등록
        </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;">버전 이력 목록</h4>
        <div v-for="ver in versions" :key="ver.id"
             :style="{ background: ver.id === selectedVersion ? '#EBF5FB' : 'transparent', borderLeft: ver.id === selectedVersion ? '4px solid #2980B9' : 'none' }"
             style="padding: 8px; border-bottom: 1px solid #ECF0F1; cursor: pointer;"
             @click="selectedVersion = ver.id">
          <div style="font-weight: bold; color: #2C3E50;">{{ ver.id }}</div>
          <div style="font-size: 11px; color: #7F8C8D;">생성일: {{ ver.date }} | 상태: {{ ver.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;">선택 버전 상세: {{ selectedVersion }}</h3>
        <table style="width: 100%; border-collapse: collapse; margin-top: 12px;">
          <tbody>
            <tr>
              <td style="width: 140px; font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">버전 ID</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; font-weight: bold;">{{ selectedVersion }}</td>
            </tr>
            <tr>
              <td style="font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">팩터 조합 수식</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1; font-family: monospace;">
                Composite_Score = (RSI_14 * 0.35) + (MACD_Signal * 0.40) + (ATR_20 * 0.25)
              </td>
            </tr>
            <tr>
              <td style="font-weight: bold; padding: 8px; background: #F8FAFC; border: 1px solid #CBD5E1;">적용 상태</td>
              <td style="padding: 8px; border: 1px solid #CBD5E1;">
                <span style="background: #E8F8F5; color: #117864; padding: 2px 8px; border-radius: 10px; font-weight: bold;">ACTIVE (운영 채택)</span>
              </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>동적 Master-Detail 스플릿 비율: {{ leftWidthPercent.toFixed(0) }} : {{ (100 - leftWidthPercent).toFixed(0) }}</span>
      <span style="color: #2ECC71;">운영 버전: FACTOR-V4.2</span>
    </div>
  </div>
</template>
