{% extends "layout.html" %}
{% block content %}
<h2>Manage Extensions for PHP {{ version }}</h2>
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Common Extensions</div>
            <ul class="list-group list-group-flush">
                {% for ext in common_extensions %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ ext }}
                    <form onsubmit="startExtInstall(event, '{{ ext }}')" style="display:inline;">
                        <button type="submit" class="btn btn-sm btn-success">Install</button>
                    </form>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Custom Extension</div>
            <div class="card-body">
                <form onsubmit="startExtInstall(event)">
                    <div class="input-group">
                        <input type="text" id="customExtInput" class="form-control" placeholder="e.g. imagick" required>
                        <button type="submit" class="btn btn-primary">Install</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="mt-3">
    <a href="{{ url_for('php_page') }}" class="btn btn-secondary">Back to PHP Manager</a>
</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() }}";
const phpVersion = "{{ version }}";

async function startExtInstall(event, extName) {
    event.preventDefault();
    let extension = extName;
    
    if (!extension) {
        extension = document.getElementById('customExtInput').value;
    }
    
    if (!extension) return;
    
    // Show Modal
    const modal = new bootstrap.Modal(document.getElementById('consoleModal'));
    document.getElementById('consoleOutput').textContent = `Starting installation for php${phpVersion}-${extension}...\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_ext') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken
            },
            body: JSON.stringify({ version: phpVersion, extension: extension })
        });
        
        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 logic for proxy compatibility
            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> Completed Successfully';
                } else {
                    document.getElementById('statusText').innerHTML = `<i class="fas fa-times-circle text-danger"></i> Failed (Exit Code: ${data.exit_code})`;
                }
                enableClose();
            }
        } catch (e) {
            console.error("Polling error", e);
        }
    }, 1000);
}

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