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

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits(['update:visible', 'select'])

const searchQuery = ref('')
const items = ref([
  { code: '005930', name: '삼성전자', category: 'KOSPI200' },
  { code: '000660', name: 'SK하이닉스', category: 'KOSPI200' },
  { code: '035420', name: 'NAVER', category: 'KOSPI200' },
  { code: '035720', name: '카카오', category: 'KOSPI200' }
])

const close = () => {
  emit('update:visible', false)
}

const selectItem = (item: any) => {
  emit('select', item)
  close()
}
</script>

<template>
  <div v-if="visible" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
    <div style="background: white; width: 500px; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
      <div style="background: #34495E; color: white; padding: 10px 16px; font-weight: bold; display: flex; justify-content: space-between;">
        <span><i class="ti ti-search me-1"></i> F2 코드 팝업 룩업 (Type 5 Modal)</span>
        <button style="background: transparent; border: none; color: white; cursor: pointer; font-weight: bold;" @click="close">✕ (Esc)</button>
      </div>

      <div style="padding: 12px;">
        <input v-model="searchQuery" type="text" placeholder="종목명 또는 코드 검색 (F2)..." style="width: 100%; box-sizing: border-box; padding: 6px 12px; border: 2px solid #2980B9; border-radius: 3px; font-weight: bold;" />
        <div style="max-height: 250px; overflow-y: auto; margin-top: 12px; border: 1px solid #CBD5E1;">
          <table style="width: 100%; border-collapse: collapse;">
            <thead>
              <tr style="background: #F8FAFC;">
                <th style="padding: 6px; border-bottom: 1px solid #CBD5E1; text-align: left;">코드</th>
                <th style="padding: 6px; border-bottom: 1px solid #CBD5E1; text-align: left;">종목명</th>
                <th style="padding: 6px; border-bottom: 1px solid #CBD5E1; text-align: left;">분류</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items" :key="item.code" style="cursor: pointer; border-bottom: 1px solid #ECF0F1;" @click="selectItem(item)">
                <td style="padding: 6px; font-family: monospace;">{{ item.code }}</td>
                <td style="padding: 6px; font-weight: bold;">{{ item.name }}</td>
                <td style="padding: 6px; color: #7F8C8D;">{{ item.category }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div style="background: #F4F6F9; padding: 8px 16px; text-align: right; border-top: 1px solid #CBD5E1;">
        <button style="background: #2C3E50; color: white; border: none; padding: 4px 12px; border-radius: 3px; cursor: pointer;" @click="close">닫기 (Esc)</button>
      </div>
    </div>
  </div>
</template>
