{% extends "base.html" %}
{% block title %}Maintenance Utilities - VelocityCMDB{% endblock %}

{% block content %}

<!-- Include SocketIO -->
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

<div class="page-header">
    <div class="page-title">
        <i data-lucide="wrench"></i>
        <div>
            <h1>Maintenance Utilities</h1>
            <p>Administrative tools for operations and maintenance</p>
        </div>
    </div>
    <div class="page-actions">
        <a href="{{ url_for('admin.index') }}" class="md-button md-button-text">
            <i data-lucide="arrow-left"></i>
            Back to Admin
        </a>
    </div>
</div>

<!-- Warning Banner -->
<div class="alert alert-warning">
    <i data-lucide="alert-triangle"></i>
    <div>
        <strong>Caution:</strong> Some of these operations modify database structure and data.
        Create a backup before performing maintenance operations.
    </div>
</div>

<!-- Progress Modal (WebSocket updates) -->
<div id="progress-modal" class="modal-overlay" style="display: none;">
    <div class="progress-dialog">
        <div class="progress-header">
            <h3 id="progress-title">Processing...</h3>
        </div>
        <div class="progress-body">
            <div class="progress-message" id="progress-message">Starting operation...</div>
            <div class="progress-bar-container">
                <div class="progress-bar" id="progress-bar" style="width: 0%"></div>
            </div>
            <div class="progress-percentage" id="progress-percentage">0%</div>
        </div>
    </div>
</div>

<!-- Maintenance Cards Grid -->
<div class="maintenance-grid">

    <!-- ================================================================== -->
    <!-- BACKUP OPERATIONS -->
    <!-- ================================================================== -->
    <div class="maintenance-card">
        <div class="card-header">
            <i data-lucide="save"></i>
            <h3>Backup Operations</h3>
        </div>
        <div class="card-body">
            <p>Create compressed backups of databases and artifacts</p>

            <div class="operation-group">
                <button class="md-button md-button-filled" onclick="createBackup('full')">
                    <i data-lucide="package"></i>
                    Full Backup
                </button>
                <button class="md-button md-button-outlined" onclick="createBackup('metadata')">
                    <i data-lucide="database"></i>
                    Metadata Only
                </button>
            </div>

            <div class="backup-info">
                <small>Last backup: <span id="last-backup">Never</span></small>
            </div>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- SEARCH INDEXES -->
    <!-- ================================================================== -->
    <div class="maintenance-card">
        <div class="card-header">
            <i data-lucide="search"></i>
            <h3>Search Indexes</h3>
        </div>
        <div class="card-body">
            <p>Rebuild full-text search indexes (FTS5)</p>

            <div class="index-status" id="index-status">
                <div class="status-item">
                    <span>Assets Index:</span>
                    <span class="badge badge-success">Healthy</span>
                </div>
                <div class="status-item">
                    <span>Notes Index:</span>
                    <span class="badge badge-success">Healthy</span>
                </div>
                <div class="status-item">
                    <span>Captures Index:</span>
                    <span class="badge badge-success">Healthy</span>
                </div>
            </div>

            <button class="md-button md-button-outlined" onclick="rebuildIndexes()">
                <i data-lucide="refresh-cw"></i>
                Rebuild All Indexes
            </button>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- COMPONENT INVENTORY (NEW - Tabbed Interface) -->
    <!-- ================================================================== -->
    <div class="maintenance-card maintenance-card-wide">
        <div class="card-header">
            <i data-lucide="cpu"></i>
            <h3>Component Inventory</h3>
        </div>
        <div class="card-body">
            <p>Parse inventory captures, classify components, and manage hardware asset data</p>

            <!-- Operation Tabs -->
            <div class="component-tabs">
                <button class="comp-tab-btn active" data-tab="load">
                    <i data-lucide="upload"></i> Load
                </button>
                <button class="comp-tab-btn" data-tab="reclassify">
                    <i data-lucide="refresh-cw"></i> Reclassify
                </button>
                <button class="comp-tab-btn" data-tab="cleanup">
                    <i data-lucide="trash-2"></i> Cleanup
                </button>
                <button class="comp-tab-btn" data-tab="stats">
                    <i data-lucide="bar-chart-2"></i> Stats
                </button>
            </div>

            <!-- Load Tab -->
            <div id="comp-tab-load" class="comp-tab-content active">
                <div class="tab-description">
                    Load inventory data from capture database
                </div>

                <div class="options-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="load-purge">
                        <span>Purge before load</span>
                        <small>Delete all components before loading new data</small>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" id="load-reclassify" checked>
                        <span>Reclassify after load</span>
                        <small>Re-classify unknown components</small>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" id="load-ignore-sn">
                        <span>Include without serials</span>
                        <small>Import components without serial numbers</small>
                    </label>
                </div>

                <div class="form-group">
                    <label for="load-device-filter">Device Filter (optional)</label>
                    <input type="text" id="load-device-filter" class="form-input"
                           placeholder="e.g., sw-core, rtr-*">
                </div>

                <div class="operation-group">
                    <button class="md-button md-button-filled" onclick="loadInventoryComponents()">
                        <i data-lucide="play"></i>
                        Load Components
                    </button>
                    <button class="md-button md-button-danger" onclick="purgeAllComponents()">
                        <i data-lucide="trash-2"></i>
                        Purge Only
                    </button>
                </div>
            </div>

            <!-- Reclassify Tab -->
            <div id="comp-tab-reclassify" class="comp-tab-content">
                <div class="tab-description">
                    Re-analyze unknown components and update classifications
                </div>

                <div class="options-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="reclassify-delete-junk">
                        <span>Delete junk components</span>
                        <small>Remove CLI artifacts, prompts, garbage data</small>
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" id="reclassify-dry-run">
                        <span>Dry run</span>
                        <small>Preview changes without modifying database</small>
                    </label>
                </div>

                <div class="operation-group">
                    <button class="md-button md-button-outlined" onclick="reclassifyComponents()">
                        <i data-lucide="refresh-cw"></i>
                        Reclassify Unknown
                    </button>
                    <button class="md-button md-button-text" onclick="analyzeUnknown()">
                        <i data-lucide="search"></i>
                        Analyze
                    </button>
                </div>
            </div>

            <!-- Cleanup Tab -->
            <div id="comp-tab-cleanup" class="comp-tab-content">
                <div class="tab-description">
                    Remove component records from the database
                </div>

                <div class="radio-group">
                    <label class="radio-label">
                        <input type="radio" name="cleanup-scope" value="device" checked>
                        <span>By Device</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="cleanup-scope" value="source">
                        <span>By Source</span>
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="cleanup-scope" value="all">
                        <span>All</span>
                    </label>
                </div>

                <div id="cleanup-device-input" class="form-group">
                    <input type="text" id="cleanup-device-name" class="form-input"
                           placeholder="Device name pattern">
                </div>

                <div id="cleanup-source-input" class="form-group" style="display: none;">
                    <select id="cleanup-source" class="form-select">
                        <option value="inventory_capture">inventory_capture</option>
                        <option value="manual">manual</option>
                    </select>
                </div>

                <button class="md-button md-button-danger" onclick="cleanupComponents()">
                    <i data-lucide="trash-2"></i>
                    Delete Components
                </button>
            </div>

            <!-- Stats Tab -->
            <div id="comp-tab-stats" class="comp-tab-content">
                <div id="component-stats-display">
                    <div class="stats-loading">Click refresh to load stats...</div>
                </div>
                <button class="md-button md-button-text" onclick="refreshComponentStats()">
                    <i data-lucide="refresh-cw"></i> Refresh Stats
                </button>
            </div>

            <!-- Results Panel -->
            <div id="component-results" class="results-panel" style="display: none;">
                <div class="results-header">
                    <strong>Results</strong>
                    <button class="close-btn" onclick="hideComponentResults()">&times;</button>
                </div>
                <pre id="component-results-content"></pre>
            </div>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- ARP DATABASE -->
    <!-- ================================================================== -->
    <div class="maintenance-card">
        <div class="card-header">
            <i data-lucide="network"></i>
            <h3>ARP Database</h3>
        </div>
        <div class="card-body">
            <p>Parse and populate ARP/MAC address database</p>

            <div class="operation-group">
                <button class="md-button md-button-outlined" onclick="loadArpData()">
                    <i data-lucide="upload"></i>
                    Load ARP Captures
                </button>
                <button class="md-button md-button-text" onclick="showArpStats()">
                    <i data-lucide="info"></i>
                    View Statistics
                </button>
            </div>

            <div id="arp-stats" style="display: none; margin-top: 12px;">
                <div class="stats-grid-simple">
                    <div class="stat-item">
                        <label>Total Entries:</label>
                        <span id="arp-entries">0</span>
                    </div>
                    <div class="stat-item">
                        <label>Unique MACs:</label>
                        <span id="unique-macs">0</span>
                    </div>
                    <div class="stat-item">
                        <label>Last Updated:</label>
                        <span id="arp-updated">Never</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Manual Capture Load -->
<div class="maintenance-card">
    <div class="card-header">
        <i data-lucide="file-text"></i>
        <h3>Capture Data</h3>
    </div>
    <div class="card-body">
        <p>Manually load CLI captures into database</p>

        <div class="capture-options">
            <label class="checkbox-label">
                <input type="checkbox" id="load-configs" checked>
                <span>Configurations</span>
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="load-inventory" checked>
                <span>Inventory</span>
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="load-routes">
                <span>Routes</span>
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="load-mac">
                <span>MAC Tables</span>
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="load-lldp">
                <span>LLDP Neighbors</span>
            </label>
            <label class="checkbox-label">
                <input type="checkbox" id="load-arp">
                <span>ARP Tables</span>
            </label>
        </div>

        <div class="operation-group">
            <button class="md-button md-button-filled" onclick="loadCaptureData()">
                <i data-lucide="download"></i>
                Load Selected Captures
            </button>
        </div>
    </div>
</div>
    <!-- ================================================================== -->
    <!-- TOPOLOGY GENERATION -->
    <!-- ================================================================== -->
    <div class="maintenance-card">
        <div class="card-header">
            <i data-lucide="git-branch"></i>
            <h3>Topology Generation</h3>
        </div>
        <div class="card-body">
            <p>Generate network topology map from LLDP data</p>

            <!-- Root Device Search -->
            <div class="form-group">
                <label for="rootDevice">Root Device</label>
                <input type="text" id="rootDevice" class="form-input"
                       placeholder="Start typing device name..." autocomplete="off">
                <div id="deviceSuggestions" class="autocomplete-suggestions"></div>
            </div>

            <!-- Max Hops -->
            <div class="form-group">
                <label for="maxHops">Max Hops (1-10)</label>
                <input type="number" id="maxHops" class="form-input" value="4" min="1" max="10">
            </div>

            <!-- Domain Suffix -->
            <div class="form-group">
                <label for="domainSuffix">Domain Suffix</label>
                <input type="text" id="domainSuffix" class="form-input" placeholder=".example.com">
            </div>

            <!-- Advanced Filters -->
            <details class="advanced-filters">
                <summary class="md-button md-button-text">
                    <i data-lucide="filter"></i>
                    Advanced Filters
                </summary>
                <div class="filter-content">
                    <div class="form-group">
                        <label for="filterPlatform">Filter Platform (comma-separated)</label>
                        <input type="text" id="filterPlatform" class="form-input"
                               placeholder="e.g., sep,debian,ubuntu">
                        <small>Exclude devices with these platforms</small>
                    </div>
                    <div class="form-group">
                        <label for="filterDevice">Filter Device (comma-separated)</label>
                        <input type="text" id="filterDevice" class="form-input"
                               placeholder="e.g., rft,sw,phone">
                        <small>Exclude devices with these name patterns</small>
                    </div>
                </div>
            </details>

            <button id="btnGenerateTopology" class="md-button md-button-filled">
                <i data-lucide="map"></i>
                Generate Topology
            </button>

            <!-- Topology File List -->
            <div id="topologyList" class="file-list" style="margin-top: 16px;">
                <p class="text-muted">Loading...</p>
            </div>
        </div>
    </div>

    <!-- ================================================================== -->
    <!-- DATABASE RESET (DANGER) -->
    <!-- ================================================================== -->
    <div class="maintenance-card danger-card">
        <div class="card-header">
            <i data-lucide="trash-2"></i>
            <h3>Database Reset</h3>
        </div>
        <div class="card-body">
            <p>Reset database to initial state (for testing/learning)</p>

            <div class="alert alert-danger">
                <i data-lucide="alert-triangle"></i>
                <strong>Warning:</strong> This will delete ALL data!
            </div>

            <button class="md-button md-button-danger" onclick="confirmDatabaseReset()">
                <i data-lucide="trash-2"></i>
                Reset Database
            </button>
        </div>
    </div>

</div>

<!-- Operation Log -->
<div class="operation-log-container">
    <div class="log-header">
        <h3>
            <i data-lucide="terminal"></i>
            Operation Log
        </h3>
        <button class="md-button md-button-text" onclick="clearLog()">
            <i data-lucide="x"></i>
            Clear
        </button>
    </div>
    <div id="operation-log" class="log-content">
        <div class="log-entry log-info">
            <span class="log-timestamp">{{ now }}</span>
            <span class="log-message">Maintenance panel loaded</span>
        </div>
    </div>
</div>

<!-- ====================================================================== -->
<!-- STYLES -->
<!-- ====================================================================== -->
<style>
/* Grid Layout */
.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.maintenance-card {
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-large);
    padding: 20px;
}

.maintenance-card-wide {
    grid-column: span 2;
}

@media (max-width: 800px) {
    .maintenance-card-wide {
        grid-column: span 1;
    }
}

.maintenance-card.danger-card {
    border-color: var(--md-error);
    background: rgba(var(--md-error-rgb), 0.05);
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.card-header i {
    color: var(--md-primary);
    width: 24px;
    height: 24px;
}

.card-header h3 {
    margin: 0;
    font: var(--md-typescale-title-medium);
    color: var(--md-on-surface);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-body > p {
    color: var(--md-on-surface-variant);
    margin: 0;
}

/* Component Tabs */
.component-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--md-outline-variant);
    flex-wrap: wrap;
}

.comp-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    color: var(--md-on-surface-variant);
    transition: all 0.2s ease;
}

.comp-tab-btn:hover {
    background: var(--md-surface-variant);
}

.comp-tab-btn.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.comp-tab-btn i {
    width: 16px;
    height: 16px;
}

.comp-tab-content {
    display: none;
    padding: 16px 0;
}

.comp-tab-content.active {
    display: block;
}

.tab-description {
    color: var(--md-on-surface-variant);
    font-size: 14px;
    margin-bottom: 16px;
}

/* Options Group */
.options-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--md-surface-variant);
    border-radius: 8px;
}

.checkbox-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input {
    margin: 0;
}

.checkbox-label span {
    font-weight: 500;
}

.checkbox-label small {
    width: 100%;
    margin-left: 24px;
    color: var(--md-on-surface-variant);
    font-size: 12px;
}

.radio-group {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Forms */
.form-group {
    position: relative;
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font: var(--md-typescale-label-large);
    color: var(--md-on-surface);
    margin-bottom: 8px;
}

.form-group small {
    display: block;
    font: var(--md-typescale-body-small);
    color: var(--md-on-surface-variant);
    margin-top: 4px;
}

.form-input, .form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-corner-small);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-size: 14px;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px rgba(var(--md-primary-rgb), 0.2);
}

/* Operation Groups */
.operation-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Buttons */
.md-button-danger {
    background: var(--md-error);
    color: var(--md-on-error);
}

.md-button-danger:hover {
    background: var(--md-error);
    filter: brightness(1.1);
}

/* Results Panel */
.results-panel {
    margin-top: 16px;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    background: var(--md-surface);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--md-surface-variant);
    border-radius: 8px 8px 0 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--md-on-surface-variant);
    padding: 0 4px;
}

#component-results-content {
    padding: 12px;
    margin: 0;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    max-height: 250px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Stats Display */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    padding: 12px;
    background: var(--md-surface-variant);
    border-radius: 8px;
    text-align: center;
}

.stat-card h5 {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--md-primary);
}

.stat-sub {
    font-size: 11px;
    color: var(--md-on-surface-variant);
}

/* Type breakdown bars */
.type-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.type-label {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-progress {
    flex: 1;
    height: 18px;
    background: var(--md-surface-variant);
    border-radius: 4px;
    overflow: hidden;
}

.type-fill {
    height: 100%;
    background: var(--md-primary);
    min-width: 20px;
    display: flex;
    align-items: center;
    padding-left: 6px;
    font-size: 11px;
    color: white;
    transition: width 0.3s ease;
}

.type-fill.unknown {
    background: var(--md-error);
}

.type-count {
    width: 60px;
    text-align: right;
    color: var(--md-on-surface-variant);
}

/* Simple stats grid (for ARP etc) */
.stats-grid-simple {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--md-outline-variant);
}

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

.stat-item label {
    color: var(--md-on-surface-variant);
}

.stat-item span {
    font-weight: 500;
}

/* Autocomplete */
.autocomplete-suggestions {
    position: absolute;
    border: 1px solid var(--md-outline);
    background: var(--md-surface-container);
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    display: none;
    border-radius: var(--md-shape-corner-small);
    box-shadow: var(--md-elevation-2);
    margin-top: 4px;
}

.autocomplete-suggestions.show {
    display: block;
}

.suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--md-outline-variant);
}

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

.suggestion-item:hover {
    background: var(--md-surface-container-high);
}

.suggestion-item .device-name {
    font-weight: 500;
}

.suggestion-item .device-info {
    font-size: 0.85em;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
}

/* File list */
.file-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-small);
    background: var(--md-surface);
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-outline-variant);
}

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

.file-item:hover {
    background: var(--md-surface-container-high);
}

.file-name {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.file-meta {
    font-size: 0.85em;
    color: var(--md-on-surface-variant);
}

/* Advanced filters */
.advanced-filters {
    margin-bottom: 16px;
}

.advanced-filters summary {
    cursor: pointer;
    list-style: none;
}

.advanced-filters summary::-webkit-details-marker {
    display: none;
}

.filter-content {
    padding: 16px;
    margin-top: 8px;
    background: var(--md-surface-variant);
    border-radius: 8px;
}

/* Progress Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.progress-dialog {
    background: var(--md-surface);
    border-radius: var(--md-shape-corner-large);
    padding: 24px;
    min-width: 350px;
    max-width: 500px;
    box-shadow: var(--md-elevation-5);
}

.progress-header h3 {
    margin: 0 0 16px;
    font: var(--md-typescale-title-large);
}

.progress-message {
    margin-bottom: 16px;
    color: var(--md-on-surface-variant);
    font-size: 14px;
    min-height: 20px;
}

.progress-bar-container {
    height: 8px;
    background: var(--md-surface-variant);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: var(--md-primary);
    transition: width 0.3s ease;
}

.progress-percentage {
    text-align: center;
    font-size: 14px;
    color: var(--md-on-surface-variant);
}

/* Operation Log */
.operation-log-container {
    margin-top: 24px;
    background: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-corner-large);
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-outline-variant);
}

.log-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--md-typescale-title-medium);
}

.log-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 20px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.log-entry {
    padding: 6px 0;
    border-bottom: 1px solid var(--md-outline-variant);
    display: flex;
    gap: 12px;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-timestamp {
    color: var(--md-on-surface-variant);
    flex-shrink: 0;
}

.log-message {
    word-break: break-word;
}

.log-info .log-message { color: var(--md-on-surface); }
.log-success .log-message { color: var(--md-primary); }
.log-error .log-message { color: var(--md-error); }
.log-warning .log-message { color: var(--md-tertiary); }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success {
    background: rgba(var(--md-primary-rgb), 0.15);
    color: var(--md-primary);
}

/* Index status */
.index-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Alerts */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--md-shape-corner-medium);
    margin-bottom: 16px;
}

.alert i {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.alert-warning {
    background: rgba(var(--md-tertiary-rgb), 0.1);
    border: 1px solid var(--md-tertiary);
    color: var(--md-on-surface);
}

.alert-danger {
    background: rgba(var(--md-error-rgb), 0.1);
    border: 1px solid var(--md-error);
    color: var(--md-on-surface);
}

/* Text utilities */
.text-muted {
    color: var(--md-on-surface-variant);
    font-style: italic;
}

.stats-loading {
    padding: 20px;
    text-align: center;
    color: var(--md-on-surface-variant);
}
</style>

<!-- ====================================================================== -->
<!-- JAVASCRIPT -->
<!-- ====================================================================== -->
<script>
// ========================================================================
// SOCKET.IO SETUP
// ========================================================================
const socket = io();

socket.on('connect', function() {
    logOperation('Connected to server', 'info');
});

socket.on('disconnect', function() {
    logOperation('Disconnected from server', 'warning');
});

// ========================================================================
// PROGRESS MODAL
// ========================================================================
function showProgressModal(title) {
    document.getElementById('progress-title').textContent = title;
    document.getElementById('progress-message').textContent = 'Starting...';
    document.getElementById('progress-bar').style.width = '0%';
    document.getElementById('progress-percentage').textContent = '0%';
    document.getElementById('progress-modal').style.display = 'flex';
}

function hideProgressModal() {
    document.getElementById('progress-modal').style.display = 'none';
}

function updateProgress(message, progress) {
    document.getElementById('progress-message').textContent = message;
    document.getElementById('progress-bar').style.width = progress + '%';
    document.getElementById('progress-percentage').textContent = progress + '%';
}

// ========================================================================
// UNIFIED SOCKET HANDLERS
// ========================================================================
socket.on('maintenance_progress', function(data) {
    updateProgress(data.message || 'Processing...', data.progress || 50);
});

socket.on('maintenance_complete', function(data) {
    hideProgressModal();

    if (!data.success) {
        logOperation('Operation failed: ' + (data.error || 'Unknown error'), 'error');
        return;
    }

    const op = data.operation;

    // Route based on operation type
    switch(op) {
        case 'backup':
            logOperation(`Backup created: ${data.filename} (${data.size_mb} MB)`, 'success');
            document.getElementById('last-backup').textContent = new Date().toLocaleString();
            break;

        case 'indexes':
            logOperation(`Rebuilt ${data.indexes_rebuilt} search indexes`, 'success');
            break;

        case 'topology':
            logOperation(`Topology generated: ${data.device_count} devices, ${data.connection_count} connections`, 'success');
            loadTopologyList();
            break;

        case 'arp':
            logOperation(`Loaded ${data.entries_loaded} ARP entries`, 'success');
            break;

        case 'captures':
            logOperation(`Processed ${data.files_processed} capture files`, 'success');
            break;

        case 'inventory_load':
            const loadMsg = data.components_loaded
                ? `Loaded ${data.components_loaded} components`
                : 'Component load complete';
            logOperation(loadMsg, 'success');
            showComponentResults(data);
            refreshComponentStats();
            break;

        case 'inventory_reclassify':
            const reclassMsg = data.reclassified
                ? `Reclassified ${data.reclassified} components`
                : 'Reclassification complete';
            logOperation(reclassMsg, 'success');
            if (data.junk_filtered) {
                logOperation(`Filtered ${data.junk_filtered} junk entries`, 'info');
            }
            showComponentResults(data);
            refreshComponentStats();
            break;

        case 'inventory_cleanup':
            logOperation(`Deleted ${data.deleted_count || 0} components`, 'success');
            showComponentResults(data);
            refreshComponentStats();
            break;

        case 'inventory_purge':
            logOperation(`Purged all components (${data.deleted_count || 0} removed)`, 'success');
            showComponentResults(data);
            refreshComponentStats();
            break;

        case 'inventory_analyze':
            logOperation('Component analysis complete', 'success');
            showComponentResults(data);
            break;

        default:
            logOperation('Operation completed successfully', 'success');
    }
});

socket.on('maintenance_error', function(data) {
    hideProgressModal();
    logOperation('Error: ' + data.error, 'error');
    if (data.output) {
        showComponentResults({output: data.output, error: data.error});
    }
});

socket.on('maintenance_reset_complete', function(data) {
    hideProgressModal();
    if (data.success) {
        logOperation('Database reset complete', 'success');
        alert('Database has been reset. The page will now reload.');
        window.location.reload();
    } else {
        logOperation('Database reset failed: ' + data.error, 'error');
    }
});

// ========================================================================
// LOGGING
// ========================================================================
function logOperation(message, type = 'info') {
    const log = document.getElementById('operation-log');
    const timestamp = new Date().toLocaleTimeString();

    const entry = document.createElement('div');
    entry.className = `log-entry log-${type}`;
    entry.innerHTML = `
        <span class="log-timestamp">${timestamp}</span>
        <span class="log-message">${message}</span>
    `;

    log.appendChild(entry);
    log.scrollTop = log.scrollHeight;
}

function clearLog() {
    const log = document.getElementById('operation-log');
    log.innerHTML = '';
    logOperation('Log cleared', 'info');
}

// ========================================================================
// BACKUP OPERATIONS
// ========================================================================
function createBackup(type) {
    logOperation(`Starting ${type} backup...`, 'info');
    showProgressModal(`Creating ${type} Backup`);

    socket.emit('maintenance_backup', {
        include_captures: type === 'full'
    });
}

// ========================================================================
// SEARCH INDEX OPERATIONS
// ========================================================================
function rebuildIndexes() {
    if (!confirm('Rebuild all search indexes? This may take several minutes.')) {
        return;
    }

    logOperation('Rebuilding search indexes...', 'info');
    showProgressModal('Rebuilding Search Indexes');
    socket.emit('maintenance_rebuild_indexes', {});
}

// ========================================================================
// COMPONENT INVENTORY OPERATIONS
// ========================================================================

// Tab management
document.querySelectorAll('.comp-tab-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const tabName = this.dataset.tab;

        // Update buttons
        document.querySelectorAll('.comp-tab-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        // Update content
        document.querySelectorAll('.comp-tab-content').forEach(t => t.classList.remove('active'));
        document.getElementById(`comp-tab-${tabName}`).classList.add('active');

        // Auto-refresh stats when switching to stats tab
        if (tabName === 'stats') {
            refreshComponentStats();
        }

        // Reinitialize icons
        lucide.createIcons();
    });
});

// Cleanup scope toggle
document.querySelectorAll('input[name="cleanup-scope"]').forEach(r => {
    r.addEventListener('change', function() {
        document.getElementById('cleanup-device-input').style.display =
            this.value === 'device' ? 'block' : 'none';
        document.getElementById('cleanup-source-input').style.display =
            this.value === 'source' ? 'block' : 'none';
    });
});

function loadInventoryComponents() {
    const purge = document.getElementById('load-purge').checked;

    if (purge && !confirm('This will PURGE all existing components before loading new data. Continue?')) {
        return;
    }

    logOperation('Loading components...', 'info');
    showProgressModal('Loading Inventory');

    socket.emit('maintenance_inventory_load', {
        purge: purge,
        reclassify: document.getElementById('load-reclassify').checked,
        ignore_sn: document.getElementById('load-ignore-sn').checked,
        device_filter: document.getElementById('load-device-filter').value.trim() || null
    });
}

function purgeAllComponents() {
    if (!confirm('This will DELETE ALL component records from the database.\n\nThis cannot be undone!')) {
        return;
    }

    const doubleConfirm = prompt('Type "PURGE" to confirm:');
    if (doubleConfirm !== 'PURGE') {
        alert('Purge cancelled - confirmation text did not match');
        return;
    }

    logOperation('Purging all components...', 'warning');
    showProgressModal('Purging Components');
    socket.emit('maintenance_inventory_purge', {});
}

function reclassifyComponents() {
    if (!confirm('Reclassify unknown components?')) {
        return;
    }

    logOperation('Reclassifying components...', 'info');
    showProgressModal('Reclassifying Components');

    socket.emit('maintenance_inventory_reclassify', {
        delete_junk: document.getElementById('reclassify-delete-junk').checked,
        dry_run: document.getElementById('reclassify-dry-run').checked
    });
}

function analyzeUnknown() {
    logOperation('Analyzing unknown components...', 'info');
    showProgressModal('Analyzing');
    socket.emit('maintenance_inventory_analyze', {});
}

function cleanupComponents() {
    const scope = document.querySelector('input[name="cleanup-scope"]:checked').value;
    let params = { scope };

    if (scope === 'device') {
        params.device_name = document.getElementById('cleanup-device-name').value.trim();
        if (!params.device_name) {
            alert('Enter device name pattern');
            return;
        }
        if (!confirm(`Delete components for devices matching "${params.device_name}"?`)) {
            return;
        }
    } else if (scope === 'source') {
        params.source = document.getElementById('cleanup-source').value;
        if (!confirm(`Delete all "${params.source}" components?`)) {
            return;
        }
    } else if (scope === 'all') {
        if (prompt('Type DELETE ALL to confirm:') !== 'DELETE ALL') {
            return;
        }
    }

    logOperation(`Cleanup (${scope})...`, 'info');
    showProgressModal('Deleting Components');
    socket.emit('maintenance_inventory_cleanup', params);
}

async function refreshComponentStats() {
    const container = document.getElementById('component-stats-display');
    container.innerHTML = '<div class="stats-loading">Loading...</div>';

    try {
        const resp = await fetch('/admin/maintenance/components/stats');
        const stats = await resp.json();

        if (stats.error) {
            throw new Error(stats.error);
        }

        const total = stats.total_components || 0;
        const coverage = total > 0 ? ((stats.with_serial / total) * 100).toFixed(1) : 0;

        let html = `
            <div class="stats-grid">
                <div class="stat-card">
                    <h5>Total</h5>
                    <div class="stat-value">${total.toLocaleString()}</div>
                </div>
                <div class="stat-card">
                    <h5>With Serials</h5>
                    <div class="stat-value">${(stats.with_serial || 0).toLocaleString()}</div>
                    <div class="stat-sub">${coverage}%</div>
                </div>
                <div class="stat-card">
                    <h5>Devices</h5>
                    <div class="stat-value">${stats.devices_with_components || 0}</div>
                </div>
                <div class="stat-card">
                    <h5>Unknown</h5>
                    <div class="stat-value">${(stats.unknown_pct || 0).toFixed(1)}%</div>
                </div>
            </div>
        `;

        if (stats.by_type && Object.keys(stats.by_type).length > 0) {
            html += '<div style="margin-top:16px"><strong>By Type</strong></div>';

            const sorted = Object.entries(stats.by_type).sort((a, b) => b[1] - a[1]);

            for (const [type, count] of sorted) {
                const pct = total > 0 ? (count / total * 100) : 0;
                const cls = type === 'unknown' ? 'type-fill unknown' : 'type-fill';
                html += `
                    <div class="type-bar">
                        <span class="type-label">${type || 'null'}</span>
                        <div class="type-progress">
                            <div class="${cls}" style="width:${Math.max(pct, 2)}%">
                                ${pct > 8 ? count : ''}
                            </div>
                        </div>
                        <span class="type-count">${count.toLocaleString()}</span>
                    </div>
                `;
            }
        }

        container.innerHTML = html;

    } catch (e) {
        container.innerHTML = `<div class="alert alert-danger">${e.message}</div>`;
    }
}

function showComponentResults(data) {
    document.getElementById('component-results').style.display = 'block';
    document.getElementById('component-results-content').textContent =
        typeof data === 'object' ? JSON.stringify(data, null, 2) : data;
}

function hideComponentResults() {
    document.getElementById('component-results').style.display = 'none';
}

// ========================================================================
// ARP DATABASE OPERATIONS
// ========================================================================
function loadArpData() {
    logOperation('Loading ARP data from captures...', 'info');
    showProgressModal('Loading ARP Data');
    socket.emit('maintenance_load_arp', {});
}

async function showArpStats() {
    const statsDiv = document.getElementById('arp-stats');
    statsDiv.style.display = statsDiv.style.display === 'none' ? 'block' : 'none';

    if (statsDiv.style.display === 'block') {
        try {
            const response = await fetch('/admin/maintenance/arp/stats');
            const stats = await response.json();

            document.getElementById('arp-entries').textContent = stats.total_entries || 0;
            document.getElementById('unique-macs').textContent = stats.unique_macs || 0;
            document.getElementById('arp-updated').textContent = stats.last_updated || 'Never';
        } catch (error) {
            logOperation(`Failed to load ARP stats: ${error.message}`, 'error');
        }
    }
}

// ========================================================================
// TOPOLOGY OPERATIONS
// ========================================================================

// Device autocomplete
let deviceSearchTimeout;
const rootDeviceInput = document.getElementById('rootDevice');
const deviceSuggestions = document.getElementById('deviceSuggestions');

rootDeviceInput.addEventListener('input', function() {
    clearTimeout(deviceSearchTimeout);
    const query = this.value.trim();

    if (query.length < 2) {
        deviceSuggestions.classList.remove('show');
        return;
    }

    deviceSearchTimeout = setTimeout(() => {
        fetch(`/admin/maintenance/devices/search?q=${encodeURIComponent(query)}`)
            .then(r => r.json())
            .then(data => {
                if (data.devices && data.devices.length > 0) {
                    deviceSuggestions.innerHTML = data.devices.map(d => `
                        <div class="suggestion-item" data-device="${d.name}">
                            <div class="device-name">${d.name}</div>
                            <div class="device-info">${d.ip} • ${d.model}</div>
                        </div>
                    `).join('');
                    deviceSuggestions.classList.add('show');

                    deviceSuggestions.querySelectorAll('.suggestion-item').forEach(item => {
                        item.addEventListener('click', function() {
                            rootDeviceInput.value = this.dataset.device;
                            deviceSuggestions.classList.remove('show');
                        });
                    });
                } else {
                    deviceSuggestions.classList.remove('show');
                }
            });
    }, 300);
});

// Hide suggestions on outside click
document.addEventListener('click', function(e) {
    if (!rootDeviceInput.contains(e.target) && !deviceSuggestions.contains(e.target)) {
        deviceSuggestions.classList.remove('show');
    }
});

// Generate topology
document.getElementById('btnGenerateTopology').addEventListener('click', function() {
    const rootDevice = document.getElementById('rootDevice').value.trim();

    if (!rootDevice) {
        alert('Please enter a root device name');
        return;
    }

    const maxHops = parseInt(document.getElementById('maxHops').value) || 4;
    const domainSuffix = document.getElementById('domainSuffix').value.trim();

    const filterPlatform = document.getElementById('filterPlatform').value
        .split(',').map(s => s.trim()).filter(s => s);

    const filterDevice = document.getElementById('filterDevice').value
        .split(',').map(s => s.trim()).filter(s => s);

    logOperation(`Generating topology from ${rootDevice} (max ${maxHops} hops)...`, 'info');
    showProgressModal('Generating Topology');

    socket.emit('maintenance_generate_topology', {
        root_device: rootDevice,
        max_hops: maxHops,
        domain_suffix: domainSuffix,
        filter_platform: filterPlatform,
        filter_device: filterDevice
    });
});

function loadTopologyList() {
    fetch('/admin/maintenance/topology/list')
        .then(r => r.json())
        .then(data => {
            const list = document.getElementById('topologyList');

            if (!data.topologies || data.topologies.length === 0) {
                list.innerHTML = '<p class="text-muted" style="padding: 12px;">No topologies generated yet</p>';
                return;
            }

            list.innerHTML = data.topologies.map(t => `
                <div class="file-item">
                    <div>
                        <div class="file-name">${t.filename}</div>
                        <div class="file-meta">${t.size_kb} KB • ${new Date(t.created).toLocaleString()}</div>
                    </div>
                    <a href="/admin/maintenance/topology/download/${t.filename}"
                       class="md-button md-button-text" style="padding: 4px 8px;">
                        <i data-lucide="download"></i>
                    </a>
                </div>
            `).join('');

            lucide.createIcons();
        })
        .catch(err => {
            document.getElementById('topologyList').innerHTML =
                '<p class="text-muted" style="padding: 12px;">Failed to load topology list</p>';
        });
}

// ========================================================================
// DATABASE RESET
// ========================================================================
function confirmDatabaseReset() {
    const confirmed = confirm(
        'WARNING: This will delete ALL data and reset the database to initial state.\n\n' +
        'This operation CANNOT be undone!\n\n' +
        'Are you absolutely sure you want to continue?'
    );

    if (!confirmed) return;

    const doubleConfirm = prompt('Type "RESET DATABASE" to confirm:');

    if (doubleConfirm !== 'RESET DATABASE') {
        alert('Reset cancelled - confirmation text did not match');
        return;
    }

    logOperation('Resetting database...', 'warning');
    showProgressModal('Resetting Database');
    socket.emit('maintenance_reset_database', {});
}

// ========================================================================
// INITIALIZATION
// ========================================================================
document.addEventListener('DOMContentLoaded', function() {
    // Load topology list
    loadTopologyList();

    // Initialize Lucide icons
    lucide.createIcons();
});
    // ========================================================================
// CAPTURE DATA OPERATIONS
// ========================================================================
function loadCaptureData() {
    const captureTypes = [];
    if (document.getElementById('load-configs')?.checked) captureTypes.push('configs');
    if (document.getElementById('load-inventory')?.checked) captureTypes.push('inventory');
    if (document.getElementById('load-routes')?.checked) captureTypes.push('routes');
    if (document.getElementById('load-mac')?.checked) captureTypes.push('mac');
    if (document.getElementById('load-lldp')?.checked) captureTypes.push('lldp');
    if (document.getElementById('load-arp')?.checked) captureTypes.push('arp');

    if (captureTypes.length === 0) {
        alert('Please select at least one capture type');
        return;
    }

    logOperation(`Loading capture data: ${captureTypes.join(', ')}`, 'info');
    showProgressModal('Loading Capture Data');

    socket.emit('maintenance_load_captures', {
        capture_types: captureTypes
    });
}
</script>
{% endblock %}