<?php
$server = $server ?? [];
$nginx = $nginx ?? [];
$installed = $nginx['installed'] ?? false;
?>

<div class="page-header">
    <div class="page-header-left">
        <div class="back-link">
            <a href="/servers/<?= $server['id'] ?>"><i class="fas fa-arrow-left"></i> Back to Server</a>
        </div>
        <h1 class="page-title">
            <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24" style="vertical-align:middle;margin-right:0.5rem;opacity:0.8">
                <path d="M12 2L2 7.2v9.6L12 22l10-5.2V7.2L12 2zm0 1.5l8.5 4.4v8.2L12 20.5l-8.5-4.4V7.9L12 3.5zM7.4 8.5v7l1.5.9V11l3.1 4.3 1.5.9V8.5l-1.5.9v4.4L8.9 9.4l-1.5-.9zm9.2 0l-1.5.9-3.1 4.4V17l1.5-.9V11l3.1-4.3z"/>
            </svg>
            Nginx Manager
        </h1>
        <p class="page-subtitle"><?= htmlspecialchars($server['name']) ?></p>
    </div>
    <div class="page-header-right">
        <button class="btn btn-secondary" onclick="location.reload()">
            <i class="fas fa-sync-alt"></i> Refresh
        </button>
    </div>
</div>

<?php if (!$installed): ?>
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <svg viewBox="0 0 24 24" fill="currentColor" width="64" height="64" style="opacity:0.4;margin-bottom:1rem">
                <path d="M12 2L2 7.2v9.6L12 22l10-5.2V7.2L12 2zm0 1.5l8.5 4.4v8.2L12 20.5l-8.5-4.4V7.9L12 3.5zM7.4 8.5v7l1.5.9V11l3.1 4.3 1.5.9V8.5l-1.5.9v4.4L8.9 9.4l-1.5-.9zm9.2 0l-1.5.9-3.1 4.4V17l1.5-.9V11l3.1-4.3z"/>
            </svg>
            <h3>Nginx is not installed</h3>
            <p>This server does not have Nginx installed or it is not in the PATH.</p>
            <p class="text-muted">Install it with: <code>sudo apt install nginx</code> or <code>sudo yum install nginx</code></p>
        </div>
    </div>
</div>
<?php else: ?>
<?php
$status = $nginx['status'] ?? 'inactive';
$enabled = $nginx['enabled'] ?? 'disabled';
$configValid = $nginx['config_valid'] ?? false;
?>

<div class="dashboard-grid">
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-info-circle"></i> Service Status</h2>
        </div>
        <div class="card-body">
            <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);gap:0.75rem">
                <div class="stat-card" style="padding:1rem">
                    <div class="stat-icon" style="width:40px;height:40px;font-size:1rem;
                        background:<?= $status === 'active' ? 'var(--success-bg)' : 'var(--danger-bg)' ?>;
                        color:<?= $status === 'active' ? 'var(--success)' : 'var(--danger)' ?>">
                        <i class="fas <?= $status === 'active' ? 'fa-play-circle' : 'fa-stop-circle' ?>"></i>
                    </div>
                    <div class="stat-info">
                        <span class="stat-value" style="font-size:1rem"><?= ucfirst($status) ?></span>
                        <span class="stat-label">Status</span>
                    </div>
                </div>
                <div class="stat-card" style="padding:1rem">
                    <div class="stat-icon" style="width:40px;height:40px;font-size:1rem;
                        background:<?= $enabled === 'enabled' ? 'var(--success-bg)' : 'var(--warning-bg)' ?>;
                        color:<?= $enabled === 'enabled' ? 'var(--success)' : 'var(--warning)' ?>">
                        <i class="fas fa-power-off"></i>
                    </div>
                    <div class="stat-info">
                        <span class="stat-value" style="font-size:1rem"><?= ucfirst($enabled) ?></span>
                        <span class="stat-label">Auto-start</span>
                    </div>
                </div>
                <div class="stat-card" style="padding:1rem">
                    <div class="stat-icon" style="width:40px;height:40px;font-size:1rem;
                        background:<?= $configValid ? 'var(--success-bg)' : 'var(--danger-bg)' ?>;
                        color:<?= $configValid ? 'var(--success)' : 'var(--danger)' ?>">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-info">
                        <span class="stat-value" style="font-size:1rem"><?= $configValid ? 'Valid' : 'Invalid' ?></span>
                        <span class="stat-label">Config</span>
                    </div>
                </div>
            </div>
            <div class="action-group" style="margin-top:1rem;display:flex;gap:0.5rem;flex-wrap:wrap">
                <button class="btn btn-success btn-sm" onclick="nginxAction('start')" <?= $status === 'active' ? 'disabled' : '' ?>>
                    <i class="fas fa-play"></i> Start
                </button>
                <button class="btn btn-danger btn-sm" onclick="nginxAction('stop')" <?= $status !== 'active' ? 'disabled' : '' ?>>
                    <i class="fas fa-stop"></i> Stop
                </button>
                <button class="btn btn-warning btn-sm" onclick="nginxAction('restart')">
                    <i class="fas fa-redo"></i> Restart
                </button>
                <button class="btn btn-info btn-sm" onclick="nginxAction('reload')">
                    <i class="fas fa-sync-alt"></i> Reload
                </button>
                <button class="btn btn-secondary btn-sm" onclick="nginxAction('test')">
                    <i class="fas fa-vial"></i> Test Config
                </button>
            </div>
        </div>
    </div>
    <?php if (!empty($nginx['version'])): ?>
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-tag"></i> Version</h2>
        </div>
        <div class="card-body">
            <code><?= htmlspecialchars($nginx['version']) ?></code>
        </div>
    </div>
    <?php endif; ?>
</div>

<div class="dashboard-grid">
    <?php if (!empty($nginx['sites_enabled'])): ?>
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-check-circle text-success"></i> Enabled Sites</h2>
            <span class="badge badge-success"><?= count($nginx['sites_enabled']) ?></span>
        </div>
        <div class="card-body">
            <div class="list-group">
                <?php foreach ($nginx['sites_enabled'] as $site): ?>
                    <div class="list-item list-item-action" onclick="editFile('/etc/nginx/sites-enabled/<?= htmlspecialchars($site) ?>')">
                        <i class="fas fa-file-code"></i>
                        <code><?= htmlspecialchars($site) ?></code>
                        <span class="list-item-actions">
                            <button class="btn btn-xs btn-warning" onclick="event.stopPropagation();toggleSite('<?= htmlspecialchars($site) ?>',false)" title="Disable site">
                                <i class="fas fa-pause"></i>
                            </button>
                            <button class="btn btn-xs btn-danger" onclick="event.stopPropagation();deleteSite('<?= htmlspecialchars($site) ?>')" title="Delete site">
                                <i class="fas fa-trash"></i>
                            </button>
                        </span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>
    <?php if (!empty($nginx['sites_available'])): ?>
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-folder-open"></i> Available Sites</h2>
            <div style="display:flex;gap:0.5rem;align-items:center">
                <span class="badge badge-info"><?= count($nginx['sites_available']) ?></span>
                <button class="btn btn-sm btn-success" onclick="openNewSiteModal()">
                    <i class="fas fa-plus"></i> New Site
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="list-group">
                <?php foreach ($nginx['sites_available'] as $site): ?>
                    <?php $isEnabled = in_array($site, $nginx['sites_enabled'] ?? []); ?>
                    <div class="list-item list-item-action" onclick="editFile('/etc/nginx/sites-available/<?= htmlspecialchars($site) ?>')">
                        <i class="fas fa-file-code"></i>
                        <code><?= htmlspecialchars($site) ?></code>
                        <span class="list-item-actions">
                            <button class="btn btn-xs btn-success" onclick="event.stopPropagation();toggleSite('<?= htmlspecialchars($site) ?>',true)" title="Enable site">
                                <i class="fas fa-plus"></i>
                            </button>
                            <button class="btn btn-xs btn-danger" onclick="event.stopPropagation();deleteSite('<?= htmlspecialchars($site) ?>')" title="Delete site">
                                <i class="fas fa-trash"></i>
                            </button>
                        </span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>
</div>

<div class="card">
    <div class="card-header">
        <h2><i class="fas fa-file-alt"></i> Main Configuration</h2>
        <div>
            <button class="btn btn-sm btn-primary" onclick="editFile('/etc/nginx/nginx.conf')">
                <i class="fas fa-edit"></i> Edit
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="nginx-config-viewer">
            <pre><code><?= htmlspecialchars($nginx['config'] ?? '# No configuration found') ?></code></pre>
        </div>
    </div>
</div>

<?php if (!empty($nginx['config_test'])): ?>
<div class="card">
    <div class="card-header">
        <h2><i class="fas fa-clipboard-list"></i> Config Test Result</h2>
    </div>
    <div class="card-body">
        <div class="nginx-config-viewer nginx-test-output">
            <pre><code class="<?= $configValid ? 'text-success' : 'text-danger' ?>"><?= htmlspecialchars($nginx['config_test']) ?></code></pre>
        </div>
    </div>
</div>
<?php endif; ?>

<div id="nginxEditorModal" class="modal editor-modal-overlay">
    <div class="vscode-editor">
        <div class="vscode-titlebar">
            <span class="vscode-title-icon"><i class="far fa-file-code"></i></span>
            <span class="vscode-title-path" id="editorFilePath">file</span>
            <span class="vscode-title-dirty" id="editorDirtyIndicator" style="display:none">&#9679;</span>
            <div class="vscode-title-actions">
                <button class="vscode-btn" onclick="closeEditor()" title="Close (Escape)"><i class="fas fa-times"></i></button>
            </div>
        </div>
        <div class="vscode-toolbar">
            <button class="vscode-btn vscode-btn-primary" onclick="saveFile()" title="Save (Ctrl+S)">
                <i class="fas fa-save"></i> Save
            </button>
            <div class="vscode-separator"></div>
            <button class="vscode-btn" onclick="undoEditor()" title="Undo (Ctrl+Z)">
                <i class="fas fa-undo"></i>
            </button>
            <button class="vscode-btn" onclick="redoEditor()" title="Redo (Ctrl+Y)">
                <i class="fas fa-redo"></i>
            </button>
            <div class="vscode-separator"></div>
            <button class="vscode-btn" onclick="saveFile()" title="Save & Test Config">
                <i class="fas fa-vial"></i> Test
            </button>
            <span class="vscode-spacer"></span>
            <span id="editorStatus" class="vscode-status-text">Ready</span>
        </div>
        <div class="vscode-body">
            <div class="vscode-gutter" id="editorGutter"></div>
            <textarea id="editorContent" class="vscode-textarea"
                      spellcheck="false" autocomplete="off" wrap="off"></textarea>
            <pre class="vscode-highlight" id="editorHighlight" aria-hidden="true"><code id="editorHighlightCode"></code></pre>
        </div>
        <div class="vscode-statusbar">
            <span class="vscode-status-item" id="editorCursorPos">Ln 1, Col 1</span>
            <span class="vscode-status-item">UTF-8</span>
            <span class="vscode-status-item" id="editorLang">Nginx Config</span>
            <span class="vscode-status-item vscode-status-end" id="editorFileSize"></span>
        </div>
    </div>
</div>

<div id="nginxNewSiteModal" class="modal">
    <div class="modal-dialog" style="max-width:550px">
        <div class="modal-header">
            <h3><i class="fas fa-plus-circle text-success"></i> New Nginx Site</h3>
            <button class="modal-close" onclick="closeNewSiteModal()">&times;</button>
        </div>
        <form id="newSiteForm" onsubmit="createSite(event)">
            <div class="modal-body">
                <div class="form-group">
                    <label for="siteName">Site name (domain)</label>
                    <input type="text" id="siteName" name="site_name" class="form-input"
                           placeholder="e.g. example.com" required>
                </div>
                <div class="form-group">
                    <label for="siteRoot">Root directory</label>
                    <input type="text" id="siteRoot" name="site_root" class="form-input"
                           placeholder="/var/www/example.com" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="siteServerName">Server name</label>
                        <input type="text" id="siteServerName" name="server_name" class="form-input"
                               placeholder="example.com www.example.com">
                    </div>
                    <div class="form-group">
                        <label for="siteIndex">Index file</label>
                        <input type="text" id="siteIndex" name="index" class="form-input"
                               value="index.html index.htm index.php" placeholder="index.html">
                    </div>
                </div>
                <div class="form-group" style="margin-top:0.5rem">
                    <label class="checkbox-label">
                        <input type="checkbox" id="sitePhp" name="enable_php" value="1" checked>
                        <span>Enable PHP-FPM support</span>
                    </label>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="siteEnable" name="enable_site" value="1" checked>
                        <span>Enable site after creation</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeNewSiteModal()">Cancel</button>
                <button type="submit" class="btn btn-success" id="createSiteBtn">
                    <i class="fas fa-plus"></i> Create Site
                </button>
            </div>
        </form>
    </div>
</div>

<div id="nginxResultModal" class="modal">
    <div class="modal-dialog" style="max-width:600px">
        <div class="modal-header">
            <h3 id="nginxResultTitle">Result</h3>
            <button class="modal-close" onclick="closeNginxModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p id="nginxResultMessage"></p>
            <div id="nginxResultOutput" class="nginx-config-viewer nginx-test-output" style="display:none;margin-top:0.75rem">
                <pre><code id="nginxResultOutputText"></code></pre>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeNginxModal()">Close</button>
        </div>
    </div>
</div>

<script>
let currentEditFile = null;
let editorDirty = false;
let editorUndoStack = [];
let editorRedoStack = [];
let editorHistoryIndex = -1;

function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || '';
}

function updateLineNumbers() {
    const ta = document.getElementById('editorContent');
    const gutter = document.getElementById('editorGutter');
    const lines = ta.value.split('\n').length;
    const numbers = [];
    for (let i = 1; i <= lines; i++) {
        numbers.push('<span>' + i + '</span>');
    }
    gutter.innerHTML = numbers.join('');
}

function updateCursorPos() {
    const ta = document.getElementById('editorContent');
    const before = ta.value.substring(0, ta.selectionStart);
    const lines = before.split('\n');
    const line = lines.length;
    const col = lines[lines.length - 1].length + 1;
    document.getElementById('editorCursorPos').textContent = 'Ln ' + line + ', Col ' + col;
}

function highlightNginx(text) {
    let h = text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/#(.*)$/gm, '<span class="hl-comment">#$1</span>')
        .replace(/\b(server|location|listen|server_name|root|index|try_files|include|fastcgi_pass|proxy_pass|return|rewrite|set|if|error_page|ssl_certificate|ssl_certificate_key|ssl_protocols|ssl_ciphers|add_header|access_log|error_log|keepalive|gzip|proxy_set_header|proxy_redirect|client_max_body_size|autoindex)\b/g, '<span class="hl-keyword">$1</span>')
        .replace(/\b(\d+)\b/g, '<span class="hl-number">$1</span>')
        .replace(/\b(https?|fastcgi|unix):\/\/[^\s;{]+/g, '<span class="hl-string">$&</span>')
        .replace(/'(.*?)'/g, '<span class="hl-string">\'$1\'</span>')
        .replace(/(\$\w+)/g, '<span class="hl-var">$1</span>')
        .replace(/\b(\w+\.\w+(?:\.\w+)*)\b/g, function(m) {
            if (m.includes('com') || m.includes('org') || m.includes('net') || m.includes('io') || m.includes('local')) {
                return '<span class="hl-string">' + m + '</span>';
            }
            return m;
        });
    return h;
}

function syncHighlight() {
    const ta = document.getElementById('editorContent');
    const code = document.getElementById('editorHighlightCode');
    code.innerHTML = highlightNginx(ta.value) + '\n';
}

function pushHistory() {
    const ta = document.getElementById('editorContent');
    if (editorHistoryIndex >= 0 && editorUndoStack[editorHistoryIndex] === ta.value) return;
    editorUndoStack = editorUndoStack.slice(0, editorHistoryIndex + 1);
    editorUndoStack.push(ta.value);
    editorRedoStack = [];
    editorHistoryIndex = editorUndoStack.length - 1;
    if (editorUndoStack.length > 100) {
        editorUndoStack.shift();
        editorHistoryIndex--;
    }
}

function undoEditor() {
    if (editorHistoryIndex <= 0) return;
    editorRedoStack.push(editorUndoStack[editorHistoryIndex]);
    editorHistoryIndex--;
    const ta = document.getElementById('editorContent');
    ta.value = editorUndoStack[editorHistoryIndex];
    ta.dispatchEvent(new Event('input'));
}

function redoEditor() {
    if (editorRedoStack.length === 0) return;
    const val = editorRedoStack.pop();
    editorUndoStack.push(val);
    editorHistoryIndex++;
    const ta = document.getElementById('editorContent');
    ta.value = val;
    ta.dispatchEvent(new Event('input'));
}

function nginxAction(action) {
    const btn = event.target.closest('button');
    const origText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Working...';

    fetch('/servers/<?= $server['id'] ?>/nginx', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': getCsrfToken(),
        },
        body: 'action=' + action + '&_csrf_token=' + encodeURIComponent(getCsrfToken()),
    })
    .then(r => r.json())
    .then(data => {
        showToast(data.success ? 'success' : 'error', data.message);
        if (data.output) {
            document.getElementById('nginxResultMessage').textContent = data.message;
            document.getElementById('nginxResultOutputText').textContent = data.output;
            document.getElementById('nginxResultOutput').style.display = 'block';
            document.getElementById('nginxResultModal').style.display = 'flex';
        }
        if (data.success && ['restart', 'reload', 'start', 'stop'].includes(action)) {
            setTimeout(() => location.reload(), 1500);
        }
    })
    .catch(err => showToast('error', 'Request failed: ' + err.message))
    .finally(() => { btn.disabled = false; btn.innerHTML = origText; });
}

function editFile(file) {
    currentEditFile = file;
    editorUndoStack = [];
    editorRedoStack = [];
    editorHistoryIndex = -1;
    editorDirty = false;
    document.getElementById('editorFilePath').textContent = file;
    document.getElementById('editorContent').value = 'Loading...';
    document.getElementById('editorStatus').textContent = 'Loading...';
    document.getElementById('editorDirtyIndicator').style.display = 'none';
    document.getElementById('editorFileSize').textContent = '';
    document.getElementById('nginxEditorModal').style.display = 'flex';
    setTimeout(() => document.getElementById('editorContent').focus(), 100);

    fetch('/servers/<?= $server['id'] ?>/nginx/file?file=' + encodeURIComponent(file))
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            const ta = document.getElementById('editorContent');
            ta.value = data.content;
            document.getElementById('editorFileSize').textContent = (data.content.length / 1024).toFixed(1) + ' KB';
            document.getElementById('editorStatus').textContent = 'Ready';
            document.getElementById('editorDirtyIndicator').style.display = 'none';
            editorDirty = false;
            updateLineNumbers();
            syncHighlight();
            pushHistory();
        } else {
            showToast('error', data.message);
            closeEditor();
        }
    })
    .catch(err => {
        showToast('error', 'Failed to load file');
        closeEditor();
    });

    const ta = document.getElementById('editorContent');
    ta.oninput = function() {
        editorDirty = true;
        document.getElementById('editorStatus').textContent = 'Unsaved changes';
        document.getElementById('editorDirtyIndicator').style.display = 'inline';
        updateLineNumbers();
        syncHighlight();
        pushHistory();
    };
    ta.onscroll = function() {
        document.getElementById('editorGutter').scrollTop = this.scrollTop;
        document.getElementById('editorHighlight').scrollTop = this.scrollTop;
    };
    ta.onkeydown = function(e) {
        if (e.key === 'Tab') {
            e.preventDefault();
            const start = this.selectionStart;
            const end = this.selectionEnd;
            this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
            this.selectionStart = this.selectionEnd = start + 4;
            this.dispatchEvent(new Event('input'));
        }
    };
    ta.onmouseup = ta.onkeyup = function() {
        updateCursorPos();
    };
    ta.addEventListener('paste', function() {
        setTimeout(() => {
            this.dispatchEvent(new Event('input'));
            updateCursorPos();
        }, 10);
    });
}

function saveFile() {
    const content = document.getElementById('editorContent').value;
    document.getElementById('editorStatus').textContent = 'Saving...';

    fetch('/servers/<?= $server['id'] ?>/nginx/file', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': getCsrfToken(),
        },
        body: 'file=' + encodeURIComponent(currentEditFile) + '&content=' + encodeURIComponent(content) + '&_csrf_token=' + encodeURIComponent(getCsrfToken()),
    })
    .then(r => r.json())
    .then(data => {
        showToast(data.success ? 'success' : 'error', data.message);
        if (data.success) {
            editorDirty = false;
            document.getElementById('editorStatus').textContent = 'Saved';
            document.getElementById('editorDirtyIndicator').style.display = 'none';
            closeEditor();
            setTimeout(() => location.reload(), 500);
        } else {
            document.getElementById('editorStatus').textContent = 'Save failed';
        }
    })
    .catch(err => {
        showToast('error', 'Save request failed');
        document.getElementById('editorStatus').textContent = 'Error';
    });
}

function deleteSite(site) {
    if (!confirm("Permanently delete site '" + site + "'?\nThis will remove both the config file and site directory contents.")) return;
    if (!confirm("Are you sure? This cannot be undone.")) return;

    fetch('/servers/<?= $server['id'] ?>/nginx/site', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': getCsrfToken(),
        },
        body: '_method=DELETE&site=' + encodeURIComponent(site) + '&_csrf_token=' + encodeURIComponent(getCsrfToken()),
    })
    .then(r => r.json())
    .then(data => {
        showToast(data.success ? 'success' : 'error', data.message);
        if (data.success) setTimeout(() => location.reload(), 500);
    })
    .catch(err => showToast('error', 'Request failed: ' + err.message));
}

function toggleSite(site, enable) {
    const action = enable ? 'enable' : 'disable';
    if (!confirm((enable ? 'Enable' : 'Disable') + " site '" + site + "'?")) return;

    fetch('/servers/<?= $server['id'] ?>/nginx/toggle-site', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': getCsrfToken(),
        },
        body: 'site=' + encodeURIComponent(site) + '&enable=' + (enable ? '1' : '0') + '&_csrf_token=' + encodeURIComponent(getCsrfToken()),
    })
    .then(r => r.json())
    .then(data => {
        showToast(data.success ? 'success' : 'error', data.message);
        if (data.success) setTimeout(() => location.reload(), 500);
    })
    .catch(err => showToast('error', 'Request failed: ' + err.message));
}

function closeEditor() {
    if (editorDirty && !confirm('Discard unsaved changes?')) return;
    document.getElementById('nginxEditorModal').style.display = 'none';
    currentEditFile = null;
    editorDirty = false;
}

function closeNginxModal() {
    document.getElementById('nginxResultModal').style.display = 'none';
    document.getElementById('nginxResultOutput').style.display = 'none';
}

function openNewSiteModal() {
    document.getElementById('newSiteForm').reset();
    document.getElementById('siteServerName').value = '';
    document.getElementById('sitePhp').checked = true;
    document.getElementById('siteEnable').checked = true;
    document.getElementById('nginxNewSiteModal').style.display = 'flex';
}

function closeNewSiteModal() {
    document.getElementById('nginxNewSiteModal').style.display = 'none';
}

function createSite(e) {
    e.preventDefault();
    const btn = document.getElementById('createSiteBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';

    const formData = new URLSearchParams(new FormData(document.getElementById('newSiteForm')));
    formData.append('_csrf_token', getCsrfToken());

    fetch('/servers/<?= $server['id'] ?>/nginx/site', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': getCsrfToken(),
        },
        body: formData.toString(),
    })
    .then(r => r.json())
    .then(data => {
        showToast(data.success ? 'success' : 'error', data.message);
        if (data.success) {
            closeNewSiteModal();
            setTimeout(() => location.reload(), 800);
        }
    })
    .catch(err => showToast('error', 'Request failed: ' + err.message))
    .finally(() => { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plus"></i> Create Site'; });
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') { closeEditor(); closeNginxModal(); }
    if ((e.ctrlKey || e.metaKey) && e.key === 's' && currentEditFile) {
        e.preventDefault();
        saveFile();
    }
});
</script>
<?php endif; ?>
