{% extends "base.html" %}

{% block title %}Capture Search - Network Management{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <h1>📡 Capture Search</h1>
        <p>Search across operational data captures from {{ total_devices }} devices</p>
    </div>
</div>

<!-- Search Interface -->
<div class="md-card mb-4">
    <div class="card-header">
        <h2>Search Parameters</h2>
    </div>
    <div class="card-content">
        <form id="capture-search-form">
            <div class="form-grid">
                <div class="form-field">
                    <label for="search-query">Search Query</label>
                    <input type="text" id="search-query" name="query" placeholder="Enter search term or regex pattern..." required>
                </div>

                <div class="form-field">
                    <label for="capture-types">Capture Types</label>
                    <select id="capture-types" name="capture_types" multiple class="form-select">
                        <option value="">All Types ({{ total_types }} available)</option>
                        {% for capture_type in capture_types %}
                        <option value="{{ capture_type.capture_type }}">
                            {{ capture_type.capture_type }} ({{ capture_type.device_count }} devices)
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="form-options">
                <label class="checkbox-label">
                    <input type="checkbox" id="case-sensitive" name="case_sensitive">
                    Case sensitive
                </label>

                <label class="checkbox-label">
                    <input type="checkbox" id="regex-mode" name="regex_mode">
                    Regular expression mode
                </label>
            </div>

            <div class="form-actions">
                <button type="submit" class="md-button md-button-filled">
                    <i data-lucide="search" size="16"></i>
                    Search Captures&nbsp;&nbsp;
                </button>
                <button type="button" id="clear-form" class="md-button md-button-outlined">
                    <i data-lucide="x" size="16"></i>
                    Clear&nbsp;
                </button>
                <button type="button" id="toggle-stats" class="md-button md-button-text">
                    <i data-lucide="bar-chart" size="16"></i>
                    Show Capture Stats&nbsp;
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Capture Types Overview - Hidden by default -->
<div class="md-card mb-4" id="capture-types-overview" style="display: none;">
    <div class="card-header">
        <h2>Available Capture Types</h2>
        <span class="md-badge md-badge-secondary">{{ capture_types|length }} types</span>
    </div>
    <div class="card-content">
        <div class="capture-types-grid">
            {% for capture_type in capture_types %}
            <div class="capture-type-item">
                <div class="capture-type-header">
                    <h4>{{ capture_type.capture_type }}</h4>
                    <span class="md-badge md-badge-success">{{ capture_type.device_count }} devices</span>
                </div>
                <div class="capture-type-stats">
                    <div class="stat">
                        <span class="stat-label">Success Rate:</span>
                        <span class="stat-value">{{ "%.1f"|format(capture_type.success_rate) }}%</span>
                    </div>
                    <div class="stat">
                        <span class="stat-label">Latest:</span>
                        <span class="stat-value">{{ capture_type.latest_capture[:10] if capture_type.latest_capture else 'N/A' }}</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Search Results -->
<div id="search-results" class="md-card" style="display: none;">
    <div class="card-header">
        <h2>Search Results</h2>
        <div id="results-summary"></div>
        <div class="export-dropdown" id="export-dropdown" style="display: none;">
            <button class="md-button md-button-outlined export-toggle" id="export-toggle">
                <i data-lucide="download" size="16"></i>
                Export
                <i data-lucide="chevron-down" size="14"></i>
            </button>
            <div class="export-menu" id="export-menu">
                <button class="export-option" data-format="csv">
                    <i data-lucide="file-spreadsheet" size="16"></i>
                    Export as CSV
                </button>
                <button class="export-option" data-format="json">
                    <i data-lucide="file-json" size="16"></i>
                    Export as JSON
                </button>
                <button class="export-option" data-format="text">
                    <i data-lucide="file-text" size="16"></i>
                    Export as Text
                </button>
            </div>
        </div>
    </div>
    <div class="card-content">
        <div id="results-container" class="scrollable-results"></div>
    </div>
</div>

<!-- Loading Indicator -->
<div id="search-loading" class="loading-container" style="display: none;">
    <div class="loading-spinner"></div>
    <p>Searching captures...</p>
</div>

<!-- Capture View Modal -->
<div id="capture-modal" class="md-modal" style="display: none;">
    <div class="capture-modal-wrapper">
        <div class="capture-modal-inner">
            <div class="capture-modal-header-custom">
                <div class="capture-modal-title-section">
                    <h2 class="capture-modal-title" id="modal-title">Capture View</h2>
                    <div class="capture-modal-subtitle" id="modal-subtitle"></div>
                </div>
                <button class="capture-modal-close-btn" id="close-modal">
                    <i data-lucide="x" size="20"></i>
                </button>
            </div>
            <div class="capture-modal-body-custom">
                <div class="capture-viewer">
                    <div class="capture-content" id="capture-content">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
            </div>
            <div class="capture-modal-footer-custom">
                <span class="capture-modal-info" id="modal-info"></span>
                <div class="capture-modal-actions">
                    <button class="md-button md-button-outlined" id="copy-capture">
                        <i data-lucide="copy" size="16"></i>
                        Copy Content
                    </button>
                    <button class="md-button md-button-outlined" id="download-capture">
                        <i data-lucide="download" size="16"></i>
                        Download
                    </button>
                    <button class="md-button md-button-text" id="close-modal-btn">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font: var(--md-typescale-body-small);
    color: var(--md-on-surface);
    font-weight: 500;
}

.form-field input,
.form-field select {
    padding: 12px 16px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-corner-small);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font: var(--md-typescale-body-medium);
}

.form-select[multiple] {
    min-height: 120px;
}

.form-options {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--md-typescale-body-medium);
    color: var(--md-on-surface);
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 12px;
}

/* Export dropdown styles */
.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--md-surface-container-high);
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-corner-small);
    box-shadow: var(--md-elevation-2);
    z-index: 100;
    min-width: 180px;
}

.export-menu.show {
    display: block;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--md-on-surface);
    font: var(--md-typescale-body-medium);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.export-option:hover {
    background: var(--md-surface-container);
}

.export-option:first-child {
    border-radius: var(--md-shape-corner-small) var(--md-shape-corner-small) 0 0;
}

.export-option:last-child {
    border-radius: 0 0 var(--md-shape-corner-small) var(--md-shape-corner-small);
}

.capture-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.capture-type-item {
    padding: 16px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-small);
    background: var(--md-surface-container);
}

.capture-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.capture-type-header h4 {
    margin: 0;
    font: var(--md-typescale-title-small);
    color: var(--md-on-surface);
}

.capture-type-stats {
    display: flex;
    gap: 16px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font: var(--md-typescale-body-small);
    color: var(--md-on-surface-variant);
}

.stat-value {
    font: var(--md-typescale-body-medium);
    color: var(--md-on-surface);
    font-weight: 500;
}

.loading-container {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--md-outline-variant);
    border-top: 3px solid var(--md-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.scrollable-results {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-small);
    background: var(--md-surface-container);
}

/* Scrollbar styling */
.scrollable-results::-webkit-scrollbar {
    width: 8px;
}

.scrollable-results::-webkit-scrollbar-track {
    background: var(--md-surface-variant);
    border-radius: 4px;
}

.scrollable-results::-webkit-scrollbar-thumb {
    background: var(--md-outline);
    border-radius: 4px;
}

.scrollable-results::-webkit-scrollbar-thumb:hover {
    background: var(--md-on-surface-variant);
}

.result-item {
    border-bottom: 1px solid var(--md-outline-variant);
    margin: 0;
    border-radius: 0;
}

.result-item:last-child {
    border-bottom: none;
}

.result-header {
    background: var(--md-surface-container);
    padding: 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.result-device {
    font: var(--md-typescale-title-medium);
    color: var(--md-on-surface);
    margin-bottom: 4px;
}

.result-meta {
    display: flex;
    gap: 16px;
    font: var(--md-typescale-body-small);
    color: var(--md-on-surface-variant);
}

.result-matches {
    padding: 16px;
}

.match-line {
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-small);
    padding: 12px;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    overflow-x: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.match-content {
    flex: 1;
    min-width: 0; /* Allow content to shrink */
}

.line-number {
    color: var(--md-on-surface-variant);
    margin-right: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.match-line-actions {
    flex-shrink: 0;
}

.view-capture-btn {
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* Remove the old result-actions styles since we're now inline */
.result-actions {
    display: none;
}

/* Custom Modal Wrapper - completely isolated from themes.css */
.capture-modal-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 1200px;
    height: 80vh;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.capture-modal-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.capture-modal-header-custom {
    padding: 20px 60px 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
}

.capture-modal-title-section {
    flex: 1;
}

.capture-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
}

.capture-modal-subtitle {
    margin-top: 4px;
    font-size: 14px;
    color: #666666;
}

.capture-modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    font-size: 0;
    padding: 0;
}

.capture-modal-close-btn:hover {
    background: #e8e8e8;
    border-color: #B5738A;
    transform: scale(1.05);
}

.capture-modal-close-btn svg {
    width: 20px;
    height: 20px;
}

.capture-modal-body-custom {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.capture-modal-footer-custom {
    padding: 16px 24px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: #ffffff;
}

.capture-modal-info {
    font-size: 12px;
    color: #666666;
    flex: 1;
}

.capture-modal-actions {
    display: flex;
    gap: 12px;
}

.capture-viewer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.capture-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: var(--md-surface-variant);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    border: 1px solid var(--md-outline-variant);
    margin: 16px;
    border-radius: var(--md-shape-corner-small);
}

.capture-content::-webkit-scrollbar {
    width: 12px;
}

.capture-content::-webkit-scrollbar-track {
    background: var(--md-surface);
    border-radius: 6px;
}

.capture-content::-webkit-scrollbar-thumb {
    background: var(--md-outline);
    border-radius: 6px;
    border: 2px solid var(--md-surface);
}

.capture-content::-webkit-scrollbar-thumb:hover {
    background: var(--md-on-surface-variant);
}

.capture-line {
    display: block;
    padding: 2px 0;
    border-radius: 2px;
}

.capture-line-number {
    display: inline-block;
    width: 60px;
    color: var(--md-on-surface-variant);
    font-weight: bold;
    user-select: none;
    margin-right: 12px;
    text-align: right;
}

.capture-line-content {
    color: var(--md-on-surface);
}

.highlight-match {
    background: var(--md-warning-container);
    color: var(--md-on-warning-container);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: bold;
}

.modal-info {
    font: var(--md-typescale-body-small);
    color: var(--md-on-surface-variant);
}

.modal-actions {
    display: flex;
    gap: 12px;
}

/* Copy notification */
.copy-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--md-primary);
    color: var(--md-on-primary);
    padding: 12px 16px;
    border-radius: var(--md-shape-corner-small);
    font: var(--md-typescale-body-medium);
    z-index: 10000;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.copy-notification.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .capture-types-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .match-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .match-line-actions {
        align-self: flex-end;
    }
}
</style>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('capture-search-form');
    const resultsContainer = document.getElementById('search-results');
    const loadingIndicator = document.getElementById('search-loading');
    const clearButton = document.getElementById('clear-form');

    // Store search results for export
    let currentSearchResults = null;
    let currentSearchQuery = '';

    // Initialize Lucide icons
    lucide.createIcons();

    // Export dropdown handlers
    const exportDropdown = document.getElementById('export-dropdown');
    const exportToggle = document.getElementById('export-toggle');
    const exportMenu = document.getElementById('export-menu');

    exportToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        exportMenu.classList.toggle('show');
    });

    // Close export menu when clicking outside
    document.addEventListener('click', function(e) {
        if (!exportDropdown.contains(e.target)) {
            exportMenu.classList.remove('show');
        }
    });

    // Export option handlers
    document.querySelectorAll('.export-option').forEach(btn => {
        btn.addEventListener('click', function() {
            const format = this.dataset.format;
            exportResults(format);
            exportMenu.classList.remove('show');
        });
    });

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        performSearch();
    });

    // Handle view capture modal
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('view-capture-btn') || e.target.closest('.view-capture-btn')) {
            const btn = e.target.classList.contains('view-capture-btn') ? e.target : e.target.closest('.view-capture-btn');
            openCaptureModal(btn);
        }
    });

    // Modal controls
    const modal = document.getElementById('capture-modal');
    const closeModalBtn = document.getElementById('close-modal');
    const closeModalBtnFooter = document.getElementById('close-modal-btn');
    const copyButton = document.getElementById('copy-capture');

    function closeModal() {
        modal.classList.remove('open');
        // Wait for transition to complete before hiding
        setTimeout(() => {
            modal.style.display = 'none';
        }, 300); // Match your CSS transition duration
        document.body.style.overflow = '';
    }

    // Use event delegation for all modal controls
    document.addEventListener('click', function(e) {
        if (e.target.closest('.capture-modal-close-btn') || e.target.closest('#close-modal')) {
            closeModal();
        }
        if (e.target.closest('#close-modal-btn')) {
            closeModal();
        }
        if (e.target.closest('#copy-capture')) {
            const captureContent = document.getElementById('capture-content');
            const textContent = extractTextContent(captureContent);

            navigator.clipboard.writeText(textContent).then(function() {
                showCopyNotification('Content copied to clipboard!');
            }).catch(function(err) {
                console.error('Failed to copy: ', err);
                showCopyNotification('Failed to copy content', true);
            });
        }
    });

    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('open')) {
            closeModal();
        }
    });

    function extractTextContent(contentElement) {
        // Extract just the text content without line numbers and HTML formatting
        const lines = contentElement.querySelectorAll('.capture-line');
        const textLines = [];

        lines.forEach(line => {
            const contentSpan = line.querySelector('.capture-line-content');
            if (contentSpan) {
                // Get text content, removing highlight spans but keeping the text
                let text = contentSpan.textContent || contentSpan.innerText;
                textLines.push(text);
            }
        });

        return textLines.join('\n');
    }

    function showCopyNotification(message, isError = false) {
        // Remove any existing notification
        const existing = document.querySelector('.copy-notification');
        if (existing) {
            existing.remove();
        }

        // Create notification
        const notification = document.createElement('div');
        notification.className = 'copy-notification';
        notification.textContent = message;

        if (isError) {
            notification.style.background = 'var(--md-error)';
            notification.style.color = 'var(--md-on-error)';
        }

        document.body.appendChild(notification);

        // Show with animation
        setTimeout(() => {
            notification.classList.add('show');
        }, 10);

        // Hide after 3 seconds
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 300);
        }, 3000);
    }

    async function openCaptureModal(btn) {
        console.log('Opening modal...', btn.dataset);

        const deviceName = btn.dataset.deviceName;
        const captureType = btn.dataset.captureType;
        const filePath = btn.dataset.filePath;
        const deviceId = btn.dataset.deviceId;
        const searchQuery = btn.dataset.query;

        // Update modal title
        document.getElementById('modal-title').textContent = `${deviceName} - ${captureType}`;
        document.getElementById('modal-subtitle').textContent = filePath;

        // Ensure close button is visible and properly styled
        const closeBtn = document.getElementById('close-modal');
        if (closeBtn) {
            closeBtn.style.display = 'flex';
            console.log('Close button found and styled');
        } else {
            console.error('Close button not found!');
        }

        // Show modal - set display first, then add open class for transitions
        modal.style.display = 'flex';
        // Force reflow to ensure display change takes effect
        modal.offsetHeight;
        modal.classList.add('open');
        document.body.style.overflow = 'hidden';

        // Refresh icons after modal is shown
        lucide.createIcons();

        console.log('Modal should be visible now', {
            modalDisplay: modal.style.display,
            modalHasOpenClass: modal.classList.contains('open'),
            modalZIndex: window.getComputedStyle(modal).zIndex,
            modalOpacity: window.getComputedStyle(modal).opacity,
            modalVisibility: window.getComputedStyle(modal).visibility
        });

        // Load capture content
        const contentDiv = document.getElementById('capture-content');
        contentDiv.innerHTML = '<div class="loading-spinner"></div><p>Loading capture...</p>';

        try {
            const response = await fetch(`/capture/api/view`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    device_id: deviceId,
                    capture_type: captureType,
                    search_query: searchQuery
                })
            });

            const data = await response.json();
            console.log('Received capture data:', data);

            if (response.ok) {
                displayCaptureContent(data, searchQuery);
            } else {
                contentDiv.innerHTML = `<div class="error-state">Error loading capture: ${data.error}</div>`;
            }
        } catch (error) {
            console.error('Error loading capture:', error);
            contentDiv.innerHTML = `<div class="error-state">Network error: ${error.message}</div>`;
        }
    }

    function displayCaptureContent(data, searchQuery) {
        const contentDiv = document.getElementById('capture-content');
        const lines = data.content.split('\n');
        const totalLines = lines.length;

        // Update modal info
        document.getElementById('modal-info').textContent = `${totalLines} lines | ${data.file_size} bytes`;

        // Create highlighted content
        const highlightedContent = lines.map((line, index) => {
            const lineNumber = index + 1;
            let highlightedLine = escapeHtml(line);

            // Highlight search matches
            if (searchQuery && line.toLowerCase().includes(searchQuery.toLowerCase())) {
                const regex = new RegExp(`(${escapeRegex(searchQuery)})`, 'gi');
                highlightedLine = highlightedLine.replace(regex, '<span class="highlight-match">$1</span>');
            }

            return `<span class="capture-line">` +
                   `<span class="capture-line-number">${lineNumber}</span>` +
                   `<span class="capture-line-content">${highlightedLine}</span>` +
                   `</span>`;
        }).join('\n');

        contentDiv.innerHTML = highlightedContent;

        // Scroll to first match if search query exists
        if (searchQuery) {
            const firstMatch = contentDiv.querySelector('.highlight-match');
            if (firstMatch) {
                firstMatch.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }
    }

    function escapeRegex(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    clearButton.addEventListener('click', function() {
        form.reset();
        resultsContainer.style.display = 'none';
    });

    // Toggle capture stats visibility
    const toggleStatsButton = document.getElementById('toggle-stats');
    const captureStatsSection = document.getElementById('capture-types-overview');
    let statsVisible = false;

    toggleStatsButton.addEventListener('click', function() {
        statsVisible = !statsVisible;
        captureStatsSection.style.display = statsVisible ? 'block' : 'none';

        const icon = toggleStatsButton.querySelector('i');
        const text = toggleStatsButton.querySelector('i').nextSibling;

        if (statsVisible) {
            icon.setAttribute('data-lucide', 'eye-off');
            toggleStatsButton.innerHTML = '<i data-lucide="eye-off" size="16"></i> Hide Capture Stats';
        } else {
            icon.setAttribute('data-lucide', 'bar-chart');
            toggleStatsButton.innerHTML = '<i data-lucide="bar-chart" size="16"></i> Show Capture Stats';
        }
        lucide.createIcons();
    });

    async function performSearch() {
        const formData = new FormData(form);
        const captureTypesSelect = document.getElementById('capture-types');
        const selectedTypes = Array.from(captureTypesSelect.selectedOptions).map(option => option.value).filter(v => v);

        const searchData = {
            query: formData.get('query'),
            capture_types: selectedTypes,
            case_sensitive: formData.get('case_sensitive') === 'on',
            regex_mode: formData.get('regex_mode') === 'on'
        };

        // Show loading
        loadingIndicator.style.display = 'block';
        resultsContainer.style.display = 'none';

        try {
            const response = await fetch('/capture/api/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(searchData)
            });

            const data = await response.json();

            if (response.ok) {
                displayResults(data);
            } else {
                showError(data.error || 'Search failed');
            }
        } catch (error) {
            showError('Network error: ' + error.message);
        } finally {
            loadingIndicator.style.display = 'none';
        }
    }

    function displayResults(data) {
        const summary = document.getElementById('results-summary');
        const container = document.getElementById('results-container');

        // Store results for export
        currentSearchResults = data.results;
        currentSearchQuery = data.query;

        summary.innerHTML = `
            <span class="md-badge md-badge-success">${data.total_matches} matches</span>
            <span class="md-badge md-badge-secondary">Query: "${data.query}"</span>
        `;

        if (data.results.length === 0) {
            exportDropdown.style.display = 'none';
            container.innerHTML = `
                <div class="empty-state">
                    <i data-lucide="search-x" size="48"></i>
                    <h3>No matches found</h3>
                    <p>Try adjusting your search terms or capture type filters.</p>
                </div>
            `;
        } else {
            exportDropdown.style.display = 'block';
            container.innerHTML = data.results.map(result => `
                <div class="result-item">
                    <div class="result-header">
                        <div class="result-device">${result.device_name}</div>
                        <div class="result-meta">
                            <span>Capture: ${result.capture_type}</span>
                            <span>IP: ${result.management_ip || 'N/A'}</span>
                            <span>Site: ${result.site_name || 'Unknown'}</span>
                        </div>
                    </div>
                    <div class="result-matches">
                        ${result.matches.map(match => `
                            <div class="match-line">
                                <div class="match-content">
                                    <span class="line-number">Line ${match.line_number}:</span>
                                    ${escapeHtml(match.line)}
                                </div>
                                <div class="match-line-actions">
                                    <button class="md-button md-button-outlined view-capture-btn"
                                            data-device-id="${result.device_id}"
                                            data-device-name="${result.device_name}"
                                            data-capture-type="${result.capture_type}"
                                            data-file-path="${result.file_path}"
                                            data-query="${data.query}">
                                        <i data-lucide="eye" size="14"></i>
                                        View Full
                                    </button>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `).join('');
        }

        resultsContainer.style.display = 'block';
        lucide.createIcons();
    }

    function showError(message) {
        const container = document.getElementById('results-container');
        const summary = document.getElementById('results-summary');

        summary.innerHTML = '<span class="md-badge md-badge-error">Error</span>';
        container.innerHTML = `
            <div class="error-state">
                <i data-lucide="alert-circle" size="48"></i>
                <h3>Search Error</h3>
                <p>${escapeHtml(message)}</p>
            </div>
        `;

        resultsContainer.style.display = 'block';
        lucide.createIcons();
    }

    // Export functionality
    function exportResults(format) {
        if (!currentSearchResults || currentSearchResults.length === 0) {
            alert('No results to export');
            return;
        }

        let content, filename, mimeType;
        const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');

        switch (format) {
            case 'csv':
                content = generateCSV();
                filename = `capture-search-${timestamp}.csv`;
                mimeType = 'text/csv';
                break;
            case 'json':
                content = generateJSON();
                filename = `capture-search-${timestamp}.json`;
                mimeType = 'application/json';
                break;
            case 'text':
                content = generateText();
                filename = `capture-search-${timestamp}.txt`;
                mimeType = 'text/plain';
                break;
            default:
                return;
        }

        downloadFile(content, filename, mimeType);
    }

    function generateCSV() {
        const rows = [['Device', 'IP', 'Site', 'Capture Type', 'Line Number', 'Match']];

        currentSearchResults.forEach(result => {
            result.matches.forEach(match => {
                rows.push([
                    result.device_name,
                    result.management_ip || '',
                    result.site_name || '',
                    result.capture_type,
                    match.line_number,
                    match.line.replace(/"/g, '""')  // Escape quotes for CSV
                ]);
            });
        });

        return rows.map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
    }

    function generateJSON() {
        return JSON.stringify({
            query: currentSearchQuery,
            exported_at: new Date().toISOString(),
            total_results: currentSearchResults.length,
            results: currentSearchResults
        }, null, 2);
    }

    function generateText() {
        let text = `Capture Search Results\n`;
        text += `Query: "${currentSearchQuery}"\n`;
        text += `Exported: ${new Date().toLocaleString()}\n`;
        text += `${'='.repeat(60)}\n\n`;

        currentSearchResults.forEach(result => {
            text += `Device: ${result.device_name}\n`;
            text += `IP: ${result.management_ip || 'N/A'}\n`;
            text += `Site: ${result.site_name || 'Unknown'}\n`;
            text += `Capture Type: ${result.capture_type}\n`;
            text += `${'-'.repeat(40)}\n`;

            result.matches.forEach(match => {
                text += `  Line ${match.line_number}: ${match.line}\n`;
            });

            text += `\n`;
        });

        return text;
    }

    function downloadFile(content, filename, mimeType) {
        const blob = new Blob([content], { type: mimeType });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
});
</script>
{% endblock %}