<?php
// OneLauncher - branding.php
require_once 'includes/auth.php';
require_once 'db.php';

$pageTitle = 'Branding (Fundo/Logo)';
$nav = 'branding';
$configSaved = false;

if (isset($_POST['save_branding'])) {
    $app_name = $_POST['app_name'];
    $primary_color = $_POST['primary_color'];
    $logo_size = max(20, min(300, (int)($_POST['logo_size'] ?? 95)));
    
    // Obter dados atuais para fallback
    global $active_theme_id;
    $res = $conn->query("SELECT * FROM config WHERE theme_id = $active_theme_id");
    $current = $res->fetch_assoc();
    if (!$current) {
        $conn->query("INSERT IGNORE INTO config (theme_id) VALUES ($active_theme_id)");
        $res = $conn->query("SELECT * FROM config WHERE theme_id = $active_theme_id");
        $current = $res->fetch_assoc() ?? [];
    }
    
    $app_logo = $_POST['app_logo_url'];
    $app_background = $_POST['app_background_url'];
    
    // Processar uploads
    $upload_dir = __DIR__ . '/uploads';
    if (!file_exists($upload_dir)) {
        mkdir($upload_dir, 0777, true);
    }

    $errors = [];
    $allowed_image_exts = ['jpg', 'jpeg', 'png', 'webp', 'gif'];

    if (isset($_FILES['logo_file']) && $_FILES['logo_file']['error'] === UPLOAD_ERR_OK) {
        $ext = strtolower(pathinfo($_FILES['logo_file']['name'], PATHINFO_EXTENSION));
        if (in_array($ext, $allowed_image_exts)) {
            $new_name = "logo_" . time() . "_" . bin2hex(random_bytes(4)) . "." . $ext;
            if (move_uploaded_file($_FILES['logo_file']['tmp_name'], "$upload_dir/$new_name")) {
                $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https://" : "http://";
                $app_logo = $protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/uploads/$new_name";
            }
        } else {
            $errors[] = "A extensão do arquivo do logotipo não é permitida. Apenas JPG, JPEG, PNG, WEBP e GIF são suportados.";
        }
    }

    if (isset($_FILES['bg_file']) && $_FILES['bg_file']['error'] === UPLOAD_ERR_OK) {
        $ext = strtolower(pathinfo($_FILES['bg_file']['name'], PATHINFO_EXTENSION));
        if (in_array($ext, $allowed_image_exts)) {
            $new_name = "bg_" . time() . "_" . bin2hex(random_bytes(4)) . "." . $ext;
            if (move_uploaded_file($_FILES['bg_file']['tmp_name'], "$upload_dir/$new_name")) {
                $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https://" : "http://";
                $app_background = $protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/uploads/$new_name";
            }
        } else {
            $errors[] = "A extensão do arquivo de fundo não é permitida. Apenas JPG, JPEG, PNG, WEBP e GIF são suportados.";
        }
    }

    $support_whatsapp = preg_replace('/\D/', '', $_POST['support_whatsapp'] ?? '');

    if (empty($errors)) {
        // Garantir que colunas existem
        $conn->query("ALTER TABLE config ADD COLUMN logo_size INT DEFAULT 95");
        $conn->query("ALTER TABLE config ADD COLUMN support_whatsapp TEXT DEFAULT ''");

        $stmt = $conn->prepare("UPDATE config SET
            app_name = ?,
            app_logo = ?,
            app_background = ?,
            primary_color = ?,
            logo_size = ?,
            support_whatsapp = ?
            WHERE theme_id = ?");
        $stmt->bind_param("ssssisi", $app_name, $app_logo, $app_background, $primary_color, $logo_size, $support_whatsapp, $active_theme_id);

        if ($stmt->execute()) {
            $configSaved = true;
        }
    }
}

global $active_theme_id;
$res = $conn->query("SELECT * FROM config WHERE theme_id = $active_theme_id");
$config = $res->fetch_assoc();
if (!$config) {
    $conn->query("INSERT IGNORE INTO config (theme_id) VALUES ($active_theme_id)");
    $res = $conn->query("SELECT * FROM config WHERE theme_id = $active_theme_id");
    $config = $res->fetch_assoc() ?? ['theme_id' => $active_theme_id, 'app_logo_url' => '', 'app_background_url' => ''];
}

include 'includes/head.php';
include 'includes/sidebar.php';
include 'includes/topbar.php';
include 'includes/layout-open.php';
?>

<style>
    /* Melhorias visuais extras */
    .upload-wrapper {
        transition: all 0.2s ease;
        cursor: pointer;
        background: rgba(8, 15, 37, 0.4);
        border: 2px dashed rgba(59,130,246,0.4);
    }
    .upload-wrapper:hover, .upload-wrapper.drag-over {
        border-color: #3b82f6;
        background: rgba(59,130,246,0.1);
    }
    .form-control-color {
        background-color: rgba(15, 25, 45, 0.6);
        border: 1px solid rgba(255,255,255,0.12);
        cursor: pointer;
    }
    .preview-device {
        transition: all 0.2s;
    }
    .btn-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.8;
    }
    .btn-loading::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        top: 50%;
        right: 20px;
        margin-top: -9px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.6s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .preview-logo img {
        max-width: 100%;
        max-height: 80px;
        object-fit: contain;
    }
    .color-preview-bar {
        transition: background 0.2s;
    }
    .file-size-info {
        font-size: 0.7rem;
        opacity: 0.7;
    }
</style>

<div class="row align-items-center mb-4">
    <div class="col">
        <h2 class="mb-1"><i class="bi bi-brush-fill me-2"></i>Identidade Visual</h2>
        <p class="text-white-50 small mb-0">Personalize a aparência e checkout do MP</p>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-outline-light border-opacity-25" id="resetDefaultsBtn">
            <i class="bi bi-arrow-repeat me-1"></i> Restaurar Padrões
        </button>
    </div>
</div>

<?php if ($configSaved): ?>
    <div class="alert alert-success border-0 bg-success bg-opacity-10 text-success rounded-4 d-flex align-items-center mb-4 p-3 animate__animated animate__fadeIn">
        <i class="bi bi-check-circle-fill me-3 fs-4"></i>
        <div>
            <strong class="d-block">Sucesso!</strong>
            As configurações da interface e tokens foram salvas e aplicadas.
        </div>
    </div>
<?php endif; ?>

<?php if (!empty($errors)): ?>
    <div class="alert alert-danger border-0 bg-danger bg-opacity-10 text-danger rounded-4 d-flex align-items-center mb-4 p-3 animate__animated animate__fadeIn">
        <i class="bi bi-x-circle-fill me-3 fs-4"></i>
        <div>
            <strong class="d-block">Erro ao salvar!</strong>
            <?php echo implode('<br>', array_map('htmlspecialchars', $errors)); ?>
        </div>
    </div>
<?php endif; ?>

<form method="POST" enctype="multipart/form-data" id="brandingForm">
    <input type="hidden" name="save_branding" value="1">
    <div class="row g-4">
        <div class="col-xl-8">
            <div class="app-card mb-4">
                <h5 class="app-card__title mb-4"><i class="bi bi-gear-fill me-2 text-primary"></i>Configurações Gerais</h5>
                
                <div class="row g-3">
                    <div class="col-md-7">
                        <label class="form-label text-white-50">Nome da Experiência</label>
                        <div class="input-group">
                            <span class="input-group-text border-opacity-10 text-white-50" style="background: rgba(8, 15, 37, 0.4);"><i class="bi bi-fonts"></i></span>
                            <input type="text" name="app_name" id="appNameInput" value="<?php echo htmlspecialchars($config['app_name']); ?>" class="form-control rounded-end-3" placeholder="Ex: OneLauncher Home" required>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label text-white-50">Cor de Destaque</label>
                        <div class="input-group">
                            <span class="input-group-text border-opacity-10 text-white-50" style="background: rgba(8, 15, 37, 0.4);"><i class="bi bi-palette"></i></span>
                            <input type="color" name="primary_color" id="primaryColorInput" value="<?php echo htmlspecialchars($config['primary_color'] ?: '#3B82F6'); ?>" class="form-control form-control-color rounded-end-3 p-1" style="max-width: 80px; height: 48px; cursor: pointer;">
                        </div>
                    </div>
                </div>

                <div class="row g-4 mt-1">
                    <div class="col-md-12">
                        <label class="form-label text-white-50">WhatsApp de Suporte / Atendimento</label>
                        <div class="input-group">
                            <span class="input-group-text border-opacity-10 text-white-50" style="background: rgba(8, 15, 37, 0.4);"><i class="bi bi-whatsapp text-success"></i></span>
                            <input type="text" name="support_whatsapp" value="<?php echo htmlspecialchars($config['support_whatsapp'] ?? ''); ?>" class="form-control rounded-end-3" placeholder="Ex: 5511999999999">
                        </div>
                        <small class="text-white-50 mt-1 d-block"><i class="bi bi-info-circle me-1"></i>Digite apenas números (Ex: 55 + DDD + Número) para exibição na tela de atendimento e QR Code do app.</small>
                    </div>
                </div>

                <hr class="my-4 border-white opacity-5">

                <h5 class="app-card__title mb-4"><i class="bi bi-image-fill me-2 text-success"></i>Recursos Gráficos</h5>
                
                <!-- Logotipo com drag & drop e preview ao vivo -->
                <div class="mb-4">
                    <label class="form-label text-white-50">Logotipo (PNG Transparente, máx. 5MB)</label>
                    <div class="upload-wrapper p-4 rounded-4 border text-center mb-3" id="logoDropzone">
                        <i class="bi bi-cloud-upload d-block fs-1 opacity-50 mb-2" style="color: var(--accent-blue);"></i>
                        <input type="file" name="logo_file" id="logoFileInput" class="d-none" accept="image/png,image/jpeg,image/webp">
                        <p class="small text-white-50 mt-2 mb-0">Arraste uma imagem ou clique para selecionar</p>
                        <div id="logoPreviewArea" class="mt-2 d-none">
                            <i class="bi bi-check-circle-fill text-success"></i> <span id="logoFileName"></span>
                            <span id="logoFileSize" class="file-size-info ms-2"></span>
                            <button type="button" class="btn btn-sm btn-link text-danger" id="clearLogoBtn">Remover</button>
                        </div>
                    </div>
                    <input type="url" name="app_logo_url" id="logoUrlInput" value="<?php echo htmlspecialchars($config['app_logo']); ?>" class="form-control border-opacity-10" placeholder="Ou use uma URL direta: https://exemplo.com/logo.png">
                    <div class="invalid-feedback" id="logoError" style="display: none;">Formato inválido ou tamanho >5MB.</div>
                </div>

                <!-- Tamanho da Logo -->
                <div class="mb-4">
                    <label class="form-label text-white-50 d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-arrows-angle-expand me-2"></i>Tamanho da Logo na TV</span>
                        <span class="badge bg-primary bg-opacity-20 text-primary rounded-pill px-3 py-2 fw-bold fs-6" id="logoSizeLabel"><?php echo (int)($config['logo_size'] ?? 95); ?>px</span>
                    </label>
                    <input type="range" class="form-range" name="logo_size" id="logoSizeSlider"
                        min="20" max="300" step="5"
                        value="<?php echo (int)($config['logo_size'] ?? 95); ?>"
                        oninput="document.getElementById('logoSizeLabel').textContent = this.value + 'px'">
                    <div class="d-flex justify-content-between mt-1">
                        <small class="text-white-50">Pequena (20px)</small>
                        <small class="text-white-50 text-center">Padrão (95px)</small>
                        <small class="text-white-50 text-end">Grande (300px)</small>
                    </div>
                    <small class="text-white-50 mt-2 d-block"><i class="bi bi-info-circle me-1"></i>Ajusta a altura da logo no canto superior esquerdo do launcher.</small>
                </div>

                <!-- Fundo com drag & drop -->
                <div class="mb-2">
                    <label class="form-label text-white-50">Fundo de Tela (16:9 - UHD recomendado, máx. 10MB)</label>
                    <div class="upload-wrapper p-4 rounded-4 border text-center mb-3" id="bgDropzone">
                        <i class="bi bi-file-earmark-image d-block fs-1 opacity-50 mb-2" style="color: var(--accent-cyan);"></i>
                        <input type="file" name="bg_file" id="bgFileInput" class="d-none" accept="image/jpeg,image/png,image/webp">
                        <p class="small text-white-50 mt-2 mb-0">Imagens em alta resolução garantem melhor visual na TV</p>
                        <div id="bgPreviewArea" class="mt-2 d-none">
                            <i class="bi bi-check-circle-fill text-success"></i> <span id="bgFileName"></span>
                            <span id="bgFileSize" class="file-size-info ms-2"></span>
                            <button type="button" class="btn btn-sm btn-link text-danger" id="clearBgBtn">Remover</button>
                        </div>
                    </div>
                    <input type="url" name="app_background_url" id="bgUrlInput" value="<?php echo htmlspecialchars($config['app_background']); ?>" class="form-control border-opacity-10" placeholder="Ou use uma URL direta: https://exemplo.com/fundo.jpg">
                    <div class="invalid-feedback" id="bgError" style="display: none;">Formato inválido ou tamanho >10MB.</div>
                </div>
                <div class="mt-4 pt-2">
                    <button type="submit" name="save_branding" class="btn btn-app-primary py-3 px-5 rounded-4 shadow-lg w-100" id="saveBrandingBtn">
                        <i class="bi bi-cloud-check-fill me-2"></i>SALVAR INTERFACE
                    </button>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="sticky-top" style="top: 100px;">
                <div class="app-card mb-4 border-primary border-opacity-25">
                    <h5 class="app-card__title small text-uppercase text-primary mb-3">Visualização do App</h5>
                    <div class="preview-device rounded-4 overflow-hidden border border-white border-opacity-10 shadow-lg" style="aspect-ratio: 16/9; position: relative; background: #000;" id="previewDevice">
                        <img id="previewBg" src="<?php echo htmlspecialchars($config['app_background']); ?>" class="w-100 h-100" style="object-fit: cover; display: <?php echo $config['app_background'] ? 'block' : 'none'; ?>;">
                        <div class="preview-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 60%);"></div>
                        <div class="preview-logo" style="position: absolute; top: 20px; left: 20px; width: 30%;" id="previewLogoContainer">
                            <?php if ($config['app_logo']): ?>
                                <img id="previewLogo" src="<?php echo htmlspecialchars($config['app_logo']); ?>" style="max-width: 100%; max-height: 80px; object-fit: contain;">
                            <?php else: ?>
                                <div class="text-white-50"><i class="bi bi-image fs-1"></i></div>
                            <?php endif; ?>
                        </div>
                        <div style="position: absolute; bottom: 20px; left: 20px;">
                            <div id="previewColorBar" style="width: 40px; height: 10px; background: <?php echo $config['primary_color'] ?: '#3B82F6'; ?>; border-radius: 5px;"></div>
                        </div>
                        <div id="previewAppName" style="position: absolute; bottom: 20px; right: 20px; color: white; font-weight: bold; text-shadow: 0 0 5px black; font-size: 14px;">
                            <?php echo htmlspecialchars($config['app_name']); ?>
                        </div>
                    </div>
                </div>
                <div class="app-card bg-primary bg-opacity-10 border-0">
                    <h6 class="text-primary fw-bold mb-2"><i class="bi bi-info-circle me-2"></i>Dica do Designer</h6>
                    <p class="small text-white-50 mb-0">Utilize logos em PNG com transparência e carregue fundos escuros para garantir que os elementos do app fiquem bem visíveis na TV. Preencha o Token PIX para garantir os bloqueios.</p>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
// ========== LIVE PREVIEW ==========
const appNameInput = document.getElementById('appNameInput');
const previewAppName = document.getElementById('previewAppName');
const primaryColorInput = document.getElementById('primaryColorInput');
const previewColorBar = document.getElementById('previewColorBar');
const logoUrlInput = document.getElementById('logoUrlInput');
const bgUrlInput = document.getElementById('bgUrlInput');
const previewLogoContainer = document.getElementById('previewLogoContainer');
const previewBgImg = document.getElementById('previewBg');

function updateAppNamePreview() {
    const name = appNameInput.value.trim();
    previewAppName.innerText = name || 'OneLauncher';
}
appNameInput.addEventListener('input', updateAppNamePreview);

function updateColorPreview() {
    previewColorBar.style.background = primaryColorInput.value;
}
primaryColorInput.addEventListener('input', updateColorPreview);

function updateLogoPreview(src) {
    if (src && src.trim() !== '') {
        previewLogoContainer.innerHTML = `<img id="previewLogo" src="${src}" style="max-width: 100%; max-height: 80px; object-fit: contain;" onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'text-white-50\'><i class=\'bi bi-image fs-1\'></i></div>';">`;
    } else {
        previewLogoContainer.innerHTML = '<div class="text-white-50"><i class="bi bi-image fs-1"></i></div>';
    }
}
logoUrlInput.addEventListener('input', function() { updateLogoPreview(this.value); });

function updateBgPreview(src) {
    if (src && src.trim() !== '') {
        previewBgImg.src = src;
        previewBgImg.style.display = 'block';
        previewBgImg.onerror = () => { previewBgImg.style.display = 'none'; };
    } else {
        previewBgImg.style.display = 'none';
    }
}
bgUrlInput.addEventListener('input', function() { updateBgPreview(this.value); });

// ========== DRAG & DROP PARA LOGO ==========
const logoDropzone = document.getElementById('logoDropzone');
const logoFileInput = document.getElementById('logoFileInput');
const logoPreviewArea = document.getElementById('logoPreviewArea');
const logoFileNameSpan = document.getElementById('logoFileName');
const logoFileSizeSpan = document.getElementById('logoFileSize');
const clearLogoBtn = document.getElementById('clearLogoBtn');
const logoError = document.getElementById('logoError');

function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
}

function triggerLogoClick() { logoFileInput.click(); }
logoDropzone.addEventListener('click', triggerLogoClick);
logoDropzone.addEventListener('dragover', (e) => { e.preventDefault(); logoDropzone.classList.add('drag-over'); });
logoDropzone.addEventListener('dragleave', () => { logoDropzone.classList.remove('drag-over'); });
logoDropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    logoDropzone.classList.remove('drag-over');
    const files = e.dataTransfer.files;
    if (files.length > 0) handleLogoFile(files[0]);
});

logoFileInput.addEventListener('change', () => {
    if (logoFileInput.files.length) handleLogoFile(logoFileInput.files[0]);
});

function handleLogoFile(file) {
    const validTypes = ['image/png', 'image/jpeg', 'image/webp'];
    if (!validTypes.includes(file.type)) {
        logoError.style.display = 'block';
        logoError.innerText = 'Formato inválido. Use PNG, JPG ou WEBP.';
        logoFileInput.value = '';
        return;
    }
    if (file.size > 5 * 1024 * 1024) {
        logoError.style.display = 'block';
        logoError.innerText = 'Arquivo muito grande (máx 5MB).';
        logoFileInput.value = '';
        return;
    }
    logoError.style.display = 'none';
    logoFileNameSpan.innerText = file.name;
    logoFileSizeSpan.innerText = `(${formatFileSize(file.size)})`;
    logoPreviewArea.classList.remove('d-none');
    const reader = new FileReader();
    reader.onload = (ev) => {
        updateLogoPreview(ev.target.result);
        logoUrlInput.value = '';
    };
    reader.readAsDataURL(file);
}

clearLogoBtn.addEventListener('click', () => {
    logoFileInput.value = '';
    logoPreviewArea.classList.add('d-none');
    logoUrlInput.value = '';
    updateLogoPreview('');
    logoError.style.display = 'none';
});

// ========== DRAG & DROP PARA FUNDO ==========
const bgDropzone = document.getElementById('bgDropzone');
const bgFileInput = document.getElementById('bgFileInput');
const bgPreviewArea = document.getElementById('bgPreviewArea');
const bgFileNameSpan = document.getElementById('bgFileName');
const bgFileSizeSpan = document.getElementById('bgFileSize');
const clearBgBtn = document.getElementById('clearBgBtn');
const bgError = document.getElementById('bgError');

function triggerBgClick() { bgFileInput.click(); }
bgDropzone.addEventListener('click', triggerBgClick);
bgDropzone.addEventListener('dragover', (e) => { e.preventDefault(); bgDropzone.classList.add('drag-over'); });
bgDropzone.addEventListener('dragleave', () => { bgDropzone.classList.remove('drag-over'); });
bgDropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    bgDropzone.classList.remove('drag-over');
    const files = e.dataTransfer.files;
    if (files.length > 0) handleBgFile(files[0]);
});

bgFileInput.addEventListener('change', () => {
    if (bgFileInput.files.length) handleBgFile(bgFileInput.files[0]);
});

function handleBgFile(file) {
    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
    if (!validTypes.includes(file.type)) {
        bgError.style.display = 'block';
        bgError.innerText = 'Formato inválido. Use JPG, PNG ou WEBP.';
        bgFileInput.value = '';
        return;
    }
    if (file.size > 10 * 1024 * 1024) {
        bgError.style.display = 'block';
        bgError.innerText = 'Arquivo muito grande (máx 10MB).';
        bgFileInput.value = '';
        return;
    }
    bgError.style.display = 'none';
    bgFileNameSpan.innerText = file.name;
    bgFileSizeSpan.innerText = `(${formatFileSize(file.size)})`;
    bgPreviewArea.classList.remove('d-none');
    const reader = new FileReader();
    reader.onload = (ev) => {
        updateBgPreview(ev.target.result);
        bgUrlInput.value = '';
    };
    reader.readAsDataURL(file);
}

clearBgBtn.addEventListener('click', () => {
    bgFileInput.value = '';
    bgPreviewArea.classList.add('d-none');
    bgUrlInput.value = '';
    updateBgPreview('');
    bgError.style.display = 'none';
});

// ========== SPINNER NO SALVAMENTO ==========
const form = document.getElementById('brandingForm');
const saveBtn = document.getElementById('saveBrandingBtn');

form.addEventListener('submit', function(e) {
    const logoFile = logoFileInput.files[0];
    const logoUrl = logoUrlInput.value.trim();
    if (!logoFile && !logoUrl) {
        e.preventDefault();
        alert('Por favor, forneça um logotipo (arquivo ou URL).');
        return;
    }
    saveBtn.disabled = true;
    saveBtn.classList.add('btn-loading');
    saveBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i> SALVANDO...';
    setTimeout(() => {
        if (saveBtn.disabled) {
            saveBtn.disabled = false;
            saveBtn.classList.remove('btn-loading');
            saveBtn.innerHTML = '<i class="bi bi-cloud-check-fill me-2"></i>SALVAR TODAS AS ALTERAÇÕES';
        }
    }, 10000);
});

// ========== BOTÃO RESTAURAR PADRÕES ==========
const resetBtn = document.getElementById('resetDefaultsBtn');
resetBtn.addEventListener('click', () => {
    if (confirm('Restaurar configurações padrão? Todas as alterações não salvas serão perdidas.')) {
        // Limpar logo
        clearLogoBtn.click();
        // Limpar fundo
        clearBgBtn.click();
        // Resetar cor para #3B82F6
        primaryColorInput.value = '#3B82F6';
        updateColorPreview();
        // Resetar nome
        appNameInput.value = 'OneLauncher';
        updateAppNamePreview();
        // Limpar URLs
        logoUrlInput.value = '';
        bgUrlInput.value = '';
        // Remover arquivos selecionados
        logoFileInput.value = '';
        bgFileInput.value = '';
    }
});

// Inicializar preview
updateAppNamePreview();
updateColorPreview();
updateLogoPreview(logoUrlInput.value);
updateBgPreview(bgUrlInput.value);
</script>

<?php
include 'includes/layout-close.php';
include 'includes/footer.php';
?>

