<template>
  <div class="services-status-view">
      <div class="admin-header">
        <h1>{{ $t('admin.servicesStatus.title') }}</h1>
        <p>{{ $t('admin.servicesStatus.description') }}</p>
      </div>

      <SimpleTabs v-model="activeTab" :tabs="tabs" />

      <!-- Backend Tab -->
      <div v-if="activeTab === 'backend'" class="service-status">
        <div class="status-card">
          <h2>{{ $t('admin.servicesStatus.backend.title') }}</h2>
          <div class="status-indicator" :class="backendStatus">
            <span class="status-dot"></span>
            <span class="status-text">{{ $t(`admin.servicesStatus.status.${backendStatus}`) }}</span>
          </div>
          <div v-if="backendStatus === 'connected'" class="status-details">
            <p>{{ $t('admin.servicesStatus.backend.connected') }}</p>
          </div>
        </div>
      </div>

      <!-- Chat Tab -->
      <div v-if="activeTab === 'chat'" class="service-status">
        <div class="status-card">
          <h2>{{ $t('admin.servicesStatus.chat.title') }}</h2>
          <div class="status-indicator" :class="chatStatus">
            <span class="status-dot"></span>
            <span class="status-text">{{ $t(`admin.servicesStatus.status.${chatStatus}`) }}</span>
          </div>
          <div v-if="chatStatus === 'connected'" class="status-details">
            <p>{{ $t('admin.servicesStatus.chat.connected') }}</p>
          </div>
        </div>
      </div>

      <!-- Daemon Tab -->
      <div v-if="activeTab === 'daemon'" class="service-status">
        <div class="status-card">
          <h2>{{ $t('admin.servicesStatus.daemon.title') }}</h2>
          <div class="status-indicator" :class="daemonStatus">
            <span class="status-dot"></span>
            <span class="status-text">{{ $t(`admin.servicesStatus.status.${daemonStatus}`) }}</span>
          </div>
          <div v-if="daemonStatus === 'connected'" class="status-details">
            <p>{{ $t('admin.servicesStatus.daemon.connected') }}</p>
          </div>
        </div>

        <!-- Daemon Connections -->
        <div v-if="daemonStatus === 'connected'" class="connections-section">
          <div class="section-header">
            <h3>{{ $t('admin.servicesStatus.daemon.connections.title') }}</h3>
            <button @click="openWebSocketLogDialog" class="log-button">
              {{ $t('admin.servicesStatus.daemon.websocketLog.showLog') }}
            </button>
          </div>
          <div v-if="connections.length === 0" class="no-connections">
            <p>{{ $t('admin.servicesStatus.daemon.connections.none') }}</p>
          </div>
          <div v-else class="connections-list">
            <div v-for="(userConn, index) in connections" :key="index" class="connection-group">
              <div class="connection-header">
                <strong>{{ $t('admin.servicesStatus.daemon.connections.username') }}:</strong> {{ userConn.username }}
                <span class="connection-count">({{ userConn.connectionCount }} {{ $t('admin.servicesStatus.daemon.connections.connections') }})</span>
              </div>
              <div v-for="(conn, connIndex) in userConn.connections" :key="connIndex" class="connection-details">
                <div class="connection-info">
                  <div class="info-row">
                    <span class="info-label">{{ $t('admin.servicesStatus.daemon.connections.duration') }}:</span>
                    <span class="info-value">{{ formatDuration(conn.connectionDurationSeconds) }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">{{ $t('admin.servicesStatus.daemon.connections.lastPong') }}:</span>
                    <span class="info-value">{{ formatDuration(conn.timeSinceLastPongSeconds) }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">{{ $t('admin.servicesStatus.daemon.connections.pingTimeouts') }}:</span>
                    <span class="info-value">{{ conn.pingTimeoutCount }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">{{ $t('admin.servicesStatus.daemon.connections.pongReceived') }}:</span>
                    <span class="info-value" :class="{ 'status-ok': conn.pongReceived, 'status-warning': !conn.pongReceived }">
                      {{ conn.pongReceived ? $t('admin.servicesStatus.daemon.connections.yes') : $t('admin.servicesStatus.daemon.connections.no') }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="error" class="error-message">
            <p>{{ error }}</p>
          </div>
        </div>
      </div>

    <!-- WebSocket Log Dialog -->
    <WebSocketLogDialog ref="webSocketLogDialog" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import SimpleTabs from '@/components/SimpleTabs.vue';
import apiClient from '@/utils/axios.js';
import WebSocketLogDialog from '@/dialogues/admin/WebSocketLogDialog.vue';

export default {
  name: 'ServicesStatusView',
  components: {
    SimpleTabs,
    WebSocketLogDialog
  },
  data() {
    return {
      activeTab: 'backend',
      tabs: [
        {
          value: 'backend',
          label: this.$t('admin.servicesStatus.backend.title')
        },
        {
          value: 'chat',
          label: this.$t('admin.servicesStatus.chat.title')
        },
        {
          value: 'daemon',
          label: this.$t('admin.servicesStatus.daemon.title')
        }
      ],
      connections: [],
      error: null,
      daemonUpdateInterval: null
    };
  },
  computed: {
    ...mapState(['socket', 'daemonSocket', 'connectionStatus', 'daemonConnectionStatus']),
    backendStatus() {
      if (!this.socket) return 'disconnected';
      if (this.connectionStatus === 'connected') return 'connected';
      if (this.connectionStatus === 'connecting') return 'connecting';
      if (this.connectionStatus === 'error') return 'error';
      return 'disconnected';
    },
    chatStatus() {
      // Chat-Status überprüfen - hier müsste der Chat-WebSocket-Status aus dem Store kommen
      // Für jetzt nehmen wir an, dass Chat über einen separaten Mechanismus läuft
      return 'unknown';
    },
    daemonStatus() {
      if (!this.daemonSocket) return 'disconnected';
      if (this.daemonConnectionStatus === 'connected') return 'connected';
      if (this.daemonConnectionStatus === 'connecting') return 'connecting';
      if (this.daemonConnectionStatus === 'error') return 'error';
      return 'disconnected';
    }
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'daemon' && this.daemonStatus === 'connected') {
        this.startDaemonUpdates();
      } else {
        this.stopDaemonUpdates();
      }
    },
    daemonStatus(newStatus) {
      if (newStatus === 'connected' && this.activeTab === 'daemon') {
        this.startDaemonUpdates();
      } else {
        this.stopDaemonUpdates();
      }
    },
    daemonSocket(newSocket, oldSocket) {
      // Event-Listener bei Socket-Änderung aktualisieren
      if (oldSocket) {
        oldSocket.removeEventListener('message', this.handleDaemonMessage);
      }
      if (newSocket) {
        newSocket.addEventListener('message', this.handleDaemonMessage);
        if (this.activeTab === 'daemon' && this.daemonStatus === 'connected') {
          this.startDaemonUpdates();
        }
      }
    }
  },
  mounted() {
    if (this.activeTab === 'daemon' && this.daemonStatus === 'connected') {
      this.startDaemonUpdates();
    }
  },
  beforeUnmount() {
    this.stopDaemonUpdates();
  },
  methods: {
    startDaemonUpdates() {
      this.stopDaemonUpdates();
      this.fetchDaemonConnections();
      this.daemonUpdateInterval = setInterval(() => {
        this.fetchDaemonConnections();
      }, 5000); // Alle 5 Sekunden
    },
    stopDaemonUpdates() {
      if (this.daemonUpdateInterval) {
        clearInterval(this.daemonUpdateInterval);
        this.daemonUpdateInterval = null;
      }
    },
    fetchDaemonConnections() {
      if (!this.daemonSocket || this.daemonSocket.readyState !== WebSocket.OPEN) {
        this.error = this.$t('admin.servicesStatus.daemon.connections.notConnected');
        return;
      }

      try {
        const message = JSON.stringify({
          event: 'getConnections'
        });
        this.daemonSocket.send(message);
        this.error = null;
      } catch (err) {
        console.error('Fehler beim Senden von getConnections:', err);
        this.error = this.$t('admin.servicesStatus.daemon.connections.sendError');
      }
    },
    async handleDaemonMessage(event) {
      try {
        const data = JSON.parse(event.data);
        if (data.event === 'getConnectionsResponse') {
          // Die Daemon-Antwort hat die Struktur: {event, total, unauthenticated, users: {userId: count}}
          if (data.users && typeof data.users === 'object') {
            // Transformiere das users-Objekt in ein Array für das Template
            const userIds = Object.keys(data.users);
            
            // Lade User-Informationen für alle User-IDs
            let userMap = {};
            if (userIds.length > 0) {
              try {
                const response = await apiClient.get('/api/admin/users/batch', {
                  params: { ids: userIds }
                });
                userMap = response.data;
              } catch (err) {
                console.error('Fehler beim Abrufen der User-Informationen:', err);
                // Fallback: Verwende User-IDs, wenn Abruf fehlschlägt
              }
            }
            
            // Transformiere das users-Objekt in ein Array für das Template
            this.connections = Object.entries(data.users).map(([userId, connectionCount]) => {
              const userInfo = userMap[userId];
              return {
                userId: userId,
                username: userInfo ? userInfo.username : userId.substring(0, 8) + '...', // Fallback: Zeige ersten Teil der ID
                connectionCount: connectionCount,
                connections: [] // Detaillierte Verbindungsinfos sind in der aktuellen Antwort nicht enthalten
              };
            });
            this.error = null;
          } else {
            this.connections = [];
            this.error = null;
          }
        }
      } catch (err) {
        console.error('Fehler beim Verarbeiten der Daemon-Nachricht:', err);
        this.error = this.$t('admin.servicesStatus.daemon.connections.error');
      }
    },
    formatDuration(seconds) {
      if (seconds < 60) {
        return `${seconds}s`;
      } else if (seconds < 3600) {
        const minutes = Math.floor(seconds / 60);
        const secs = seconds % 60;
        return `${minutes}m ${secs}s`;
      } else {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        return `${hours}h ${minutes}m`;
      }
    },
    openWebSocketLogDialog() {
      if (this.$refs.webSocketLogDialog) {
        this.$refs.webSocketLogDialog.open();
      }
    }
  },
  created() {
    // Event-Listener für Daemon-Nachrichten registrieren
    if (this.daemonSocket) {
      this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
    }
  },
  beforeUnmount() {
    // Event-Listener entfernen
    this.stopDaemonUpdates();
    if (this.daemonSocket) {
      this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
    }
  }
};
</script>

<style scoped>
.service-status {
  padding: 20px;
}

.status-card {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.status-card h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator.connected .status-dot {
  background-color: #4caf50;
}

.status-indicator.connecting .status-dot {
  background-color: #ff9800;
  animation: pulse 1.5s infinite;
}

.status-indicator.disconnected .status-dot {
  background-color: #f44336;
}

.status-indicator.error .status-dot {
  background-color: #f44336;
}

.status-indicator.unknown .status-dot {
  background-color: #9e9e9e;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.status-text {
  font-weight: bold;
}

.status-details {
  margin-top: 10px;
  color: #666;
}

.connections-section {
  margin-top: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h3 {
  margin: 0;
}

.log-button {
  padding: 8px 16px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.log-button:hover {
  background: #1565c0;
}

.no-connections {
  padding: 20px;
  text-align: center;
  color: #666;
}

.connections-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.connection-group {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
}

.connection-header {
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.connection-count {
  color: #666;
  font-size: 14px;
  font-weight: normal;
}

.connection-details {
  margin-top: 10px;
  padding-left: 20px;
}

.connection-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.info-label {
  font-weight: 500;
  color: #555;
}

.info-value {
  color: #333;
}

.status-ok {
  color: #4caf50;
  font-weight: bold;
}

.status-warning {
  color: #ff9800;
  font-weight: bold;
}

.error-message {
  margin-top: 15px;
  padding: 10px;
  background: #ffebee;
  border: 1px solid #f44336;
  border-radius: 4px;
  color: #c62828;
}
</style>
