<head>
    <meta charset="UTF-8">
    <title>Webhook Logs - Webhook Catcher</title>

    <script src="https://unpkg.com/htmx.org@1.9.3"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet">

    <link rel="stylesheet" href="/static/css/ui.css?v=2026-01-13">

</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <div id="admin-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
            <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Admin Authentication Required</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-4">This operation requires admin privileges. Please enter your admin token:</p>
            <input 
                type="password" 
                id="admin-token-input" 
                placeholder="Enter admin token..."
                class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white mb-4 focus:ring-2 focus:ring-blue-500 outline-none">
            <div class="flex gap-2 justify-end">
                <button 
                    onclick="cancelAdminModal()"
                    class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
                    Cancel
                </button>
                <button 
                    onclick="submitAdminToken()"
                    class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
                    Submit
                </button>
            </div>
        </div>
    </div>

    <div class="sticky-header w-full bg-white/90 dark:bg-gray-800/90 border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center gap-4">
                <a href="/" class="text-4xl font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 transition-colors">
                    Webhook Catcher 🚀
                </a>
                <a href="/" class="px-3 py-1.5 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors">
                    ← Back
                </a>
                <span class="px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
                    📋 Logs
                </span>
                <span id="admin-status" class="px-2 py-1 text-xs rounded hidden">
                    🔒 Admin Protected
                </span>
            </div>
            <button onclick="toggleDarkMode()" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2">
                <span class="dark:hidden">🌙</span>
                <span class="hidden dark:inline">☀️</span>
                <span class="dark:hidden">Dark</span>
                <span class="hidden dark:inline">Light</span>
            </button>
        </div>
    </div>

    <div class="max-w-6xl mx-auto p-8">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8 w-full">
            <div class="flex flex-col lg:flex-row justify-between gap-4">
                <div class="flex-1">
                    <input 
                        type="search" 
                        name="search" 
                        placeholder="🔍 Search webhooks..."
                        class="w-full px-4 py-3 text-lg border rounded-lg bg-white dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 outline-none"
                        hx-get="/logs"
                        hx-trigger="keyup changed delay:500ms"
                        hx-target="#webhook-list">
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="/export?format=json" 
                       class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2">
                        <span>Export JSON</span>
                        <span>📥</span>
                    </a>
                    <a href="/export?format=csv" 
                       class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2">
                        <span>Export CSV</span>
                        <span>📥</span>
                    </a>
                    <button 
                        onclick="clearLogsWithModal()"
                        class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors inline-flex items-center gap-2">
                        <span>Clear All</span>
                        <span>🗑️</span>
                    </button>
                </div>
            </div>
        </div>

        <div id="webhook-list" 
             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden w-full"
             hx-get="/logs"
             hx-trigger="load, every 5s">
            <div class="p-12 text-center">
                <div class="animate-spin h-10 w-10 mx-auto mb-4">
                    <svg class="text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-lg">Loading webhooks...</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            dayjs.extend(window.dayjs_plugin_relativeTime);
        });

        function toggleDarkMode() {
            const html = document.documentElement;
            html.classList.toggle('dark');
            document.body.classList.toggle('dark');
            localStorage.setItem('darkMode', html.classList.contains('dark'));
        }

        if (localStorage.getItem('darkMode') === 'true') {
            document.documentElement.classList.add('dark');
            document.body.classList.add('dark');
        }
        document.addEventListener('htmx:afterSwap', function(evt) {
            if (!evt.target) return;
            
            evt.target.querySelectorAll('[data-timestamp]').forEach(el => {
                el.textContent = dayjs(el.dataset.timestamp).fromNow();
            });

            evt.target.querySelectorAll('pre code').forEach(block => {
                Prism.highlightElement(block);
            });
        });

        async function executeAdminOperation(operation, operationName) {
            try {
                let result = await operation();
                return result;
            } catch (error) {
                console.log(`Operation ${operationName} failed:`, error);
                
                const is401 = error.status === 401 || 
                             (error.response && error.response.status === 401) ||
                             (error.message && error.message.includes('401')) ||
                             (error.message && error.message.includes('Admin token required'));
                
                if (is401) {
                    console.log('401 detected, showing admin modal');
                    return new Promise((resolve, reject) => {
                        pendingAdminOperation = async () => {
                            try {
                                console.log('Retrying operation with token:', currentAdminToken ? 'provided' : 'missing');
                                const result = await operation(currentAdminToken);
                                resolve(result);
                            } catch (retryError) {
                                console.log('Retry failed:', retryError);
                                const isRetry401 = retryError.status === 401 || 
                                                 (retryError.response && retryError.response.status === 401) ||
                                                 (retryError.message && retryError.message.includes('401')) ||
                                                 (retryError.message && retryError.message.includes('Admin token required'));
                                
                                if (isRetry401) {
                                    alert('❌ Invalid admin token. Please try again.');
                                    currentAdminToken = null;
                                    showAdminModal(pendingAdminOperation);
                                } else {
                                    alert(`❌ ${operationName} failed: ${retryError.message}`);
                                    reject(retryError);
                                }
                            }
                        };
                        showAdminModal(pendingAdminOperation);
                    });
                } else {
                    throw error;
                }
            }
        }

        window.replayWebhook = async function(btn) {
            try {
                const webhookItem = btn.closest('.webhook-item');
                if (!webhookItem) {
                    console.error('Could not find webhook item');
                    return;
                }
                
                const webhookId = webhookItem.dataset.id;
                const targetUrl = btn.previousElementSibling.value;
                
                if (!webhookId) {
                    console.error('No webhook ID found');
                    return;
                }

                if (!targetUrl) {
                    alert('Please enter a target URL');
                    return;
                }
                
                console.log(`Attempting to replay webhook ${webhookId} to ${targetUrl}`);
                
                btn.innerHTML = '⏳ Sending...';
                btn.disabled = true;
                
                await executeAdminOperation(async (token) => {
                    console.log('Executing replay operation, token provided:', !!token);
                    
                    const headers = {
                        'Content-Type': 'application/json'
                    };
                    if (token) {
                        headers['X-Admin-Token'] = token;
                        console.log('Added admin token to headers');
                    }
                    
                    const response = await fetch(`/replay/${webhookId}?target_url=${encodeURIComponent(targetUrl)}`, {
                        method: 'POST',
                        headers: headers
                    });
                    
                    console.log('Replay response status:', response.status);
                    
                    if (!response.ok) {
                        let errorMessage = `HTTP ${response.status}`;
                        try {
                            const errorData = await response.json();
                            errorMessage = errorData.detail || errorMessage;
                        } catch (e) {
                            errorMessage = response.statusText || errorMessage;
                        }
                        
                        const err = new Error(errorMessage);
                        err.status = response.status;
                        err.response = response;
                        
                        console.log('Throwing error with status:', err.status);
                        throw err;
                    }
                    
                    return await response.json();
                }, 'Replay webhook');
                
                console.log('Replay successful');
                btn.innerHTML = '✅ Sent!';
                btn.classList.remove('bg-blue-500', 'bg-red-500');
                btn.classList.add('bg-green-500');
                
            } catch (error) {
                console.error('Final replay error:', error);
                if (!error.status || error.status !== 401) {
                    btn.innerHTML = '❌ Failed!';
                    btn.classList.remove('bg-blue-500', 'bg-green-500');
                    btn.classList.add('bg-red-500');
                    alert(`Replay failed: ${error.message}`);
                }
            }
            
            setTimeout(() => {
                btn.disabled = false;
                btn.innerHTML = '🔄 Replay';
                btn.classList.remove('bg-green-500', 'bg-red-500');
                btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
            }, 2000);
        };

        let currentAdminToken = null;
        let pendingAdminOperation = null;

        function showAdminModal(operation) {
            pendingAdminOperation = operation;
            document.getElementById('admin-modal').classList.remove('hidden');
            document.getElementById('admin-token-input').focus();
        }

        function cancelAdminModal() {
            document.getElementById('admin-modal').classList.add('hidden');
            document.getElementById('admin-token-input').value = '';
            pendingAdminOperation = null;
            currentAdminToken = null;
        }

        function submitAdminToken() {
            const token = document.getElementById('admin-token-input').value.trim();
            if (!token) {
                alert('Please enter a token');
                return;
            }
            
            currentAdminToken = token;
            document.getElementById('admin-modal').classList.add('hidden');
            document.getElementById('admin-token-input').value = '';
            
            if (pendingAdminOperation) {
                pendingAdminOperation();
                pendingAdminOperation = null;
            }
        }

        window.clearLogsWithModal = async function() {
            const confirmed = confirm('Are you sure you want to clear all webhook logs?\n\nThis action cannot be undone and will remove all stored webhooks.');
            if (!confirmed) return;
            
            try {
                console.log('Attempting to clear logs');
                
                const response = await fetch('/clear', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
                
                console.log('Clear response status:', response.status);
                
                if (response.status === 401) {
                    console.log('Got 401, showing admin modal for clear');
                    showAdminModal(async () => {
                        console.log('Retrying clear with admin token');
                        try {
                            const retryResponse = await fetch('/clear', {
                                method: 'POST',
                                headers: { 
                                    'Content-Type': 'application/json',
                                    'X-Admin-Token': currentAdminToken 
                                }
                            });
                            
                            if (retryResponse.ok) {
                                alert('✅ Logs cleared successfully!');
                                window.location.reload();
                            } else {
                                alert('❌ Clear failed - invalid admin token');
                            }
                        } catch (retryError) {
                            alert('❌ Clear failed: ' + retryError.message);
                        }
                    });
                    return; 
                }
                
                if (response.ok) {
                    alert('✅ Logs cleared successfully!');
                    window.location.reload();
                } else {
                    alert('❌ Clear failed: HTTP ' + response.status);
                }
                
            } catch (error) {
                console.error('Clear error:', error);
                alert('❌ Network error: ' + error.message);
            }
        };

        document.addEventListener('DOMContentLoaded', async function() {
            try {
                const response = await fetch('/config');
                const config = await response.json();
                
                const adminStatus = document.getElementById('admin-status');
                if (config.admin_protection_enabled) {
                    adminStatus.classList.remove('hidden');
                    adminStatus.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
                }
            } catch (error) {
                console.error('Failed to load config:', error);
            }
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && !document.getElementById('admin-modal').classList.contains('hidden')) {
                cancelAdminModal();
            }
            if (e.key === 'Enter' && !document.getElementById('admin-modal').classList.contains('hidden')) {
                submitAdminToken();
            }
        });
    </script>
</body>
</html>

