<template>
  <v-card v-if="mode === 'inline'" border rounded="lg" class="empty-server-picker" max-width="520" width="100%">
    <v-card-text class="pa-3">
      <v-text-field
        :model-value="search"
        prepend-inner-icon="mdi-magnify"
        placeholder="搜索服务器…"
        variant="outlined"
        density="compact"
        hide-details
        class="mb-2"
        @update:model-value="$emit('update:search', $event)"
      />
      <v-list density="compact" class="empty-server-picker__list" nav>
        <v-list-item
          v-for="s in servers"
          :key="s.id"
          :title="s.name"
          :subtitle="s.domain"
          rounded="lg"
          @click="$emit('select', s.id)"
        >
          <template #prepend>
            <v-icon :color="s.is_online ? 'success' : 'grey'" size="8">mdi-circle</v-icon>
          </template>
        </v-list-item>
        <v-list-item v-if="servers.length === 0" class="text-medium-emphasis">
          暂无匹配的服务器
        </v-list-item>
      </v-list>
    </v-card-text>
  </v-card>

  <template v-else>
    <v-text-field
      :model-value="search"
      prepend-inner-icon="mdi-magnify"
      placeholder="搜索…"
      variant="outlined"
      density="compact"
      class="mb-3"
      @update:model-value="$emit('update:search', $event)"
    />
    <v-list density="compact" max-height="300" style="overflow-y: auto">
      <v-list-item
        v-for="s in servers"
        :key="s.id"
        :title="s.name"
        :subtitle="s.domain"
        @click="$emit('select', s.id)"
      >
        <template #prepend>
          <v-icon :color="s.is_online ? 'success' : 'grey'" size="8">mdi-circle</v-icon>
        </template>
      </v-list-item>
      <v-list-item v-if="servers.length === 0" class="text-medium-emphasis">
        暂无匹配的服务器
      </v-list-item>
    </v-list>
  </template>
</template>

<script setup lang="ts">
import type { TerminalServerItem } from '@/composables/terminal/types'

withDefaults(
  defineProps<{
    servers: TerminalServerItem[]
    search: string
    mode?: 'inline' | 'dialog'
  }>(),
  { mode: 'inline' },
)

defineEmits<{
  'update:search': [value: string]
  select: [serverId: number]
}>()
</script>

<style scoped>
.empty-server-picker__list {
  max-height: min(42vh, 320px);
  overflow-y: auto;
}
</style>
