{% extends "base.html" %}

{% block title %}Admin Panel - Flask Files{% endblock %}

{% block content %}
<div class="container">
    <div class="admin-panel">
        <div class="admin-header">
            <h2><i class="fas fa-cog"></i> Admin Panel</h2>
        </div>

        <div class="admin-section">
            <h3>Database Management</h3>
            <div class="admin-card">
                <div class="admin-card-header">
                    <h4>Database Migrations</h4>
                </div>
                <div class="admin-card-body">
                    <p>Run database migrations to update the schema if needed.</p>
                    <button id="run-migrations-btn" class="btn primary">
                        <i class="fas fa-database"></i> Run Migrations
                    </button>
                    <div id="migration-result" class="mt-3" style="display: none;"></div>
                </div>
            </div>

            <div class="admin-card mt-4">
                <div class="admin-card-header">
                    <h4>Reset Database</h4>
                </div>
                <div class="admin-card-body">
                    <p class="text-danger">
                        <strong>WARNING:</strong> This will delete all data and recreate the database structure.
                        All files, folders, and user accounts will be permanently deleted.
                    </p>
                    <button id="reset-db-btn" class="btn danger">
                        <i class="fas fa-exclamation-triangle"></i> Reset Database
                    </button>
                    <div id="reset-result" class="mt-3" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirm-reset-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Confirm Database Reset</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert warning">
                <i class="fas fa-exclamation-triangle"></i>
                <p>
                    <strong>WARNING:</strong> You are about to reset the entire database.
                    This action cannot be undone.
                </p>
                <p>All files, folders, users, and settings will be permanently deleted.</p>
            </div>
            <p>Type "RESET" in the box below to confirm:</p>
            <input type="text" id="reset-confirm-text" class="form-control mt-3" placeholder="Type RESET to confirm">
        </div>
        <div class="modal-footer">
            <button class="btn" id="cancel-reset-btn">Cancel</button>
            <button class="btn danger" id="confirm-reset-btn" disabled>Reset Database</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const migrationsBtn = document.getElementById('run-migrations-btn');
        const resultDiv = document.getElementById('migration-result');
        const resetBtn = document.getElementById('reset-db-btn');
        const resetResultDiv = document.getElementById('reset-result');
        const resetConfirmText = document.getElementById('reset-confirm-text');
        const confirmResetBtn = document.getElementById('confirm-reset-btn');
        const cancelResetBtn = document.getElementById('cancel-reset-btn');

        if (migrationsBtn) {
            migrationsBtn.addEventListener('click', function () {
                // Show loading state
                migrationsBtn.disabled = true;
                migrationsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Running...';
                resultDiv.style.display = 'none';

                // Call the migrations endpoint
                fetch('/admin/run-migrations', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        // Reset button
                        migrationsBtn.disabled = false;
                        migrationsBtn.innerHTML = '<i class="fas fa-database"></i> Run Migrations';

                        // Show result
                        resultDiv.style.display = 'block';
                        if (data.success) {
                            resultDiv.innerHTML = '<div class="alert success"><i class="fas fa-check-circle"></i> ' + data.message + '</div>';
                        } else {
                            resultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> ' + data.error + '</div>';
                        }
                    })
                    .catch(error => {
                        // Error handling
                        migrationsBtn.disabled = false;
                        migrationsBtn.innerHTML = '<i class="fas fa-database"></i> Run Migrations';
                        resultDiv.style.display = 'block';
                        resultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> Error: ' + error.message + '</div>';
                    });
            });
        }

        if (resetBtn) {
            resetBtn.addEventListener('click', function () {
                // Show confirmation modal
                openModal('confirm-reset-modal');
            });
        }

        if (resetConfirmText) {
            resetConfirmText.addEventListener('input', function () {
                confirmResetBtn.disabled = this.value !== 'RESET';
            });
        }

        if (cancelResetBtn) {
            cancelResetBtn.addEventListener('click', function () {
                closeModal('confirm-reset-modal');
            });
        }

        if (confirmResetBtn) {
            confirmResetBtn.addEventListener('click', function () {
                // Close modal
                closeModal('confirm-reset-modal');

                // Show loading state
                resetBtn.disabled = true;
                resetBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Resetting...';
                resetResultDiv.style.display = 'none';

                // Call the reset endpoint
                fetch('/admin/reset-database', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        // Reset button
                        resetBtn.disabled = false;
                        resetBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Reset Database';

                        // Show result
                        resetResultDiv.style.display = 'block';
                        if (data.success) {
                            resetResultDiv.innerHTML = '<div class="alert success"><i class="fas fa-check-circle"></i> ' + data.message + '</div>';
                            // Redirect to login after a delay
                            setTimeout(function () {
                                window.location.href = '/auth/login';
                            }, 3000);
                        } else {
                            resetResultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> ' + data.error + '</div>';
                        }
                    })
                    .catch(error => {
                        // Error handling
                        resetBtn.disabled = false;
                        resetBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Reset Database';
                        resetResultDiv.style.display = 'block';
                        resetResultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> Error: ' + error.message + '</div>';
                    });
            });
        }
    });
</script>
{% endblock %}