{% extends "base.html" %}

{% block title %}DeployHub - Servidores Conectados{% endblock %}
{% block header_title %}Servidores VPS{% endblock %}

{% block header_actions %}
<button class="btn btn-primary" onclick="openModal('modal-add-server')">
    <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
    <span>+ ADICIONAR SERVIDOR</span>
</button>
{% endblock %}

{% block content %}
<div class="grid-cards">
    {% for server in servers %}
    <div class="card">
        <div class="card-header">
            <div class="card-title">{{ server.name }}</div>
            {% if server.status == 'online' %}
                <span class="badge badge-online">Online</span>
            {% else %}
                <span class="badge badge-offline">Offline</span>
            {% endif %}
        </div>

        <div class="server-host" style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 16px;">
            <div><strong>Hostname:</strong> <span style="color: #fff;">{{ server.hostname }}</span></div>
            <div><strong>IPv4 Atual:</strong> <span style="color: var(--primary); font-weight: 700;">{{ server.ip }}</span></div>
            {% if server.ipv6 %}
                <div><strong>IPv6:</strong> <span style="color: #93c5fd; font-size: 11px;">{{ server.ipv6 }}</span></div>
            {% endif %}
            <div><strong>Sistema:</strong> {{ server.os_info }}</div>
        </div>

        <div class="metrics-list">
            <!-- CPU Gauge -->
            <div class="metric-item">
                <div class="metric-label-val">
                    <span>Uso de CPU ({{ server.cpu_cores }} vCPUs)</span>
                    <span><strong>{{ server.cpu_usage_pct }}%</strong></span>
                </div>
                <div class="progress-bar-bg">
                    <div class="progress-bar-fill {% if server.cpu_usage_pct > 80 %}danger{% elif server.cpu_usage_pct > 50 %}warning{% endif %}" style="width: {{ server.cpu_usage_pct }}%;"></div>
                </div>
            </div>

            <!-- RAM Gauge -->
            <div class="metric-item">
                <div class="metric-label-val">
                    <span>Memória RAM</span>
                    <span><strong>{{ server.used_ram_gb }} / {{ server.total_ram_gb }} GB</strong></span>
                </div>
                <div class="progress-bar-bg">
                    {% set ram_pct = (server.used_ram_gb / server.total_ram_gb * 100) if server.total_ram_gb > 0 else 0 %}
                    <div class="progress-bar-fill {% if ram_pct > 85 %}danger{% elif ram_pct > 65 %}warning{% endif %}" style="width: {{ ram_pct }}%;"></div>
                </div>
            </div>

            <!-- Disk Gauge -->
            <div class="metric-item">
                <div class="metric-label-val">
                    <span>Armazenamento</span>
                    <span><strong>{{ server.used_disk_gb }} / {{ server.total_disk_gb }} GB</strong></span>
                </div>
                <div class="progress-bar-bg">
                    {% set disk_pct = (server.used_disk_gb / server.total_disk_gb * 100) if server.total_disk_gb > 0 else 0 %}
                    <div class="progress-bar-fill" style="width: {{ disk_pct }}%;"></div>
                </div>
            </div>
        </div>

        <!-- Listening Ports Summary -->
        {% if server.listening_ports %}
        <div style="margin-bottom: 16px;">
            <div style="font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px;">Portas Ativas no VPS</div>
            <div style="display: flex; flex-wrap: wrap; gap: 6px;">
                {% for p in server.listening_ports %}
                    <span style="font-size: 11px; font-family: monospace; background: rgba(59, 130, 246, 0.15); color: #93c5fd; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(59, 130, 246, 0.3);" title="{{ p.app }}">
                        :{{ p.port }}
                    </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 16px;">
            Aplicações ativas: <strong style="color: #fff;">{{ server.app_count }}</strong>
        </div>

        <div class="card-footer">
            <a href="{{ url_for('server_detail', server_id=server.id) }}" class="btn btn-primary" style="flex: 1; justify-content: center;">ABRIR</a>
            <button class="btn btn-secondary" onclick="runDeepScan({{ server.id }})">ESCANEAR</button>
            <a href="{{ url_for('security_page') }}" class="btn btn-secondary">SSH KEY</a>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Modal Add Server -->
<div class="modal-overlay" id="modal-add-server">
    <div class="modal-card">
        <h2 style="font-size: 22px; font-weight: 700; margin-bottom: 20px;">Cadastrar Novo Servidor VPS</h2>
        <form action="{{ url_for('add_server') }}" method="POST">
            <div class="form-group">
                <label class="form-label">Nome do Servidor</label>
                <input type="text" name="name" class="form-control" placeholder="ex: UNITY, VPS Projeto 2" required>
            </div>
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px;">
                <div class="form-group">
                    <label class="form-label">Hostname / Domínio</label>
                    <input type="text" name="hostname" class="form-control" placeholder="ex: srv1658324.hstgr.cloud" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Porta SSH</label>
                    <input type="number" name="ssh_port" class="form-control" value="22" required>
                </div>
            </div>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                <div class="form-group">
                    <label class="form-label">Endereço IPv4</label>
                    <input type="text" name="ip" class="form-control" placeholder="ex: 31.97.147.114" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Usuário SSH</label>
                    <input type="text" name="ssh_user" class="form-control" value="root" required>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Tipo de Autenticação</label>
                <select name="auth_type" class="form-control">
                    <option value="key">Chave SSH (Recomendado)</option>
                    <option value="password">Senha Fixa</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Senha SSH (se aplicável)</label>
                <input type="password" name="password" class="form-control" placeholder="Preencha se usar autenticação por senha">
            </div>
            <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px;">
                <button type="button" class="btn btn-secondary" onclick="closeModal('modal-add-server')">Cancelar</button>
                <button type="submit" class="btn btn-primary">Cadastrar Servidor</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}