<template>
  <div
    class="card transition-all duration-200 hover:shadow-lg hover:-translate-y-1"
    :class="environment.enabled ? 'border-l-4 border-l-green-500' : 'border-l-4 border-l-gray-300 opacity-60'"
  >
    <div class="flex justify-between items-start mb-4">
      <div>
        <h3 class="text-lg font-semibold text-gray-900">{{ environment.name }}</h3>
        <div class="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>
    
    <div v-if="environment.enabled && status" class="mb-4">
      <span
        class="status-badge"
        :class="status.cluster_health"
      >
        <i class="fas fa-circle text-xs"></i>
        {{ capitalize(status.status) }}
      </span>
      
      <div class="grid grid-cols-2 gap-3 mt-4 pt-4 border-t border-gray-200">
        <div class="text-center">
          <div class="text-xs text-gray-500">CPU</div>
          <div class="text-lg font-semibold">{{ status.cpu_usage_percent }}%</div>
        </div>
        <div class="text-center">
          <div class="text-xs text-gray-500">Memory</div>
          <div class="text-lg font-semibold">{{ status.memory_usage_percent }}%</div>
        </div>
        <div class="text-center">
          <div class="text-xs text-gray-500">Nodes</div>
          <div class="text-lg font-semibold">{{ status.node_count }}</div>
        </div>
        <div class="text-center">
          <div class="text-xs text-gray-500">Pods</div>
          <div class="text-lg font-semibold">{{ status.pods_running }}/{{ status.pods_total }}</div>
        </div>
      </div>
    </div>
    
    <div class="flex gap-2 mt-4">
      <button
        @click="$emit('view', environment.name)"
        class="btn btn-primary flex-1"
      >
        <i class="fas fa-eye mr-2"></i>View
      </button>
      <button
        v-if="environment.enabled"
        @click="$emit('deploy', environment.name)"
        class="btn btn-secondary"
      >
        <i class="fas fa-rocket"></i>
      </button>
    </div>
  </div>
</template>

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

defineProps<{
  environment: Environment;
  status?: DeploymentStatus;
}>();

defineEmits<{
  view: [name: string];
  deploy: [name: string];
}>();

const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};
</script>

