{% extends "base.html" %}

{% block title %}Log Viewer - aiosyslogd{% endblock %}

{% block content %}
<style>
    .hl-0 { background-color: #dcfce7; color: #166534; }
    .hl-1 { background-color: #fef9c3; color: #854d0e; }
    .hl-2 { background-color: #dbeafe; color: #1e40af; }
    .hl-3 { background-color: #f3e8ff; color: #6b21a8; }
    .hl-4 { background-color: #fce7f3; color: #9d174d; }
    .hl-5 { background-color: #e0e7ff; color: #3730a3; }
    .highlight-span {
        padding: 1px 4px;
        border-radius: 4px;
        font-weight: 500;
    }
</style>
<header class="text-center mb-4">
    <h1 class="text-4xl font-bold text-gray-700">aiosyslogd Log Viewer</h1>
    <p class="text-gray-500">SQLite Log Search Interface</p>
</header>

<!-- Search and Filter Form -->
<form action="{{ url_for('index') }}" method="get" class="bg-white p-4 rounded-lg shadow-sm mb-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <!-- Database Selector -->
    <div class="mb-3">
        <label for="db_file" class="form-label">Database File</label>
        <select name="db_file" id="db_file" class="form-select" onchange="this.form.submit()">
            {% for db in available_dbs %}
            <option value="{{ db }}" {% if db == selected_db %}selected{% endif %}>{{ db }}</option>
            {% endfor %}
        </select>
    </div>

    <!-- Main Search Bar -->
    <div class="input-group mb-3">
        <input type="text" name="q" value="{{ search_query }}" placeholder="Enter FTS5 query for Message (e.g., 'error* OR failure')" class="form-control form-control-lg">
        <button type="submit" class="btn btn-primary">Search</button>
        {% if gemini_available %}
        <button type="button" id="gemini-btn" class="btn btn-outline-success" title="Ask Gemini to create search query" style="color: green;" onmouseover="this.style.color='white'; this.style.backgroundColor='green';" onmouseout="this.style.color='green'; this.style.backgroundColor='';">✦</button>
        {% endif %}
        <a href="{{ url_for('index', db_file=selected_db) }}" class="btn btn-outline-danger" title="Reset Search and Filters" style="color: red; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.color='white'; this.style.backgroundColor='red';" onmouseout="this.style.color='red'; this.style.backgroundColor='';">↻</a>
    </div>

    <!-- Advanced Filters -->
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h3 class="h5">Advanced Filters</h3>
        <button type="button" id="toggle-sql-btn" class="btn btn-sm btn-link">Show Executed SQL</button>
    </div>

    <div class="row g-3 border-top pt-3">
        <div class="col-md-4">
            <label for="from_host" class="form-label">FromHost</label>
            <input type="text" name="from_host" id="from_host" value="{{ filters.from_host or '' }}" class="form-control">
        </div>
        <div class="col-md-4">
            <label for="received_at_min" class="form-label">Received At (Start)</label>
            <input type="datetime-local" name="received_at_min" id="received_at_min" value="{{ filters.received_at_min or '' }}" class="form-control">
        </div>
        <div class="col-md-4">
            <label for="received_at_max" class="form-label">Received At (End)</label>
            <input type="datetime-local" name="received_at_max" id="received_at_max" value="{{ filters.received_at_max or '' }}" class="form-control">
        </div>
    </div>

    <!-- Debug SQL Query -->
    {% if debug_query %}
    <div id="sql-query-box" class="bg-dark text-white p-3 rounded mt-3" style="display: none;">
        <h4 class="h6">Executed SQL Query</h4>
        <pre><code>{{ debug_query }}</code></pre>
    </div>
    {% endif %}
</form>

<!-- Key Highlighter UI -->
<div class="bg-white p-3 rounded-lg shadow-sm mb-4 border">
    <h3 class="h5 mb-2 text-gray-800">Dynamic Highlighter</h3>
    <div class="d-flex align-items-center gap-2">
        <input type="text" id="key-extractor-input" placeholder="Enter key to highlight" class="form-control">
        <button type="button" id="add-highlight-btn" class="btn btn-primary text-nowrap">
            Highlight Key
        </button>
        <button type="button" id="remove-highlights-btn" class="btn btn-outline-secondary text-nowrap" style="display: none;">
            Remove All
        </button>
    </div>
    <div class="mt-2 small text-muted">
        <strong>Highlighted Keys:</strong> <span id="highlighted-keys-list">None</span>
    </div>
</div>

<!-- Results Count -->
{% if total_logs is not none %}
<div class="mb-3 text-muted">
    Found <span class="fw-bold">{{ "{:,}".format(total_logs) }}</span> matching logs
    {% if query_time is not none %}
    in <span class="fw-bold">{{ "%.3f"|format(query_time) }}s</span>.
    {% endif %}
</div>
{% endif %}

<!-- Results -->
{% if error %}
<div class="alert alert-danger" role="alert">
    <strong class="fw-bold">Query Error:</strong> {{ error }}
</div>
{% elif logs %}
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th style="white-space: nowrap;">ID</th>
                <th style="white-space: nowrap;">Received At</th>
                <th style="white-space: nowrap;">From Host</th>
                <th style="white-space: nowrap;">Message</th>
            </tr>
        </thead>
        <tbody>
            {% for log in logs %}
            <tr>
                <td>{{ log.ID }}</td>
                <td>{{ log.ReceivedAt.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                <td>{{ log.FromHost }}</td>
                <td class="log-message-cell" style="word-break: break-all;">{{ log.Message }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-5 bg-light rounded">
    <p class="text-muted">No logs found. Try adjusting your search.</p>
</div>
{% endif %}

<!-- Pagination -->
<div class="d-flex justify-content-between mt-4">
    <div>
        {% if page_info.has_prev_page %}
        {% set prev_args = request.args.to_dict() %}
        {% do prev_args.update({'last_id': page_info.prev_last_id, 'direction': 'prev'}) %}
        <a href="{{ url_for('index', **prev_args) }}" class="btn btn-outline-primary">
            Previous
        </a>
        {% endif %}
    </div>
    <div>
        {% if page_info.has_next_page %}
        {% set next_args = request.args.to_dict() %}
        {% do next_args.update({'last_id': page_info.next_last_id, 'direction': 'next'}) %}
        <a href="{{ url_for('index', **next_args) }}" class="btn btn-outline-primary">
            Next
        </a>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleSqlButton = document.getElementById('toggle-sql-btn');
    const sqlQueryBox = document.getElementById('sql-query-box');

    if (toggleSqlButton) {
        toggleSqlButton.addEventListener('click', () => {
            if (sqlQueryBox) {
                const isHidden = sqlQueryBox.style.display === 'none';
                sqlQueryBox.style.display = isHidden ? 'block' : 'none';
                toggleSqlButton.textContent = isHidden ? 'Hide Executed SQL' : 'Show Executed SQL';
            }
        });
    }

    // --- Dynamic Highlighter State ---
    let originalCasingKeys = [];
    const keyInput = document.getElementById('key-extractor-input');
    const addHighlightButton = document.getElementById('add-highlight-btn');
    const removeHighlightsButton = document.getElementById('remove-highlights-btn');
    const highlightedKeysList = document.getElementById('highlighted-keys-list');

    const highlightColors = ['hl-0', 'hl-1', 'hl-2', 'hl-3', 'hl-4', 'hl-5'];
    let keyColorMap = {};

    function applyAllHighlights() {
        const messageCells = document.querySelectorAll('.log-message-cell');
        messageCells.forEach(cell => {
            if (!cell.dataset.originalText) {
                cell.dataset.originalText = cell.textContent;
            }
            const originalText = cell.dataset.originalText;
            cell.innerHTML = '';

            if (originalCasingKeys.length === 0) {
                cell.textContent = originalText;
                return;
            }

            const allKeysRegexParts = originalCasingKeys.map(key => {
                const sanitizedKey = key.replace(/[^a-zA-Z0-9_-]/g, '');
                return `(${sanitizedKey}(?:\\s*=\\s*|\\s+)(?:'[^']+'|"[^"]+"|[\\S]+))`;
            });
            const combinedRegex = new RegExp(allKeysRegexParts.join('|'), 'gi');

            let lastIndex = 0;
            let match;

            while ((match = combinedRegex.exec(originalText)) !== null) {
                if (match.index > lastIndex) {
                    cell.appendChild(document.createTextNode(originalText.substring(lastIndex, match.index)));
                }

                const matchedValue = match[0];
                const matchedKey = originalCasingKeys.find(k => matchedValue.toLowerCase().startsWith(k.toLowerCase()));
                const lowerCaseKey = matchedKey ? matchedKey.toLowerCase() : '';
                const colorClass = keyColorMap[lowerCaseKey] || highlightColors[0];

                const span = document.createElement('span');
                span.className = `highlight-span ${colorClass}`;
                span.textContent = matchedValue;
                cell.appendChild(span);

                lastIndex = combinedRegex.lastIndex;
            }

            if (lastIndex < originalText.length) {
                cell.appendChild(document.createTextNode(originalText.substring(lastIndex)));
            }
        });
    }

    function addHighlightKey(key) {
        const sanitizedKey = key.replace(/[^a-zA-Z0-9_-]/g, '');
        const lowerCaseKey = sanitizedKey.toLowerCase();

        const alreadyExists = originalCasingKeys.some(k => k.toLowerCase() === lowerCaseKey);
        if (!sanitizedKey || alreadyExists) return;

        originalCasingKeys.push(sanitizedKey);
        keyColorMap[lowerCaseKey] = highlightColors[(originalCasingKeys.length - 1) % highlightColors.length];

        updatePaginationLinks();
        updateKeyListUI();
        applyAllHighlights();
    }

    function resetHighlights() {
        const url = new URL(window.location.href);
        url.searchParams.delete('extract');
        window.location.href = url.toString();
    }

    function updateKeyListUI() {
        if (originalCasingKeys.length > 0) {
            highlightedKeysList.innerHTML = '';
            originalCasingKeys.forEach(key => {
                const lowerCaseKey = key.toLowerCase();
                const colorClass = keyColorMap[lowerCaseKey];
                const span = document.createElement('span');
                span.className = `highlight-span me-2 ${colorClass}`;
                span.textContent = key;
                highlightedKeysList.appendChild(span);
            });
            removeHighlightsButton.style.display = 'inline-block';
        } else {
            highlightedKeysList.textContent = 'None';
            removeHighlightsButton.style.display = 'none';
        }
    }

    function updatePaginationLinks() {
        const paginationLinks = document.querySelectorAll('div.d-flex.justify-content-between a');
        paginationLinks.forEach(link => {
            let href = new URL(link.href, window.location.origin);
            href.searchParams.delete('extract');
            if (originalCasingKeys.length > 0) {
                href.searchParams.set('extract', originalCasingKeys.join(','));
            }
            link.href = href.toString();
        });
    }

    addHighlightButton.addEventListener('click', () => {
        const newKey = keyInput.value.trim();
        if (newKey) {
            addHighlightKey(newKey);
            keyInput.value = '';
        }
    });

    removeHighlightsButton.addEventListener('click', resetHighlights);

    keyInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            addHighlightButton.click();
        }
    });

    function initialize() {
        const urlParams = new URLSearchParams(window.location.search);
        const keysToExtract = urlParams.get('extract');
        if (keysToExtract) {
            const keys = keysToExtract.split(',');
            keys.forEach(key => {
                addHighlightKey(key.trim());
            });
        } else {
            updateKeyListUI();
            updatePaginationLinks();
        }
    }

    initialize();
});

// Gemini integration
document.addEventListener('DOMContentLoaded', function() {
    const geminiBtn = document.getElementById('gemini-btn');

    if (geminiBtn) {
        geminiBtn.addEventListener('click', function() {
            // Check if user has authenticated with Google/Gemini (by checking if API key exists)
            const hasApiKey = localStorage.getItem('gemini_api_key');
            if (!hasApiKey) {
                // Show authentication modal which guides to profile page
                showGeminiAuthModal();
                return;
            }

            // Show the Gemini modal
            const modal = new bootstrap.Modal(document.getElementById('geminiModal'));
            modal.show();
        });
    }

    // Check authentication status on page load
    async function checkGeminiAuthStatus() {
        try {
            // Check if API key exists in localStorage
            const apiKey = localStorage.getItem('gemini_api_key');
            if (apiKey) {
                localStorage.setItem('gemini_authenticated', 'true');
            } else {
                localStorage.removeItem('gemini_authenticated');
            }
        } catch (error) {
            console.error('Error checking auth status:', error);
        }
    }

    // Call on page load
    checkGeminiAuthStatus();

    // Use event delegation for dynamically added elements
    document.addEventListener('click', function(event) {
        // Handle Gemini API key save
        if (event.target.id === 'gemini-auth-submit') {
            handleGeminiAuthSubmit();
        }

        // Handle Gemini query submit
        if (event.target.id === 'gemini-submit') {
            handleGeminiSubmit();
        }
    });

    async function handleGeminiAuthSubmit() {
        const apiKeyInput = document.getElementById('gemini-api-key');
        const authResponseDiv = document.getElementById('gemini-auth-response');
        const authLoader = document.getElementById('gemini-auth-loader');

        const apiKey = apiKeyInput.value.trim();

        if (!apiKey) {
            authResponseDiv.innerHTML = '<p class="text-warning">Please enter your Gemini API key.</p>';
            authResponseDiv.style.display = 'block';
            return;
        }

        try {
            authResponseDiv.style.display = 'none';
            authLoader.style.display = 'block';

            const resp = await fetch('/api/save-gemini-key', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': document.querySelector('[name="csrf_token"]').value || ''
                },
                body: JSON.stringify({api_key: apiKey})
            });

            const data = await resp.json();

            if (resp.ok) {
                localStorage.setItem('gemini_authenticated', 'true');
                localStorage.setItem('gemini_api_key', apiKey); // Store for convenience
                authResponseDiv.innerHTML = '<p class="text-success">Successfully authenticated with Gemini!</p>';
                authResponseDiv.style.display = 'block';

                // Close auth modal and open main Gemini modal
                setTimeout(() => {
                    bootstrap.Modal.getInstance(document.getElementById('geminiAuthModal')).hide();
                    const mainModal = new bootstrap.Modal(document.getElementById('geminiModal'));
                    mainModal.show();
                }, 1000);
            } else {
                authResponseDiv.innerHTML = `<p class="text-danger">Error: ${data.error || 'Authentication failed'}</p>`;
                authResponseDiv.style.display = 'block';
            }
        } catch (error) {
            authResponseDiv.innerHTML = `<p class="text-danger">Error: ${error.message}</p>`;
            authResponseDiv.style.display = 'block';
        } finally {
            authLoader.style.display = 'none';
        }
    }

    async function handleGeminiSubmit() {
        const userInput = document.getElementById('gemini-input').value;
        const responseDiv = document.getElementById('gemini-response');
        const loader = document.getElementById('gemini-loader');

        if (!userInput.trim()) {
            responseDiv.innerHTML = '<p class="text-warning">Please enter a search query.</p>';
            responseDiv.style.display = 'block';
            return;
        }

        try {
            responseDiv.style.display = 'none';
            loader.style.display = 'block';

            // Get the API key from localStorage
            const apiKey = localStorage.getItem('gemini_api_key');
            if (!apiKey) {
                responseDiv.innerHTML = '<p class="text-danger">Error: Gemini API key not found. Please save your API key in your profile.</p>';
                responseDiv.style.display = 'block';
                loader.style.display = 'none';
                return;
            }

            const resp = await fetch('/api/gemini-search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': document.querySelector('[name="csrf_token"]').value || ''
                },
                body: JSON.stringify({
                    query: userInput,
                    api_key: apiKey
                })
            });

            const data = await resp.json();

            if (resp.ok) {
                responseDiv.innerHTML = `<p><strong>Generated FTS5 Query:</strong> <code>${data.fts5_query}</code></p>`;
                responseDiv.style.display = 'block';

                // Option to insert the query into the search box
                const insertBtn = document.createElement('button');
                insertBtn.className = 'btn btn-success btn-sm mt-2';
                insertBtn.textContent = 'Use This Query';
                insertBtn.onclick = function() {
                    document.querySelector('input[name="q"]').value = data.fts5_query;
                    document.querySelector('form').submit();
                    bootstrap.Modal.getInstance(document.getElementById('geminiModal')).hide();
                };
                responseDiv.appendChild(insertBtn);
            } else {
                responseDiv.innerHTML = `<p class="text-danger">Error: ${data.error || 'Unknown error'}</p>`;
                responseDiv.style.display = 'block';
            }
        } catch (error) {
            responseDiv.innerHTML = `<p class="text-danger">Error: ${error.message}</p>`;
            responseDiv.style.display = 'block';
        } finally {
            loader.style.display = 'none';
        }
    }

});

// Add the modals to the page only if gemini is available
{% if gemini_available %}
document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = geminiModalsHtml;
    body.appendChild(tempDiv);
});
{% endif %}

function showGeminiAuthModal() {
    const modal = new bootstrap.Modal(document.getElementById('geminiAuthModal'));
    modal.show();
}

// Modal HTML elements - these will be added to the page
const geminiModalsHtml = `
<!-- Gemini Authentication Modal -->
<div class="modal fade" id="geminiAuthModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configure Gemini API Access</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>To use the Gemini natural language search feature, you need to provide your own Gemini API key.</p>

                <h6>How to get your Gemini API key:</h6>
                <ol>
                    <li>Go to <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a></li>
                    <li>Create an account or sign in with your Google account</li>
                    <li>Click "Get API Key" or "Create API Key"</li>
                    <li>Follow the instructions to create a new API key</li>
                    <li>Copy the API key</li>
                </ol>

                <p>Then go to your <a href="/profile">Profile page</a> to save your API key.</p>

                <div class="mb-3">
                    <label for="gemini-api-key" class="form-label">Your Gemini API Key</label>
                    <input type="password" id="gemini-api-key" class="form-control" placeholder="Enter your Gemini API key">
                    <div class="form-text">
                        Your API key is stored locally in your browser and used only for Gemini API requests.
                        It is not sent to any server except Google's.
                    </div>
                </div>

                <div id="gemini-auth-response" class="mt-3" style="display:none;"></div>
                <div id="gemini-auth-loader" class="spinner-border text-primary mt-3" style="display:none;" role="status">
                    <span class="visually-hidden">Saving...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="gemini-auth-submit">Save API Key</button>
            </div>
        </div>
    </div>
</div>

<!-- Gemini Query Modal -->
<div class="modal fade" id="geminiModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ask Gemini for Search Query</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="gemini-input" class="form-control" rows="5" placeholder="Describe what you want to search for in plain language..."></textarea>
                <div id="gemini-response" class="mt-3" style="display:none;"></div>
                <div id="gemini-loader" class="spinner-border text-primary mt-3" style="display:none;" role="status">
                    <span class="visually-hidden">Generating query...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="gemini-submit">Generate Query</button>
            </div>
        </div>
    </div>
</div>
`;

</script>
{% endblock %}