{% extends "layout.html" %}
{% block title %}{{ _('Settings') }}{% endblock %}
{% block content %}

<!-- Tabs Integrated into Card -->
<div class="card shadow-sm">
    <div class="card-header bg-white p-0 pt-3 border-bottom-0">
        <ul class="nav nav-tabs nav-tabs-custom px-4" id="settingsTab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#general" type="button">General</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#instance" type="button">Instance</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#control" type="button">Control & Notifications</button>
            </li>
        </ul>
    </div>
    <div class="card-body p-4 bg-light bg-opacity-25 rounded-bottom">
        <form method="post" action="{{ url_for('update_settings') }}" enctype="multipart/form-data" onkeydown="return event.key != 'Enter';">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="tab-content">
                <!-- General Tab -->
                <div class="tab-pane fade show active" id="general">
                    <div class="row">
                        <!-- Left Column: Branding -->
                        <div class="col-lg-6 mb-4">
                            <div class="card h-100 shadow-none border">
                                <div class="card-header bg-white fw-bold">System Identity</div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">System Hostname</label>
                                        <input type="text" name="server_hostname" class="form-control" value="{{ settings.server_hostname or '' }}" placeholder="server.example.com">
                                        <small class="text-muted">Changing this updates Nginx and System configs.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Application Name</label>
                                        <input type="text" name="app_name" class="form-control" value="{{ settings.app_name or 'Limristem Web' }}">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Custom Login Message</label>
                                        <textarea name="custom_message" class="form-control" rows="2">{{ settings.custom_message or '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Right Column: Panel & SSL -->
                        <div class="col-lg-6 mb-4">
                            <!-- Panel Limits -->
                            <div class="card shadow-none border mb-4">
                                <div class="card-header bg-white fw-bold">Appearance</div>
                                <div class="card-body">
                                    <div class="row align-items-end">
                                        <div class="col-md-5 mb-2">
                                            <label class="form-label small text-muted">Logo URL</label>
                                            <input type="text" name="logo_url" class="form-control form-control-sm" value="{{ settings.logo_url or '' }}">
                                        </div>
                                        <div class="col-md-5 mb-2">
                                            <label class="form-label small text-muted">Upload Logo (Max 512KB)</label>
                                            <input type="file" name="logo_file" class="form-control form-control-sm" accept="image/*" onchange="validateFileSize(this, 512)">
                                        </div>
                                        <div class="col-md-2 mb-2 d-grid">
                                            <button type="submit" name="remove_logo" value="1" class="btn btn-sm btn-outline-danger" title="Remove Logo" {% if not settings.logo_url %}disabled{% endif %}><i class="fas fa-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="row align-items-end">
                                        <div class="col-md-5 mb-2">
                                            <label class="form-label small text-muted">Favicon URL</label>
                                            <input type="text" name="favicon_url" class="form-control form-control-sm" value="{{ settings.favicon_url or '' }}">
                                        </div>
                                        <div class="col-md-5 mb-2">
                                            <label class="form-label small text-muted">Upload Favicon (Max 32KB)</label>
                                            <input type="file" name="favicon_file" class="form-control form-control-sm" accept="image/*,.ico" onchange="validateFileSize(this, 32)">
                                        </div>
                                        <div class="col-md-2 mb-2 d-grid">
                                            <button type="submit" name="remove_favicon" value="1" class="btn btn-sm btn-outline-danger" title="Remove Favicon" {% if not settings.favicon_url %}disabled{% endif %}><i class="fas fa-trash"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- SSL -->
                            <div class="card shadow-none border">
                                <div class="card-header bg-white fw-bold d-flex justify-content-between">
                                    <span>Panel SSL (Port 4316)</span>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold">SSL Mode</label>
                                        <select name="panel_ssl_type" class="form-select form-select-sm" onchange="togglePanelSSL(this)">
                                            <option value="manual" {% if settings.panel_ssl_type == 'manual' %}selected{% endif %}>Manual Upload</option>
                                            <option value="self" {% if settings.panel_ssl_type == 'self' %}selected{% endif %}>Self-Signed</option>
                                            <option value="letsencrypt" {% if settings.panel_ssl_type == 'letsencrypt' %}selected{% endif %}>Let's Encrypt (Certbot)</option>
                                        </select>
                                    </div>
                                    
                                    <div id="panelSSLManual" style="display: {% if settings.panel_ssl_type == 'manual' or not settings.panel_ssl_type %}block{% else %}none{% endif %};">
                                        <div class="row">
                                            <div class="col-12 mb-2">
                                                <label class="form-label small">Certificate (.crt)</label>
                                                <input type="file" name="panel_cert" class="form-control form-control-sm">
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label small">Private Key (.key)</label>
                                                <input type="file" name="panel_key" class="form-control form-control-sm">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="panelSSLLetsEncrypt" class="alert alert-info small py-2 mt-2" style="display: {% if settings.panel_ssl_type == 'letsencrypt' %}block{% else %}none{% endif %};">
                                        Requires valid Hostname and Public IP. Uses Email from Notifications.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Instance Tab -->
                <div class="tab-pane fade" id="instance">
                    <div class="card shadow-none border" style="max-width: 800px; margin: 0 auto;">
                        <div class="card-body p-5 text-center">
                            <div class="mb-4">
                                <h1 class="display-6 fw-bold text-dark">Limristem Web Control Panel</h1>
                                <p class="text-muted">Simple, Lightweight, Powerful.</p>
                            </div>
                            
                            <div class="d-inline-flex align-items-center bg-white border rounded-pill px-4 py-2 shadow-sm mb-4">
                                <div class="me-3 text-start">
                                    <div class="small text-muted text-uppercase fw-bold" style="font-size: 0.65rem;">Current Version</div>
                                    <div class="fw-bold text-primary">{{ g.version }}</div>
                                </div>
                                <div class="border-start ps-3 text-start">
                                    <div class="small text-muted text-uppercase fw-bold" style="font-size: 0.65rem;">Last Check</div>
                                    <div class="fw-bold">{{ settings.last_update_check|format_time('%d %b %H:%M') if settings.last_update_check else 'Never' }}</div>
                                </div>
                            </div>
                            
                            <div class="mb-4 d-flex justify-content-center">
                                <div class="form-check form-switch text-start">
                                    <input class="form-check-input" type="checkbox" id="autoUpdateSwitch" name="auto_update" {% if settings.auto_update %}checked{% endif %}>
                                    <label class="form-check-label fw-bold" for="autoUpdateSwitch">Enable Automatic Updates</label>
                                    <div class="small text-muted">System will update automatically when patches are released.</div>
                                </div>
                            </div>
                            
                            <div>
                                <button type="submit" formaction="{{ url_for('check_updates') }}" class="btn btn-primary rounded-pill px-4">
                                    <i class="fas fa-sync-alt me-2"></i> Check for Updates
                                </button>
                            </div>
                            
                            {% if session.get('available_update') %}
                            <div class="alert alert-success mt-4 d-inline-block text-start shadow-sm border-0">
                                <div class="d-flex align-items-center">
                                    <div class="me-3">
                                        <h5 class="alert-heading h6 fw-bold mb-1"><i class="fas fa-arrow-circle-up"></i> Update Available</h5>
                                        <p class="mb-0 small">Version {{ session['available_update'] }} is ready to install.</p>
                                    </div>
                                    <button type="submit" onclick="startInstallUpdate(event, '{{ session['available_update'] }}')" class="btn btn-sm btn-success fw-bold">Install Now</button>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Control Tab -->
                <div class="tab-pane fade" id="control">
                    <div class="card shadow-none border mb-4">
                        <div class="card-header bg-white fw-bold">Resource Thresholds (Alerts)</div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">CPU Limit</label>
                                    <div class="input-group">
                                        <input type="number" name="cpu_limit" class="form-control text-center fw-bold" value="{{ settings.cpu_limit or 90 }}">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">RAM Limit</label>
                                    <div class="input-group">
                                        <input type="number" name="ram_limit" class="form-control text-center fw-bold" value="{{ settings.ram_limit or 90 }}">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-muted">Disk Limit</label>
                                    <div class="input-group">
                                        <input type="number" name="disk_limit" class="form-control text-center fw-bold" value="{{ settings.disk_limit or 90 }}">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card shadow-none border mb-4">
                        <div class="card-header bg-white fw-bold">Panel Limits</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label">Upload Limit (MB)</label>
                                    <input type="number" name="panel_upload_limit_mb" class="form-control" value="{{ settings.panel_upload_limit_mb or 100 }}">
                                </div>
                                <div class="col-6">
                                    <label class="form-label">Timeout (Sec)</label>
                                    <input type="number" name="panel_timeout_seconds" class="form-control" value="{{ settings.panel_timeout_seconds or 300 }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="card shadow-none border h-100">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <span class="fw-bold">SMTP Settings</span>
                                    <button type="submit" formaction="{{ url_for('test_email') }}" class="btn btn-xs btn-outline-primary py-0" style="font-size:0.7rem;">TEST</button>
                                </div>
                                <div class="card-body">
                                    <div class="row g-2">
                                        <div class="col-8 mb-2">
                                            <label class="small text-muted fw-bold">Server</label>
                                            <input type="text" name="smtp_server" class="form-control form-control-sm" value="{{ settings.smtp_server or '' }}">
                                        </div>
                                        <div class="col-4 mb-2">
                                            <label class="small text-muted fw-bold">Port</label>
                                            <input type="number" name="smtp_port" class="form-control form-control-sm" value="{{ settings.smtp_port or '' }}">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="small text-muted fw-bold">User</label>
                                            <input type="text" name="smtp_user" class="form-control form-control-sm" value="{{ settings.smtp_user or '' }}">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="small text-muted fw-bold">Password</label>
                                            <input type="password" name="smtp_pass" class="form-control form-control-sm" placeholder="Leave blank to keep current password">
                                        </div>
                                        <div class="col-12">
                                            <label class="small text-muted fw-bold">Alert Recipient Email</label>
                                            <input type="email" name="alert_email" class="form-control form-control-sm" value="{{ settings.alert_email or '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="card shadow-none border h-100">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <span class="fw-bold">Webhook</span>
                                    <button type="submit" formaction="{{ url_for('test_webhook') }}" class="btn btn-xs btn-outline-primary py-0" style="font-size:0.7rem;">TEST</button>
                                </div>
                                <div class="card-body">
                                    <div class="mb-2">
                                        <label class="small text-muted fw-bold">Webhook URL</label>
                                        <input type="text" name="webhook_url" class="form-control form-control-sm" value="{{ settings.webhook_url or '' }}">
                                    </div>
                                    <div class="mb-0">
                                        <label class="small text-muted fw-bold">Headers (JSON)</label>
                                        <textarea name="webhook_headers" class="form-control form-control-sm font-monospace" rows="3">{{ settings.webhook_headers or '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            
            <div class="d-flex justify-content-end mt-2 pt-3 border-top">
                <button type="submit" class="btn btn-primary px-5 shadow-sm fw-bold">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<!-- Console Modal -->
<div class="modal fade" id="consoleModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header border-secondary">
                <h5 class="modal-title font-monospace"><i class="fas fa-terminal"></i> Task Console</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" disabled id="closeConsoleBtn"></button>
            </div>
            <div class="modal-body p-0">
                <pre id="consoleOutput" class="p-3 m-0" style="height: 400px; overflow-y: auto; font-family: monospace; font-size: 0.9rem; color: #0f0; background: #000;"></pre>
            </div>
            <div class="modal-footer border-secondary">
                <span id="statusText" class="me-auto text-warning"><i class="fas fa-spinner fa-spin"></i> Processing...</span>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" disabled id="doneBtn">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function togglePanelSSL(select) {
    var manualDiv = document.getElementById('panelSSLManual');
    var leDiv = document.getElementById('panelSSLLetsEncrypt');
    
    if (select.value === 'manual') {
        manualDiv.style.display = 'block';
        leDiv.style.display = 'none';
    } else if (select.value === 'letsencrypt') {
        manualDiv.style.display = 'none';
        leDiv.style.display = 'block';
    } else {
        manualDiv.style.display = 'none';
        leDiv.style.display = 'none';
    }
}

let pollInterval;
const csrfToken = "{{ csrf_token() }}";

function startUpdate(event) {
    // Synchronous check updates submit
    // Just allow form submission with formaction
}

async function startInstallUpdate(event, version) {
    event.preventDefault();
    
    const modal = new bootstrap.Modal(document.getElementById('consoleModal'));
    document.getElementById('consoleOutput').textContent = "Starting system update...\n";
    document.getElementById('statusText').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
    document.getElementById('closeConsoleBtn').disabled = true;
    document.getElementById('doneBtn').disabled = true;
    modal.show();
    
    try {
        const response = await fetch("{{ url_for('start_install_update') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken
            },
            body: JSON.stringify({ version: version })
        });
        
        const data = await response.json();
        if (response.ok) {
            pollLog(data.task_id);
        } else {
            document.getElementById('consoleOutput').textContent += `Error: ${data.error}\n`;
            enableClose();
        }
    } catch (e) {
        document.getElementById('consoleOutput').textContent += `Request Failed: ${e}\n`;
        enableClose();
    }
}

function pollLog(taskId) {
    pollInterval = setInterval(async () => {
        try {
            const url = "{{ url_for('task_log', task_id='TASK_ID_PLACEHOLDER') }}".replace('TASK_ID_PLACEHOLDER', taskId);
            const res = await fetch(url);
            const data = await res.json();
            
            const pre = document.getElementById('consoleOutput');
            pre.textContent = data.content;
            pre.scrollTop = pre.scrollHeight; 
            
            if (data.finished) {
                clearInterval(pollInterval);
                if (data.exit_code === 0) {
                    document.getElementById('statusText').innerHTML = '<i class="fas fa-check-circle text-success"></i> Update Complete. Reloading...';
                    setTimeout(() => window.location.reload(), 3000);
                } else {
                    document.getElementById('statusText').innerHTML = `<i class="fas fa-times-circle text-danger"></i> Failed (Exit: ${data.exit_code})`;
                    enableClose();
                }
            }
        } catch (e) {
            console.error(e);
        }
    }, 1000);
}

function enableClose() {
    document.getElementById('closeConsoleBtn').disabled = false;
    document.getElementById('doneBtn').disabled = false;
}

function validateFileSize(input, maxKB) {
    if (input.files && input.files[0]) {
        if (input.files[0].size > maxKB * 1024) {
            alert('Il file è troppo grande. Il limite massimo è ' + maxKB + 'KB.');
            input.value = '';
        }
    }
}
</script>
{% endblock %}