<script setup lang="ts">
import type { ServerAgentAction } from '@/types/api'

const props = defineProps<{
  action?: ServerAgentAction | null
  message?: string | null
  compact?: boolean
  loading?: boolean
}>()

defineEmits<{
  install: []
  upgrade: []
  diagnose: []
}>()

function alertType(action: ServerAgentAction | null | undefined): 'info' | 'warning' | 'error' {
  if (action === 'install') return 'info'
  if (action === 'upgrade') return 'warning'
  if (action === 'offline') return 'error'
  return 'info'
}
</script>

<template>
  <v-alert
    v-if="props.action && props.action !== 'ok' && props.message"
    :type="alertType(props.action)"
    variant="tonal"
    :density="props.compact ? 'compact' : 'default'"
    class="mb-0"
  >
    <div class="d-flex flex-wrap align-center ga-2">
      <span class="text-body-2">{{ props.message }}</span>
      <v-spacer v-if="!props.compact" />
      <div class="d-flex ga-1 flex-shrink-0">
        <v-btn
          v-if="props.action === 'install'"
          size="small"
          variant="flat"
          color="primary"
          :loading="props.loading"
          @click="$emit('install')"
        >
          安装 Agent
        </v-btn>
        <v-btn
          v-if="props.action === 'upgrade'"
          size="small"
          variant="flat"
          color="warning"
          :loading="props.loading"
          @click="$emit('upgrade')"
        >
          升级 Agent
        </v-btn>
        <v-btn
          v-if="props.action === 'offline'"
          size="small"
          variant="text"
          @click="$emit('diagnose')"
        >
          诊断
        </v-btn>
      </div>
    </div>
  </v-alert>
</template>
