<template>
  <div class="monitoring-dashboard">
    <div class="mb-8">
      <h1 class="text-3xl font-bold mb-2">Service Monitoring</h1>
      <p class="text-gray-600">Monitor Besu, Cacti, Firefly, and Chainlink CCIP services</p>
    </div>

    <!-- Service Health Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <ServiceHealthCard
        v-for="service in serviceTypes"
        :key="service.type"
        :service-type="service.type"
        :health="healthData[service.type]"
        @click="selectedService = service.type"
      />
    </div>

    <!-- Service Tabs -->
    <div class="border-b border-gray-200 mb-6">
      <nav class="flex space-x-8">
        <button
          v-for="service in serviceTypes"
          :key="service.type"
          @click="selectedService = service.type"
          :class="[
            'py-4 px-1 border-b-2 font-medium text-sm',
            selectedService === service.type
              ? 'border-primary-500 text-primary-600'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
          ]"
        >
          <i :class="service.icon" class="mr-2"></i>
          {{ service.name }}
        </button>
      </nav>
    </div>

    <!-- Service Details -->
    <div v-if="selectedService" class="space-y-6">
      <!-- Besu Monitoring -->
      <BesuMonitoring
        v-if="selectedService === 'besu'"
        :environment="selectedEnvironment"
        @environment-change="selectedEnvironment = $event"
      />

      <!-- Cacti Monitoring -->
      <CactiMonitoring
        v-if="selectedService === 'cacti'"
        :environment="selectedEnvironment"
        @environment-change="selectedEnvironment = $event"
      />

      <!-- Firefly Monitoring -->
      <FireflyMonitoring
        v-if="selectedService === 'firefly'"
        :environment="selectedEnvironment"
        @environment-change="selectedEnvironment = $event"
      />

      <!-- Chainlink CCIP Monitoring -->
      <ChainlinkCCIPMonitoring
        v-if="selectedService === 'chainlink-ccip'"
        :environment="selectedEnvironment"
        @environment-change="selectedEnvironment = $event"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { io, Socket } from 'socket.io-client';
import ServiceHealthCard from '../components/monitoring/ServiceHealthCard.vue';
import BesuMonitoring from '../components/monitoring/BesuMonitoring.vue';
import CactiMonitoring from '../components/monitoring/CactiMonitoring.vue';
import FireflyMonitoring from '../components/monitoring/FireflyMonitoring.vue';
import ChainlinkCCIPMonitoring from '../components/monitoring/ChainlinkCCIPMonitoring.vue';
import type { ServiceHealthSummary } from '../../types';

const selectedService = ref<'besu' | 'cacti' | 'firefly' | 'chainlink-ccip' | null>('besu');
const selectedEnvironment = ref<string>('');
const healthData = ref<Record<string, ServiceHealthSummary>>({});
const socket = ref<Socket | null>(null);

const serviceTypes = [
  { type: 'besu' as const, name: 'Besu', icon: 'fas fa-cube' },
  { type: 'cacti' as const, name: 'Cacti', icon: 'fas fa-link' },
  { type: 'firefly' as const, name: 'Firefly', icon: 'fas fa-fire' },
  { type: 'chainlink-ccip' as const, name: 'Chainlink CCIP', icon: 'fas fa-project-diagram' },
];

const loadHealthData = async () => {
  try {
    const response = await fetch('/api/monitoring/dashboard');
    if (response.ok) {
      const data = await response.json();
      healthData.value = {
        besu: data.besu,
        cacti: data.cacti,
        firefly: data.firefly,
        chainlinkCcip: data.chainlinkCcip,
      };
    }
  } catch (error) {
    console.error('Failed to load health data:', error);
  }
};

onMounted(() => {
  loadHealthData();
  
  // Initialize WebSocket for real-time updates
  socket.value = io(window.location.origin);
  socket.value.on('connect', () => {
    console.log('Connected to monitoring WebSocket');
  });
  
  socket.value.on('admin-update', (data: { type: string; data: any }) => {
    if (data.type === 'monitoring-updated') {
      loadHealthData();
    }
  });
  
  // Auto-refresh every 30 seconds
  const interval = setInterval(loadHealthData, 30000);
  
  onUnmounted(() => {
    clearInterval(interval);
    if (socket.value) {
      socket.value.disconnect();
    }
  });
});
</script>

<style scoped>
.monitoring-dashboard {
  /* Component styles */
}
</style>

