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

{% block content %}
<div class="page-header">
    <div>
        <h1 class="icon" id="domains">{{ record.hostname }}</h1>
        <p class="subtitle">
            <a href="{{ url_for('domains.domain_detail', domain_id=record.domain.id) }}">{{ record.domain.name }}</a>
        </p>
    </div>
    <div class="page-actions">
        {% if record.record_type in ['A', 'AAAA'] %}
        <form action="{{ url_for('domains.scan_dns_record', record_id=record.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>
        {% endif %}
    </div>
</div>

<div class="info-cards">
    <div class="info-card">
        <h4>Record Info</h4>
        <div class="info-item">
            <span class="info-label">Record Type:</span>
            <span class="badge badge-{% if record.record_type == 'A' %}success{% elif record.record_type == 'CNAME' %}info{% else %}secondary{% endif %}">
                {{ record.record_type }}
            </span>
        </div>
        <div class="info-item">
            <span class="info-label">Target:</span>
            <span>
                {% if record.record_type == 'CNAME' %}
                    {% if linked_record %}
                        <a href="{{ url_for('domains.dns_record_detail', record_id=linked_record.id) }}">{{ record.target }}</a>
                    {% else %}
                        {{ record.target }} <span class="text-muted">(external)</span>
                    {% endif %}
                {% else %}
                    {{ record.target }}
                {% endif %}
            </span>
        </div>
        <div class="info-item">
            <span class="info-label">Domain:</span>
            <span><a href="{{ url_for('domains.domain_detail', domain_id=record.domain.id) }}">{{ record.domain.name }}</a></span>
        </div>
        <div class="info-item">
            <span class="info-label">Last Seen:</span>
            <span>{{ record.last_seen.strftime('%Y-%m-%d %H:%M') if record.last_seen else 'Never' }}</span>
        </div>
    </div>
</div>

{% if record.record_type in ['A', 'AAAA'] %}
<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>
</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>
                    </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>
                    </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 %}
                        </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 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>
{% elif record.record_type == 'CNAME' %}
<div class="card">
    <div class="card-body">
        <p>This is a CNAME record pointing to <strong>{{ record.target }}</strong>.</p>
        {% if linked_record %}
        <p>To scan this hostname, scan the target record: 
            <a href="{{ url_for('domains.dns_record_detail', record_id=linked_record.id) }}">{{ record.target }}</a>
        </p>
        {% else %}
        <p class="text-muted">The target is an external service and cannot be scanned.</p>
        {% endif %}
    </div>
</div>
{% endif %}

<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'));
    document.getElementById(tabId).classList.add('active');
    btn.classList.add('active');
}

function showAcknowledgeModal(vulnId, vulnName) {
    document.getElementById('acknowledge-form').action = '/dns-vulnerabilities/' + vulnId + '/acknowledge';
    document.getElementById('acknowledge-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 = '/dns-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';
}

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
}
</script>

<!-- 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">
                <div class="form-group">
                    <label for="acknowledge-reason">Reason (optional)</label>
                    <textarea id="acknowledge-reason" name="reason" rows="3" 
                        placeholder="e.g., Risk accepted, compensating controls in place, etc."></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-warning">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</option>
                        <option value="mitigated">Mitigated</option>
                        <option value="false_positive">False Positive</option>
                        <option value="accepted">Risk Accepted</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="resolve-notes">Notes (optional)</label>
                    <textarea id="resolve-notes" name="notes" rows="2" 
                        placeholder="Additional details about the resolution"></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">Resolve</button>
            </div>
        </form>
    </div>
</div>

<style>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: var(--bg-primary);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-header h3 {
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}
.modal-close:hover {
    color: var(--text-primary);
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
</style>
{% endblock %}