{% extends "layout.html" %}
{% block title %}{{ _('PHP Manager') }}{% endblock %}
{% block content %}
<h2>PHP Manager</h2>
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Installed Versions</div>
            <ul class="list-group list-group-flush">
                {% for version in versions %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    PHP {{ version }}
                    <a href="{{ url_for('php_extensions', version=version) }}" class="btn btn-sm btn-outline-primary">Manage Extensions</a>
                </li>
                {% else %}
                <li class="list-group-item">No PHP versions found.</li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Install New Version</div>
            <div class="card-body">
                <form id="installForm" onsubmit="startInstall(event)">
                    <div class="input-group">
                        <select name="version" id="phpVersionSelect" class="form-select">
                            <option value="8.5">PHP 8.5</option>
                            <option value="8.4">PHP 8.4</option>
                            <option value="8.3">PHP 8.3</option>
                            <option value="8.2">PHP 8.2</option>
                            <option value="8.1">PHP 8.1</option>
                            <option value="7.4">PHP 7.4</option>
                        </select>
                        <button type="submit" class="btn btn-primary">Install</button>
                    </div>
                </form>
            </div>
        </div>
    </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> Installation 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... (Running in Screen)</span>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" disabled id="doneBtn">Close</button>
            </div>
        </div>
    </div>
</div>

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

async function startInstall(event) {
    event.preventDefault();
    const version = document.getElementById('phpVersionSelect').value;
    
    // Show Modal
    const modal = new bootstrap.Modal(document.getElementById('consoleModal'));
    document.getElementById('consoleOutput').textContent = "Starting installation task...\n";
    document.getElementById('statusText').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    document.getElementById('closeConsoleBtn').disabled = true;
    document.getElementById('doneBtn').disabled = true;
    modal.show();
    
    try {
        const response = await fetch("{{ url_for('start_install_php') }}", {
            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 {
            // Use url_for to handle proxy prefix correctly
            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; // Auto-scroll
            
            if (data.finished) {
                clearInterval(pollInterval);
                if (data.exit_code === 0) {
                    document.getElementById('statusText').innerHTML = '<i class="fas fa-check-circle text-success"></i> Completed Successfully';
                } else {
                    document.getElementById('statusText').innerHTML = `<i class="fas fa-times-circle text-danger"></i> Failed (Exit Code: ${data.exit_code})`;
                }
                enableClose();
                // Reload page on close to update list
                document.getElementById('doneBtn').onclick = () => window.location.reload();
            }
        } catch (e) {
            console.error("Polling error", e);
        }
    }, 1000);
}

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