import React from 'react';
import type { ServiceType, ServiceHealthSummary } from '../../../types';

interface Props {
  serviceType: ServiceType;
  health?: ServiceHealthSummary;
  onClick: () => void;
}

const ServiceHealthCard: React.FC<Props> = ({ serviceType, health, onClick }) => {
  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);
  };

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

export default ServiceHealthCard;

