<template>
  <div
    class="card cursor-pointer hover:shadow-lg transition-shadow"
    @click="$emit('click')"
  >
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold">
        <i :class="getServiceIcon(serviceType)" class="mr-2"></i>
        {{ getServiceName(serviceType) }}
      </h3>
      <span
        class="status-badge"
        :class="getOverallStatus(health)"
      >
        <i class="fas fa-circle text-xs"></i>
        {{ getOverallStatusText(health) }}
      </span>
    </div>
    
    <div class="grid grid-cols-3 gap-4 text-center">
      <div>
        <div class="text-2xl font-bold text-green-600">{{ health?.healthy || 0 }}</div>
        <div class="text-xs text-gray-500">Healthy</div>
      </div>
      <div>
        <div class="text-2xl font-bold text-yellow-600">{{ health?.degraded || 0 }}</div>
        <div class="text-xs text-gray-500">Degraded</div>
      </div>
      <div>
        <div class="text-2xl font-bold text-red-600">{{ health?.unhealthy || 0 }}</div>
        <div class="text-xs text-gray-500">Unhealthy</div>
      </div>
    </div>
    
    <div class="mt-4 pt-4 border-t border-gray-200">
      <div class="text-sm text-gray-500">
        Total: <span class="font-semibold text-gray-900">{{ health?.total || 0 }}</span> services
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ServiceType, ServiceHealthSummary } from '../../../types';

defineProps<{
  serviceType: ServiceType;
  health?: ServiceHealthSummary;
}>();

defineEmits<{
  click: [];
}>();

const getServiceName = (type: ServiceType): string => {
  const names: Record<ServiceType, string> = {
    'besu': 'Besu',
    'cacti': 'Cacti',
    'firefly': 'Firefly',
    'chainlink-ccip': 'Chainlink CCIP',
  };
  return names[type] || type;
};

const getServiceIcon = (type: ServiceType): string => {
  const icons: Record<ServiceType, string> = {
    'besu': 'fas fa-cube',
    'cacti': 'fas fa-link',
    'firefly': 'fas fa-fire',
    'chainlink-ccip': 'fas fa-project-diagram',
  };
  return icons[type] || 'fas fa-server';
};

const getOverallStatus = (health?: ServiceHealthSummary): string => {
  if (!health || health.total === 0) return 'unknown';
  if (health.unhealthy > 0) return 'unhealthy';
  if (health.degraded > 0) return 'degraded';
  return 'healthy';
};

const getOverallStatusText = (health?: ServiceHealthSummary): string => {
  const status = getOverallStatus(health);
  return status.charAt(0).toUpperCase() + status.slice(1);
};
</script>

