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

{% block content %}
<div class="page-header">
    <div>
        <h1 class="icon" id="servers">{{ server.ip_address }}</h1>
        <p class="subtitle">
            <span class="editable-hostname" 
                  data-server-id="{{ server.id }}" 
                  onclick="editHostname(this)"
                  title="Click to edit hostname">{{ server.hostname or 'No hostname (click to set)' }}</span>
        </p>
    </div>
    <div class="page-actions">
        {% if vulnerabilities and server.ssh_enabled %}
        <form action="{{ url_for('vulnerabilities.verify_server_vulnerabilities', server_id=server.id) }}" method="POST" style="display: inline;">
            <button type="submit" class="btn btn-secondary" 
                onclick="return confirm('Verify all open vulnerabilities on this server? This will check if vulnerabilities have been patched.');">
                🔍 Verify Vulnerabilities
            </button>
        </form>
        {% endif %}
        <form action="{{ url_for('scanning.scan_server', server_id=server.id) }}" method="POST" style="display: inline;">
            <input type="hidden" name="ports" value="1-10000">
            <button type="submit" class="btn btn-primary">🎯 Scan Now</button>
        </form>
    </div>
</div>

<div class="info-cards">
    <div class="info-card">
        <h4>Server Info</h4>
        <div class="info-item">
            <span class="info-label">Category:</span>
            <span class="badge badge-{{ 'internal' if server.is_internal else 'external' }}">
                {{ 'Internal' if server.is_internal else 'External' }}
            </span>
        </div>
        <div class="info-item">
            <span class="info-label">Host Type:</span>
            <form action="{{ url_for('servers.update_server_host_type', server_id=server.id) }}" method="POST" style="display: inline;">
                <select name="host_type" onchange="this.form.submit()" style="padding: 0.25rem; font-size: 0.9rem;">
                    {% set host_type = server.host_type or 'server' %}
                    <option value="server" {% if host_type == 'server' %}selected{% endif %}>Server</option>
                    <option value="load-balancer" {% if host_type == 'load-balancer' %}selected{% endif %}>Load Balancer</option>
                    <option value="database" {% if host_type == 'database' %}selected{% endif %}>Database</option>
                    <option value="cache" {% if host_type == 'cache' %}selected{% endif %}>Cache</option>
                    <option value="managed" {% if host_type == 'managed' %}selected{% endif %}>Managed</option>
                    <option value="other" {% if host_type == 'other' %}selected{% endif %}>Other</option>
                </select>
            </form>
        </div>
        <div class="info-item">
            <span class="info-label">MAC:</span>
            <span>{{ server.mac_address or 'Unknown' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">OS:</span>
            <span>{{ server.os_detected or 'Unknown' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Last Seen:</span>
            <span>{{ server.last_seen.strftime('%Y-%m-%d %H:%M') if server.last_seen else 'Never' }}</span>
        </div>
        <div class="info-item">
            <span class="info-label">Tags:</span>
            <span class="editable-tags" 
                  data-server-id="{{ server.id }}" 
                  onclick="editTags(this)"
                  title="Click to edit tags">
                {% for tag in server.tags or [] %}
                <span class="tag">{{ tag }}</span>
                {% else %}
                <span class="text-muted">None (click to add)</span>
                {% endfor %}
            </span>
        </div>
    </div>
</div>

<div class="tabs">
    <button class="tab-btn active" onclick="showTab('tab-services', this)">Services ({{ services|length }})</button>
    <button class="tab-btn" onclick="showTab('tab-vulns', this)">Vulnerabilities ({{ vulnerabilities|length }})</button>
    <button class="tab-btn" onclick="showTab('tab-history', this)">Scan History</button>
    <button class="tab-btn" onclick="showTab('tab-settings', this)">SSH Settings</button>
</div>

<div id="tab-services" class="tab-content active">
    <div class="card">
        <div class="card-body">
            {% if services %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Port</th>
                        <th>Protocol</th>
                        <th>Service</th>
                        <th>Product</th>
                        <th>Version</th>
                        <th>State</th>
                        <th>Last Seen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for svc in services %}
                    <tr>
                        <td><strong>{{ svc.port }}</strong></td>
                        <td>{{ svc.protocol }}</td>
                        <td>{{ svc.service_name or '-' }}</td>
                        <td>{{ svc.product or '-' }}</td>
                        <td>{{ svc.version or '-' }}</td>
                        <td><span class="badge badge-{{ svc.state }}">{{ svc.state }}</span></td>
                        <td>{{ svc.last_seen.strftime('%Y-%m-%d') if svc.last_seen else '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="empty-state">No services discovered yet. Run a scan to detect services.</p>
            {% endif %}
        </div>
    </div>
</div>

<div id="tab-vulns" class="tab-content">
    <div class="card">
        <div class="card-body">
            {% if vulnerabilities %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Severity</th>
                        <th>CVE</th>
                        <th>Title</th>
                        <th>Service/Port</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for vuln in vulnerabilities %}
                    <tr class="{% if vuln.is_acknowledged %}acknowledged{% endif %}">
                        <td>
                            <span class="badge badge-{{ vuln.severity.value if vuln.severity else 'info' }}">
                                {{ vuln.severity.value if vuln.severity else 'info' }}
                            </span>
                        </td>
                        <td>
                            {% if vuln.cve_id %}
                            <a href="{{ url_for('cve.cve_detail', cve_id=vuln.cve_id) }}">
                                {{ vuln.cve_id }}
                            </a>
                            {% else %}
                            -
                            {% endif %}
                        </td>
                        <td>
                            <strong>{{ vuln.title }}</strong>
                            {% if vuln.description %}
                            <p class="text-muted">{{ vuln.description[:100] }}...</p>
                            {% endif %}
                            {% if vuln.verified_status %}
                            <p class="text-muted" style="font-size: 0.85em;">
                                <span class="badge badge-{% if vuln.verified_status == 'patched' %}success{% elif vuln.verified_status == 'vulnerable' %}danger{% else %}secondary{% endif %}">
                                    Verified: {{ vuln.verified_status }}
                                </span>
                                {% if vuln.installed_version %}
                                (v{{ vuln.installed_version }})
                                {% endif %}
                            </p>
                            {% endif %}
                        </td>
                        <td>{{ vuln.affected_service or '-' }} {% if vuln.affected_port %}:{{ vuln.affected_port }}{% endif %}</td>
                        <td>
                            {% if vuln.is_resolved %}
                            <span class="badge badge-success">Resolved</span>
                            {% elif vuln.is_acknowledged %}
                            <span class="badge badge-warning">Acknowledged</span>
                            {% else %}
                            <span class="badge badge-danger">Open</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if not vuln.is_resolved %}
                            {% if server.ssh_enabled %}
                            <form action="{{ url_for('vulnerabilities.verify_server_vulnerabilities', server_id=server.id) }}" method="POST" style="display: inline;">
                                <button type="submit" class="btn btn-sm btn-info" title="SSH verify package version">Verify</button>
                            </form>
                            {% endif %}
                            {% if not vuln.is_acknowledged %}
                            <button type="button" class="btn btn-sm btn-secondary"
                                onclick="showAcknowledgeModal({{ vuln.id }}, '{{ vuln.cve_id or vuln.title | e }}')">Acknowledge</button>
                            {% endif %}
                            <button type="button" class="btn btn-sm btn-success"
                                onclick="showResolveModal({{ vuln.id }}, '{{ vuln.cve_id or vuln.title | e }}')">Resolve</button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="empty-state">No vulnerabilities found 🎉</p>
            {% endif %}
        </div>
    </div>
</div>

<div id="tab-history" class="tab-content">
    <div class="card">
        <div class="card-body">
            {% if scans %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Services</th>
                        <th>Vulnerabilities</th>
                        <th>Duration</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scan in scans %}
                    <tr>
                        <td>{{ scan.created_at.strftime('%Y-%m-%d %H:%M') if scan.created_at else '-' }}</td>
                        <td>
                            {% set type_labels = {
                                'server': 'Server',
                                'server_auth': 'Server (Auth)',
                                'domain': 'Domain',
                                'discovery': 'Discovery'
                            } %}
                            {{ type_labels.get(scan.scan_type.value, scan.scan_type.value) }}
                        </td>
                        <td>
                            {% set status_colors = {
                                'completed': 'success',
                                'running': 'warning',
                                'failed': 'danger',
                                'pending': 'secondary'
                            } %}
                            <span class="badge badge-{{ status_colors.get(scan.status.value, 'secondary') }}">
                                {{ scan.status.value|capitalize }}
                            </span>
                        </td>
                        <td>{{ scan.services_found if scan.services_found is not none else '-' }}</td>
                        <td>{{ scan.vulnerabilities_found if scan.vulnerabilities_found is not none else '-' }}</td>
                        <td>
                            {% if scan.duration_seconds is not none and scan.duration_seconds >= 0 %}
                                {{ scan.duration_seconds }}s
                            {% elif scan.status.value == 'running' %}
                                <em>In progress...</em>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="empty-state">No scan history for this server.</p>
            {% endif %}
        </div>
    </div>
</div>

<div id="tab-settings" class="tab-content">
    <div class="card">
        <div class="card-header">
            <h2>SSH Authentication</h2>
        </div>
        <div class="card-body">
            <p class="text-muted" style="margin-bottom: 1rem;">
                Enable SSH authentication to get accurate package version information and detect patched vulnerabilities.
            </p>
            
            <form action="{{ url_for('servers.update_server_ssh', server_id=server.id) }}" method="POST">
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="ssh_enabled" {% if server.ssh_enabled %}checked{% endif %}>
                        Enable authenticated scanning for this server
                    </label>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="ssh_username">SSH Username</label>
                        <input type="text" id="ssh_username" name="ssh_username" 
                            value="{{ server.ssh_username or 'ubuntu' }}" placeholder="ubuntu">
                    </div>
                    <div class="form-group">
                        <label for="ssh_key_id">SSH Key</label>
                        <select id="ssh_key_id" name="ssh_key_id">
                            <option value="">Use default key</option>
                            {% for key in ssh_keys %}
                            <option value="{{ key.id }}" {% if server.ssh_key_id == key.id %}selected{% endif %}>
                                {{ key.name }} {% if key.is_default %}(default){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">Save SSH Settings</button>
                
                {% if server.ssh_enabled %}
                <button type="button" class="btn btn-secondary" onclick="testSSH()">Test Connection</button>
                {% endif %}
            </form>
            
            <div id="ssh-test-result" style="margin-top: 1rem; display: none;"></div>
        </div>
    </div>
</div>

<script>
function showTab(tabId, btn) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
    
    var tabContent = document.getElementById(tabId);
    if (tabContent) {
        tabContent.classList.add('active');
    }
    
    if (btn) {
        btn.classList.add('active');
    }
}

// Handle hash-based tab switching on page load
document.addEventListener('DOMContentLoaded', function() {
    var hash = window.location.hash.substring(1); // Remove the #
    if (hash && document.getElementById(hash)) {
        showTab(hash);
    }
});

function testSSH() {
    var resultDiv = document.getElementById('ssh-test-result');
    resultDiv.style.display = 'block';
    resultDiv.innerHTML = '<span class="text-muted">Testing SSH connection...</span>';
    
    fetch('{{ url_for("servers.test_server_ssh", server_id=server.id) }}', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = '<span class="badge badge-success">✓ Connection successful</span> ' + 
                    '<br><small>' + (data.os_info || '') + '</small>';
            } else {
                resultDiv.innerHTML = '<span class="badge badge-danger">✗ Connection failed</span> ' +
                    '<br><small class="text-muted">' + data.error + '</small>';
            }
        })
        .catch(err => {
            resultDiv.innerHTML = '<span class="badge badge-danger">✗ Error</span> ' + err;
        });
}

function showAcknowledgeModal(vulnId, vulnName) {
    document.getElementById('ack-vuln-name').textContent = vulnName;
    document.getElementById('acknowledge-form').action = '/vulnerabilities/' + vulnId + '/acknowledge';
    document.getElementById('ack-reason').value = '';
    document.getElementById('acknowledge-modal').style.display = 'flex';
}

function showResolveModal(vulnId, vulnName) {
    document.getElementById('resolve-vuln-name').textContent = vulnName;
    document.getElementById('resolve-form').action = '/vulnerabilities/' + vulnId + '/resolve';
    document.getElementById('resolve-reason').value = 'patched';
    document.getElementById('resolve-notes').value = '';
    document.getElementById('resolve-modal').style.display = 'flex';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal').forEach(m => m.style.display = 'none');
    }
});

function editHostname(el) {
    var serverId = el.dataset.serverId;
    var currentValue = el.textContent.trim();
    if (currentValue === 'No hostname (click to set)') currentValue = '';
    
    var input = document.createElement('input');
    input.type = 'text';
    input.value = currentValue;
    input.className = 'hostname-input';
    input.style.cssText = 'padding: 4px 8px; font-size: 1rem; width: 200px;';
    
    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 || 'No hostname (click to set)';
            el.style.display = '';
            input.remove();
        }
    };
    
    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 || 'No hostname (click to set)';
        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();
    });
}

function editTags(el) {
    var serverId = el.dataset.serverId;
    // Extract current tags from tag spans
    var tagSpans = el.querySelectorAll('.tag');
    var currentTags = Array.from(tagSpans).map(function(t) { return t.textContent.trim(); });
    var currentValue = currentTags.join(', ');
    
    var input = document.createElement('input');
    input.type = 'text';
    input.value = currentValue;
    input.className = 'tags-input';
    input.placeholder = 'web, production, api';
    input.style.cssText = 'padding: 4px 8px; font-size: 0.9rem; width: 200px;';
    
    input.onblur = function() {
        saveTags(serverId, input.value, el);
    };
    input.onkeydown = function(e) {
        if (e.key === 'Enter') {
            input.blur();
        } else if (e.key === 'Escape') {
            el.style.display = '';
            input.remove();
        }
    };
    
    el.style.display = 'none';
    el.parentNode.insertBefore(input, el.nextSibling);
    input.focus();
    input.select();
}

function saveTags(serverId, newValue, originalEl) {
    fetch('/servers/' + serverId + '/tags', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'tags=' + encodeURIComponent(newValue)
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        // Rebuild the tags display
        originalEl.innerHTML = '';
        if (data.tags && data.tags.length > 0) {
            data.tags.forEach(function(tag) {
                var span = document.createElement('span');
                span.className = 'tag';
                span.textContent = tag;
                originalEl.appendChild(span);
            });
        } else {
            var span = document.createElement('span');
            span.className = 'text-muted';
            span.textContent = 'None (click to add)';
            originalEl.appendChild(span);
        }
        originalEl.style.display = '';
        var input = originalEl.parentNode.querySelector('.tags-input');
        if (input) input.remove();
    }).catch(function() {
        originalEl.style.display = '';
        var input = originalEl.parentNode.querySelector('.tags-input');
        if (input) input.remove();
    });
}
</script>

<style>
.editable-hostname, .editable-tags {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px dashed transparent;
}
.editable-hostname:hover, .editable-tags:hover {
    background: var(--bg-tertiary);
    border-color: var(--border);
}
</style>

<!-- Acknowledge Modal -->
<div id="acknowledge-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Acknowledge Vulnerability</h3>
            <button type="button" class="modal-close" onclick="closeModal('acknowledge-modal')">&times;</button>
        </div>
        <form id="acknowledge-form" method="POST">
            <div class="modal-body">
                <p>Acknowledging: <strong id="ack-vuln-name"></strong></p>
                <div class="form-group">
                    <label for="ack-reason">Reason / Notes</label>
                    <textarea id="ack-reason" name="reason" rows="3" 
                        placeholder="e.g., Reviewed - low risk in our environment, will patch in next maintenance window"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('acknowledge-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Acknowledge</button>
            </div>
        </form>
    </div>
</div>

<!-- Resolve Modal -->
<div id="resolve-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Resolve Vulnerability</h3>
            <button type="button" class="modal-close" onclick="closeModal('resolve-modal')">&times;</button>
        </div>
        <form id="resolve-form" method="POST">
            <div class="modal-body">
                <p>Resolving: <strong id="resolve-vuln-name"></strong></p>
                <div class="form-group">
                    <label for="resolve-reason">Resolution Reason</label>
                    <select id="resolve-reason" name="reason">
                        <option value="patched">Patched - Applied security update</option>
                        <option value="mitigated">Mitigated - Applied workaround</option>
                        <option value="false_positive">False Positive - Not actually vulnerable</option>
                        <option value="accepted_risk">Accepted Risk - Will not fix</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="resolve-notes">Notes (optional)</label>
                    <textarea id="resolve-notes" name="notes" rows="2" 
                        placeholder="e.g., Updated nginx to 1.24.0"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('resolve-modal')">Cancel</button>
                <button type="submit" class="btn btn-success">Mark Resolved</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}