<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">Delivery Monitor</h1>
        </div>
      </template>
      <template #body>
        <p class="text-gray-600">
          Real-time monitoring of notification deliveries across all channels. Track individual messages, 
          monitor batch progress, and analyze delivery performance with detailed metrics.
        </p>
      </template>
    </rs-card>

    <!-- Real-time Metrics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
      <rs-card
        v-for="(metric, index) in realTimeMetrics"
        :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="metric.bgColor"
          >
            <Icon class="text-3xl" :name="metric.icon" :class="metric.iconColor"></Icon>
          </div>
          <div class="flex-1 truncate">
            <span class="block font-bold text-2xl leading-tight" :class="metric.textColor">
              {{ metric.value }}
            </span>
            <span class="text-sm font-medium text-gray-600">
              {{ metric.title }}
            </span>
          </div>
        </div>
      </rs-card>
    </div>

    <!-- Message Search & Filter -->
    <rs-card class="mb-6">
      <template #header>
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-semibold text-primary">Message Tracking</h2>
          <div class="flex gap-2">
            <rs-button size="sm" variant="primary-outline" @click="refreshMessages">
              <Icon class="mr-1" name="ic:outline-refresh"></Icon>
              Refresh
            </rs-button>
            <rs-button size="sm" variant="primary-outline" @click="showFilters = !showFilters">
              <Icon class="mr-1" name="ic:outline-filter-list"></Icon>
              Filters
            </rs-button>
          </div>
        </div>
      </template>
      <template #body>
        <!-- Search and Filters -->
        <div class="mb-6 space-y-4">
          <div class="flex gap-4">
            <div class="flex-1">
              <FormKit
                type="text"
                v-model="searchQuery"
                placeholder="Search by message ID, recipient, or content..."
                prefix-icon="search"
              />
            </div>
            <div class="w-48">
              <FormKit
                type="select"
                v-model="selectedChannel"
                :options="channelFilterOptions"
                placeholder="All Channels"
              />
            </div>
          </div>
          
          <!-- Advanced Filters -->
          <div v-if="showFilters" class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-gray-50 rounded-lg">
            <FormKit
              type="select"
              v-model="filters.status"
              :options="statusFilterOptions"
              label="Status"
            />
            <FormKit
              type="select"
              v-model="filters.priority"
              :options="priorityFilterOptions"
              label="Priority"
            />
            <FormKit
              type="date"
              v-model="filters.dateFrom"
              label="From Date"
            />
            <FormKit
              type="date"
              v-model="filters.dateTo"
              label="To Date"
            />
          </div>
        </div>

        <!-- Messages Table -->
        <rs-table
          :field="messageTableFields"
          :data="filteredMessages"
          :advanced="true"
          :options="{ striped: true, hover: true }"
          :optionsAdvanced="{
            sortable: true,
            filterable: true,
            responsive: true,
          }"
          :pageSize="20"
        >
          <template #messageId="{ row }">
            <button 
              @click="viewMessageDetails(row)"
              class="text-primary hover:underline font-mono text-sm"
            >
              {{ row.messageId }}
            </button>
          </template>

          <template #status="{ row }">
            <rs-badge :variant="getStatusVariant(row.status)" size="sm">
              {{ row.status }}
            </rs-badge>
          </template>

          <template #channel="{ row }">
            <div class="flex items-center">
              <Icon class="mr-2" :name="getChannelIcon(row.channel)"></Icon>
              {{ row.channel }}
            </div>
          </template>

          <template #priority="{ row }">
            <rs-badge 
              :variant="getPriorityVariant(row.priority)" 
              size="sm"
            >
              {{ row.priority }}
            </rs-badge>
          </template>

          <template #progress="{ row }">
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div 
                class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                :style="{ width: row.progress + '%' }"
              ></div>
            </div>
            <div class="text-xs text-gray-500 mt-1">{{ row.progress }}%</div>
          </template>

          <template #actions="{ row }">
            <div class="flex gap-2">
              <rs-button 
                size="sm" 
                variant="primary-outline"
                @click="viewMessageDetails(row)"
              >
                <Icon name="ic:outline-visibility"></Icon>
              </rs-button>
              <rs-button 
                size="sm" 
                variant="secondary-outline"
                @click="retryMessage(row)"
                v-if="row.status === 'failed'"
              >
                <Icon name="ic:outline-refresh"></Icon>
              </rs-button>
            </div>
          </template>
        </rs-table>
      </template>
    </rs-card>

    <!-- Live Activity Feed -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
      
      <!-- Real-time Activity -->
      <rs-card>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <Icon class="mr-2 text-primary" name="ic:outline-live-tv"></Icon>
              <h2 class="text-lg font-semibold text-primary">Live Activity</h2>
            </div>
            <rs-badge variant="success" size="sm">Live</rs-badge>
          </div>
        </template>
        <template #body>
          <div class="space-y-3 max-h-96 overflow-y-auto">
            <div 
              v-for="activity in liveActivities"
              :key="activity.id"
              class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg"
            >
              <Icon 
                class="mt-1 flex-shrink-0"
                :name="activity.icon"
                :class="activity.iconColor"
              ></Icon>
              <div class="flex-1 min-w-0">
                <div class="font-medium text-sm">{{ activity.message }}</div>
                <div class="text-xs text-gray-500">{{ activity.timestamp }}</div>
                <div v-if="activity.details" class="text-xs text-gray-600 mt-1">
                  {{ activity.details }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </rs-card>

      <!-- Channel Performance -->
      <rs-card>
        <template #header>
          <div class="flex items-center">
            <Icon class="mr-2 text-primary" name="ic:outline-speed"></Icon>
            <h2 class="text-lg font-semibold text-primary">Channel Performance</h2>
          </div>
        </template>
        <template #body>
          <div class="space-y-4">
            <div 
              v-for="channel in channelPerformance"
              :key="channel.name"
              class="border border-gray-200 rounded-lg p-4"
            >
              <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                  <Icon class="mr-2" :name="channel.icon"></Icon>
                  <span class="font-semibold">{{ channel.name }}</span>
                </div>
                <rs-badge :variant="channel.statusVariant" size="sm">
                  {{ channel.status }}
                </rs-badge>
              </div>
              
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div class="text-gray-600">Throughput</div>
                  <div class="font-semibold">{{ channel.throughput }}/min</div>
                </div>
                <div>
                  <div class="text-gray-600">Success Rate</div>
                  <div class="font-semibold">{{ channel.successRate }}%</div>
                </div>
                <div>
                  <div class="text-gray-600">Avg Latency</div>
                  <div class="font-semibold">{{ channel.avgLatency }}ms</div>
                </div>
                <div>
                  <div class="text-gray-600">Queue Size</div>
                  <div class="font-semibold">{{ channel.queueSize }}</div>
                </div>
              </div>
              
              <!-- Performance Chart -->
              <div class="mt-3">
                <div class="text-xs text-gray-500 mb-1">Performance Trend</div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div 
                    class="h-2 rounded-full transition-all duration-300"
                    :class="channel.performanceClass"
                    :style="{ width: channel.performanceScore + '%' }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </rs-card>

    </div>

    <!-- Message Details Modal -->
    <rs-modal v-model="showMessageModal" size="lg">
      <template #header>
        <h3 class="text-lg font-semibold">Message Details</h3>
      </template>
      <template #body>
        <div v-if="selectedMessage" class="space-y-6">
          
          <!-- Message Info -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">Message ID</label>
              <div class="font-mono text-sm">{{ selectedMessage.messageId }}</div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
              <rs-badge :variant="getStatusVariant(selectedMessage.status)">
                {{ selectedMessage.status }}
              </rs-badge>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">Channel</label>
              <div class="flex items-center">
                <Icon class="mr-2" :name="getChannelIcon(selectedMessage.channel)"></Icon>
                {{ selectedMessage.channel }}
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-500 mb-1">Priority</label>
              <rs-badge :variant="getPriorityVariant(selectedMessage.priority)">
                {{ selectedMessage.priority }}
              </rs-badge>
            </div>
          </div>

          <!-- Delivery Timeline -->
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-3">Delivery Timeline</label>
            <div class="space-y-3">
              <div 
                v-for="event in selectedMessage.timeline"
                :key="event.id"
                class="flex items-center gap-3"
              >
                <div class="w-3 h-3 rounded-full" :class="event.statusColor"></div>
                <div class="flex-1">
                  <div class="font-medium text-sm">{{ event.status }}</div>
                  <div class="text-xs text-gray-500">{{ event.timestamp }}</div>
                  <div v-if="event.details" class="text-xs text-gray-600">{{ event.details }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Message Content -->
          <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">Content</label>
            <div class="bg-gray-50 rounded-lg p-3 text-sm">
              <div><strong>To:</strong> {{ selectedMessage.recipient }}</div>
              <div><strong>Subject:</strong> {{ selectedMessage.subject }}</div>
              <div class="mt-2"><strong>Body:</strong></div>
              <div class="mt-1">{{ selectedMessage.content }}</div>
            </div>
          </div>

          <!-- Provider Response -->
          <div v-if="selectedMessage.providerResponse">
            <label class="block text-sm font-medium text-gray-500 mb-1">Provider Response</label>
            <div class="bg-gray-50 rounded-lg p-3">
              <pre class="text-xs">{{ JSON.stringify(selectedMessage.providerResponse, null, 2) }}</pre>
            </div>
          </div>

        </div>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2">
          <rs-button variant="outline" @click="showMessageModal = false">Close</rs-button>
          <rs-button 
            variant="primary" 
            @click="retryMessage(selectedMessage)"
            v-if="selectedMessage?.status === 'failed'"
          >
            Retry Message
          </rs-button>
        </div>
      </template>
    </rs-modal>

  </div>
</template>

<script setup>
definePageMeta({
  title: "Delivery Monitor",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    {
      name: "Dashboard",
      path: "/dashboard",
    },
    {
      name: "Notification",
      path: "/notification",
    },
    {
      name: "Delivery Engine",
      path: "/notification/delivery",
    },
    {
      name: "Monitor",
      path: "/notification/delivery/monitor",
      type: "current",
    },
  ],
});

import { ref, computed, onMounted, onUnmounted } from "vue";

// State
const showFilters = ref(false);
const showMessageModal = ref(false);
const selectedMessage = ref(null);
const searchQuery = ref("");
const selectedChannel = ref("");

// Filters
const filters = ref({
  status: "",
  priority: "",
  dateFrom: "",
  dateTo: "",
});

// Real-time metrics
const realTimeMetrics = ref([
  {
    title: "Messages/Min",
    value: "1,247",
    icon: "ic:outline-speed",
    bgColor: "bg-blue-100",
    iconColor: "text-blue-600",
    textColor: "text-blue-600",
  },
  {
    title: "Success Rate",
    value: "98.7%",
    icon: "ic:outline-check-circle",
    bgColor: "bg-green-100",
    iconColor: "text-green-600",
    textColor: "text-green-600",
  },
  {
    title: "Failed/Retrying",
    value: "23",
    icon: "ic:outline-error",
    bgColor: "bg-red-100",
    iconColor: "text-red-600",
    textColor: "text-red-600",
  },
  {
    title: "Avg Latency",
    value: "1.2s",
    icon: "ic:outline-timer",
    bgColor: "bg-purple-100",
    iconColor: "text-purple-600",
    textColor: "text-purple-600",
  },
]);

// Filter options
const channelFilterOptions = [
  { label: "All Channels", value: "" },
  { label: "Email", value: "email" },
  { label: "SMS", value: "sms" },
  { label: "Push", value: "push" },
  { label: "In-App", value: "inapp" },
];

const statusFilterOptions = [
  { label: "All Status", value: "" },
  { label: "Queued", value: "queued" },
  { label: "Sent", value: "sent" },
  { label: "Delivered", value: "delivered" },
  { label: "Opened", value: "opened" },
  { label: "Failed", value: "failed" },
  { label: "Bounced", value: "bounced" },
];

const priorityFilterOptions = [
  { label: "All Priorities", value: "" },
  { label: "Critical", value: "critical" },
  { label: "High", value: "high" },
  { label: "Medium", value: "medium" },
  { label: "Low", value: "low" },
];

// Table configuration
const messageTableFields = ref([
  { key: "messageId", label: "Message ID", sortable: true },
  { key: "recipient", label: "Recipient", sortable: true },
  { key: "channel", label: "Channel", sortable: true },
  { key: "status", label: "Status", sortable: true },
  { key: "priority", label: "Priority", sortable: true },
  { key: "createdAt", label: "Created", sortable: true },
  { key: "progress", label: "Progress", sortable: false },
  { key: "actions", label: "Actions", sortable: false },
]);

// Sample messages data
const messages = ref([
  {
    messageId: "msg_001",
    recipient: "user@example.com",
    channel: "Email",
    status: "delivered",
    priority: "high",
    createdAt: "2024-01-15 10:30:00",
    progress: 100,
    subject: "Welcome to our platform",
    content: "Thank you for joining us...",
    timeline: [
      { id: 1, status: "Queued", timestamp: "2024-01-15 10:30:00", statusColor: "bg-blue-500", details: "Message queued for processing" },
      { id: 2, status: "Sent", timestamp: "2024-01-15 10:30:15", statusColor: "bg-yellow-500", details: "Sent via SendGrid" },
      { id: 3, status: "Delivered", timestamp: "2024-01-15 10:30:18", statusColor: "bg-green-500", details: "Successfully delivered" },
    ],
    providerResponse: { messageId: "sg_abc123", status: "delivered" },
  },
  // Add more sample data...
]);

// Live activities
const liveActivities = ref([
  {
    id: 1,
    message: "Email batch completed",
    timestamp: "Just now",
    icon: "ic:outline-email",
    iconColor: "text-green-500",
    details: "1,250 emails sent successfully",
  },
  {
    id: 2,
    message: "SMS delivery in progress",
    timestamp: "2 seconds ago",
    icon: "ic:outline-sms",
    iconColor: "text-blue-500",
    details: "89/120 messages delivered",
  },
  // Add more activities...
]);

// Channel performance
const channelPerformance = ref([
  {
    name: "Email",
    icon: "ic:outline-email",
    status: "Healthy",
    statusVariant: "success",
    throughput: "1,200",
    successRate: 99.2,
    avgLatency: 800,
    queueSize: 45,
    performanceScore: 95,
    performanceClass: "bg-green-500",
  },
  {
    name: "SMS",
    icon: "ic:outline-sms",
    status: "Warning",
    statusVariant: "warning",
    throughput: "450",
    successRate: 97.8,
    avgLatency: 2100,
    queueSize: 123,
    performanceScore: 78,
    performanceClass: "bg-yellow-500",
  },
  // Add more channels...
]);

// Computed
const filteredMessages = computed(() => {
  let filtered = messages.value;
  
  if (searchQuery.value) {
    filtered = filtered.filter(msg => 
      msg.messageId.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      msg.recipient.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  
  if (selectedChannel.value) {
    filtered = filtered.filter(msg => msg.channel.toLowerCase() === selectedChannel.value);
  }
  
  if (filters.value.status) {
    filtered = filtered.filter(msg => msg.status === filters.value.status);
  }
  
  if (filters.value.priority) {
    filtered = filtered.filter(msg => msg.priority === filters.value.priority);
  }
  
  return filtered;
});

// Methods
function getStatusVariant(status) {
  const variants = {
    queued: "info",
    sent: "warning",
    delivered: "success",
    opened: "success",
    failed: "danger",
    bounced: "danger",
  };
  return variants[status] || "secondary";
}

function getChannelIcon(channel) {
  const icons = {
    Email: "ic:outline-email",
    SMS: "ic:outline-sms",
    Push: "ic:outline-notifications",
    "In-App": "ic:outline-app-registration",
  };
  return icons[channel] || "ic:outline-help";
}

function getPriorityVariant(priority) {
  const variants = {
    critical: "danger",
    high: "warning",
    medium: "info",
    low: "secondary",
  };
  return variants[priority] || "secondary";
}

function viewMessageDetails(message) {
  selectedMessage.value = message;
  showMessageModal.value = true;
}

function retryMessage(message) {
  console.log("Retrying message:", message.messageId);
  // Implementation for retrying failed messages
}

function refreshMessages() {
  console.log("Refreshing messages...");
  // Implementation for refreshing message list
}

// Auto-refresh every 10 seconds
let refreshInterval;
onMounted(() => {
  refreshInterval = setInterval(() => {
    refreshMessages();
  }, 10000);
});

onUnmounted(() => {
  if (refreshInterval) {
    clearInterval(refreshInterval);
  }
});
</script>

<style lang="scss" scoped></style> 