/**
 * Laila AI - Maintenance Notification System
 * Programmatically disables job creation during system updates (e.g., Google Updates)
 */

// Global flag to toggle maintenance mode
// Set to true to enable maintenance mode across all integrated pages
const Mainaticne = true;

// Modal structure with modern glass-morphism design
const maintenanceModalHTML = `
<div id="maintenance-overlay" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
">
    <div id="maintenance-modal" style="
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 32px;
        padding: 48px;
        max-width: 550px;
        width: 100%;
        text-align: center;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        transform: translateY(20px);
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    ">
        <div style="
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 32px;
            box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.2);
        ">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-construction"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M10.5 10.5l3 3"/><path d="M13.5 10.5l-3 3"/><path d="M2 10h20"/><path d="M8 6v12"/><path d="M16 6v12"/></svg>
        </div>
        
        <h2 style="
            font-family: 'Inter', sans-serif;
            font-size: 28px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        ">Temporary Maintenance</h2>
        
        <p style="
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #475569;
            margin-bottom: 32px;
        ">
            We are experiencing temporary issues with <b>Video Generation</b> due to a recent Google update. Our team is already working on a fix.
            <br><br>
            As a gesture of goodwill, we will <b>increase your subscription expiry date</b> once resolution is complete. Your payments are fully secured.
        </p>

        <div style="
            background: rgba(251, 191, 36, 0.1);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 32px;
            border: 1px dashed rgba(251, 191, 36, 0.4);
        ">
            <p style="
                font-family: 'Inter', sans-serif;
                font-size: 14px;
                font-weight: 600;
                color: #b45309;
                margin: 0;
            ">Status: Addressing Google Update Issues</p>
        </div>

        <button onclick="document.getElementById('maintenance-overlay').style.display='none'" style="
            background: #0f172a;
            color: white;
            padding: 16px 40px;
            border-radius: 16px;
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.3);
        " onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
            I Understand
        </button>
        
        <p style="
            margin-top: 24px;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
        ">Sorry for the inconvenience. We'll be back shortly!</p>
    </div>
</div>
`;

// Execution logic
if (typeof Mainaticne !== 'undefined' && Mainaticne === true) {
    window.addEventListener('load', () => {
        showMaintenanceNotice();
        disableFormSubmissions();
    });
}

/**
 * Injects the maintenance modal into the page
 */
function showMaintenanceNotice() {
    // Prevent multiple injections
    if (document.getElementById('maintenance-overlay')) return;

    // Create a container and inject HTML
    const container = document.createElement('div');
    container.innerHTML = maintenanceModalHTML;
    document.body.appendChild(container.firstElementChild);

    const overlay = document.getElementById('maintenance-overlay');
    const modal = document.getElementById('maintenance-modal');

    // Trigger animation
    setTimeout(() => {
        overlay.style.opacity = '1';
        modal.style.transform = 'translateY(0)';
    }, 100);
}

/**
 * Programmatically disables all job submission buttons and forms
 */
function disableFormSubmissions() {
    // List of known job submission buttons across various files
    const jobButtons = [
        'submitBtn', 
        'execute-btn', 
        'exportSubmitBtn', 
        'finalizeCreateBtn', 
        'generateAutoPromptsBtn', 
        'generateCharacterPromptsBtn', 
        'startAnalysisBtn'
    ];

    jobButtons.forEach(btnId => {
        const btn = document.getElementById(btnId);
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i data-lucide="lock" class="w-5 h-5"></i> Under Maintenance';
            btn.style.background = '#94a3b8';
            btn.style.cursor = 'not-allowed';
            btn.style.transform = 'none';
            btn.classList.add('grayscale');
            
            // Re-render Lucide icons if available
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Prevent form submission if they bypass buttons (e.g., via Enter key)
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function(e) {
            if (typeof Mainaticne !== 'undefined' && Mainaticne === true) {
                // Only block if the form contains one of our target buttons or is for creation
                const hasTargetButton = Array.from(form.querySelectorAll('button, input[type="submit"]')).some(btn => 
                    jobButtons.includes(btn.id) || btn.type === 'submit'
                );

                if (hasTargetButton) {
                    e.preventDefault();
                    return false;
                }
            }
        });
    });
}