{% extends "base.html" %}
{% block title %}Servers - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="servers">Servers</h1>
    <div class="page-actions">
        <button onclick="toggleAddForm()" class="btn btn-primary">+ Add Server</button>
    </div>
</div>

<div id="add-server-form" class="card" style="display: none; margin-bottom: 1rem;">
    <div class="card-header">
        <h3>Add Server Manually</h3>
    </div>
    <div class="card-body">
        <form action="{{ url_for('servers.server_add') }}" method="POST" class="form-inline">
            <div class="form-group">
                <label for="ip_address">IP Address *</label>
                <input type="text" id="ip_address" name="ip_address" required placeholder="10.0.1.50">
            </div>
            <div class="form-group">
                <label for="hostname">Hostname</label>
                <input type="text" id="hostname" name="hostname" placeholder="web-server-01">
            </div>
            <div class="form-group">
                <label for="tags">Tags (comma-separated)</label>
                <input type="text" id="tags" name="tags" placeholder="web, production">
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_internal" checked> Internal Server
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Add Server</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        {% if servers %}
        <form id="batch-scan-form" action="{{ url_for('scanning.scan_selected_servers') }}" method="POST">
            <div class="batch-controls" style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
                <label class="checkbox-label">
                    <input type="checkbox" id="select-all" onchange="toggleSelectAll()"> Select All
                </label>
                <span id="selected-count" class="text-muted">(0 selected)</span>
                <div style="margin-left: auto; display: flex; gap: 0.5rem; align-items: center;">
                    <label for="batch-ports">Port Range</label>
                    <select id="batch-ports" name="ports">
                        <option value="1-1000">Top 1000 ports (fast)</option>
                        <option value="1-10000" selected>Ports 1-10000 (moderate)</option>
                        <option value="1-65535">All ports (slow)</option>
                        <option value="22,80,443,3306,5432">Common services only</option>
                    </select>
                </div>
            </div>
            
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th>IP Address</th>
                        <th>Hostname</th>
                        <th>Host Type</th>
                        <th>OS</th>
                        <th>Vulns</th>
                        <th>SSH</th>
                        <th>Scan</th>
                        <th>Last Seen</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for server in servers %}
                    <tr class="{% if not server.is_active %}inactive{% endif %}" data-subnet="{{ server.ip_address.rsplit('.', 1)[0] }}">
                        <td>
                            {% if server.host_type == 'server' or server.host_type is none %}
                            <input type="checkbox" name="server_ids" value="{{ server.id }}" 
                                class="server-checkbox" onchange="updateSelectedCount()">
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('servers.server_detail', server_id=server.id) }}">
                                {{ server.ip_address }}
                            </a>
                        </td>
                        <td>
                            <span class="editable-hostname" 
                                  data-server-id="{{ server.id }}" 
                                  onclick="editHostname(this)"
                                  title="Click to edit">{{ server.hostname or '-' }}</span>
                        </td>
                        <td>
                            {% set host_type = server.host_type or 'server' %}
                            {% set type_colors = {
                                'server': 'success',
                                'load-balancer': 'warning',
                                'database': 'info',
                                'cache': 'info',
                                'managed': 'secondary',
                                'other': 'secondary'
                            } %}
                            {% set type_labels = {
                                'server': 'Server',
                                'load-balancer': 'Load Balancer',
                                'database': 'Database',
                                'cache': 'Cache',
                                'managed': 'Managed',
                                'other': 'Other'
                            } %}
                            <span class="badge badge-{{ type_colors.get(host_type, 'secondary') }}">
                                {{ type_labels.get(host_type, host_type) }}
                            </span>
                        </td>
                        <td>{{ server.os_detected[:30] if server.os_detected else '-' }}</td>
                        <td>
                            {% set vuln_count = server.vulnerabilities|rejectattr('is_resolved')|list|length %}
                            {% if vuln_count > 0 %}
                            <a href="{{ url_for('servers.server_detail', server_id=server.id) }}#tab-vulns" 
                               class="badge badge-danger" title="View vulnerabilities">{{ vuln_count }}</a>
                            {% else %}
                            <span class="badge badge-success">0</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('servers.server_detail', server_id=server.id) }}#tab-settings" 
                               class="badge badge-{{ 'success' if server.ssh_enabled else 'secondary' }}"
                               title="{% if server.ssh_enabled %}SSH enabled{% if server.ssh_key %}: {{ server.ssh_key.name }}{% else %}: Default key{% endif %}{% else %}SSH not configured{% endif %}">
                                {% if server.ssh_enabled %}
                                    ✓ {{ server.ssh_key.name if server.ssh_key else 'Default' }}
                                {% else %}
                                    ✗ Off
                                {% endif %}
                            </a>
                        </td>
                        <td>
                            <form action="{{ url_for('servers.server_toggle_scan', server_id=server.id) }}" method="POST" style="display: inline;">
                                <button type="submit" class="btn btn-sm btn-{{ 'success' if server.scan_enabled else 'secondary' }}">
                                    {{ '✓' if server.scan_enabled else '✗' }}
                                </button>
                            </form>
                        </td>
                        <td>{{ server.last_seen.strftime('%Y-%m-%d %H:%M') if server.last_seen else 'Never' }}</td>
                        <td>
                            <a href="{{ url_for('servers.server_detail', server_id=server.id) }}" class="btn btn-sm">View</a>
                            <button type="button" class="btn btn-sm btn-primary" onclick="scanSingle({{ server.id }})">Scan</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            <div class="batch-actions" style="margin-top: 1rem;">
                <button type="submit" class="btn btn-primary" id="batch-scan-btn" disabled formaction="{{ url_for('scanning.scan_selected_servers') }}">
                    🎯 Scan Selected
                </button>
                <button type="submit" class="btn btn-primary" id="batch-verify-btn" disabled formaction="{{ url_for('vulnerabilities.verify_selected_servers') }}">
                    🔍 Verify Selected
                </button>
            </div>
        </form>
        {% else %}
        <div class="empty-state">
            <p>No servers found.</p>
            <p><a href="{{ url_for('scanning.discovery_page') }}">Run a discovery scan</a> or add servers manually.</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function toggleAddForm() {
    var form = document.getElementById('add-server-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}

function toggleSelectAll() {
    var selectAll = document.getElementById('select-all');
    var checkboxes = document.querySelectorAll('.server-checkbox');
    checkboxes.forEach(cb => cb.checked = selectAll.checked);
    updateSelectedCount();
}

function updateSelectedCount() {
    var checkboxes = document.querySelectorAll('.server-checkbox:checked');
    var count = checkboxes.length;
    document.getElementById('selected-count').textContent = '(' + count + ' selected)';
    document.getElementById('batch-scan-btn').disabled = count === 0;
    document.getElementById('batch-verify-btn').disabled = count === 0;
    
    // Update select-all checkbox state
    var allCheckboxes = document.querySelectorAll('.server-checkbox');
    var selectAll = document.getElementById('select-all');
    selectAll.checked = count > 0 && count === allCheckboxes.length;
    selectAll.indeterminate = count > 0 && count < allCheckboxes.length;
}

function scanSingle(serverId) {
    var ports = document.getElementById('batch-ports').value;
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '/scan/' + serverId;
    
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'ports';
    input.value = ports;
    form.appendChild(input);
    
    document.body.appendChild(form);
    form.submit();
}

function editHostname(el) {
    var serverId = el.dataset.serverId;
    var currentValue = el.textContent.trim();
    if (currentValue === '-') currentValue = '';
    
    var input = document.createElement('input');
    input.type = 'text';
    input.value = currentValue;
    input.className = 'hostname-input';
    input.style.cssText = 'width: 120px; padding: 2px 4px; font-size: 0.9em;';
    
    input.onblur = function() {
        saveHostname(serverId, input.value, el);
    };
    input.onkeydown = function(e) {
        if (e.key === 'Enter') {
            input.blur();
        } else if (e.key === 'Escape') {
            el.textContent = currentValue || '-';
            el.style.display = '';
        }
    };
    
    el.style.display = 'none';
    el.parentNode.insertBefore(input, el.nextSibling);
    input.focus();
    input.select();
}

function saveHostname(serverId, newValue, originalEl) {
    fetch('/servers/' + serverId + '/hostname', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'hostname=' + encodeURIComponent(newValue)
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        originalEl.textContent = data.hostname || '-';
        originalEl.style.display = '';
        var input = originalEl.parentNode.querySelector('.hostname-input');
        if (input) input.remove();
    }).catch(function() {
        originalEl.style.display = '';
        var input = originalEl.parentNode.querySelector('.hostname-input');
        if (input) input.remove();
    });
}
</script>

<style>
.editable-hostname {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.editable-hostname:hover {
    background: var(--bg-tertiary);
}
</style>
{% endblock %}