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

const rows = ref([
  { id: 'SNAP-20260722-01', created_at: '2026-07-22 14:00', total_assets: '500,000,000 원', cash_ratio: '12.4%', status: 'APPROVED' },
  { id: 'SNAP-20260721-01', created_at: '2026-07-21 14:00', total_assets: '498,200,000 원', cash_ratio: '11.8%', status: 'APPROVED' }
])
</script>

<template>
  <!-- Type 1: Single Grid View (SnapshotAdminView) -->
  <div style="display: flex; flex-direction: column; height: 100%; width: 100%; background: #F4F6F9;">
    <!-- Top Filter Header -->
    <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-database me-1"></i> SCR-10: snapshot_admin.db 스냅샷 관리자 (Type 1)</span>
      <div>
        <button style="background: #2980B9; color: white; border: none; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer; margin-right: 8px;">
          <span class="hotkey-badge">F4</span>새 스냅샷 승인 생성
        </button>
        <button style="background: #27AE60; color: white; border: none; padding: 4px 12px; font-weight: bold; border-radius: 3px; cursor: pointer;">
          <span class="hotkey-badge">F7</span>스냅샷 내보내기
        </button>
      </div>
    </div>

    <!-- Grid Body -->
    <div style="flex: 1; padding: 12px; overflow: auto;">
      <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;">스냅샷 ID</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">생성 일시</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">총 자산 예산</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">D+2 현금 비율</th>
            <th style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">승인 상태</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id" style="border-bottom: 1px solid #ECF0F1;">
            <td style="padding: 8px; border: 1px solid #CBD5E1; font-family: monospace; font-weight: bold;">{{ row.id }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">{{ row.created_at }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right; font-weight: bold;">{{ row.total_assets }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: right;">{{ row.cash_ratio }}</td>
            <td style="padding: 8px; border: 1px solid #CBD5E1; text-align: center;">
              <span style="background: #E8F8F5; color: #117864; padding: 2px 8px; border-radius: 10px; font-weight: bold; font-size: 11px;">
                {{ row.status }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Bottom Footer Row -->
    <div style="background: #34495E; color: white; padding: 6px 16px; font-size: 12px; display: flex; justify-content: space-between;">
      <span>스냅샷 이력: 2건 | canonical snapshot_admin.db 준수</span>
      <span style="color: #2ECC71;">운영 기준 5억 원 예산 확정</span>
    </div>
  </div>
</template>
