<script setup lang="ts">
import { onMounted, computed, ref, reactive, watch } from 'vue'; // 统一导入, 添加 watch
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store'; // 引入 ConnectionInfo 类型
import { useTagsStore } from '../stores/tags.store'; // 引入 Tags Store

const { t } = useI18n(); // 获取 t 函数
const router = useRouter(); // 获取 router 实例
const tagsStore = useTagsStore(); // 获取 Tags Store 实例
// 使用 storeToRefs 来保持 state 属性的响应性
// 不再直接从 connectionsStore 获取 connections, isLoading, error
// const { connections, isLoading, error } = storeToRefs(connectionsStore);
const { tags: allTags, isLoading: isTagsLoading, error: tagsError } = storeToRefs(tagsStore); // 获取所有标签及其状态

// 定义 Props，接收筛选后的连接列表
const props = defineProps<{
  connections: ConnectionInfo[];
}>();

// 定义组件发出的事件 (添加 edit-connection)
const emit = defineEmits(['edit-connection']);

// 新增：用于跟踪每个连接测试状态的响应式对象
const testingState = reactive<Record<number, boolean>>({});

// 组件挂载时获取标签列表 (连接列表由父组件传入)
onMounted(() => {
  tagsStore.fetchTags(); // 获取标签列表
});

// Log received props for debugging
watch(() => props.connections, (newVal: ConnectionInfo[]) => { // Add type annotation for newVal
  console.log('[ConnectionList] Received connections prop:', JSON.stringify(newVal, null, 2));
}, { immediate: true, deep: true });

// 创建标签 ID 到名称的映射
const tagMap = computed(() => {
    const map = new Map<number, string>();
    allTags.value.forEach(tag => {
        map.set(tag.id, tag.name);
    });
    return map;
});

// 获取连接的标签名称数组
const getConnectionTagNames = (conn: ConnectionInfo): string[] => {
    if (!conn.tag_ids || conn.tag_ids.length === 0) {
        return [];
    }
    return conn.tag_ids
        .map(tagId => tagMap.value.get(tagId)) // 使用映射获取名称
         .filter((name): name is string => !!name); // 过滤掉未找到的标签并确保类型为 string
 };

 // 新增：计算按标签分组的连接
 const groupedConnections = computed(() => {
     const groups: { [key: string]: ConnectionInfo[] } = {};
     const untaggedKey = '_untagged_'; // 特殊键，用于未标记的连接

     // 初始化所有标签组（包括未标记）
     groups[untaggedKey] = [];
     allTags.value.forEach(tag => {
         groups[tag.name] = []; // 使用标签名称作为键
     });

     // 将连接分配到对应的组
     props.connections.forEach(conn => {
         if (!conn.tag_ids || conn.tag_ids.length === 0) {
             groups[untaggedKey].push(conn);
         } else {
             conn.tag_ids.forEach(tagId => {
                 const tagName = tagMap.value.get(tagId);
                 if (tagName && groups[tagName]) { // 确保标签存在于映射和分组中
                     groups[tagName].push(conn);
                 } else if (tagName) {
                     // 如果标签存在但分组未初始化（理论上不应发生），则创建分组
                     groups[tagName] = [conn];
                 } else {
                     // 如果 tagId 无效或未找到对应标签名，归入未标记组
                     groups[untaggedKey].push(conn);
                 }
             });
         }
     });

     // 过滤掉没有连接的标签组（除了未标记组，即使为空也可能需要显示）
     const filteredGroups: { [key: string]: ConnectionInfo[] } = {};
     for (const groupName in groups) {
         if (groups[groupName].length > 0 || groupName === untaggedKey) {
              // 按连接名称排序每个分组内部的连接
              groups[groupName].sort((a, b) => a.name.localeCompare(b.name));
              filteredGroups[groupName] = groups[groupName];
         }
     }

      // 对分组本身进行排序（未标记的放最后）
      const sortedGroupNames = Object.keys(filteredGroups).sort((a, b) => {
          if (a === untaggedKey) return 1; // 未标记的排在后面
          if (b === untaggedKey) return -1;
          return a.localeCompare(b); // 其他按名称排序
      });

      const sortedGroups: { [key: string]: ConnectionInfo[] } = {};
      sortedGroupNames.forEach(name => {
          sortedGroups[name] = filteredGroups[name];
      });


     return sortedGroups;
 });


 // 辅助函数：格式化时间戳
const formatTimestamp = (timestamp: number | null): string => {
  if (!timestamp) return t('connections.status.never'); // 使用 i18n
  // TODO: 可以考虑使用更专业的日期格式化库 (如 date-fns 或 dayjs) 并结合 i18n locale
  return new Date(timestamp * 1000).toLocaleString(); // 乘以 1000 转换为毫秒
};

// 新增：处理删除连接的方法
const handleDelete = async (conn: ConnectionInfo) => {
    // 在函数内部获取 store 实例
    const connectionsStore = useConnectionsStore();
    // 使用 i18n 获取确认消息
    const confirmMessage = t('connections.prompts.confirmDelete', { name: conn.name });
    if (window.confirm(confirmMessage)) {
        const success = await connectionsStore.deleteConnection(conn.id);
        if (!success) {
            // 如果删除失败，显示 store 中的错误信息 (或自定义错误)
            // 可以考虑使用更友好的提示方式，例如 toast 通知库
            alert(t('connections.errors.deleteFailed', { error: connectionsStore.error || '未知错误' }));
        }
         // 成功时列表会自动更新，无需额外操作
     }
 };

 // 新增：处理测试连接的方法
 const handleTestConnection = async (connectionId: number) => {
     const connectionsStore = useConnectionsStore(); // 获取 store 实例
     testingState[connectionId] = true; // 设置为正在测试状态
     const result = await connectionsStore.testConnection(connectionId); // 调用 store action
     testingState[connectionId] = false; // 清除测试状态

     // 显示测试结果
     if (result.success) {
         alert(t('connections.test.success'));
     } else {
         alert(t('connections.test.failed', { error: result.message || '未知错误' }));
     }
 };

 </script>

<template>
  <div class="mt-2 font-sans">
    <div v-if="tagsError" class="p-4 border border-red-300 bg-red-100 text-red-700 rounded m-2">
      {{ t('tags.error', { error: tagsError }) }}
    </div>

    <!-- 遍历分组 -->
    <div v-for="(groupConnections, groupName) in groupedConnections" :key="groupName" class="mb-6 border border-border rounded-md overflow-hidden bg-background">
        <h4 class="m-0 px-4 py-2 text-base font-semibold bg-header text-foreground border-b border-border">
            {{ groupName === '_untagged_' ? t('connections.untaggedGroup') : groupName }}
            ({{ groupConnections.length }})
        </h4>
        <div class="overflow-x-auto">
            <table v-if="groupConnections.length > 0" class="w-full">
                <thead class="bg-header">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.name') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.host') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.port') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.user') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.authMethod') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.tags') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.lastConnected') }}</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-text-secondary uppercase tracking-wider border-b-2 border-border">{{ t('connections.table.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    <tr v-for="conn in groupConnections" :key="conn.id" class="hover:bg-hover transition-colors duration-150">
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap flex items-center">
                          <i :class="['fas', conn.type === 'RDP' ? 'fa-desktop' : 'fa-server', 'mr-2 w-4 text-center text-text-secondary']"></i>
                          <span>{{ conn.name }}</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">{{ conn.host }}</td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">{{ conn.port }}</td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">{{ conn.username }}</td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">{{ conn.auth_method }}</td>
                        <td class="px-4 py-3 text-sm text-foreground">
                          <div v-if="getConnectionTagNames(conn).length > 0" class="flex flex-wrap gap-1">
                              <span v-for="tagName in getConnectionTagNames(conn)" :key="tagName" class="px-2 py-0.5 text-xs rounded bg-background-alt border border-border text-text-secondary">
                                  {{ tagName }}
                              </span>
                          </div>
                          <span v-else class="text-text-alt italic">-</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">{{ formatTimestamp(conn.last_connected_at) }}</td>
                        <td class="px-4 py-3 text-sm text-foreground whitespace-nowrap">
                          <button @click="connectToServer(conn.id)" class="px-2.5 py-1 text-xs rounded border transition-colors duration-150 mr-1.5 bg-green-600 text-white border-green-600 hover:bg-green-700 hover:border-green-700">{{ t('connections.actions.connect') }}</button>
                          <button @click="emit('edit-connection', conn)" class="px-2.5 py-1 text-xs rounded border transition-colors duration-150 mr-1.5 bg-yellow-500 text-gray-800 border-yellow-500 hover:bg-yellow-600 hover:border-yellow-600">{{ t('connections.actions.edit') }}</button>
                          <button @click="handleTestConnection(conn.id)" class="px-2.5 py-1 text-xs rounded border transition-colors duration-150 mr-1.5 bg-blue-600 text-white border-blue-600 hover:bg-blue-700 hover:border-blue-700 disabled:opacity-60 disabled:cursor-not-allowed disabled:bg-gray-500 disabled:border-gray-500" :disabled="testingState[conn.id]">{{ testingState[conn.id] ? t('connections.actions.testing') : t('connections.actions.test') }}</button>
                          <button @click="handleDelete(conn)" class="px-2.5 py-1 text-xs rounded border transition-colors duration-150 bg-red-600 text-white border-red-600 hover:bg-red-700 hover:border-red-700">{{ t('connections.actions.delete') }}</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div v-else-if="groupName === '_untagged_'" class="p-4 text-sm text-text-secondary italic">
                  {{ t('connections.noUntaggedConnections') }}
             </div>
        </div>
     </div>
   </div>
 </template>

<script lang="ts">
// 在 <script setup> 之外定义需要在模板中调用的方法
export default {
  methods: {
    connectToServer(connectionId: number) {
      console.log(`请求连接到服务器 ID: ${connectionId}`);
      // 使用 router 实例进行导航
      this.$router.push({ name: 'Workspace', params: { connectionId: connectionId.toString() } });
    }
  }
}
</script>

<style scoped>

</style>
