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

{% if setup_needed %}
<div class="alert alert-warning">
    <h4 class="alert-heading">MySQL/MariaDB Not Configured</h4>
    <p>Limristem Web cannot connect to the database server. Error: {{ setup_error }}</p>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-white">Install MariaDB Server</div>
            <div class="card-body">
                <p>If MariaDB is not installed on this server, Limristem Web can install and secure it for you.</p>
                <form id="installMysqlForm" onsubmit="startMysqlInstall(event)">
                    <button type="submit" class="btn btn-primary">Install MariaDB & Secure</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-white">Connect Existing Server</div>
            <div class="card-body">
                <p>If MariaDB is already running (localhost), provide the root password to connect.</p>
                <form method="post" action="{{ url_for('setup_mysql_config') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label class="form-label">Root Password</label>
                        <input type="password" name="root_password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-success">Save Configuration</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% else %}

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Databases</h5>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createDbModal"><i class="fas fa-plus"></i> New DB</button>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    {% for db in databases %}
                    <li class="list-group-item">{{ db }}</li>
                    {% else %}
                    <li class="list-group-item text-muted">No databases found.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Database Users</h5>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal"><i class="fas fa-plus"></i> New User</button>
            </div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    {% for user in db_users %}
                    <li class="list-group-item">{{ user.User }}@{{ user.Host }}</li>
                    {% else %}
                    <li class="list-group-item text-muted">No users found.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-white">Grant Privileges</div>
    <div class="card-body">
        <form method="post" action="{{ url_for('grant_db_privileges') }}" class="row g-3 align-items-end">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="col-auto">
                <label class="form-label">Database</label>
                <select name="dbname" class="form-select">
                    {% for db in databases %}
                    <option value="{{ db }}">{{ db }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label">User</label>
                <select name="username" class="form-select">
                    {% for user in db_users %}
                    <option value="{{ user.User }}">{{ user.User }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-success">Grant All</button>
            </div>
        </form>
    </div>
</div>
{% endif %}

<!-- Create DB Modal -->
<div class="modal fade" id="createDbModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Database</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ url_for('create_db') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label>Database Name</label>
                        <input type="text" name="dbname" class="form-control" required pattern="[a-zA-Z0-9]+">
                    </div>
                    <button type="submit" class="btn btn-primary">Create</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ url_for('create_db_user') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label>Username</label>
                        <input type="text" name="username" class="form-control" required pattern="[a-zA-Z0-9]+">
                    </div>
                    <div class="mb-3">
                        <label>Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Create</button>
                </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 startMysqlInstall(event) {
    event.preventDefault();
    
    // Show Modal
    const modal = new bootstrap.Modal(document.getElementById('consoleModal'));
    document.getElementById('consoleOutput').textContent = "Starting MySQL 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_mysql_install') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken
            },
            body: JSON.stringify({})
        });
        
        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;
            
            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();
                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 %}