<?php
include 'includes/header.php';

$file_path = 'a/qrcode.json';
$file_content = file_get_contents($file_path);
$data_array = json_decode($file_content, true);
$flash_message = '<div class="alert alert-primary" id="flash-msg"><h4><i class="icon fa fa-check"></i>Atualizado com Sucesso!</h4></div>';

if (isset($_POST['texto_superior'])) {
    $new_data = ['texto_inferior' => $_POST['texto_inferior'], 'texto_superior' => $_POST['texto_superior'], 'imagem' => $_POST['imagem']];
    $merged_data = array_replace_recursive($data_array, $new_data);
    $updated_content = json_encode($merged_data, JSON_UNESCAPED_UNICODE);
    file_put_contents($file_path, $updated_content);
   echo "<script>window.location.href='qrcode.php?m=$flash_message'</script>";
}

$texto_inferior = $data_array['texto_inferior'];
$texto_superior = $data_array['texto_superior'];
$imagem = $data_array['imagem'];
?>

<style>
/* === ESTILOS ESPECÍFICOS PARA QR CODE FUTURISTA === */
.main-content {
    background: transparent !important;
    padding: 20px;
}

.card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.card-header {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter)) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    padding: 20px !important;
}

.card-body {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 30px !important;
}

/* Formulários futuristas */
.form-control {
    background: var(--surface-lighter) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.3rem rgba(0, 212, 255, 0.25) !important;
    background: var(--surface-lighter) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Botões futuristas */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--glow) !important;
    padding: 14px 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}

.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5) !important;
}

/* Labels e textos */
.control-label {
    color: var(--text-primary) !important;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    font-size: 1rem;
}

.text-primary2 {
    color: var(--primary) !important;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.3rem !important;
}

/* Títulos */
.h3 {
    color: var(--text-primary) !important;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Input group */
.input-group {
    margin-bottom: 25px;
}

/* Alert personalizado */
.alert-primary {
    background: linear-gradient(135deg, var(--surface-light), var(--surface-lighter)) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glow) !important;
    padding: 20px !important;
}

/* Ícones */
.fa-qrcode, .fa-bullhorn, .fa-check {
    margin-right: 10px;
}

/* Efeito de partículas */
@keyframes moveParticles {
    from { transform: translateY(0); opacity: 0.7; }
    to { transform: translateY(-1000px); opacity: 0; }
}

.particle {
    position: fixed;
    bottom: 0;
    width: 2px;
    height: 2px;
    background: var(--primary);
    opacity: 0.5;
    animation: moveParticles linear infinite;
    z-index: -1;
}

.particle:nth-child(odd) { background: var(--accent); }

/* Preview do QR Code */
.qr-preview {
    background: var(--surface-lighter);
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.qr-preview:hover {
    border-color: var(--primary);
    box-shadow: var(--glow);
}

.qr-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Responsividade */
@media (max-width: 768px) {
    .main-content {
        padding: 10px !important;
    }
    
    .card-body {
        padding: 20px !important;
    }
    
    .btn-primary {
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }
    
    .form-control {
        padding: 12px 15px !important;
    }
}
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Partículas animadas
        const numParticles = 15;
        const particlesContainer = document.createElement('div');
        particlesContainer.style.position = 'fixed';
        particlesContainer.style.top = '0';
        particlesContainer.style.left = '0';
        particlesContainer.style.width = '100%';
        particlesContainer.style.height = '100%';
        particlesContainer.style.pointerEvents = 'none';
        particlesContainer.style.zIndex = '-1';
        
        for (let i = 0; i < numParticles; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.animationDuration = (2 + Math.random() * 8) + 's';
            particle.style.animationDelay = Math.random() * 10 + 's';
            particle.style.width = particle.style.height = (1 + Math.random() * 3) + 'px';
            particlesContainer.appendChild(particle);
        }
        
        document.body.appendChild(particlesContainer);

        // Auto-hide flash message
        const flashMsg = document.getElementById('flash-msg');
        if (flashMsg) {
            setTimeout(() => {
                flashMsg.style.opacity = '0';
                flashMsg.style.transition = 'opacity 0.5s ease';
                setTimeout(() => flashMsg.remove(), 500);
            }, 3000);
        }

        // Preview dinâmico do QR Code
        const imagemInput = document.querySelector('input[name="imagem"]');
        const previewContainer = document.createElement('div');
        previewContainer.className = 'qr-preview';
        previewContainer.innerHTML = `
            <div style="color: var(--text-secondary); margin-bottom: 10px;">
                <i class="fas fa-qrcode"></i> Preview do QR Code
            </div>
            <div id="qr-image-container" style="min-height: 100px; display: flex; align-items: center; justify-content: center;">
                <span style="color: var(--text-muted);">URL do QR Code será mostrada aqui</span>
            </div>
        `;
        
        imagemInput.parentNode.appendChild(previewContainer);

        function updateQRPreview() {
            const url = imagemInput.value;
            const container = document.getElementById('qr-image-container');
            
            if (url && (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:'))) {
                container.innerHTML = `<img src="${url}" alt="QR Code Preview" class="qr-image" onerror="this.style.display='none'" style="max-width: 150px; max-height: 150px;">`;
            } else if (url) {
                container.innerHTML = `<span style="color: var(--accent);">✅ URL válida (será usada para gerar QR Code)</span>`;
            } else {
                container.innerHTML = `<span style="color: var(--text-muted);">🔗 Insira a URL da imagem do QR Code</span>`;
            }
        }

        imagemInput.addEventListener('input', updateQRPreview);
        updateQRPreview(); // Initial update

        // Efeitos nos inputs
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.style.transform = 'translateY(-2px)';
            });
            
            input.addEventListener('blur', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    });
</script>

<main role="main" class="col-12 pt-4 px-4 main-content">
    <div class="container-fluid">
        <?php if (isset($_GET['m'])): ?>
            <div class="alert alert-primary" id="flash-msg">
                <h4><i class="icon fa fa-check"></i> Configurações Atualizadas!</h4>
                <p class="mb-0">As configurações do QR Code foram salvas com sucesso.</p>
            </div>
        <?php endif; ?>
        
        <h1 class="h3 mb-4 text-gray-800">
            <i class="fas fa-qrcode me-2"></i>Configurações do QR Code
        </h1>
        
        <div class="row">
            <div class="col-lg-8">
                <div class="card border-left-primary shadow h-100 card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary2">
                            <i class="fas fa-qrcode me-2"></i>Personalizar QR Code
                        </h6>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            <div class="form-group">
                                <label class="control-label" for="texto_superior">
                                    <i class="fas fa-text-height me-2"></i><strong>Texto Superior</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite o texto que aparecerá acima do QR Code" name="texto_superior" value="<?php echo htmlspecialchars($texto_superior); ?>">
                                </div>
                                <small class="text-muted">Texto que será exibido na parte superior do QR Code.</small>
                            </div>
                            
                            <div class="form-group">
                                <label class="control-label" for="texto_inferior">
                                    <i class="fas fa-text-width me-2"></i><strong>Texto Inferior</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Digite o texto que aparecerá abaixo do QR Code" name="texto_inferior" value="<?php echo htmlspecialchars($texto_inferior); ?>">
                                </div>
                                <small class="text-muted">Texto que será exibido na parte inferior do QR Code.</small>
                            </div>
                            
                            <div class="form-group">
                                <label class="control-label" for="imagem">
                                    <i class="fas fa-image me-2"></i><strong>URL do QR Code</strong>
                                </label>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Cole a URL da imagem do QR Code aqui" name="imagem" value="<?php echo htmlspecialchars($imagem); ?>">
                                </div>
                                <small class="text-muted">URL da imagem do QR Code que será exibida.</small>
                            </div>
                            
                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-sync-alt me-2"></i>Atualizar Configurações
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Coluna de Preview -->
            <div class="col-lg-4">
                <div class="card border-left-primary shadow h-100 card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary2">
                            <i class="fas fa-eye me-2"></i>Visualização
                        </h6>
                    </div>
                    <div class="card-body text-center">
                        <div class="preview-container" style="background: var(--surface-lighter); padding: 30px; border-radius: 12px; border: 2px solid var(--border);">
                            <div style="color: var(--text-primary); font-weight: 600; margin-bottom: 15px; font-size: 1.1rem;">
                                <?php echo htmlspecialchars($texto_superior ?: 'Texto Superior'); ?>
                            </div>
                            
                            <div style="background: white; padding: 20px; border-radius: 8px; display: inline-block; margin: 10px 0;">
                                <?php if ($imagem): ?>
                                    <img src="<?php echo htmlspecialchars($imagem); ?>" alt="QR Code" style="max-width: 150px; max-height: 150px;" onerror="this.style.display='none'">
                                <?php else: ?>
                                    <div style="width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #666; border-radius: 4px;">
                                        <i class="fas fa-qrcode fa-3x"></i>
                                    </div>
                                <?php endif; ?>
                            </div>
                            
                            <div style="color: var(--text-secondary); margin-top: 15px; font-size: 0.9rem;">
                                <?php echo htmlspecialchars($texto_inferior ?: 'Texto Inferior'); ?>
                            </div>
                        </div>
                        <small class="text-muted mt-3 d-block">Preview das configurações atuais</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php
include 'includes/footer.php';
?>
</body>
</html>