<template>
  <v-card elevation="0" border rounded="lg" class="mb-4">
    <v-card-title class="d-flex align-center">
      <v-checkbox
        :model-value="selectAll"
        label="全选"
        density="compact"
        hide-details
        class="mr-4"
        @update:model-value="$emit('toggle-all')"
      />
      <v-text-field
        :model-value="serverSearch"
        prepend-inner-icon="mdi-magnify"
        label="搜索服务器..."
        density="compact"
        hide-details
        variant="outlined"
        rounded
        style="max-width: 240px"
        @update:model-value="$emit('update:serverSearch', $event)"
      />
      <v-btn
        icon="mdi-refresh"
        variant="text"
        size="small"
        :loading="serversLoading"
        title="刷新在线状态"
        @click="$emit('refresh')"
      />
    </v-card-title>
    <v-divider />
    <v-card-text class="pa-2">
      <template v-if="serversByCategory.length === 0">
        <div class="text-center text-medium-emphasis py-6">暂无服务器</div>
      </template>
      <template v-else>
        <div v-for="group in serversByCategory" :key="group.category" class="mb-4">
          <div class="d-flex align-center px-2 mb-2">
            <v-btn
              size="x-small"
              variant="text"
              :color="isCategoryAllSelected(group.category) ? 'primary' : 'default'"
              @click="$emit('toggle-category', group.category)"
            >
              <v-icon size="16" class="mr-1">
                {{ isCategoryAllSelected(group.category) ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
              </v-icon>
              {{ group.category }}
            </v-btn>
            <span class="text-caption text-medium-emphasis ml-1">
              ({{ group.servers.filter(s => selectedIds.has(s.id)).length }}/{{ group.servers.length }})
            </span>
          </div>
          <v-row dense>
            <v-col v-for="s in group.servers" :key="s.id" cols="6" sm="4" md="3" lg="2">
              <v-card
                :color="selectedIds.has(s.id) ? 'primary' : undefined"
                :variant="selectedIds.has(s.id) ? 'tonal' : 'outlined'"
                rounded="lg"
                class="pa-3 cursor-pointer"
                @click="$emit('toggle-server', s.id)"
              >
                <div class="d-flex align-center ga-2">
                  <v-icon :color="serverOnlineColor(s.is_online)" size="12">mdi-circle</v-icon>
                  <span class="text-body-2 font-weight-medium text-truncate">{{ s.name }}</span>
                </div>
                <div class="text-caption text-medium-emphasis text-truncate">{{ s.domain }}</div>
                <div v-if="pushStatus[s.id]" class="text-caption mt-1">
                  <v-chip
                    :color="pushStatusChipColor(pushStatus[s.id])"
                    size="x-small"
                    variant="tonal"
                    label
                    border="sm"
                  >
                    {{ pushStatus[s.id] }}
                  </v-chip>
                </div>
              </v-card>
            </v-col>
          </v-row>
        </div>
      </template>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { pushStatusChipColor, serverOnlineColor } from '@/composables/push/labels'
import type { PushServerItem } from '@/composables/push/types'

defineProps<{
  selectAll: boolean
  serverSearch: string
  serversLoading: boolean
  serversByCategory: { category: string; servers: PushServerItem[] }[]
  selectedIds: Set<number>
  pushStatus: Record<number, string>
  isCategoryAllSelected: (category: string) => boolean
}>()

defineEmits<{
  'update:serverSearch': [value: string]
  'toggle-all': []
  refresh: []
  'toggle-category': [category: string]
  'toggle-server': [id: number]
}>()
</script>
