import React from 'react';
import type { Environment, DeploymentStatus } from '../../types';

interface Props {
  environment: Environment;
  status?: DeploymentStatus;
  onDeploy: (name: string) => void;
}

const EnvironmentCard: React.FC<Props> = ({ environment, status, onDeploy }) => {
  const capitalize = (str: string): string => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };

  return (
    <div
      className={`card transition-all duration-200 hover:shadow-lg hover:-translate-y-1 ${
        environment.enabled
          ? 'border-l-4 border-l-green-500'
          : 'border-l-4 border-l-gray-300 opacity-60'
      }`}
    >
      <div className="flex justify-between items-start mb-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-900">{environment.name}</h3>
          <div className="text-sm text-gray-500 mt-1">
            <div><strong>Role:</strong> {capitalize(environment.role)}</div>
            <div><strong>Region:</strong> {environment.region}</div>
            <div><strong>Location:</strong> {environment.location}</div>
          </div>
        </div>
      </div>
      
      {environment.enabled && status && (
        <div className="mb-4">
          <span
            className={`status-badge ${status.cluster_health}`}
          >
            <i className="fas fa-circle text-xs"></i>
            {capitalize(status.status)}
          </span>
          
          <div className="grid grid-cols-2 gap-3 mt-4 pt-4 border-t border-gray-200">
            <div className="text-center">
              <div className="text-xs text-gray-500">CPU</div>
              <div className="text-lg font-semibold">{status.cpu_usage_percent}%</div>
            </div>
            <div className="text-center">
              <div className="text-xs text-gray-500">Memory</div>
              <div className="text-lg font-semibold">{status.memory_usage_percent}%</div>
            </div>
            <div className="text-center">
              <div className="text-xs text-gray-500">Nodes</div>
              <div className="text-lg font-semibold">{status.node_count}</div>
            </div>
            <div className="text-center">
              <div className="text-xs text-gray-500">Pods</div>
              <div className="text-lg font-semibold">
                {status.pods_running}/{status.pods_total}
              </div>
            </div>
          </div>
        </div>
      )}
      
      <div className="flex gap-2 mt-4">
        <button className="btn btn-primary flex-1">
          <i className="fas fa-eye mr-2"></i>View
        </button>
        {environment.enabled && (
          <button
            onClick={() => onDeploy(environment.name)}
            className="btn btn-secondary"
          >
            <i className="fas fa-rocket"></i>
          </button>
        )}
      </div>
    </div>
  );
};

export default EnvironmentCard;

