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

<!-- Main Tabs -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white p-0 pt-3 border-bottom-0">
        <ul class="nav nav-tabs nav-tabs-custom px-4" id="mainTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('users_page') }}">Users</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="{{ url_for('hosts_page') }}">Virtual Hosts</a>
            </li>
        </ul>
    </div>
    
    <div class="card-body bg-light bg-opacity-25 rounded-bottom">
        <div class="d-flex justify-content-between align-items-center mb-3 px-2">
            <h5 class="mb-0 fw-bold text-dark">Managed Sites</h5>
            <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#createHostModal">
                <i class="fas fa-plus me-1"></i> Create Host
            </button>
        </div>

        <div class="list-group shadow-sm rounded-3 border-0">
            {% for host in hosts %}
            <div class="list-group-item p-4 border-start-0 border-end-0 {% if not loop.last %}border-bottom{% endif %}">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle bg-white shadow-sm p-3 me-3 text-primary d-flex align-items-center justify-content-center" style="width:50px;height:50px;">
                            <i class="fas fa-globe fa-lg"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold text-dark" style="font-size:1.1rem;">
                                {{ host.domain }}
                                {% if host.is_default %}
                                <span class="badge bg-primary ms-2" style="font-size: 0.7rem;">Default</span>
                                {% endif %}
                            </h6>
                            <div>
                                <span class="badge bg-white text-dark border shadow-sm fw-normal">PHP {{ host.php_version }}</span>
                                {% if host.ssl_enabled %}
                                <span class="badge bg-success bg-opacity-10 text-success border border-success fw-normal" {% if host.ssl_expiry %}title="Expires: {{ host.ssl_expiry|format_time('%Y-%m-%d') }}"{% endif %}>
                                    <i class="fas fa-lock me-1"></i> SSL {{ host.ssl_provider }}
                                    {% if host.ssl_expiry %}({{ host.ssl_expiry|format_time('%b %d, %Y') }}){% endif %}
                                </span>
                                {% else %}
                                <span class="badge bg-secondary bg-opacity-10 text-muted border fw-normal"><i class="fas fa-lock-open me-1"></i> No SSL</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-light btn-sm text-muted border me-1 shadow-sm" data-bs-toggle="modal" data-bs-target="#editHostModal{{ host.id }}" title="Edit Config"><i class="fas fa-cog"></i> Manage</button>
                        <form method="post" action="{{ url_for('delete_host', host_id=host.id) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this host? This cannot be undone.');">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-light btn-sm text-danger border shadow-sm" title="Delete"><i class="fas fa-trash"></i></button>
                        </form>
                    </div>
                </div>
                <div class="bg-light p-3 rounded-3 small text-muted mt-3 border">
                    <div class="row g-2">
                        <div class="col-md-6 font-monospace text-break">
                            <i class="fas fa-folder me-2 text-secondary"></i> {{ host.root_dir }}
                        </div>
                        <div class="col-md-6 text-md-end">
                            {% if host.is_suspended %}
                                <span class="badge bg-danger">SUSPENDED ({{ host.suspension_reason }})</span>
                                <form method="post" action="{{ url_for('toggle_host_status', host_id=host.id) }}" class="d-inline ms-2">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="action" value="unsuspend">
                                    <button type="submit" class="btn btn-xs btn-success py-0" style="font-size: 0.7rem;">Unsuspend</button>
                                </form>
                            {% else %}
                                <span class="badge bg-success">ACTIVE</span>
                                <form method="post" action="{{ url_for('toggle_host_status', host_id=host.id) }}" class="d-inline ms-2">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="action" value="suspend">
                                    <button type="submit" class="btn btn-xs btn-outline-danger py-0" style="font-size: 0.7rem;">Suspend</button>
                                </form>
                            {% endif %}
                            <form method="post" action="{{ url_for('refresh_host', host_id=host.id) }}" class="d-inline ms-1">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-xs btn-light border py-0" title="Refresh Config"><i class="fas fa-sync"></i></button>
                            </form>
                        </div>
                        <div class="col-12 border-top pt-2 mt-2">
                            <div class="d-flex justify-content-between">
                                <span><i class="fas fa-exchange-alt me-1"></i> Traffic: <strong>{{ (host.current_traffic_bytes / 1024 / 1024)|round(2) }} MB</strong> {% if host.traffic_limit_mb > 0 %}/ {{ host.traffic_limit_mb }} MB{% endif %}</span>
                                <span><i class="fas fa-hdd me-1"></i> Disk: <strong>{{ (host.current_disk_usage / 1024 / 1024)|round(2) }} MB</strong> {% if host.quota_limit_mb > 0 %}/ {{ host.quota_limit_mb }} MB{% endif %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="p-5 text-center text-muted">
                <i class="fas fa-wind fa-3x mb-3 text-light"></i>
                <p>No hosts found. Create one to get started.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="createHostModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">New Virtual Host</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form method="post" action="{{ url_for('create_host') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label text-muted small fw-bold">Domain Name</label>
                            <input type="text" name="domain" class="form-control" placeholder="example.com" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">PHP Version</label>
                            <select name="php_version" class="form-select">
                                {% for version in php_versions %}
                                <option value="{{ version }}">{{ version }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Host Type</label>
                            <select name="host_type" class="form-select">
                                <option value="php">PHP Application</option>
                                <option value="html">Static HTML</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small fw-bold">Template</label>
                            <select name="template" class="form-select">
                                <option value="default">Default</option>
                                <option value="wordpress">WordPress</option>
                                <option value="symfony">Symfony</option>
                                <option value="laravel">Laravel</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">User (Owner)</label>
                        <select name="user_id" class="form-select" required>
                            {% for user in users %}
                            <option value="{{ user.id }}">{{ user.username }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <h6 class="small text-muted fw-bold text-uppercase mt-4 mb-3">Limits & Quotas</h6>
                    <div class="row g-3">
                        <div class="col-md-4">
                             <label class="form-label small">Speed (KB/s)</label>
                             <input type="number" name="speed_limit" class="form-control form-control-sm" placeholder="Unlimited" value="0">
                        </div>
                        <div class="col-md-4">
                             <label class="form-label small">Connections</label>
                             <input type="number" name="conn_limit" class="form-control form-control-sm" placeholder="10" value="10">
                        </div>
                        <div class="col-md-4">
                             <label class="form-label small">Traffic (MB/Mo)</label>
                             <input type="number" name="traffic_limit" class="form-control form-control-sm" placeholder="Unlimited" value="0">
                        </div>
                        <div class="col-md-12">
                             <label class="form-label small">Disk Quota (MB)</label>
                             <input type="number" name="quota_mb" class="form-control form-control-sm" placeholder="Unlimited" value="0">
                        </div>
                    </div>
                    
                    <h6 class="small text-muted fw-bold text-uppercase mt-4 mb-3">Nginx Timeouts & Payload</h6>
                    <div class="row g-3">
                        <div class="col-md-3">
                             <label class="form-label small">Max Body (MB)<br><small class="text-muted">0 = default 10</small></label>
                             <input type="number" name="ng_max_body" class="form-control form-control-sm" placeholder="0" value="0" min="0" max="1024">
                        </div>
                        <div class="col-md-3">
                             <label class="form-label small">Body Timeout (s)<br><small class="text-muted">0 = default 10</small></label>
                             <input type="number" name="ng_body_timeout" class="form-control form-control-sm" placeholder="0" value="0" min="0" max="3600">
                        </div>
                        <div class="col-md-3">
                             <label class="form-label small">Header Timeout (s)<br><small class="text-muted">0 = default 10</small></label>
                             <input type="number" name="ng_header_timeout" class="form-control form-control-sm" placeholder="0" value="0" min="0" max="3600">
                        </div>
                        <div class="col-md-3">
                             <label class="form-label small">Keepalive (s)<br><small class="text-muted">0 = default 15</small></label>
                             <input type="number" name="ng_keepalive" class="form-control form-control-sm" placeholder="0" value="0" min="0" max="3600">
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end mt-4 pt-3 border-top">
                        <button type="button" class="btn btn-light me-2 text-muted" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-4 fw-bold">Create Host</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function toggleSSLFields(select, id) {
    var manualDiv = document.getElementById('manualSSL' + id);
    if (select.value === 'manual') {
        manualDiv.style.display = 'block';
    } else {
        manualDiv.style.display = 'none';
    }
}
</script>

{% for host in hosts %}
<!-- Edit Modal per host -->
<div class="modal fade" id="editHostModal{{ host.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light border-bottom-0">
                <h5 class="modal-title fw-bold">Manage {{ host.domain }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="modal-body p-0">
                <!-- Integrated Tabs in Modal -->
                <div class="card shadow-none border-0">
                    <div class="card-header bg-light p-0 pt-2 border-bottom">
                        <ul class="nav nav-tabs nav-tabs-custom px-4" id="myTab{{ host.id }}" role="tablist">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#general{{ host.id }}" type="button">General</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ssl{{ host.id }}" type="button">SSL Security</button>
                            </li>
                             <li class="nav-item">
                                 <button class="nav-link" data-bs-toggle="tab" data-bs-target="#php{{ host.id }}" type="button">PHP Engine</button>
                             </li>
                             <li class="nav-item">
                                 <button class="nav-link" data-bs-toggle="tab" data-bs-target="#config{{ host.id }}" type="button" onclick="loadConfig('{{ host.id }}')">Config</button>
                             </li>
                        </ul>
                    </div>
                    <div class="card-body p-4">
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="general{{ host.id }}">
                                <form method="post" action="{{ url_for('update_host_settings', host_id=host.id) }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Host Type</label>
                                            <select name="host_type" class="form-select">
                                                <option value="php" {% if host.host_type == 'php' %}selected{% endif %}>PHP</option>
                                                <option value="html" {% if host.host_type == 'html' %}selected{% endif %}>HTML</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">App Template</label>
                                            <select name="template" class="form-select">
                                                <option value="default" {% if host.template == 'default' %}selected{% endif %}>Default</option>
                                                <option value="wordpress" {% if host.template == 'wordpress' %}selected{% endif %}>WordPress</option>
                                                <option value="symfony" {% if host.template == 'symfony' %}selected{% endif %}>Symfony</option>
                                                <option value="laravel" {% if host.template == 'laravel' %}selected{% endif %}>Laravel</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">PHP Version</label>
                                        <select name="php_version" class="form-select">
                                            {% for version in php_versions %}
                                            <option value="{{ version }}" {% if host.php_version == version %}selected{% endif %}>{{ version }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    
                                    <h6 class="text-muted fw-bold small text-uppercase mb-3">Resource Limits</h6>
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <label class="form-label small">Speed (KB/s)</label>
                                            <input type="number" name="speed_limit" class="form-control" value="{{ host.speed_limit_kbps }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Connections</label>
                                            <input type="number" name="conn_limit" class="form-control" value="{{ host.max_concurrent_connections }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Traffic (MB)</label>
                                            <input type="number" name="traffic_limit" class="form-control" value="{{ host.traffic_limit_mb }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Disk Quota (MB)</label>
                                            <input type="number" name="quota_mb" class="form-control" value="{{ host.quota_limit_mb }}">
                                        </div>
                                    </div>
                                    
                                    <h6 class="text-muted fw-bold small text-uppercase mt-4 mb-3">Nginx Timeouts & Payload</h6>
                                    <div class="row g-3">
                                        <div class="col-6">
                                            <label class="form-label small">Max Body Size (MB) <small class="text-muted">(0 = default 10)</small></label>
                                            <input type="number" name="ng_max_body" class="form-control" value="{{ host.nginx_max_body_size_mb or 0 }}" min="0" max="1024">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Keepalive Timeout (s) <small class="text-muted">(0 = default 15)</small></label>
                                            <input type="number" name="ng_keepalive" class="form-control" value="{{ host.nginx_keepalive_timeout or 0 }}" min="0" max="3600">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Body Timeout (s) <small class="text-muted">(0 = default 10)</small></label>
                                            <input type="number" name="ng_body_timeout" class="form-control" value="{{ host.nginx_client_body_timeout or 0 }}" min="0" max="3600">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Header Timeout (s) <small class="text-muted">(0 = default 10)</small></label>
                                            <input type="number" name="ng_header_timeout" class="form-control" value="{{ host.nginx_client_header_timeout or 0 }}" min="0" max="3600">
                                        </div>
                                    </div>
                                    <div class="mt-4 pt-3 border-top text-end">
                                        <button type="submit" class="btn btn-primary fw-bold">Save Changes</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="ssl{{ host.id }}">
                                <form method="post" action="{{ url_for('update_host_ssl', host_id=host.id) }}" onsubmit="handleSSLSubmit(event, this)">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <div class="mb-4">
                                        <label class="form-label fw-bold">SSL Provider</label>
                                        <select name="ssl_type" class="form-select" onchange="toggleSSLFields(this, '{{ host.id }}')">
                                            <option value="none" {% if not host.ssl_enabled %}selected{% endif %}>Disabled (HTTP Only)</option>
                                            <option value="manual" {% if host.ssl_enabled and host.ssl_provider == 'manual' %}selected{% endif %}>Manual Certificate Upload</option>
                                            <option value="self" {% if host.ssl_enabled and host.ssl_provider == 'self' %}selected{% endif %}>Self-Signed (Development)</option>
                                            <option value="letsencrypt" {% if host.ssl_enabled and host.ssl_provider == 'letsencrypt' %}selected{% endif %}>Let's Encrypt (Automated)</option>
                                        </select>
                                    </div>
                                    <div id="manualSSL{{ host.id }}" style="{% if host.ssl_enabled and host.ssl_provider == 'manual' %}display:block{% else %}display:none{% endif %};" class="bg-light p-3 rounded mb-3">
                                        <div class="mb-3">
                                            <label class="small fw-bold">Certificate (PEM/CRT)</label>
                                            <textarea name="cert_content" class="form-control font-monospace small" rows="4"></textarea>
                                        </div>
                                        <div class="mb-0">
                                            <label class="small fw-bold">Private Key (KEY)</label>
                                            <textarea name="key_content" class="form-control font-monospace small" rows="4"></textarea>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary fw-bold">Update SSL</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="php{{ host.id }}">
                                <form method="post" action="{{ url_for('update_host_settings', host_id=host.id) }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <!-- Hidden fields -->
                                    <input type="hidden" name="php_version" value="{{ host.php_version }}">
                                    <input type="hidden" name="speed_limit" value="{{ host.speed_limit_kbps }}">
                                    <input type="hidden" name="traffic_limit" value="{{ host.traffic_limit_mb }}">
                                    <input type="hidden" name="quota_mb" value="{{ host.quota_limit_mb }}">
                                    <input type="hidden" name="ng_max_body" value="{{ host.nginx_max_body_size_mb or 0 }}">
                                    <input type="hidden" name="ng_body_timeout" value="{{ host.nginx_client_body_timeout or 0 }}">
                                    <input type="hidden" name="ng_header_timeout" value="{{ host.nginx_client_header_timeout or 0 }}">
                                    <input type="hidden" name="ng_keepalive" value="{{ host.nginx_keepalive_timeout or 0 }}">
                                    
                                    <div class="alert alert-info py-2 small"><i class="fas fa-info-circle me-1"></i> Advanced PHP-FPM Pool Settings</div>
                                    
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label small fw-bold">Process Manager</label>
                                            <select name="php_pm" class="form-select form-select-sm">
                                                <option value="ondemand" {% if host.php_pm == 'ondemand' %}selected{% endif %}>OnDemand (Recommended)</option>
                                                <option value="dynamic" {% if host.php_pm == 'dynamic' %}selected{% endif %}>Dynamic</option>
                                                <option value="static" {% if host.php_pm == 'static' %}selected{% endif %}>Static</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small fw-bold">Max Children</label>
                                            <input type="number" name="php_max_children" class="form-control form-control-sm" value="{{ host.php_max_children }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label small fw-bold">Memory Limit</label>
                                            <input type="text" name="php_memory_limit" class="form-control form-control-sm" value="{{ host.php_memory_limit }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label small fw-bold">Upload Max</label>
                                            <input type="text" name="php_upload_max_filesize" class="form-control form-control-sm" value="{{ host.php_upload_max_filesize }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label small fw-bold">Max Exec Time</label>
                                            <input type="number" name="php_max_execution_time" class="form-control form-control-sm" value="{{ host.php_max_execution_time }}">
                                        </div>
                                    </div>
                                    <div class="mt-4 text-end">
                                        <button type="submit" class="btn btn-primary fw-bold">Apply PHP Config</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="config{{ host.id }}">
                                <div class="mb-3 d-flex justify-content-between align-items-center">
                                    <small class="text-danger fw-bold"><i class="fas fa-exclamation-triangle"></i> Advanced: Editing Nginx Config manually.</small>
                                    <span class="badge bg-dark">ReadOnly Preview until Saved</span>
                                </div>
                                <textarea id="configEditor{{ host.id }}" class="form-control font-monospace bg-dark text-white small mb-3 border-0" rows="15" style="font-size:0.8rem;"></textarea>
                                <div class="text-end">
                                    <button type="button" class="btn btn-success fw-bold" onclick="saveConfig('{{ host.id }}')"><i class="fas fa-save me-1"></i> Write Configuration</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
async function loadConfig(hostId) {
    const textarea = document.getElementById('configEditor' + hostId);
    textarea.value = "Loading...";
    try {
        const res = await fetch("{{ url_for('get_host_config', host_id=0) }}".replace(/\/0$/, '/' + hostId));
        let data;
        try {
            data = await res.json();
        } catch (parseErr) {
            textarea.value = "Error: Server returned an unexpected response (HTTP " + res.status + "). Please refresh the page and try again.";
            return;
        }
        if (data.error) textarea.value = "Error: " + data.error;
        else textarea.value = data.content;
    } catch (e) {
        textarea.value = "Fetch Error: " + e;
    }
}

async function saveConfig(hostId) {
    const content = document.getElementById('configEditor' + hostId).value;
    if (!confirm("Are you sure? Bad config will break Nginx reload.")) return;
    
    try {
        const res = await fetch("{{ url_for('save_host_config', host_id=0) }}".replace(/\/0$/, '/' + hostId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': "{{ csrf_token() }}"
            },
            body: JSON.stringify({ content: content })
        });
        let data;
        try {
            data = await res.json();
        } catch (parseErr) {
            alert("Error: Server returned an unexpected response (HTTP " + res.status + "). Please refresh the page and try again.");
            return;
        }
        if (data.status === 'saved') alert("Config saved and Nginx reloaded.");
        else alert("Error: " + data.error);
} catch (e) {
        alert("Request Failed: " + e);
    }
}

let pollInterval;
async function handleSSLSubmit(e, form) {
    const sslType = form.elements['ssl_type'].value;
    if (sslType === 'letsencrypt' || sslType === 'self') {
        e.preventDefault();
        
        const modal = new bootstrap.Modal(document.getElementById('consoleModal'));
        document.getElementById('consoleOutput').textContent = "Starting SSL generation process...\n";
        document.getElementById('statusText').innerHTML = '<i class="fas fa-spinner fa-spin text-primary"></i> Working...';
        document.getElementById('closeConsoleBtn').disabled = true;
        document.getElementById('doneBtn').disabled = true;
        modal.show();
        
        try {
            const formData = new FormData(form);
            const res = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            });
            const data = await res.json();
            if (res.ok && data.task_id) {
                pollLog(data.task_id);
            } else {
                document.getElementById('consoleOutput').textContent += `\nError: ${data.error || 'Unknown error'}`;
                enableClose();
            }
        } catch (err) {
            document.getElementById('consoleOutput').textContent += `\nRequest Failed: ${err}`;
            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> Complete. Reloading...';
                    setTimeout(() => window.location.reload(), 2000);
                } else {
                    document.getElementById('statusText').innerHTML = `<i class="fas fa-times-circle text-danger"></i> Failed (Exit: ${data.exit_code})`;
                    enableClose();
                }
            }
        } catch (e) {
            console.error("Polling error", e);
        }
    }, 1000);
}

function enableClose() {
    if(pollInterval) clearInterval(pollInterval);
    document.getElementById('closeConsoleBtn').disabled = false;
    document.getElementById('doneBtn').disabled = false;
}
</script>

<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 bg-dark text-light" style="height: 350px; overflow-y: auto; font-size: 0.85rem; border-radius: 0;"></pre>
            </div>
            <div class="modal-footer border-secondary">
                <span id="statusText" class="me-auto font-monospace small"></span>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" disabled id="doneBtn">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}