<script setup lang="ts">
import { keysApi } from "@/api/keys";
import GroupInfoCard from "@/components/keys/GroupInfoCard.vue";
import GroupList from "@/components/keys/GroupList.vue";
import KeyTable from "@/components/keys/KeyTable.vue";
import type { Group } from "@/types/models";
import { onMounted, ref } from "vue";

const groups = ref<Group[]>([]);
const loading = ref(false);
const selectedGroup = ref<Group | null>(null);

onMounted(async () => {
  await loadGroups();
});

async function loadGroups() {
  try {
    loading.value = true;
    groups.value = await keysApi.getGroups();
    // 默认选择第一个分组
    if (groups.value.length > 0 && !selectedGroup.value) {
      selectedGroup.value = groups.value[0];
    }
  } finally {
    loading.value = false;
  }
}

function handleGroupSelect(group: Group) {
  selectedGroup.value = group;
}

async function handleGroupRefresh() {
  await loadGroups();
  if (selectedGroup.value) {
    // 重新加载当前选中的分组信息
    selectedGroup.value = groups.value.find(g => g.id === selectedGroup.value?.id) || null;
  }
}
</script>

<template>
  <div class="keys-container">
    <div class="sidebar">
      <group-list
        :groups="groups"
        :selected-group="selectedGroup"
        :loading="loading"
        @group-select="handleGroupSelect"
        @refresh="handleGroupRefresh"
      />
    </div>

    <!-- 右侧主内容区域，占80% -->
    <div class="main-content">
      <!-- 分组信息卡片，更紧凑 -->
      <div class="group-info">
        <group-info-card :group="selectedGroup" @refresh="handleGroupRefresh" />
      </div>

      <!-- 密钥表格区域，占主要空间 -->
      <div class="key-table-section">
        <key-table :selected-group="selectedGroup" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.keys-container {
  display: flex;
  gap: 12px;
  width: 100%;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  height: calc(100vh - 106px);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-info {
  flex-shrink: 0;
}

.key-table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
</style>
