{% extends "base.html" %}
{% block title %}{{ conn.name }} - Databases{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="databases">{{ conn.name }}</h1>
    <p class="subtitle">
        <span class="badge badge-info">{{ conn.db_type|upper }}</span>
        <code>{{ conn.host }}:{{ conn.port }}/{{ conn.database_name }}</code>
        {% if tunnel_server %}
        <small class="text-muted">(via {{ tunnel_server.hostname or tunnel_server.ip_address }})</small>
        {% endif %}
    </p>
    <div class="header-actions">
        <a href="{{ url_for('databases.index') }}" class="btn btn-secondary">← Back</a>
        <a href="{{ url_for('databases.edit_connection', connection_id=conn.id) }}" class="btn btn-secondary">✏️ Edit</a>
        <form action="{{ url_for('databases.collect_metrics', connection_id=conn.id) }}" method="POST" style="display: inline;">
            <button type="submit" class="btn btn-primary">🔄 Collect Metrics</button>
        </form>
        <form action="{{ url_for('databases.run_audit', connection_id=conn.id) }}" method="POST" style="display: inline;">
            <button type="submit" class="btn btn-secondary">🔒 Run Security Audit</button>
        </form>
    </div>
</div>

{% if alerts %}
<div class="card" style="border-left: 4px solid var(--danger);">
    <div class="card-header">
        <h2>🚨 Active Alerts</h2>
    </div>
    <div class="card-body">
        {% for alert in alerts %}
        <div class="alert alert-{{ 'danger' if alert.severity == 'critical' else 'warning' }}">
            <strong>{{ alert.severity|upper }}:</strong> {{ alert.message }}
            <small class="text-muted">({{ alert.triggered_at.strftime('%Y-%m-%d %H:%M') }})</small>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if snapshot %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Status</div>
        <div class="stat-value">
            <span class="badge badge-{{ 'success' if snapshot.status == 'success' else 'danger' }}" style="font-size: 1rem;">
                {{ snapshot.status|upper }}
            </span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Latency</div>
        <div class="stat-value">{{ snapshot.latency_ms or '-' }} ms</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Connections</div>
        <div class="stat-value">
            {% if snapshot.max_connections %}
            {% set pct = (snapshot.active_connections / snapshot.max_connections * 100)|round(0)|int %}
            <span class="{% if pct > 80 %}text-warning{% endif %}{% if pct > 95 %}text-danger{% endif %}">
                {{ snapshot.active_connections }} / {{ snapshot.max_connections }}
            </span>
            {% else %}
            {{ snapshot.active_connections or '-' }}
            {% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Database Size</div>
        <div class="stat-value">
            {% if snapshot.database_size_bytes %}
            {{ (snapshot.database_size_bytes / 1073741824)|round(2) }} GB
            {% else %}
            -
            {% endif %}
        </div>
    </div>
</div>

{% if snapshot.status == 'success' %}
<div class="card">
    <div class="card-header">
        <h2>Performance Metrics</h2>
    </div>
    <div class="card-body">
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Version:</span>
                <span>{{ snapshot.version or '-' }}</span>
            </div>
            {% if snapshot.metrics %}
            <div class="info-item">
                <span class="info-label">Cache Hit Ratio:</span>
                <span class="{% if snapshot.metrics.cache_hit_ratio and snapshot.metrics.cache_hit_ratio < 90 %}text-warning{% endif %}{% if snapshot.metrics.cache_hit_ratio and snapshot.metrics.cache_hit_ratio < 80 %}text-danger{% endif %}">
                    {{ snapshot.metrics.cache_hit_ratio|round(1) if snapshot.metrics.cache_hit_ratio else '-' }}%
                </span>
            </div>
            {% if snapshot.metrics.deadlocks is defined %}
            <div class="info-item">
                <span class="info-label">Deadlocks:</span>
                <span>{{ snapshot.metrics.deadlocks }}</span>
            </div>
            {% endif %}
            {% if snapshot.metrics.slow_queries is defined %}
            <div class="info-item">
                <span class="info-label">Slow Queries:</span>
                <span>{{ snapshot.metrics.slow_queries }}</span>
            </div>
            {% endif %}
            {% endif %}
            <div class="info-item">
                <span class="info-label">Last Collected:</span>
                <span>{{ snapshot.collected_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
        </div>
    </div>
</div>

{% if snapshot.metrics and snapshot.metrics.long_running_queries %}
<div class="card">
    <div class="card-header">
        <h2>⏱️ Long Running Queries</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>PID</th>
                    <th>User</th>
                    <th>Duration</th>
                    <th>Query</th>
                </tr>
            </thead>
            <tbody>
                {% for q in snapshot.metrics.long_running_queries %}
                <tr>
                    <td>{{ q.pid }}</td>
                    <td>{{ q.username or '-' }}</td>
                    <td>{{ (q.duration_ms / 1000)|round(1) }}s</td>
                    <td><code class="query-text">{{ (q.query or '-')[:200] }}{% if q.query and q.query|length > 200 %}...{% endif %}</code></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% if snapshot.metrics and snapshot.metrics.blocking_queries %}
<div class="card">
    <div class="card-header">
        <h2>🔒 Blocking Queries</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Blocking PID</th>
                    <th>Blocking Query</th>
                    <th>Blocked PID</th>
                    <th>Blocked Query</th>
                </tr>
            </thead>
            <tbody>
                {% for b in snapshot.metrics.blocking_queries %}
                <tr>
                    <td>{{ b.blocking_pid }}</td>
                    <td><code class="query-text">{{ (b.blocking_query or '-')[:150] }}</code></td>
                    <td>{{ b.blocked_pid }}</td>
                    <td><code class="query-text">{{ (b.blocked_query or '-')[:150] }}</code></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% if snapshot.metrics and snapshot.metrics.top_cpu_queries %}
<div class="card">
    <div class="card-header">
        <h2>🔥 Top CPU Queries</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Total CPU</th>
                    <th>Executions</th>
                    <th>Avg CPU</th>
                    <th>Query</th>
                </tr>
            </thead>
            <tbody>
                {% for q in snapshot.metrics.top_cpu_queries %}
                <tr>
                    <td>{{ (q.total_cpu_ms / 1000)|round(1) }}s</td>
                    <td>{{ q.execution_count }}</td>
                    <td>{{ (q.avg_cpu_ms or 0)|round(0)|int }}ms</td>
                    <td><code class="query-text">{{ (q.query or '-')[:200] }}{% if q.query and q.query|length > 200 %}...{% endif %}</code></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% endif %}{# end if snapshot.status == success #}

{% if snapshot.error_message %}
<div class="card">
    <div class="card-header">
        <h2>Error</h2>
    </div>
    <div class="card-body">
        <div class="alert alert-danger">
            {{ snapshot.error_message }}
        </div>
    </div>
</div>
{% endif %}

{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>No metrics collected yet.</p>
            <form action="{{ url_for('databases.collect_metrics', connection_id=conn.id) }}" method="POST">
                <button type="submit" class="btn btn-primary">Collect Metrics Now</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% if audit %}
<div class="card">
    <div class="card-header">
        <h2>🔒 Security Audit Summary</h2>
        <a href="{{ url_for('databases.audit_detail', connection_id=conn.id, audit_id=audit.id) }}" class="btn btn-sm btn-secondary">View Full Audit</a>
    </div>
    <div class="card-body">
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Last Audit:</span>
                <span>{{ audit.audited_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Users:</span>
                <span>{{ audit.user_count }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Issues Found:</span>
                <span class="{% if audit.issue_count > 0 %}text-warning{% endif %}{% if audit.critical_issues > 0 %}text-danger{% endif %}">
                    {{ audit.issue_count }} ({{ audit.critical_issues }} critical)
                </span>
            </div>
        </div>
        
        {% if audit.results and audit.results.issues %}
        <h4 style="margin-top: 1rem;">Issues</h4>
        <table class="table">
            <tbody>
                {% for issue in audit.results.issues[:5] %}
                <tr>
                    <td style="width: 100px;">
                        <span class="badge badge-{{ 'critical' if issue.severity == 'critical' else 'warning' if issue.severity == 'warning' else 'info' }}">
                            {{ issue.severity|upper }}
                        </span>
                    </td>
                    <td>{{ issue.message }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if audit.results.issues|length > 5 %}
        <p class="text-muted" style="margin-top: 0.5rem;">
            <a href="{{ url_for('databases.audit_detail', connection_id=conn.id, audit_id=audit.id) }}">
                View all {{ audit.results.issues|length }} issues →
            </a>
        </p>
        {% endif %}
        {% endif %}
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2>Connection Test</h2>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-secondary" onclick="testConnection()">🔌 Test Connection</button>
        <div id="test-result" style="margin-top: 1rem;"></div>
    </div>
</div>

<script>
async function testConnection() {
    const resultDiv = document.getElementById('test-result');
    resultDiv.innerHTML = '<p>Testing connection...</p>';
    
    try {
        const response = await fetch('{{ url_for("databases.test_connection", connection_id=conn.id) }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
        });
        const result = await response.json();
        
        if (result.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <strong>✓ Connection successful!</strong><br>
                    Latency: ${result.latency_ms}ms<br>
                    Version: ${result.version}
                </div>
            `;
        } else {
            // Preserve newlines in error messages
            const errorHtml = (result.error || result.message || 'Unknown error')
                .replace(/\n/g, '<br>')
                .replace(/    /g, '&nbsp;&nbsp;&nbsp;&nbsp;');
            resultDiv.innerHTML = `
                <div class="alert alert-danger" style="text-align: left;">
                    <strong>✗ Connection failed</strong><br>
                    <pre style="margin: 0.5rem 0 0 0; white-space: pre-wrap; font-size: 0.85rem;">${result.error || result.message}</pre>
                </div>
            `;
        }
    } catch (e) {
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <strong>✗ Request failed</strong><br>
                ${e.message}
            </div>
        `;
    }
}
</script>

<style>
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.query-text {
    font-size: 0.8rem;
    word-break: break-all;
    white-space: pre-wrap;
    max-width: 400px;
    display: block;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid var(--success);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--danger);
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--warning);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
{% endblock %}