{% extends "base.html" %}

{% block title %}Module Manager - ScanLook{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-puzzle-piece"></i> Module Manager</h1>
        <a href="{{ url_for('home') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Home
        </a>
    </div>

    <p class="lead">Install, uninstall, and manage ScanLook modules</p>

    <div class="row">
        {% for module in modules %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 {% if module.is_active %}border-success{% elif module.is_installed %}border-warning{% endif %}">
                <div class="card-header {% if module.is_active %}bg-success text-white{% elif module.is_installed %}bg-warning text-dark{% else %}bg-light{% endif %}">
                    <h5 class="mb-0">
                        <i class="fas fa-cube"></i> {{ module.name }}
                        <span class="badge badge-secondary float-right">v{{ module.version }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">{{ module.description }}</p>
                    
                    <p class="mb-2">
                        <small class="text-muted">
                            <strong>Author:</strong> {{ module.author }}<br>
                            <strong>Module Key:</strong> <code>{{ module.module_key }}</code>
                        </small>
                    </p>

                    <div class="mt-3">
                        {% if module.is_installed and module.is_active %}
                        <span class="badge badge-success mb-2">
                            <i class="fas fa-check-circle"></i> Active
                        </span>
                        {% elif module.is_installed %}
                        <span class="badge badge-warning mb-2">
                            <i class="fas fa-pause-circle"></i> Installed (Inactive)
                        </span>
                        {% else %}
                        <span class="badge badge-secondary mb-2">
                            <i class="fas fa-times-circle"></i> Not Installed
                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class="card-footer bg-light">
                    {% if not module.is_installed %}
                    <button class="btn btn-primary btn-sm btn-block" onclick="installModule('{{ module.module_key }}')">
                        <i class="fas fa-download"></i> Install
                    </button>
                    {% elif module.is_active %}
                    <button class="btn btn-warning btn-sm btn-block mb-2" onclick="deactivateModule('{{ module.module_key }}')">
                        <i class="fas fa-pause"></i> Deactivate
                    </button>
                    <button class="btn btn-danger btn-sm btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
                        <i class="fas fa-trash"></i> Uninstall
                    </button>
                    {% else %}
                    <button class="btn btn-success btn-sm btn-block mb-2" onclick="activateModule('{{ module.module_key }}')">
                        <i class="fas fa-play"></i> Activate
                    </button>
                    <button class="btn btn-danger btn-sm btn-block" onclick="uninstallModule('{{ module.module_key }}', '{{ module.name }}')">
                        <i class="fas fa-trash"></i> Uninstall
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if not modules %}
    <div class="alert alert-info">
        <i class="fas fa-info-circle"></i> No modules found in the <code>/modules</code> directory.
    </div>
    {% endif %}
</div>

<script>
function installModule(moduleKey) {
    if (!confirm(`Install module "${moduleKey}"?\n\nThis will create database tables and activate the module.`)) {
        return;
    }
    
    fetch(`/admin/modules/${moduleKey}/install`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.restart_required) {
                // Auto-restart server
                alert(`✅ ${data.message}\n\nServer will restart automatically...`);
                restartServerSilent();  // Restart without confirmation
            } else {
                alert(`✅ ${data.message}`);
                location.reload();
            }
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function restartServerSilent() {
    // Auto-restart without confirmation (used after module install)
    fetch('/admin/restart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show loading message
            document.body.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; background: #1a1a1a; color: white;">
                    <div style="font-size: 48px; margin-bottom: 20px;">🔄</div>
                    <h1>Server Restarting...</h1>
                    <p>Module installed successfully. Please wait...</p>
                </div>
            `;
            
            // Wait 3 seconds then reload
            setTimeout(() => {
                location.reload();
            }, 3000);
        }
    })
    .catch(error => {
        alert(`❌ Restart failed: ${error}\n\nPlease restart manually.`);
    });
}

/**
 * 3-Stage Uninstall Confirmation - ALWAYS DELETES DATA
 * If users want to keep data, they should use "Deactivate" instead
 */

function uninstallModule(moduleKey, moduleName) {
    // STAGE 1: Initial warning
    const stage1Modal = `
        <div id="uninstall-modal-stage1" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 2px solid #ffc107; border-radius: 8px; padding: 30px; max-width: 500px; color: white;">
                <h2 style="color: #ffc107; margin-top: 0;">⚠️ Uninstall Module?</h2>
                <p style="margin: 20px 0; font-size: 18px;">Module: <strong>${moduleName}</strong></p>
                <p style="margin: 20px 0;">This will:</p>
                <ul style="margin: 20px 0; padding-left: 20px;">
                    <li>Deactivate the module</li>
                    <li>Remove it from the system</li>
                    <li>Users will lose access</li>
                    <li style="color: #dc3545; font-weight: bold;">DELETE ALL DATA PERMANENTLY</li>
                </ul>
                <p style="margin: 20px 0; background: #2d2d2d; padding: 15px; border-radius: 4px; color: #28a745;">
                    💡 <strong>Want to keep the data?</strong><br>
                    Use "Deactivate" instead of "Uninstall"
                </p>
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 12px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Cancel
                    </button>
                    <button onclick="proceedToStage2('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 12px; background: #ffc107; color: #1a1a1a; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Continue
                    </button>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', stage1Modal);
}

function proceedToStage2(moduleKey, moduleName) {
    // Remove stage 1
    document.getElementById('uninstall-modal-stage1').remove();
    
    // STAGE 2: Data deletion warning
    const stage2Modal = `
        <div id="uninstall-modal-stage2" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 3px solid #dc3545; border-radius: 8px; padding: 30px; max-width: 550px; color: white;">
                <h2 style="color: #dc3545; margin-top: 0;">🚨 Data Will Be Deleted</h2>
                <p style="margin: 20px 0; font-size: 18px;">Module: <strong>${moduleName}</strong></p>
                <div style="background: #2d2d2d; padding: 20px; border-radius: 4px; margin: 20px 0; border-left: 4px solid #dc3545;">
                    <p style="margin: 0 0 15px 0; color: #dc3545; font-weight: bold; font-size: 16px;">⚠️ This will permanently delete:</p>
                    <ul style="margin: 10px 0; color: #fff; line-height: 1.8;">
                        <li>All sessions</li>
                        <li>All scans and entries</li>
                        <li>All locations</li>
                        <li>All historical data</li>
                        <li>All database tables</li>
                    </ul>
                    <p style="margin: 15px 0 0 0; color: #dc3545; font-weight: bold; font-size: 18px;">THIS CANNOT BE UNDONE!</p>
                </div>
                <p style="margin: 20px 0; color: #ffc107; text-align: center; font-weight: bold;">
                    Are you absolutely sure you want to proceed?
                </p>
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 14px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        ✓ Cancel (Safe)
                    </button>
                    <button onclick="proceedToStage3('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 14px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        Yes, Continue
                    </button>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', stage2Modal);
}

function proceedToStage3(moduleKey, moduleName) {
    // Remove stage 2
    document.getElementById('uninstall-modal-stage2').remove();
    
    // STAGE 3: Type "DELETE" confirmation
    const stage3Modal = `
        <div id="uninstall-modal-stage3" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 9999;">
            <div style="background: #1a1a1a; border: 4px solid #dc3545; border-radius: 8px; padding: 35px; max-width: 500px; color: white; box-shadow: 0 0 30px rgba(220, 53, 69, 0.5);">
                <h2 style="color: #dc3545; margin-top: 0; text-align: center;">🚨 FINAL WARNING 🚨</h2>
                <p style="margin: 25px 0; font-size: 18px; text-align: center;">Module: <strong>${moduleName}</strong></p>
                <div style="background: #dc3545; color: white; padding: 20px; border-radius: 4px; margin: 25px 0; text-align: center;">
                    <p style="margin: 0; font-weight: bold; font-size: 20px;">
                        ALL DATA WILL BE<br>PERMANENTLY DELETED
                    </p>
                </div>
                <p style="margin: 25px 0; text-align: center; font-size: 15px;">
                    This is your <strong style="color: #dc3545;">LAST CHANCE</strong> to cancel.
                </p>
                <p style="margin: 20px 0; font-weight: bold;">Type <span style="color: #dc3545; font-size: 18px;">DELETE</span> to confirm:</p>
                <input type="text" id="delete-confirmation-text" placeholder="Type DELETE here" style="width: 100%; padding: 14px; font-size: 18px; border: 3px solid #dc3545; border-radius: 4px; background: #2d2d2d; color: white; box-sizing: border-box; text-align: center; font-weight: bold;" autocomplete="off">
                <p id="delete-text-error" style="color: #dc3545; margin: 10px 0; text-align: center; font-weight: bold; display: none;">❌ You must type DELETE exactly</p>
                <div style="display: flex; gap: 10px; margin-top: 25px;">
                    <button onclick="cancelUninstall()" style="flex: 1; padding: 14px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 17px; font-weight: bold;">
                        ✓ Cancel (Safe)
                    </button>
                    <button onclick="finalUninstall('${moduleKey}', '${moduleName}')" style="flex: 1; padding: 14px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 17px; font-weight: bold;">
                        Delete Everything
                    </button>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', stage3Modal);
    
    // Focus the input
    setTimeout(() => {
        document.getElementById('delete-confirmation-text').focus();
    }, 100);
}

function cancelUninstall() {
    // Remove any open modals
    const modal1 = document.getElementById('uninstall-modal-stage1');
    const modal2 = document.getElementById('uninstall-modal-stage2');
    const modal3 = document.getElementById('uninstall-modal-stage3');
    if (modal1) modal1.remove();
    if (modal2) modal2.remove();
    if (modal3) modal3.remove();
}

function finalUninstall(moduleKey, moduleName) {
    const confirmText = document.getElementById('delete-confirmation-text').value;
    
    if (confirmText !== 'DELETE') {
        document.getElementById('delete-text-error').style.display = 'block';
        document.getElementById('delete-confirmation-text').style.borderColor = '#ff0000';
        document.getElementById('delete-confirmation-text').style.boxShadow = '0 0 10px rgba(255, 0, 0, 0.5)';
        document.getElementById('delete-confirmation-text').focus();
        return;
    }
    
    // Remove modal
    document.getElementById('uninstall-modal-stage3').remove();
    
    // Actually uninstall - ALWAYS delete tables
    fetch(`/admin/modules/${moduleKey}/uninstall`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nAll data has been permanently deleted.\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function activateModule(moduleKey) {
    fetch(`/admin/modules/${moduleKey}/activate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}

function deactivateModule(moduleKey) {
    if (!confirm(`Deactivate module "${moduleKey}"?\n\nUsers will lose access until reactivated.`)) {
        return;
    }

    fetch(`/admin/modules/${moduleKey}/deactivate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ ${data.message}\n\nPlease reload the page.`);
            location.reload();
        } else {
            alert(`❌ ${data.message}`);
        }
    })
    .catch(error => {
        alert(`❌ Error: ${error}`);
    });
}
</script>
{% endblock %}