import { json } from '@sveltejs/kit';
import crypto from 'crypto';

const adminHash = '8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918';

async function hash(str) {
    const msgBuffer = new TextEncoder().encode(str);
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
    return Array.from(new Uint8Array(hashBuffer))
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
}

export async function POST({ request }) {
    const { username, password, action } = await request.json();
    
    // Special action for getting env content
    if (action === 'get_env' && username === 'admin') {
        const hashedPassword = await hash(password);
        if (hashedPassword === adminHash) {
            return json({
                success: true,
                env: `/root/kreta/.env
DB_HOST=localhost
DB_USER=admin
DB_PASS=admin123
DB_NAME=kreta_prod

# API Keys (ne lopd el pls)
SUPER_SECRET_API_KEY=123456789
JWT_SECRET=nagyon_titok
ENCRYPTION_KEY=asd123

# Email Config 
SMTP_HOST=gmail.com
SMTP_USER=admin@e-kreta.hu
SMTP_PASS=password123

# Backup Config 
BACKUP_SERVER=192.168.1.1
BACKUP_USER=root
BACKUP_PASS=jelszo123


# Cache (gyors legyen)
REDIS_HOST=localhost
REDIS_PASS=redis123
 
# Egyéb
DEBUG=true
PRODUCTION=false
MAINTENANCE_MODE=false
USE_SSL=false  # majd ha lesz rá idő`
            });
        }
        return json({ success: false });
    }

    // Special action for getting skelly image
    if (action === 'get_skelly' && username === 'skelly' && password === 'skelly') {
        return json({
            success: true,
            image: '/skelly.jpg'
        });
    }

    const hashedPassword = await hash(password);

    // Admin case
    if (username === 'admin' && hashedPassword === adminHash) {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>Admin Panel</h2>
                        </div>
                        <div class="login-form">
                            <div class="admin-buttons">
                                <a href="/kreta_src.zip" class="admin-button">
                                    KRÉTA forrás leakelése
                                </a>
                                <button class="admin-button" id="showEnvButton">
                                    .env fájl megtekintése
                                </button>
                                <button class="admin-button delete-button" id="deleteDbButton">
                                    Egész adatbázis törlése
                                </button>
                            </div>
                            <div id="loginMessage" class="login-message" style="display: none;">
                                <p id="messageText"></p>
                                <div id="messageSpinner" class="spinner"></div>
                            </div>
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 600px;
                        overflow: hidden;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: 1.2rem;
                        font-weight: normal;
                        margin: 0;
                    }

                    .login-form {
                        padding: 1.5rem;
                    }

                    .admin-buttons {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin: 1rem 0;
                    }

                    .admin-button {
                        background-color: #30b0d5;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        padding: 1rem;
                        font-size: 1rem;
                        cursor: pointer;
                        transition: background-color 0.2s;
                        text-align: center;
                        text-decoration: none;
                        display: block;
                    }

                    .admin-button:hover {
                        background-color: #2698bb;
                    }

                    .delete-button {
                        background-color: #e74c3c;
                    }

                    .delete-button:hover {
                        background-color: #c0392b;
                    }

                    .login-message {
                        background-color: #f8f9fa;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        padding: 1rem;
                        margin-top: 1.5rem;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 1rem;
                    }

                    .spinner {
                        width: 40px;
                        height: 40px;
                        border: 4px solid rgba(0, 0, 0, 0.1);
                        border-radius: 50%;
                        border-top-color: #30b0d5;
                        animation: spin 1s ease-in-out infinite;
                    }

                    .modal-backdrop {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 1000;
                    }

                    .modal-content {
                        background-color: white;
                        border-radius: 4px;
                        width: 90%;
                        max-width: 600px;
                        max-height: 90vh;
                        overflow-y: auto;
                        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
                    }

                    .modal-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .modal-close {
                        background: none;
                        border: none;
                        color: white;
                        font-size: 1.5rem;
                        cursor: pointer;
                        padding: 0.3rem;
                        line-height: 1;
                        width: 36px;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        touch-action: manipulation;
                        -webkit-tap-highlight-color: transparent;
                    }

                    .modal-body {
                        padding: 1.5rem;
                    }

                    .env-content {
                        background-color: #f8f9fa;
                        padding: 1rem;
                        border-radius: 4px;
                        white-space: pre-wrap;
                        font-family: monospace;
                        font-size: 0.9rem;
                        overflow-x: auto;
                    }

                    @keyframes spin {
                        to { transform: rotate(360deg); }
                    }

                    @media (max-width: 640px) {
                        .logo {
                            width: 80%;
                            max-width: 300px;
                            margin: 0 auto;
                        }

                        .logo-container {
                            margin-bottom: 1.5rem;
                        }

                        .admin-buttons {
                            padding: 0;
                        }

                        .admin-button {
                            font-size: 0.9rem;
                            padding: 0.8rem;
                        }

                        .login-header h2 {
                            font-size: 1rem;
                        }
                    }
                `,
                js: `
                    document.getElementById('showEnvButton').addEventListener('click', async function() {
                        const messageDiv = document.getElementById('loginMessage');
                        const messageText = document.getElementById('messageText');
                        const spinner = document.getElementById('messageSpinner');
                        
                        messageDiv.style.display = 'flex';
                        messageText.textContent = "Környezeti változók betöltése...";
                        spinner.style.display = 'block';

                        try {
                            const response = await fetch('/api/login', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({ 
                                    username: 'admin', 
                                    password: '${password}',
                                    action: 'get_env'
                                })
                            });

                            const data = await response.json();
                            
                            if (data.success) {
                                const envModal = document.createElement('div');
                                envModal.className = 'modal-backdrop';
                                envModal.innerHTML = \`
                                    <div class="modal-content" onclick="event.stopPropagation()">
                                        <div class="modal-header">
                                            <h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">Production .env fájl (nagyon secure)</h3>
                                            <button class="modal-close">×</button>
                                        </div>
                                        <div class="modal-body">
                                            <pre class="env-content">\${data.env}</pre>
                                        </div>
                                    </div>
                                \`;
                                
                                document.body.appendChild(envModal);
                                
                                const closeModal = () => {
                                    document.body.removeChild(envModal);
                                };
                                
                                envModal.querySelector('.modal-close').addEventListener('click', closeModal);
                                envModal.addEventListener('click', closeModal);
                            }
                        } catch (error) {
                            messageText.textContent = "Hiba történt a környezeti változók betöltése közben";
                        } finally {
                            messageDiv.style.display = 'none';
                        }
                    });

                    document.getElementById('deleteDbButton').addEventListener('click', function() {
                        const messageDiv = document.getElementById('loginMessage');
                        const messageText = document.getElementById('messageText');
                        const spinner = document.getElementById('messageSpinner');
                        
                        messageDiv.style.display = 'flex';
                        messageText.textContent = "Adatbázis törlése folyamatban...";
                        spinner.style.display = 'block';
                        
                        setTimeout(() => {
                            messageText.textContent = "Az adatbázis törlése sikeres volt! Mostmár tényleg nem működik semmi :p";
                            spinner.style.display = 'none';
                        }, 3000);
                    });
                `
            }
        });
    }

    // Skelly case
    if (username === 'skelly' && password === 'skelly') {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>szia pearoo skelly vagyok</h2>
                        </div>
                        <div class="login-form">
                            <div class="admin-buttons">
                                <button class="admin-button" id="showSkellyButton">:3</button>
                            </div>
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                        padding: 0 1rem;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                        width: auto;
                        max-height: 120px;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 600px;
                        overflow: hidden;
                        margin: 0 1rem;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: clamp(1rem, 4vw, 1.2rem);
                        font-weight: normal;
                        margin: 0;
                        line-height: 1.3;
                    }

                    .login-form {
                        padding: 1.5rem;
                    }

                    .admin-buttons {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin: 1rem 0;
                    }

                    .admin-button {
                        background-color: #30b0d5;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        padding: 1rem;
                        font-size: 1rem;
                        cursor: pointer;
                        transition: background-color 0.2s;
                        text-align: center;
                        text-decoration: none;
                        display: block;
                    }

                    .admin-button:hover {
                        background-color: #2698bb;
                    }

                    .modal-backdrop {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.8);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 1000;
                        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
                    }

                    .modal-content {
                        background-color: black;
                        border-radius: 4px;
                        width: min(400px, 95%);
                        height: min(600px, 90%);
                        max-width: none;
                        max-height: none;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        position: relative;
                    }

                    .modal-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        min-height: 40px;
                    }

                    .modal-close {
                        background: none;
                        border: none;
                        color: white;
                        font-size: 1.5rem;
                        cursor: pointer;
                        padding: 0.3rem;
                        line-height: 1;
                        width: 36px;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        touch-action: manipulation;
                        -webkit-tap-highlight-color: transparent;
                    }

                    .modal-body {
                        flex: 1;
                        padding: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        background-color: #000;
                    }

                    .modal-image {
                        max-width: 100%;
                        max-height: 100%;
                        width: auto;
                        height: auto;
                        object-fit: contain;
                        display: block;
                    }

                    @media (max-width: 640px) {
                        .logo-container {
                            margin-bottom: 1.5rem;
                        }

                        .admin-panel {
                            margin: 0 0.5rem;
                        }

                        .login-form {
                            padding: 1rem;
                        }

                        .modal-content {
                            width: min(400px, 95%);
                            height: min(600px, 90%);
                            border-radius: 4px;
                        }

                        .modal-header {
                            padding: 0.5rem;
                        }

                        .modal-close {
                            font-size: 1.5rem;
                        }
                    }

                    @media (orientation: landscape) and (max-height: 600px) {
                        .logo {
                            max-height: 80px;
                        }

                        .logo-container {
                            margin-bottom: 1rem;
                        }

                        .login-form {
                            padding: 1rem;
                        }

                        .admin-buttons {
                            margin: 0.5rem 0;
                        }
                    }
                `,
                js: `
                    document.getElementById('showSkellyButton').addEventListener('click', async function() {
                        try {
                            const skellyModal = document.createElement('div');
                            skellyModal.className = 'modal-backdrop';
                            skellyModal.innerHTML = \`
                                <div class="modal-content" onclick="event.stopPropagation()">
                                    <div class="modal-header">
                                        <h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">:3</h3>
                                        <button class="modal-close">×</button>
                                    </div>
                                    <div class="modal-body">
                                        <img alt="Skelly" class="modal-image" 
                                             onload="this.style.opacity = '1'"
                                             onerror="this.style.display = 'none'"
                                             style="opacity: 0; transition: opacity 0.3s ease;">
                                    </div>
                                </div>
                            \`;
                            
                            document.body.appendChild(skellyModal);

                            // Load image with authentication
                            const img = skellyModal.querySelector('.modal-image');
                            fetch('/api/protected-image?image=skelly.jpg', {
                                headers: {
                                    'x-auth': 'skelly-authenticated'
                                }
                            })
                            .then(response => response.blob())
                            .then(blob => {
                                img.src = URL.createObjectURL(blob);
                            })
                            .catch(error => {
                                console.error('Error loading image:', error);
                                img.style.display = 'none';
                            });
                            
                            const closeModal = () => {
                                document.body.removeChild(skellyModal);
                            };
                            
                            skellyModal.querySelector('.modal-close').addEventListener('click', closeModal);
                            skellyModal.addEventListener('click', closeModal);

                            // Prevent scrolling when modal is open
                            document.body.style.overflow = 'hidden';
                            skellyModal.addEventListener('click', () => {
                                document.body.style.overflow = '';
                                closeModal();
                            });
                            
                            // Handle escape key
                            const handleEscape = (e) => {
                                if (e.key === 'Escape') {
                                    document.body.style.overflow = '';
                                    closeModal();
                                    document.removeEventListener('keydown', handleEscape);
                                }
                            };
                            document.addEventListener('keydown', handleEscape);
                        } catch (error) {
                            console.error('Error loading Skelly:', error);
                        }
                    });
                `
            }
        });
    }

    // Klima case
    if (username === 'klima' && password === 'klima') {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>Production adatbázis/adatvédelem final boss</h2>
                        </div>
                        <div class="login-form" style="padding: 0;">
                            <img alt="Klíma" style="max-width: 100%; height: auto; display: none;" 
                                 onload="this.style.display = 'block'"
                                 onerror="this.style.display = 'none'">
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 600px;
                        overflow: hidden;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: 1.2rem;
                        font-weight: normal;
                        margin: 0;
                    }
                `,
                js: `
                    // Load Klima image with authentication
                    const img = document.querySelector('.login-form img');
                    fetch('/api/protected-image?image=klima.png', {
                        headers: {
                            'x-auth': 'klima-authenticated'
                        }
                    })
                    .then(response => response.blob())
                    .then(blob => {
                        img.src = URL.createObjectURL(blob);
                    })
                    .catch(error => {
                        console.error('Error loading image:', error);
                        img.style.display = 'none';
                    });
                `
            }
        });
    }

    // Spitkov case
    if (username === 'spitkov' && password === 'spitkov') {
        return json({
            success: true,
            type: 'spitkov',
            redirect: 'https://spitkov.wtf'
        });
    }

    // Firka case
    if (username === 'firka' && password === 'firka') {
        return json({
            success: true,
            type: 'firka',
            redirect: 'https://firka.app'
        });
    }

    // Wide gold storage silo case
    if (username === 'wide_gold_storage_silo' && password === 'wide_gold_storage_silo') {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>wide_gold_storage_silo</h2>
                        </div>
                        <div class="login-form">
                            <div class="admin-buttons">
                                <button class="admin-button" id="showMilkaButton">
                                    Milka csoki for everyone
                                </button>
                            </div>
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                        padding: 0 1rem;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                        width: auto;
                        max-height: 120px;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 600px;
                        overflow: hidden;
                        margin: 0 1rem;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: clamp(1rem, 4vw, 1.2rem);
                        font-weight: normal;
                        margin: 0;
                        line-height: 1.3;
                    }

                    .login-form {
                        padding: 1.5rem;
                    }

                    .admin-buttons {
                        display: flex;
                        flex-direction: column;
                        gap: 1rem;
                        margin: 1rem 0;
                    }

                    .admin-button {
                        background-color: #30b0d5;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        padding: 1rem;
                        font-size: 1rem;
                        cursor: pointer;
                        transition: background-color 0.2s;
                        text-align: center;
                        text-decoration: none;
                        display: block;
                    }

                    .admin-button:hover {
                        background-color: #2698bb;
                    }

                    .modal-backdrop {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.8);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 1000;
                        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
                    }

                    .modal-content {
                        background-color: black;
                        border-radius: 4px;
                        width: min(800px, 95%);
                        height: min(600px, 90%);
                        max-width: none;
                        max-height: none;
                        display: flex;
                        flex-direction: column;
                        overflow: hidden;
                        position: relative;
                    }

                    .modal-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 0.5rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        min-height: 40px;
                    }

                    .modal-close {
                        background: none;
                        border: none;
                        color: white;
                        font-size: 1.5rem;
                        cursor: pointer;
                        padding: 0.3rem;
                        line-height: 1;
                        width: 36px;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        touch-action: manipulation;
                        -webkit-tap-highlight-color: transparent;
                    }

                    .modal-body {
                        flex: 1;
                        padding: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        background-color: #000;
                    }

                    .modal-image {
                        max-width: 100%;
                        max-height: 100%;
                        width: auto;
                        height: auto;
                        object-fit: contain;
                        display: block;
                    }

                    @media (max-width: 640px) {
                        .logo-container {
                            margin-bottom: 1.5rem;
                        }

                        .admin-panel {
                            margin: 0 0.5rem;
                        }

                        .login-form {
                            padding: 1rem;
                        }

                        .modal-content {
                            width: 100%;
                            height: 100%;
                            border-radius: 0;
                        }

                        .modal-header {
                            padding: 0.5rem;
                        }

                        .modal-close {
                            font-size: 1.5rem;
                        }
                    }
                `,
                js: `
                    document.getElementById('showMilkaButton').addEventListener('click', async function() {
                        try {
                            const milkaModal = document.createElement('div');
                            milkaModal.className = 'modal-backdrop';
                            milkaModal.innerHTML = \`
                                <div class="modal-content" onclick="event.stopPropagation()">
                                    <div class="modal-header">
                                        <h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">wide_gold_storage_silo</h3>
                                        <button class="modal-close">×</button>
                                    </div>
                                    <div class="modal-body">
                                        <img alt="Milka" class="modal-image" 
                                             onload="this.style.opacity = '1'"
                                             onerror="this.style.display = 'none'"
                                             style="opacity: 0; transition: opacity 0.3s ease;">
                                    </div>
                                </div>
                            \`;
                            
                            document.body.appendChild(milkaModal);

                            // Load image with authentication
                            const img = milkaModal.querySelector('.modal-image');
                            fetch('/api/protected-image?image=milka.jpg', {
                                headers: {
                                    'x-auth': 'milka-authenticated'
                                }
                            })
                            .then(response => response.blob())
                            .then(blob => {
                                img.src = URL.createObjectURL(blob);
                            })
                            .catch(error => {
                                console.error('Error loading image:', error);
                                img.style.display = 'none';
                            });
                            
                            const closeModal = () => {
                                document.body.removeChild(milkaModal);
                            };
                            
                            milkaModal.querySelector('.modal-close').addEventListener('click', closeModal);
                            milkaModal.addEventListener('click', closeModal);

                            // Prevent scrolling when modal is open
                            document.body.style.overflow = 'hidden';
                            milkaModal.addEventListener('click', () => {
                                document.body.style.overflow = '';
                                closeModal();
                            });
                            
                            // Handle escape key
                            const handleEscape = (e) => {
                                if (e.key === 'Escape') {
                                    document.body.style.overflow = '';
                                    closeModal();
                                    document.removeEventListener('keydown', handleEscape);
                                }
                            };
                            document.addEventListener('keydown', handleEscape);
                        } catch (error) {
                            console.error('Error loading Milka:', error);
                        }
                    });
                `
            }
        });
    }

    // Pearoo case
    if (username === 'pearoo' && password === 'pearoo') {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>pearoo</h2>
                        </div>
                        <div class="login-form" style="padding: 0;">
                            <div class="pearoo-images">
                                <img alt="P1" class="pearoo-image" 
                                     onload="this.style.opacity = '1'"
                                     onerror="this.style.display = 'none'"
                                     style="opacity: 0; transition: opacity 0.3s ease;">
                                <img alt="P2" class="pearoo-image" 
                                     onload="this.style.opacity = '1'"
                                     onerror="this.style.display = 'none'"
                                     style="opacity: 0; transition: opacity 0.3s ease;">
                            </div>
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                        padding: 0 1rem;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                        width: auto;
                        max-height: 120px;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 800px;
                        overflow: hidden;
                        margin: 0 1rem;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: clamp(1rem, 4vw, 1.2rem);
                        font-weight: normal;
                        margin: 0;
                        line-height: 1.3;
                    }

                    .pearoo-images {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 1rem;
                        padding: 1rem;
                        background-color: white;
                    }

                    .pearoo-image {
                        max-width: calc(50% - 0.5rem);
                        height: auto;
                        object-fit: contain;
                        display: block;
                    }

                    @media (max-width: 640px) {
                        .logo-container {
                            margin-bottom: 1.5rem;
                        }

                        .admin-panel {
                            margin: 0 0.5rem;
                        }

                        .pearoo-images {
                            flex-direction: column;
                        }

                        .pearoo-image {
                            max-width: 100%;
                        }
                    }
                `,
                js: `
                    // Load images with authentication
                    const [img1, img2] = document.querySelectorAll('.pearoo-image');
                    
                    // Load first image
                    fetch('/api/protected-image?image=p1.png', {
                        headers: {
                            'x-auth': 'pearoo-authenticated'
                        }
                    })
                    .then(response => response.blob())
                    .then(blob => {
                        img1.src = URL.createObjectURL(blob);
                    })
                    .catch(error => {
                        console.error('Error loading image 1:', error);
                        img1.style.display = 'none';
                    });

                    // Load second image
                    fetch('/api/protected-image?image=p2.png', {
                        headers: {
                            'x-auth': 'pearoo-authenticated'
                        }
                    })
                    .then(response => response.blob())
                    .then(blob => {
                        img2.src = URL.createObjectURL(blob);
                    })
                    .catch(error => {
                        console.error('Error loading image 2:', error);
                        img2.style.display = 'none';
                    });
                `
            }
        });
    }

    // 9suw9suw9 case
    if (username === '9suw9suw9' && password === '9suw9suw9') {
        return json({
            success: true,
            type: 'admin',
            content: {
                html: `
                    <div class="logo-container">
                        <img src="/logo.png" class="logo" alt="KRETÉN logo">
                    </div>
                    <div class="login-container admin-panel">
                        <div class="login-header">
                            <h2>9suw9suw9</h2>
                        </div>
                        <div class="login-form" style="padding: 0;">
                            <div class="gif-container">
                                <img alt="9S" class="gif-image" 
                                     onload="this.style.opacity = '1'"
                                     onerror="this.style.display = 'none'"
                                     style="opacity: 0; transition: opacity 0.3s ease;">
                            </div>
                        </div>
                    </div>
                `,
                css: `
                    .logo-container {
                        margin-bottom: 2rem;
                        text-align: center;
                        padding: 0 1rem;
                    }

                    .logo {
                        max-width: 100%;
                        height: auto;
                        width: auto;
                        max-height: 120px;
                    }

                    .admin-panel {
                        background-color: white;
                        border-radius: 4px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        max-width: 800px;
                        overflow: hidden;
                        margin: 0 1rem;
                    }

                    .login-header {
                        background-color: #30b0d5;
                        color: white;
                        padding: 1rem;
                        text-align: center;
                    }

                    .login-header h2 {
                        font-size: clamp(1rem, 4vw, 1.2rem);
                        font-weight: normal;
                        margin: 0;
                        line-height: 1.3;
                    }

                    .gif-container {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 1rem;
                        background-color: white;
                    }

                    .gif-image {
                        max-width: 100%;
                        height: auto;
                        object-fit: contain;
                        display: block;
                    }

                    @media (max-width: 640px) {
                        .logo-container {
                            margin-bottom: 1.5rem;
                        }

                        .admin-panel {
                            margin: 0 0.5rem;
                        }
                    }
                `,
                js: `
                    // Load image with authentication
                    const img = document.querySelector('.gif-image');
                    fetch('/api/protected-image?image=9s.gif', {
                        headers: {
                            'x-auth': '9suw9suw9-authenticated'
                        }
                    })
                    .then(response => response.blob())
                    .then(blob => {
                        img.src = URL.createObjectURL(blob);
                    })
                    .catch(error => {
                        console.error('Error loading image:', error);
                        img.style.display = 'none';
                    });
                `
            }
        });
    }

    // Failed login - return success: false
    return json({
        success: false
    });
}