{% extends "base.html" %}

{% block title %}{{ app_name }} Logs - Hop3 Dashboard{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8" x-data="{
    autoScroll: true,
    searchTerm: '',
    logLevel: 'all',
    showSearch: false,
    get filteredLogs() {
        const logContainer = document.getElementById('log-content');
        if (!logContainer) return [];

        const lines = logContainer.innerText.split('\\n');
        if (!this.searchTerm && this.logLevel === 'all') return lines;

        return lines.filter(line => {
            const matchesSearch = !this.searchTerm ||
                line.toLowerCase().includes(this.searchTerm.toLowerCase());

            const matchesLevel = this.logLevel === 'all' ||
                line.toLowerCase().includes(this.logLevel.toLowerCase());

            return matchesSearch && matchesLevel;
        });
    }
}">
    <!-- Header with actions -->
    <div class="sm:flex sm:items-center sm:justify-between mb-6">
        <div>
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2">
                    <li>
                        <a href="/dashboard" class="text-gray-400 hover:text-gray-500">
                            Applications
                        </a>
                    </li>
                    <li>
                        <span class="text-gray-400">/</span>
                    </li>
                    <li>
                        <a href="/dashboard/apps/{{ app_name }}" class="text-gray-400 hover:text-gray-500">
                            {{ app_name }}
                        </a>
                    </li>
                    <li>
                        <span class="text-gray-400">/</span>
                    </li>
                    <li>
                        <span class="text-gray-900 font-medium">Logs</span>
                    </li>
                </ol>
            </nav>
            <h1 class="text-3xl font-bold leading-6 text-gray-900">Application Logs</h1>
            <p class="mt-2 text-sm text-gray-700">
                Real-time logs for {{ app_name }}
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 flex flex-col sm:flex-row gap-2">
            <button type="button"
                    @click="showSearch = !showSearch"
                    class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                Search
            </button>
            <a href="/dashboard/apps/{{ app_name }}/logs/download"
               class="inline-flex items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Download
            </a>
            <button type="button"
                    @click="autoScroll = !autoScroll"
                    :class="autoScroll ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50'"
                    class="inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm">
                <svg class="-ml-0.5 mr-1.5 h-5 w-5" :class="autoScroll ? 'text-white' : 'text-gray-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
                <span x-text="autoScroll ? 'Auto-scroll: ON' : 'Auto-scroll: OFF'"></span>
            </button>
        </div>
    </div>

    <!-- Search Panel -->
    <div x-show="showSearch"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="mb-4 bg-white shadow rounded-lg p-4">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">
                    Search logs
                </label>
                <input type="text"
                       id="search-input"
                       x-model="searchTerm"
                       placeholder="Search for text in logs..."
                       class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
            </div>
            <div>
                <label for="level-filter" class="block text-sm font-medium text-gray-700 mb-1">
                    Filter by level
                </label>
                <select x-model="logLevel"
                        id="level-filter"
                        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6">
                    <option value="all">All Levels</option>
                    <option value="error">ERROR</option>
                    <option value="warning">WARNING</option>
                    <option value="info">INFO</option>
                    <option value="debug">DEBUG</option>
                </select>
            </div>
        </div>
        <div class="mt-3 text-sm text-gray-500">
            <span x-show="searchTerm || logLevel !== 'all'">
                Filtering is applied in your browser. Download logs for full search capabilities.
            </span>
        </div>
    </div>

    <!-- Log Viewer -->
    <div class="bg-gray-900 shadow rounded-lg overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="h-3 w-3 bg-red-500 rounded-full"></div>
                <div class="h-3 w-3 bg-yellow-500 rounded-full"></div>
                <div class="h-3 w-3 bg-green-500 rounded-full"></div>
                <span class="ml-4 text-sm text-gray-300 font-mono">{{ app_name }}.log</span>
            </div>
            <div class="text-xs text-gray-400">
                Real-time streaming • Last 50 lines on connect
            </div>
        </div>

        <div class="relative">
            <div id="log-container"
                 class="overflow-auto font-mono text-sm text-gray-100 p-4 h-[600px]"
                 x-init="$nextTick(() => { if (autoScroll) $el.scrollTop = $el.scrollHeight; })">
                <pre id="log-content"
                     class="whitespace-pre-wrap break-words"
                     hx-ext="sse"
                     sse-connect="/dashboard/apps/{{ app_name }}/logs/stream"
                     sse-swap="message"
                     hx-swap="beforeend"
                     @htmx:sseMessage="if (autoScroll) { $el.closest('#log-container').scrollTop = $el.closest('#log-container').scrollHeight; }">{{ logs | join('\n') }}</pre>
            </div>

            <!-- Connection Status indicator -->
            <div class="absolute top-2 right-2">
                <div id="connection-status"
                     x-data="{ connected: false }"
                     @htmx:sseOpen="connected = true"
                     @htmx:sseClose="connected = false"
                     @htmx:sseError="connected = false">
                    <span x-show="connected" class="bg-green-600 text-white text-xs px-2 py-1 rounded shadow-lg flex items-center">
                        <span class="inline-block w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></span>
                        Live
                    </span>
                    <span x-show="!connected" class="bg-yellow-600 text-white text-xs px-2 py-1 rounded shadow-lg">
                        Connecting...
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Log Statistics -->
    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="bg-white shadow rounded-lg p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
                <div class="ml-3 w-0 flex-1">
                    <dt class="text-sm font-medium text-gray-500 truncate">Total Lines</dt>
                    <dd class="text-lg font-semibold text-gray-900">{{ log_count }}</dd>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="ml-3 w-0 flex-1">
                    <dt class="text-sm font-medium text-gray-500 truncate">Last Updated</dt>
                    <dd class="text-lg font-semibold text-gray-900" id="last-update">{{ now.strftime('%H:%M:%S') if now else 'N/A' }}</dd>
                </div>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <div class="ml-3 w-0 flex-1">
                    <dt class="text-sm font-medium text-gray-500 truncate">Status</dt>
                    <dd class="text-lg font-semibold text-green-600">Live</dd>
                </div>
            </div>
        </div>
    </div>

    <!-- Help Text -->
    <div class="mt-4 bg-blue-50 border-l-4 border-blue-400 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    <strong>Tip:</strong> Logs auto-update every 3 seconds. Toggle auto-scroll to prevent jumping to bottom.
                    Use search to filter logs in real-time, or download for advanced analysis.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}