@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LogCentral - Enterprise Logging Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .log-trace {
            @@apply bg-gray-100 border-l-4 border-gray-400;
        }

        .log-debug {
            @@apply bg-blue-50 border-l-4 border-blue-400;
        }

        .log-info {
            @@apply bg-green-50 border-l-4 border-green-400;
        }

        .log-warning {
            @@apply bg-yellow-50 border-l-4 border-yellow-400;
        }

        .log-error {
            @@apply bg-red-50 border-l-4 border-red-400;
        }

        .log-critical {
            @@apply bg-purple-50 border-l-4 border-purple-600;
        }

        .log-security {
            @@apply bg-orange-50 border-l-4 border-orange-500;
        }

        .log-analytics {
            @@apply bg-teal-50 border-l-4 border-teal-400;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- Header -->
        <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
            <div class="container mx-auto px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" />
                        </svg>
                        <div>
                            <h1 class="text-2xl font-bold">LogCentral</h1>
                            <p class="text-blue-200 text-sm">Enterprise Logging Platform</p>
                        </div>
                    </div>
                    <nav class="flex space-x-6">
                        <button onclick="showTab('dashboard')" class="tab-btn hover:text-blue-200 transition">Dashboard</button>
                        <button onclick="showTab('logs')" class="tab-btn hover:text-blue-200 transition">Logs</button>
                        <button onclick="showTab('analytics')" class="tab-btn hover:text-blue-200 transition">Analytics</button>
                        <button onclick="showTab('search')" class="tab-btn hover:text-blue-200 transition">Search</button>
                    </nav>
                </div>
            </div>
        </header>

        <div class="container mx-auto px-6 py-8">
            <!-- Dashboard Tab -->
            <div id="dashboard-tab" class="tab-content">
                <!-- Stats Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm font-medium">Total Logs</p>
                                <p id="stat-total" class="text-3xl font-bold text-gray-800 mt-2">0</p>
                            </div>
                            <div class="bg-blue-100 rounded-full p-3">
                                <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" />
                                </svg>
                            </div>
                        </div>
                        <p class="text-green-600 text-sm mt-4">
                            <span id="stat-last24h">0</span> in last 24h
                        </p>
                    </div>

                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm font-medium">Errors</p>
                                <p id="stat-errors" class="text-3xl font-bold text-red-600 mt-2">0</p>
                            </div>
                            <div class="bg-red-100 rounded-full p-3">
                                <svg class="w-8 h-8 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" />
                                </svg>
                            </div>
                        </div>
                        <p class="text-gray-500 text-sm mt-4">Critical issues</p>
                    </div>

                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm font-medium">Warnings</p>
                                <p id="stat-warnings" class="text-3xl font-bold text-yellow-600 mt-2">0</p>
                            </div>
                            <div class="bg-yellow-100 rounded-full p-3">
                                <svg class="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" />
                                </svg>
                            </div>
                        </div>
                        <p class="text-gray-500 text-sm mt-4">Needs attention</p>
                    </div>

                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-gray-500 text-sm font-medium">Applications</p>
                                <p id="stat-apps" class="text-3xl font-bold text-purple-600 mt-2">0</p>
                            </div>
                            <div class="bg-purple-100 rounded-full p-3">
                                <svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                                </svg>
                            </div>
                        </div>
                        <p class="text-gray-500 text-sm mt-4">Active services</p>
                    </div>
                </div>

                <!-- Charts -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Logs by Level</h3>
                        <canvas id="levelChart"></canvas>
                    </div>

                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Log Trends (24h)</h3>
                        <canvas id="trendChart"></canvas>
                    </div>
                </div>

                <!-- Recent Errors -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Critical Events</h3>
                    <div id="recent-errors" class="space-y-3"></div>
                </div>
            </div>

            <!-- Logs Tab -->
            <div id="logs-tab" class="tab-content hidden">
                <!-- Filters -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Filters</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <input type="text" id="filter-search" placeholder="Search logs..." class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <select id="filter-app" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="">All Applications</option>
                        </select>
                        <select id="filter-level" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="">All Levels</option>
                            <option value="0">Trace</option>
                            <option value="1">Debug</option>
                            <option value="2">Info</option>
                            <option value="3">Warning</option>
                            <option value="4">Error</option>
                            <option value="5">Critical</option>
                            <option value="6">Security</option>
                            <option value="7">Analytics</option>
                        </select>
                        <button onclick="applyFilters()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">Apply Filters</button>
                    </div>
                </div>

                <!-- Log List -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div id="logs-container" class="space-y-3"></div>
                    <div class="mt-6 flex justify-between items-center">
                        <button onclick="previousPage()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Previous</button>
                        <span id="page-info" class="text-gray-600">Page 1</span>
                        <button onclick="nextPage()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Next</button>
                    </div>
                </div>
            </div>

            <!-- Analytics Tab -->
            <div id="analytics-tab" class="tab-content hidden">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Analytics Dashboard</h3>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-md font-medium text-gray-700 mb-3">Top Events</h4>
                            <canvas id="analyticsChart"></canvas>
                        </div>
                        <div id="analytics-details" class="space-y-3"></div>
                    </div>
                </div>
            </div>

            <!-- Search Tab -->
            <div id="search-tab" class="tab-content hidden">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Advanced Search</h3>
                    <div class="flex gap-4 mb-6">
                        <input type="text" id="search-query" placeholder="Enter search query..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <button onclick="performSearch()" class="bg-blue-600 text-white px-8 py-2 rounded-lg hover:bg-blue-700 transition">Search</button>
                    </div>
                    <div id="search-results" class="space-y-3"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentPage = 1;
        let levelChart, trendChart, analyticsChart;

        async function loadStats() {
            try {
                const response = await fetch('/api/logs/stats');
                const stats = await response.json();

                document.getElementById('stat-total').textContent = stats.totalLogs.toLocaleString();
                document.getElementById('stat-last24h').textContent = stats.last24Hours.toLocaleString();
                document.getElementById('stat-errors').textContent = stats.errorCount.toLocaleString();
                document.getElementById('stat-warnings').textContent = stats.warningCount.toLocaleString();
                document.getElementById('stat-apps').textContent = stats.applications.toLocaleString();

                updateLevelChart(stats.byLevel);
            } catch (error) {
                console.error('Error loading stats:', error);
            }
        }

        function updateLevelChart(byLevel) {
            const ctx = document.getElementById('levelChart').getContext('2d');
            const labels = ['Trace', 'Debug', 'Info', 'Warning', 'Error', 'Critical', 'Security', 'Analytics'];
            const colors = ['#9CA3AF', '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#9333EA', '#F97316', '#14B8A6'];

            const data = Array(8).fill(0);
            byLevel.forEach(item => {
                data[item.level] = item.count;
            });

            if (levelChart) levelChart.destroy();
            levelChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true
                }
            });
        }

        async function loadLogs() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    pageSize: 20,
                    search: document.getElementById('filter-search')?.value || '',
                    application: document.getElementById('filter-app')?.value || '',
                    level: document.getElementById('filter-level')?.value || ''
                });

                const response = await fetch(`/api/logs?${params}`);
                const result = await response.json();

                displayLogs(result.items);
                document.getElementById('page-info').textContent = `Page ${result.page} of ${result.totalPages}`;
            } catch (error) {
                console.error('Error loading logs:', error);
            }
        }

        function displayLogs(logs) {
            const container = document.getElementById('logs-container');
            const levels = ['trace', 'debug', 'info', 'warning', 'error', 'critical', 'security', 'analytics'];
            const levelNames = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR', 'CRIT', 'SEC', 'ANLYTC'];

            container.innerHTML = logs.map(log => `
                <div class="log-${levels[log.level]} p-4 rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                        <div class="flex items-center space-x-3">
                            <span class="px-2 py-1 text-xs font-semibold rounded">${levelNames[log.level]}</span>
                            <span class="text-sm font-medium text-gray-700">${log.applicationName}</span>
                            <span class="text-xs text-gray-500">${log.category}</span>
                        </div>
                        <span class="text-xs text-gray-500">${new Date(log.timestamp).toLocaleString()}</span>
                    </div>
                    <p class="text-gray-800 font-medium mb-1">${log.message}</p>
                    ${log.exception ? `<pre class="text-xs text-gray-600 mt-2 overflow-x-auto bg-gray-50 p-2 rounded">${log.exception}</pre>` : ''}
                    <div class="flex gap-2 mt-2 text-xs text-gray-500">
                        <span>Machine: ${log.machineName}</span>
                        ${log.userId ? `<span>User: ${log.userId}</span>` : ''}
                    </div>
                </div>
            `).join('');
        }

        function showTab(tab) {
            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
            document.getElementById(`${tab}-tab`).classList.remove('hidden');

            if (tab === 'dashboard') loadStats();
            if (tab === 'logs') loadLogs();
            if (tab === 'analytics') loadAnalytics();
        }

        function applyFilters() {
            currentPage = 1;
            loadLogs();
        }

        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                loadLogs();
            }
        }

        function nextPage() {
            currentPage++;
            loadLogs();
        }

        async function performSearch() {
            const query = document.getElementById('search-query').value;
            if (!query) return;

            try {
                const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
                const results = await response.json();
                displayLogs(results);
            } catch (error) {
                console.error('Error searching:', error);
            }
        }

        async function loadAnalytics() {
            // Load analytics data
        }

        // Initialize
        loadStats();
        setInterval(loadStats, 30000); // Refresh every 30 seconds
    </script>
</body>
</html>