<template>
  <div>
    <LayoutsBreadcrumb />

    <!-- Page Info Card -->
    <rs-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <Icon class="mr-2 text-primary" name="ic:outline-monitor"></Icon>
          <h1 class="text-xl font-bold text-primary">Real-Time Monitoring</h1>
        </div>
      </template>
      <template #body>
        <p class="text-gray-600">
          Live monitoring of notification system performance with real-time alerts and system health indicators. 
          Track ongoing activities, monitor system load, and receive immediate notifications about issues.
        </p>
      </template>
    </rs-card>

    <!-- System Status Overview -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
      <rs-card
        v-for="(status, index) in systemStatus"
        :key="index"
        class="transition-all duration-300 hover:shadow-lg"
      >
        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
          <div
            class="p-5 flex justify-center items-center rounded-2xl transition-all duration-300"
            :class="status.status === 'healthy' ? 'bg-green-100' : 
                   status.status === 'warning' ? 'bg-yellow-100' : 'bg-red-100'"
          >
            <Icon 
              class="text-3xl"
              :class="status.status === 'healthy' ? 'text-green-600' : 
                     status.status === 'warning' ? 'text-yellow-600' : 'text-red-600'"
              :name="status.icon"
            />
          </div>
          <div class="flex-1 truncate">
            <span class="block font-bold text-2xl leading-tight text-primary">
              {{ status.value }}
            </span>
            <span class="text-sm font-medium text-gray-600">
              {{ status.title }}
            </span>
            <div class="flex items-center mt-1">
              <div 
                class="w-2 h-2 rounded-full mr-2"
                :class="status.status === 'healthy' ? 'bg-green-500' : 
                       status.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'"
              ></div>
              <span 
                class="text-xs font-medium capitalize"
                :class="status.status === 'healthy' ? 'text-green-600' : 
                       status.status === 'warning' ? 'text-yellow-600' : 'text-red-600'"
              >
                {{ status.status }}
              </span>
            </div>
          </div>
        </div>
      </rs-card>
    </div>

    <!-- Real-Time Controls -->
    <rs-card class="mb-6">
      <template #body>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <h3 class="text-lg font-semibold text-primary">Monitoring Controls</h3>
            <div class="flex items-center gap-2">
              <div 
                class="w-3 h-3 rounded-full animate-pulse"
                :class="isMonitoring ? 'bg-green-500' : 'bg-gray-400'"
              ></div>
              <span class="text-sm font-medium">
                {{ isMonitoring ? 'Live' : 'Paused' }}
              </span>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <FormKit
              type="select"
              v-model="refreshInterval"
              :options="refreshOptions"
              outer-class="mb-0"
              @input="updateRefreshInterval"
            />
            <rs-button 
              :variant="isMonitoring ? 'danger-outline' : 'primary'"
              size="sm" 
              @click="toggleMonitoring"
            >
              <Icon 
                :name="isMonitoring ? 'ic:outline-pause' : 'ic:outline-play-arrow'" 
                class="mr-1"
              />
              {{ isMonitoring ? 'Pause' : 'Start' }}
            </rs-button>
            <rs-button variant="primary-outline" size="sm" @click="refreshData">
              <Icon name="ic:outline-refresh" class="mr-1"/> Refresh
            </rs-button>
          </div>
        </div>
      </template>
    </rs-card>

    <!-- System Performance Dashboard -->
    <rs-card class="mb-6">
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <Icon name="ic:outline-speed" class="mr-2 text-primary"/>
            <h3 class="text-lg font-semibold text-primary">System Performance</h3>
          </div>
          <rs-button variant="outline" size="sm" @click="exportPerformanceData">
            <Icon name="ic:outline-file-download" class="mr-1"/> Export Data
          </rs-button>
        </div>
      </template>
      <template #body>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <!-- CPU Usage -->
          <div class="text-center">
            <div class="relative mx-auto w-32 h-32 mb-4">
              <div class="w-full h-full bg-gray-200 rounded-full flex items-center justify-center">
                <div class="text-center">
                  <div class="text-2xl font-bold text-primary">{{ performanceMetrics.cpu }}%</div>
                  <div class="text-xs text-gray-600">CPU</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Memory Usage -->
          <div class="text-center">
            <div class="relative mx-auto w-32 h-32 mb-4">
              <div class="w-full h-full bg-gray-200 rounded-full flex items-center justify-center">
                <div class="text-center">
                  <div class="text-2xl font-bold text-primary">{{ performanceMetrics.memory }}%</div>
                  <div class="text-xs text-gray-600">Memory</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Queue Load -->
          <div class="text-center">
            <div class="relative mx-auto w-32 h-32 mb-4">
              <div class="w-full h-full bg-gray-200 rounded-full flex items-center justify-center">
                <div class="text-center">
                  <div class="text-2xl font-bold text-primary">{{ performanceMetrics.queueLoad }}%</div>
                  <div class="text-xs text-gray-600">Queue Load</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Performance Chart Placeholder -->
        <div class="h-64 bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded">
          <div class="text-center">
            <Icon name="ic:outline-show-chart" class="text-4xl text-gray-400 mb-2"/>
            <p class="text-gray-500">Real-time Performance Chart</p>
            <p class="text-sm text-gray-400 mt-1">Implementation pending for live performance metrics</p>
          </div>
        </div>
      </template>
    </rs-card>

    <!-- Live Activity & Alerts Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      <!-- Live Activity Feed -->
      <rs-card>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <Icon name="ic:outline-notifications-active" class="mr-2 text-primary"/>
              <h3 class="text-lg font-semibold text-primary">Live Activity Feed</h3>
            </div>
            <div class="flex items-center gap-2">
              <rs-button variant="outline" size="sm" @click="clearActivityFeed">
                <Icon name="ic:outline-clear" class="mr-1"/> Clear
              </rs-button>
            </div>
          </div>
        </template>
        <template #body>
          <div class="h-96 overflow-y-auto space-y-3">
            <div
              v-for="(activity, index) in liveActivityFeed"
              :key="index"
              class="flex items-start p-3 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <div
                class="w-3 h-3 rounded-full mr-3 mt-2 flex-shrink-0"
                :class="{
                  'bg-green-500': activity.type === 'success',
                  'bg-blue-500': activity.type === 'info',
                  'bg-yellow-500': activity.type === 'warning',
                  'bg-red-500': activity.type === 'error',
                }"
              ></div>
              <div class="flex-1 min-w-0">
                <p class="font-medium text-sm">{{ activity.action }}</p>
                <p class="text-xs text-gray-600 mt-1">{{ activity.details }}</p>
                <div class="flex items-center mt-2 text-xs text-gray-500">
                  <Icon name="ic:outline-access-time" class="mr-1"/>
                  <span>{{ activity.timestamp }}</span>
                  <span class="mx-2">•</span>
                  <span>{{ activity.source }}</span>
                </div>
              </div>
            </div>
            
            <div v-if="liveActivityFeed.length === 0" class="text-center py-8 text-gray-500">
              <Icon name="ic:outline-wifi-tethering" class="text-3xl mb-2 mx-auto"/>
              <p>Waiting for live activity...</p>
            </div>
          </div>
        </template>
      </rs-card>

      <!-- Error Alerts -->
      <rs-card>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <Icon name="ic:outline-warning" class="mr-2 text-primary"/>
              <h3 class="text-lg font-semibold text-primary">Error Alerts</h3>
            </div>
            <div class="flex items-center gap-2">
              <rs-badge 
                :variant="errorAlerts.filter(a => a.severity === 'critical').length > 0 ? 'danger' : 'secondary'"
                size="sm"
              >
                {{ errorAlerts.length }} Active
              </rs-badge>
              <rs-button variant="outline" size="sm" @click="acknowledgeAllAlerts">
                <Icon name="ic:outline-check" class="mr-1"/> Acknowledge All
              </rs-button>
            </div>
          </div>
        </template>
        <template #body>
          <div class="h-96 overflow-y-auto space-y-3">
            <div
              v-for="(alert, index) in errorAlerts"
              :key="index"
              class="p-3 rounded-lg border-l-4 transition-all duration-300 hover:shadow-sm"
              :class="{
                'bg-red-50 border-red-400': alert.severity === 'critical',
                'bg-yellow-50 border-yellow-400': alert.severity === 'warning',
                'bg-blue-50 border-blue-400': alert.severity === 'info',
              }"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center">
                    <Icon 
                      :name="alert.severity === 'critical' ? 'ic:outline-error' : 
                            alert.severity === 'warning' ? 'ic:outline-warning' : 'ic:outline-info'"
                      :class="{
                        'text-red-600': alert.severity === 'critical',
                        'text-yellow-600': alert.severity === 'warning',
                        'text-blue-600': alert.severity === 'info',
                      }"
                      class="mr-2"
                    />
                    <span class="font-medium text-sm">{{ alert.title }}</span>
                  </div>
                  <p class="text-xs text-gray-600 mt-1">{{ alert.description }}</p>
                  <div class="flex items-center mt-2 text-xs text-gray-500">
                    <span>{{ alert.timestamp }}</span>
                    <span class="mx-2">•</span>
                    <span>{{ alert.component }}</span>
                  </div>
                </div>
                <rs-button 
                  variant="outline" 
                  size="sm" 
                  @click="acknowledgeAlert(index)"
                  class="ml-2"
                >
                  <Icon name="ic:outline-check" />
                </rs-button>
              </div>
            </div>
            
            <div v-if="errorAlerts.length === 0" class="text-center py-8 text-gray-500">
              <Icon name="ic:outline-check-circle" class="text-3xl mb-2 mx-auto text-green-500"/>
              <p>No active alerts</p>
              <p class="text-sm text-gray-400 mt-1">All systems operating normally</p>
            </div>
          </div>
        </template>
      </rs-card>
    </div>

    <!-- Queue Status -->
    <rs-card class="mb-6">
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <Icon name="ic:outline-queue" class="mr-2 text-primary"/>
            <h3 class="text-lg font-semibold text-primary">Queue Status</h3>
          </div>
          <rs-button variant="outline" size="sm" @click="navigateTo('/notification/queue-scheduler/monitor')">
            View Queue Monitor
          </rs-button>
        </div>
      </template>
      <template #body>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div 
            v-for="queue in queueStatus" 
            :key="queue.name"
            class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
          >
            <div class="flex items-center justify-between mb-2">
              <span class="font-medium">{{ queue.name }}</span>
              <rs-badge 
                :variant="queue.status === 'active' ? 'success' : 
                         queue.status === 'warning' ? 'warning' : 'danger'"
                size="sm"
              >
                {{ queue.status }}
              </rs-badge>
            </div>
            <div class="text-2xl font-bold text-primary mb-1">{{ queue.count }}</div>
            <div class="text-sm text-gray-600">{{ queue.description }}</div>
            <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
              <div 
                class="h-2 rounded-full transition-all duration-300"
                :class="queue.status === 'active' ? 'bg-green-500' : 
                       queue.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'"
                :style="{ width: queue.utilization + '%' }"
              ></div>
            </div>
            <div class="text-xs text-gray-500 mt-1">{{ queue.utilization }}% utilized</div>
          </div>
        </div>
      </template>
    </rs-card>

    <!-- Recent Logs -->
    <rs-card>
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <Icon name="ic:outline-history" class="mr-2 text-primary"/>
            <h3 class="text-lg font-semibold text-primary">Recent Activity Logs</h3>
          </div>
          <rs-button variant="outline" size="sm" @click="navigateTo('/notification/log-audit/logs')">
            View All Logs
          </rs-button>
        </div>
      </template>
      <template #body>
        <div class="space-y-3">
          <div
            v-for="(log, index) in recentLogs"
            :key="index"
            class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
          >
            <div class="flex items-center">
              <div
                class="w-3 h-3 rounded-full mr-3"
                :class="{
                  'bg-green-500': log.status === 'sent' || log.status === 'created',
                  'bg-yellow-500': log.status === 'queued',
                  'bg-red-500': log.status === 'failed',
                  'bg-blue-500': log.status === 'opened',
                }"
              ></div>
              <div>
                <p class="font-medium">{{ log.action }}</p>
                <p class="text-sm text-gray-600">{{ log.description }}</p>
              </div>
            </div>
            <div class="text-right">
              <p class="text-sm font-medium capitalize">{{ log.status }}</p>
              <p class="text-xs text-gray-500">{{ log.time }}</p>
            </div>
          </div>
        </div>
      </template>
    </rs-card>
  </div>
</template>

<script setup>
definePageMeta({
  title: "Real-Time Monitoring",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    {
      name: "Dashboard",
      path: "/dashboard",
    },
    {
      name: "Notification",
      path: "/notification",
    },
    {
      name: "Logs & Audit Trail",
      path: "/notification/log-audit",
    },
    {
      name: "Monitoring",
      path: "/notification/log-audit/monitoring",
      type: "current"
    },
  ],
});

import { ref, computed, onMounted, onUnmounted } from 'vue'

// Monitoring state
const isMonitoring = ref(true)
const refreshInterval = ref('5s')
const refreshIntervalId = ref(null)

const refreshOptions = [
  { label: '1 second', value: '1s' },
  { label: '5 seconds', value: '5s' },
  { label: '10 seconds', value: '10s' },
  { label: '30 seconds', value: '30s' },
  { label: '1 minute', value: '1m' },
]

// System status data
const systemStatus = ref([
  {
    title: "System Health",
    value: "Healthy",
    icon: "ic:outline-favorite",
    status: "healthy"
  },
  {
    title: "Throughput",
    value: "12,847/min",
    icon: "ic:outline-speed",
    status: "healthy"
  },
  {
    title: "Error Rate",
    value: "0.02%",
    icon: "ic:outline-error-outline",
    status: "healthy"
  },
  {
    title: "Response Time",
    value: "145ms",
    icon: "ic:outline-timer",
    status: "warning"
  },
])

// Performance metrics
const performanceMetrics = ref({
  cpu: 23,
  memory: 67,
  queueLoad: 45
})

// Live activity feed
const liveActivityFeed = ref([
  {
    action: "Email Batch Processed",
    details: "Successfully sent 1,250 welcome emails to new users",
    timestamp: "Just now",
    source: "Email Service",
    type: "success"
  },
  {
    action: "SMS Delivery Completed",
    details: "OTP messages delivered to 89 recipients",
    timestamp: "2 seconds ago",
    source: "SMS Gateway",
    type: "success"
  },
  {
    action: "Push Notification Sent",
    details: "Order confirmation sent to 456 devices",
    timestamp: "8 seconds ago",
    source: "Push Service",
    type: "info"
  },
  {
    action: "Webhook Timeout",
    details: "Webhook to api.example.com timed out after 30 seconds",
    timestamp: "15 seconds ago",
    source: "Webhook Service",
    type: "warning"
  },
  {
    action: "Rate Limit Triggered",
    details: "SMS rate limit reached for provider Twilio",
    timestamp: "32 seconds ago",
    source: "Rate Limiter",
    type: "warning"
  }
])

// Error alerts
const errorAlerts = ref([
  {
    title: "Database Connection Pool Exhausted",
    description: "Connection pool has reached maximum capacity. New connections are being queued.",
    timestamp: "2 minutes ago",
    component: "Database",
    severity: "critical"
  },
  {
    title: "Email Provider Rate Limit",
    description: "SendGrid API rate limit reached. Email delivery is temporarily throttled.",
    timestamp: "5 minutes ago",
    component: "Email Service",
    severity: "warning"
  },
  {
    title: "High Memory Usage",
    description: "System memory usage has exceeded 85% threshold.",
    timestamp: "8 minutes ago",
    component: "System",
    severity: "warning"
  }
])

// Queue status
const queueStatus = ref([
  {
    name: "Email Queue",
    count: "1,247",
    description: "Pending emails",
    status: "active",
    utilization: 78
  },
  {
    name: "SMS Queue",
    count: "89",
    description: "Pending SMS",
    status: "active",
    utilization: 23
  },
  {
    name: "Push Queue",
    count: "3,456",
    description: "Pending push notifications",
    status: "warning",
    utilization: 92
  },
  {
    name: "Webhook Queue",
    count: "12",
    description: "Pending webhooks",
    status: "active",
    utilization: 8
  }
])

// Recent logs
const recentLogs = ref([
  {
    action: "Email Campaign Sent",
    description: "Newsletter campaign to 50k subscribers",
    status: "sent",
    time: "1 minute ago"
  },
  {
    action: "SMS Batch Queued",
    description: "OTP messages for authentication",
    status: "queued",
    time: "3 minutes ago"
  },
  {
    action: "Push Notification Failed",
    description: "Failed to deliver to iOS devices",
    status: "failed",
    time: "5 minutes ago"
  },
  {
    action: "Email Opened",
    description: "User opened promotional email",
    status: "opened",
    time: "7 minutes ago"
  },
  {
    action: "Webhook Created",
    description: "New webhook endpoint configured",
    status: "created",
    time: "10 minutes ago"
  }
])

// Methods
const toggleMonitoring = () => {
  isMonitoring.value = !isMonitoring.value
  if (isMonitoring.value) {
    startMonitoring()
  } else {
    stopMonitoring()
  }
}

const updateRefreshInterval = () => {
  if (isMonitoring.value) {
    stopMonitoring()
    startMonitoring()
  }
}

const startMonitoring = () => {
  const intervalMs = {
    '1s': 1000,
    '5s': 5000,
    '10s': 10000,
    '30s': 30000,
    '1m': 60000
  }[refreshInterval.value] || 5000

  refreshIntervalId.value = setInterval(() => {
    // Simulate real-time updates
    simulateActivityUpdate()
    updatePerformanceMetrics()
  }, intervalMs)
}

const stopMonitoring = () => {
  if (refreshIntervalId.value) {
    clearInterval(refreshIntervalId.value)
    refreshIntervalId.value = null
  }
}

const simulateActivityUpdate = () => {
  // Add a new activity to the feed
  const activities = [
    { action: "Email Sent", details: "Marketing email delivered successfully", type: "success", source: "Email Service" },
    { action: "SMS Delivered", details: "OTP message sent to user", type: "success", source: "SMS Gateway" },
    { action: "Push Failed", details: "Device token expired", type: "error", source: "Push Service" },
    { action: "Webhook Called", details: "Order confirmation webhook triggered", type: "info", source: "Webhook Service" }
  ]
  
  const newActivity = {
    ...activities[Math.floor(Math.random() * activities.length)],
    timestamp: "Just now"
  }
  
  liveActivityFeed.value.unshift(newActivity)
  if (liveActivityFeed.value.length > 10) {
    liveActivityFeed.value.pop()
  }
}

const updatePerformanceMetrics = () => {
  // Simulate metric updates
  performanceMetrics.value.cpu = Math.max(10, Math.min(90, performanceMetrics.value.cpu + (Math.random() - 0.5) * 10))
  performanceMetrics.value.memory = Math.max(20, Math.min(95, performanceMetrics.value.memory + (Math.random() - 0.5) * 5))
  performanceMetrics.value.queueLoad = Math.max(0, Math.min(100, performanceMetrics.value.queueLoad + (Math.random() - 0.5) * 15))
}

const refreshData = () => {
  console.log('Refreshing monitoring data...')
  simulateActivityUpdate()
  updatePerformanceMetrics()
}

const clearActivityFeed = () => {
  liveActivityFeed.value = []
}

const acknowledgeAlert = (index) => {
  errorAlerts.value.splice(index, 1)
}

const acknowledgeAllAlerts = () => {
  errorAlerts.value = []
}

const exportPerformanceData = () => {
  console.log('Exporting performance data...')
  alert('Exporting performance data. (Implementation pending)')
}

// Lifecycle
onMounted(() => {
  if (isMonitoring.value) {
    startMonitoring()
  }
})

onUnmounted(() => {
  stopMonitoring()
})
</script>

<style lang="scss" scoped>
// Custom styles for FormKit consistency
:deep(.formkit-outer) {
  margin-bottom: 0;
}

:deep(.formkit-label) {
  font-weight: 500;
  color: rgb(107 114 128);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

:deep(.formkit-input) {
  border-radius: 0.5rem;
}

// Badge component styles (if RsBadge doesn't exist, these can be adjusted)
.rs-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.rs-badge.variant-success {
  @apply bg-green-100 text-green-800;
}

.rs-badge.variant-danger {
  @apply bg-red-100 text-red-800;
}

.rs-badge.variant-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.rs-badge.variant-info {
  @apply bg-blue-100 text-blue-800;
}

.rs-badge.variant-secondary {
  @apply bg-gray-100 text-gray-800;
}
</style> 