{% extends "base.html" %}

{% block content %}
<section>
    <div class="flex items-center justify-between" style="margin-bottom: var(--space-lg);">
        <h1 class="section-title" style="margin-bottom:0;">
            <span class="icon">🖥</span>
            {{ _('nav_servers') }}
        </h1>
        <button class="btn btn-primary" onclick="openModal('addServerModal')">
            <span>＋</span> {{ _('add_server') }}
        </button>
    </div>

    {% if servers %}
    <div class="server-grid" id="serverGrid">
        {% for server in servers %}
        <div class="card card-hover server-card" id="server-{{ loop.index0 }}" data-idx="{{ loop.index0 }}"
            data-name="{{ server.name }}" data-host="{{ server.host }}" data-port="{{ server.ssh_port }}"
            data-username="{{ server.username }}" data-auth="{{ 'key' if server.private_key else 'password' }}"
            draggable="true">
            <div class="server-meta">
                <div class="server-icon">🖥</div>
                <div style="min-width: 0; flex: 1;">
                    <div class="server-name">
                        <span class="ping-dot ping-pending" id="ping-{{ loop.index0 }}"
                            title="{{ _('ping_checking') }}"></span>
                        <span>{{ server.name }}</span>
                        <span class="ping-ms text-muted" id="ping-ms-{{ loop.index0 }}"></span>
                    </div>
                    <div class="server-host">{{ server.host }}:{{ server.ssh_port }}</div>
                </div>
            </div>

            <div class="server-protocols" id="server-protocols-{{ loop.index0 }}">
                {% if server.protocols %}
                {% for proto_key, proto_val in server.protocols.items() %}
                {% if proto_val.get('installed') %}
                <span class="badge badge-success">
                    <span class="badge-dot"></span>
                    {{ 'AWG' if proto_key == 'awg' else ('AWG-Legacy' if proto_key == 'awg_legacy' else ('Xray' if
                    proto_key == 'xray' else proto_key | upper)) }}
                </span>
                {% endif %}
                {% endfor %}
                {% else %}
                <span class="badge badge-warn">
                    <span class="badge-dot"></span>
                    {{ _('no_protocols') }}
                </span>
                {% endif %}
            </div>

            <div class="server-actions">
                <a href="/server/{{ loop.index0 }}" class="btn btn-secondary btn-sm" style="flex:1">
                    {{ _('manage') }}
                </a>
                <button class="btn btn-secondary btn-sm btn-icon" onclick="openEditServer(this)"
                    title="{{ _('edit') }}">
                    ✏️
                </button>
                <button class="btn btn-danger btn-sm btn-icon" onclick="deleteServer({{ loop.index0 }})"
                    title="{{ _('delete') }}">
                    🗑
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">🛡</div>
        <div class="empty-title">{{ _('no_servers') }}</div>
        <div class="empty-desc">
            {{ _('add_server_desc') }}
        </div>
        <button class="btn btn-primary" onclick="openModal('addServerModal')">
            <span>＋</span> {{ _('add_server') }}
        </button>
    </div>
    {% endif %}
</section>

<!-- ===== Edit Server Modal ===== -->
<div class="modal-backdrop" id="editServerModal">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">{{ _('edit_server_title') }}</h2>
            <button class="modal-close" onclick="closeModal('editServerModal')">×</button>
        </div>

        <form id="editServerForm" onsubmit="return submitEditServer(event)">
            <input type="hidden" id="editServerIdx">

            <div class="form-group">
                <label class="form-label">{{ _('name') }}</label>
                <input class="form-input" type="text" id="editServerName">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_host') }}</label>
                    <input class="form-input" type="text" id="editServerHost" required>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_port') }}</label>
                    <input class="form-input" type="number" id="editServerPort" min="1" max="65535">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">{{ _('ssh_user') }}</label>
                <input class="form-input" type="text" id="editServerUser" required>
            </div>

            <div class="tabs" style="margin-top: var(--space-md)">
                <button type="button" class="tab active" onclick="switchEditAuthTab('password', this)">{{ _('ssh_password') }}</button>
                <button type="button" class="tab" onclick="switchEditAuthTab('key', this)">{{ _('ssh_key') }}</button>
            </div>

            <div id="editAuthPassword">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_password') }}</label>
                    <input class="form-input" type="password" id="editServerPassword"
                        placeholder="{{ _('edit_keep_credential') }}">
                    <div class="form-hint">{{ _('edit_keep_credential') }}</div>
                </div>
            </div>

            <div id="editAuthKey" class="hidden">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_key') }}</label>
                    <textarea class="form-textarea" id="editServerKey"
                        placeholder="{{ _('edit_keep_credential') }}"></textarea>
                    <div class="form-hint">{{ _('edit_keep_credential') }}</div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editServerModal')">{{ _('cancel')
                    }}</button>
                <button type="submit" class="btn btn-primary" id="editServerBtn">
                    <span id="editServerBtnText">{{ _('save') }}</span>
                    <div class="spinner hidden" id="editServerSpinner"></div>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ===== Add Server Modal ===== -->
<div class="modal-backdrop" id="addServerModal">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">{{ _('add_server') }}</h2>
            <button class="modal-close" onclick="closeModal('addServerModal')">×</button>
        </div>

        <form id="addServerForm" onsubmit="return addServer(event)">
            <div class="form-group">
                <label class="form-label">{{ _('name') }}</label>
                <input class="form-input" type="text" id="serverName" placeholder="My VPN Server">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_host') }}</label>
                    <input class="form-input" type="text" id="serverHost" placeholder="192.168.1.1" required>
                </div>
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_port') }}</label>
                    <input class="form-input" type="number" id="serverPort" value="22" min="1" max="65535">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">{{ _('ssh_user') }}</label>
                <input class="form-input" type="text" id="serverUser" placeholder="root" required>
            </div>

            <!-- Tabs for auth method -->
            <div class="tabs" style="margin-top: var(--space-md)">
                <button type="button" class="tab active" onclick="switchAuthTab('password', this)">{{ _('ssh_password')
                    }}</button>
                <button type="button" class="tab" onclick="switchAuthTab('key', this)">{{ _('ssh_key') }}</button>
            </div>

            <div id="authPassword">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_password') }}</label>
                    <input class="form-input" type="password" id="serverPassword" placeholder="••••••••">
                </div>
            </div>

            <div id="authKey" class="hidden">
                <div class="form-group">
                    <label class="form-label">{{ _('ssh_key') }}</label>
                    <textarea class="form-textarea" id="serverKey"
                        placeholder="{{ _('ssh_key_placeholder') }}"></textarea>
                    <div class="form-hint">{{ _('ssh_key_hint') }}</div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addServerModal')">{{ _('cancel')
                    }}</button>
                <button type="submit" class="btn btn-primary" id="addServerBtn">
                    <span id="addServerBtnText">{{ _('connect') }}</span>
                    <div class="spinner hidden" id="addServerSpinner"></div>
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function switchAuthTab(tab, btn) {
        document.querySelectorAll('.tabs .tab').forEach(t => t.classList.remove('active'));
        btn.classList.add('active');

        document.getElementById('authPassword').classList.toggle('hidden', tab !== 'password');
        document.getElementById('authKey').classList.toggle('hidden', tab !== 'key');
    }

    async function addServer(e) {
        e.preventDefault();

        const btn = document.getElementById('addServerBtn');
        const btnText = document.getElementById('addServerBtnText');
        const spinner = document.getElementById('addServerSpinner');

        btn.disabled = true;
        btnText.textContent = _('connecting');
        spinner.classList.remove('hidden');

        try {
            const data = {
                name: document.getElementById('serverName').value,
                host: document.getElementById('serverHost').value,
                ssh_port: parseInt(document.getElementById('serverPort').value) || 22,
                username: document.getElementById('serverUser').value,
                password: document.getElementById('serverPassword').value,
                private_key: document.getElementById('serverKey').value,
            };

            const result = await apiCall('/api/servers/add', 'POST', data);
            showToast(_('server_added'), 'success');
            setTimeout(() => window.location.reload(), 800);

        } catch (err) {
            showToast(err.message, 'error');
        } finally {
            btn.disabled = false;
            btnText.textContent = _('connect');
            spinner.classList.add('hidden');
        }
    }

    async function deleteServer(serverId) {
        if (!confirm(_('delete_confirm'))) return;

        try {
            await apiCall(`/api/servers/${serverId}/delete`, 'POST');
            showToast(_('server_deleted'), 'success');
            setTimeout(() => window.location.reload(), 500);
        } catch (err) {
            showToast(err.message, 'error');
        }
    }

    /* ========== Edit server ========== */

    function switchEditAuthTab(tab, btn) {
        const tabs = btn.parentElement.querySelectorAll('.tab');
        tabs.forEach(t => t.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('editAuthPassword').classList.toggle('hidden', tab !== 'password');
        document.getElementById('editAuthKey').classList.toggle('hidden', tab !== 'key');
    }

    function openEditServer(btn) {
        // Prefill from data-* on the parent server-card so we don't have to round-trip.
        const card = btn.closest('.server-card');
        if (!card) return;
        document.getElementById('editServerIdx').value = card.dataset.idx;
        document.getElementById('editServerName').value = card.dataset.name || '';
        document.getElementById('editServerHost').value = card.dataset.host || '';
        document.getElementById('editServerPort').value = card.dataset.port || '22';
        document.getElementById('editServerUser').value = card.dataset.username || '';
        document.getElementById('editServerPassword').value = '';
        document.getElementById('editServerKey').value = '';

        // Pre-select the tab matching the server's current auth method.
        const authIsKey = card.dataset.auth === 'key';
        const tabsEl = document.querySelector('#editServerForm .tabs');
        const passTab = tabsEl.children[0];
        const keyTab = tabsEl.children[1];
        switchEditAuthTab(authIsKey ? 'key' : 'password', authIsKey ? keyTab : passTab);

        openModal('editServerModal');
    }

    async function submitEditServer(e) {
        e.preventDefault();
        const idx = document.getElementById('editServerIdx').value;
        const btn = document.getElementById('editServerBtn');
        const btnText = document.getElementById('editServerBtnText');
        const spinner = document.getElementById('editServerSpinner');
        btn.disabled = true;
        btnText.textContent = _('saving') || 'Saving...';
        spinner.classList.remove('hidden');
        try {
            const body = {
                name: document.getElementById('editServerName').value,
                host: document.getElementById('editServerHost').value,
                ssh_port: parseInt(document.getElementById('editServerPort').value) || 22,
                username: document.getElementById('editServerUser').value,
                // Empty -> null means "leave unchanged" on the backend.
                password: document.getElementById('editServerPassword').value || null,
                private_key: document.getElementById('editServerKey').value || null,
            };
            await apiCall(`/api/servers/${idx}/edit`, 'POST', body);
            showToast(_('server_saved'), 'success');
            setTimeout(() => window.location.reload(), 500);
        } catch (err) {
            showToast(err.message, 'error');
        } finally {
            btn.disabled = false;
            btnText.textContent = _('save');
            spinner.classList.add('hidden');
        }
        return false;
    }

    /* ========== Ping indicators ========== */

    async function pingServer(idx) {
        const dot = document.getElementById(`ping-${idx}`);
        const ms = document.getElementById(`ping-ms-${idx}`);
        if (!dot) return;
        try {
            const res = await fetch(`/api/servers/${idx}/ping`, { credentials: 'same-origin' });
            const data = await res.json();
            dot.classList.remove('ping-pending');
            if (data.alive) {
                dot.classList.add('ping-ok');
                dot.title = `${data.ms} ms`;
                if (ms) ms.textContent = `${data.ms} ms`;
            } else {
                dot.classList.add('ping-fail');
                dot.title = data.error || _('offline');
                if (ms) ms.textContent = _('offline');
            }
        } catch {
            dot.classList.remove('ping-pending');
            dot.classList.add('ping-fail');
            if (ms) ms.textContent = _('offline');
        }
    }

    function startAllPings() {
        // Browsers will fan these out concurrently; the page never blocks waiting
        // for results because each card updates independently.
        document.querySelectorAll('.server-card').forEach(card => {
            const idx = card.dataset.idx;
            if (idx !== undefined) pingServer(idx);
        });
    }

    /* ========== Drag-and-drop reorder ========== */

    let draggedCard = null;

    function setupDragAndDrop() {
        const grid = document.getElementById('serverGrid');
        if (!grid) return;

        grid.addEventListener('dragstart', e => {
            const card = e.target.closest('.server-card');
            if (!card) return;
            // Don't initiate drag from a button/link inside the card — those have
            // their own click semantics (Edit/Delete/Manage).
            if (e.target.closest('button, a')) {
                e.preventDefault();
                return;
            }
            draggedCard = card;
            card.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            // Some browsers require this for dragstart to fire with text payload.
            try { e.dataTransfer.setData('text/plain', card.dataset.idx); } catch {}
        });

        grid.addEventListener('dragend', e => {
            const card = e.target.closest('.server-card');
            if (card) card.classList.remove('dragging');
            grid.querySelectorAll('.server-card.drag-over').forEach(c => c.classList.remove('drag-over'));
            draggedCard = null;
        });

        grid.addEventListener('dragover', e => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            const card = e.target.closest('.server-card');
            if (!card || card === draggedCard) return;
            grid.querySelectorAll('.server-card.drag-over').forEach(c => {
                if (c !== card) c.classList.remove('drag-over');
            });
            card.classList.add('drag-over');
        });

        grid.addEventListener('dragleave', e => {
            const card = e.target.closest('.server-card');
            if (card && !card.contains(e.relatedTarget)) card.classList.remove('drag-over');
        });

        grid.addEventListener('drop', async e => {
            e.preventDefault();
            const target = e.target.closest('.server-card');
            grid.querySelectorAll('.server-card.drag-over').forEach(c => c.classList.remove('drag-over'));
            if (!target || !draggedCard || target === draggedCard) return;

            // Insert before/after target depending on cursor position relative
            // to the target's vertical centre, which feels natural in a grid.
            const rect = target.getBoundingClientRect();
            const insertAfter = (e.clientY - rect.top) > rect.height / 2;
            grid.insertBefore(draggedCard, insertAfter ? target.nextSibling : target);

            const newOrder = Array.from(grid.querySelectorAll('.server-card'))
                .map(c => parseInt(c.dataset.idx, 10));

            try {
                await apiCall('/api/servers/reorder', 'POST', { order: newOrder });
                showToast(_('servers_reordered'), 'success');
                // Reload so onclick indices and per-card data-idx attrs realign with
                // the new server array — simpler and safer than rewriting every handler.
                setTimeout(() => window.location.reload(), 400);
            } catch (err) {
                showToast(err.message, 'error');
                // Rollback the visual move — backend rejected.
                window.location.reload();
            }
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        startAllPings();
        setupDragAndDrop();
    });
</script>
{% endblock %}