{% extends 'payments/base.html' %}
{% load static %}

{% block title %}Webhook Dashboard - Payment Admin{% endblock %}

{% block page_title %}Webhook Dashboard{% endblock %}
{% block page_subtitle %}Monitor and test webhook endpoints{% endblock %}

{% block content %}
<div x-data="webhookDashboardComponent">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Webhook Events -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Webhook Events</h3>
                        <div class="flex items-center space-x-2">
                            <button @click="refreshEvents()" 
                                    class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                <span class="material-icons-outlined" :class="{ 'animate-spin': loading }">refresh</span>
                            </button>
                            <button @click="clearEvents()" 
                                    class="text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
                                Clear All
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="p-6">
                    <!-- Filters -->
                    <div class="mb-6 flex flex-wrap gap-4">
                        <select x-model="filters.event_type" 
                                @change="applyFilters()"
                                class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <option value="">All Events</option>
                            <option value="payment.created">Payment Created</option>
                            <option value="payment.completed">Payment Completed</option>
                            <option value="payment.failed">Payment Failed</option>
                        </select>
                        
                        <select x-model="filters.status" 
                                @change="applyFilters()"
                                class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <option value="">All Status</option>
                            <option value="success">Success</option>
                            <option value="failed">Failed</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>

                    <!-- Events List -->
                    <div x-show="filteredEvents.length === 0 && !loading" class="text-center py-8">
                        <span class="material-icons-outlined text-gray-400 text-4xl mb-2">webhook</span>
                        <p class="text-gray-500 dark:text-gray-400">No webhook events yet</p>
                    </div>
                    
                    <div x-show="loading" class="text-center py-8">
                        <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading events...</p>
                    </div>
                    
                    <div class="space-y-4">
                        <template x-for="event in filteredEvents.slice(0, 10)" :key="event.id">
                            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700">
                                <div class="flex items-start justify-between">
                                    <div class="flex items-start">
                                        <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                                             :class="{
                                                 'bg-green-100 dark:bg-green-900/20': event.status === 'success',
                                                 'bg-red-100 dark:bg-red-900/20': event.status === 'failed',
                                                 'bg-yellow-100 dark:bg-yellow-900/20': event.status === 'pending'
                                             }">
                                            <span class="material-icons-outlined text-sm"
                                                  :class="{
                                                      'text-green-600 dark:text-green-400': event.status === 'success',
                                                      'text-red-600 dark:text-red-400': event.status === 'failed',
                                                      'text-yellow-600 dark:text-yellow-400': event.status === 'pending'
                                                  }">
                                                <span x-show="event.status === 'success'">check_circle</span>
                                                <span x-show="event.status === 'failed'">error</span>
                                                <span x-show="event.status === 'pending'">schedule</span>
                                            </span>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-center space-x-2">
                                                <span class="text-sm font-medium text-gray-900 dark:text-white" x-text="event.event_type"></span>
                                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                                                      :class="{
                                                          'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400': event.status === 'success',
                                                          'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400': event.status === 'failed',
                                                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400': event.status === 'pending'
                                                      }"
                                                      x-text="event.status">
                                                </span>
                                            </div>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1" x-text="event.url"></p>
                                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1" x-text="formatDate(event.created_at)"></p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button @click="viewEvent(event)" 
                                                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                                            <span class="material-icons-outlined text-sm">visibility</span>
                                        </button>
                                        <button @click="retryEvent(event.id)" 
                                                x-show="event.status === 'failed'"
                                                class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                            <span class="material-icons-outlined text-sm">refresh</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- Webhook Testing -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Test Webhook</h3>
                </div>
                
                <div class="p-6">
                    <form @submit.prevent="testWebhook()" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Webhook URL
                            </label>
                            <input type="url" 
                                   x-model="testForm.url"
                                   class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                   placeholder="https://your-site.com/webhook"
                                   required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Event Type
                            </label>
                            <select x-model="testForm.event_type" 
                                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                    required>
                                <option value="">Select event type...</option>
                                <option value="payment.created">Payment Created</option>
                                <option value="payment.completed">Payment Completed</option>
                                <option value="payment.failed">Payment Failed</option>
                            </select>
                        </div>
                        
                        <button type="submit" 
                                :disabled="testLoading"
                                class="w-full px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:opacity-50">
                            <span x-show="!testLoading">Send Test Webhook</span>
                            <span x-show="testLoading">Sending...</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-8">
            <!-- Ngrok Status -->
            {% include 'payments/components/ngrok_status.html' %}

            <!-- Webhook Stats -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Webhook Stats</h3>
                </div>
                
                <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Total Events</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" x-text="stats.total"></span>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Successful</span>
                        <span class="text-sm font-medium text-green-600 dark:text-green-400" x-text="stats.successful"></span>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Failed</span>
                        <span class="text-sm font-medium text-red-600 dark:text-red-400" x-text="stats.failed"></span>
                    </div>
                    
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Success Rate</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white" x-text="stats.successRate + '%'"></span>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
                </div>
                
                <div class="p-6 space-y-3">
                    <button @click="retryFailedEvents()" 
                            class="w-full px-4 py-2 bg-yellow-600 text-white text-sm font-medium rounded-md hover:bg-yellow-700">
                        Retry Failed Events
                    </button>
                    
                    <a href="{% url 'cfg_payments_admin:dashboard' %}" 
                       class="block w-full px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 text-center">
                        Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Event Detail Modal -->
    <div x-show="showEventModal"
         x-cloak
         class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50"
         @click.self="showEventModal = false">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-96 overflow-y-auto"
             @click.stop>
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Event Details</h3>
                <button @click="showEventModal = false"
                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                    <span class="material-icons-outlined">close</span>
                </button>
            </div>
            <div class="p-6">
                <pre class="text-sm text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-700 p-4 rounded-md overflow-x-auto" x-text="JSON.stringify(selectedEvent, null, 2)"></pre>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 text-right">
                <button @click="showEventModal = false"
                        class="px-4 py-2 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}

<!-- Refactored webhook dashboard using MJS API -->
<script src="{% static 'payments/js/webhook-dashboard-mjs.js' %}"></script>
{% endblock %}