<template>
  <div class="monitoring-tab">
    <div class="controls">
      <div class="input-group">
        <label for="notificationChannel">Notification Channel</label>
        <input
          id="notificationChannel"
          v-model="notificationChannel"
          type="text"
          placeholder="Enter notification channel"
        />
      </div>

      <div class="input-group">
        <label for="notificationPayload">Notification Payload (JSON)</label>
        <textarea
          id="notificationPayload"
          v-model="notificationPayload"
          placeholder='{"message": "Hello", "type": "info"}'
          rows="3"
        ></textarea>
      </div>

      <div class="input-group">
        <label for="triggerEvent">Trigger Event</label>
        <select id="triggerEvent" v-model="triggerEvent">
          <option value="user_joined">User Joined</option>
          <option value="user_left">User Left</option>
          <option value="message_sent">Message Sent</option>
          <option value="connection_lost">Connection Lost</option>
          <option value="server_restart">Server Restart</option>
          <option value="custom">Custom Event</option>
        </select>
      </div>

      <div class="input-group">
        <label for="customEvent">Custom Event Name</label>
        <input
          id="customEvent"
          v-model="customEvent"
          type="text"
          placeholder="custom_event_name"
          :disabled="triggerEvent !== 'custom'"
        />
      </div>
    </div>

    <div class="controls">
      <button
        class="btn btn-primary"
        :disabled="
          !isConnected ||
          !notificationChannel.trim() ||
          !notificationPayload.trim()
        "
        @click="triggerNotification"
      >
        Trigger Notification
      </button>

      <button class="btn btn-info" :disabled="!isConnected" @click="getStats">
        Refresh Stats
      </button>

      <button
        class="btn btn-secondary"
        :disabled="!isConnected"
        @click="getMonitoringData"
      >
        Get Monitoring Data
      </button>

      <button class="btn btn-warning" @click="clearMonitoringData">
        Clear Data
      </button>
    </div>

    <!-- Connection Health -->
    <div class="health-section">
      <h3>Connection Health</h3>
      <div class="health-grid">
        <div class="health-item">
          <div class="health-label">Status</div>
          <div class="health-value" :class="connectionHealthClass">
            {{ connectionHealthText }}
          </div>
        </div>
        <div class="health-item">
          <div class="health-label">Latency</div>
          <div class="health-value">
            {{ connectionState.connectionLatency }}ms
          </div>
        </div>
        <div class="health-item">
          <div class="health-label">Messages Sent</div>
          <div class="health-value">{{ connectionState.messagesSent }}</div>
        </div>
        <div class="health-item">
          <div class="health-label">Messages Received</div>
          <div class="health-value">{{ connectionState.messagesReceived }}</div>
        </div>
        <div class="health-item">
          <div class="health-label">Reconnect Attempts</div>
          <div class="health-value">
            {{ connectionState.reconnectAttempts }}
          </div>
        </div>
        <div class="health-item">
          <div class="health-label">Connection Time</div>
          <div class="health-value">{{ connectionState.uptime }}</div>
        </div>
      </div>
    </div>

    <!-- Server Statistics -->
    <div class="stats-section" v-if="stats">
      <h3>Server Statistics</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-label">Connected Clients</div>
          <div class="stat-value">{{ stats.connected_clients }}</div>
          <div
            class="stat-change"
            :class="getStatChangeClass('connected_clients')"
          >
            {{ getStatChange("connected_clients") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Unique IPs</div>
          <div class="stat-value">{{ stats.unique_ips }}</div>
          <div class="stat-change" :class="getStatChangeClass('unique_ips')">
            {{ getStatChange("unique_ips") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Static Clients</div>
          <div class="stat-value">{{ stats.static_clients }}</div>
          <div
            class="stat-change"
            :class="getStatChangeClass('static_clients')"
          >
            {{ getStatChange("static_clients") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Active Rooms</div>
          <div class="stat-value">{{ stats.active_rooms }}</div>
          <div class="stat-change" :class="getStatChangeClass('active_rooms')">
            {{ getStatChange("active_rooms") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Message Queue</div>
          <div class="stat-value">{{ stats.message_queue_size }}</div>
          <div
            class="stat-change"
            :class="getStatChangeClass('message_queue_size')"
          >
            {{ getStatChange("message_queue_size") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Queue Workers</div>
          <div class="stat-value">{{ stats.queue_workers }}</div>
          <div class="stat-change" :class="getStatChangeClass('queue_workers')">
            {{ getStatChange("queue_workers") }}
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Server Uptime</div>
          <div class="stat-value">{{ formatUptime(stats.uptime) }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">Last Updated</div>
          <div class="stat-value">{{ formatTime(stats.timestamp) }}</div>
        </div>
      </div>
    </div>

    <!-- Monitoring Data -->
    <div class="monitoring-data-section" v-if="monitoringData">
      <h3>Monitoring Data</h3>
      <div class="monitoring-content">
        <pre>{{ JSON.stringify(monitoringData, null, 2) }}</pre>
      </div>
    </div>

    <!-- Notification History -->
    <div class="notification-history-section">
      <h3>Notification History</h3>
      <div class="notification-history">
        <div
          v-for="(notification, index) in notificationHistory.slice(0, 10)"
          :key="index"
          class="notification-item"
        >
          <div class="notification-header">
            <div class="notification-channel">{{ notification.channel }}</div>
            <div class="notification-time">
              {{ formatTime(notification.timestamp) }}
            </div>
          </div>
          <div class="notification-payload">
            <pre>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
          </div>
        </div>
        <div v-if="notificationHistory.length === 0" class="no-notifications">
          No notifications sent yet
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useWebSocket } from "../../composables/useWebSocket";

const {
  isConnected,
  connectionState,
  stats,
  monitoringData,
  triggerNotification: triggerNotificationFn,
  getStats,
  getMonitoringData,
} = useWebSocket();

const notificationChannel = ref("");
const notificationPayload = ref("");
const triggerEvent = ref("user_joined");
const customEvent = ref("");
const notificationHistory = ref<
  Array<{
    channel: string;
    payload: any;
    timestamp: number;
  }>
>([]);

const connectionHealthClass = computed(() => {
  switch (connectionState.connectionHealth) {
    case "excellent":
      return "health-excellent";
    case "good":
      return "health-good";
    case "warning":
      return "health-warning";
    case "poor":
      return "health-poor";
    default:
      return "health-poor";
  }
});

const connectionHealthText = computed(() => {
  switch (connectionState.connectionHealth) {
    case "excellent":
      return "Excellent";
    case "good":
      return "Good";
    case "warning":
      return "Warning";
    case "poor":
      return "Poor";
    default:
      return "Unknown";
  }
});

const triggerNotification = () => {
  if (!notificationChannel.value.trim() || !notificationPayload.value.trim())
    return;

  try {
    const payload = JSON.parse(notificationPayload.value);
    const eventName =
      triggerEvent.value === "custom" ? customEvent.value : triggerEvent.value;

    triggerNotificationFn(notificationChannel.value.trim());

    // Add to history
    notificationHistory.value.unshift({
      channel: notificationChannel.value.trim(),
      payload,
      timestamp: Date.now(),
    });

    // Clear form
    notificationChannel.value = "";
    notificationPayload.value = "";
  } catch (error) {
    alert(
      "Invalid JSON payload: " +
        (error instanceof Error ? error.message : String(error))
    );
  }
};

const clearMonitoringData = () => {
  notificationHistory.value = [];
};

const formatTime = (timestamp: number) => {
  return new Date(timestamp).toLocaleString();
};

const formatUptime = (uptime: number) => {
  const seconds = Math.floor(uptime / 1000);
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
};

// Mock stat changes for demonstration
const previousStats = ref<any>(null);

const getStatChange = (statName: string) => {
  if (!previousStats.value || !stats.value) return "";

  const current = stats.value[statName as keyof typeof stats.value] as number;
  const previous =
    previousStats.value[statName as keyof typeof previousStats.value];

  if (current > previous) return `+${current - previous}`;
  if (current < previous) return `-${previous - current}`;
  return "0";
};

const getStatChangeClass = (statName: string) => {
  if (!previousStats.value || !stats.value) return "";

  const current = stats.value[statName as keyof typeof stats.value];
  const previous =
    previousStats.value[statName as keyof typeof previousStats.value];

  if (current > previous) return "stat-increase";
  if (current < previous) return "stat-decrease";
  return "stat-unchanged";
};

// Update previous stats when new stats arrive
const updatePreviousStats = () => {
  if (stats.value) {
    previousStats.value = { ...stats.value };
  }
};

// Watch for stats changes
import { watch } from "vue";
watch(stats, updatePreviousStats, { deep: true });
</script>

<style scoped>
.monitoring-tab {
  padding: 20px 0;
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-group label {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.input-group input,
.input-group select,
.input-group textarea {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.input-group input:disabled {
  background: #e9ecef;
  cursor: not-allowed;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: #1976d2;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #1565c0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-info:hover:not(:disabled) {
  background: #138496;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-warning:hover {
  background: #e0a800;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.health-section,
.stats-section {
  margin: 32px 0;
}

.health-section h3,
.stats-section h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.health-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.health-item,
.stat-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  text-align: center;
}

.health-label,
.stat-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.health-value {
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.stat-value {
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
}

.stat-increase {
  color: #28a745;
}

.stat-decrease {
  color: #dc3545;
}

.stat-unchanged {
  color: #6c757d;
}

.monitoring-data-section {
  margin: 32px 0;
}

.monitoring-data-section h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.monitoring-content {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
}

.monitoring-content pre {
  margin: 0;
  font-size: 12px;
  color: #333;
}

.notification-history-section {
  margin-top: 32px;
}

.notification-history-section h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.notification-history {
  max-height: 300px;
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.notification-item {
  margin: 16px 0;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  overflow: hidden;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.notification-channel {
  font-weight: 600;
  color: #1976d2;
}

.notification-time {
  color: #666;
  font-size: 12px;
}

.notification-payload {
  padding: 16px;
}

.notification-payload pre {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  color: #333;
  margin: 0;
}

.no-notifications {
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .controls {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .health-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
