@extends('layouts.app')

@push('styles')
<style>
    .amazon-affiliate-container {
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .page-header {
        margin-bottom: 32px;
    }

    .page-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

    .page-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .version-badge {
        display: inline-block;
        background: var(--gradient-primary);
        color: white;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        margin-left: 12px;
    }

    .info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 24px;
        box-shadow: var(--shadow-md);
    }

    .info-card p {
        margin: 8px 0;
        line-height: 1.6;
    }

    .info-card strong {
        font-weight: 600;
    }

    .search-card {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 24px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        margin-bottom: 24px;
    }

    .form-label {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-input {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.2s;
        font-family: inherit;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .btn-search {
        width: 100%;
        padding: 12px 24px;
        background: var(--gradient-primary);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        margin-top: 12px;
    }

    .btn-search:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-search:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .alert {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        display: none;
    }

    .alert.show {
        display: block;
    }

    .alert-error {
        background: #fee;
        color: #c00;
        border: 1px solid #fcc;
        text-align: left;
        white-space: pre-line;
        line-height: 1.6;
    }

    .alert-success {
        background: #efe;
        color: #070;
        border: 1px solid #cfc;
    }

    .loading {
        display: none;
        text-align: center;
        padding: 40px;
    }

    .loading.show {
        display: block;
    }

    .spinner {
        border: 3px solid var(--border-color);
        border-top: 3px solid var(--primary-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 16px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .result-card {
        background: var(--card-bg);
        border-radius: 12px;
        padding: 24px;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        display: none;
    }

    .result-card.show {
        display: block;
    }

    .product-image {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin-bottom: 16px;
        box-shadow: var(--shadow-md);
    }

    .product-textarea {
        width: 100%;
        min-height: 200px;
        padding: 16px;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        font-family: 'Consolas', 'Monaco', monospace;
        line-height: 1.6;
        resize: vertical;
        margin-bottom: 16px;
    }

    .product-textarea:focus {
        outline: none;
        border-color: var(--primary-color);
    }

    .btn-action {
        width: 100%;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 12px;
    }

    .btn-primary {
        background: var(--gradient-primary);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .btn-warning:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .btn-secondary {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%);
        color: white;
    }

    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    /* Emoji Picker */
    .emoji-toolbar {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .btn-emoji {
        padding: 8px 12px;
        background: var(--card-bg);
        border: 2px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-primary);
    }

    .btn-emoji:hover {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: white;
        transform: translateY(-1px);
    }

    .emoji-picker {
        background: var(--card-bg);
        border: 2px solid var(--border-color);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        display: none;
        box-shadow: var(--shadow-md);
    }

    .emoji-picker.show {
        display: block;
        animation: slideDown 0.2s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .emoji-picker-header {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 12px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .emoji-categories {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }

    .emoji-category {
        padding: 6px 12px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text-secondary);
    }

    .emoji-category:hover,
    .emoji-category.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .emoji-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
        padding: 8px;
        background: white;
        border-radius: 8px;
    }

    .emoji-item {
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s;
        user-select: none;
    }

    .emoji-item:hover {
        background: var(--primary-color);
        transform: scale(1.2);
    }

    .btn-close-emoji {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: var(--text-secondary);
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }

    .btn-close-emoji:hover {
        background: var(--border-color);
    }
</style>
@endpush

@section('content')
<div class="amazon-affiliate-container">
    <!-- Header -->
    <div class="page-header">
        <h1 class="page-title">
            🔗 Gerador de Links de Afiliados
            <span class="version-badge">Versão 0.2</span>
        </h1>
        <p class="page-subtitle">Gere links de afiliados e textos formatados para Amazon e Mercado Livre</p>
    </div>

    <!-- Info Card -->
    <div class="info-card">
        <p><strong>📌 Como usar:</strong> Cole a URL do produto (Amazon ou Mercado Livre) e clique em <strong>Buscar</strong>. Você poderá baixar a imagem, editar o texto e adicionar emojis! 😀✨</p>
        <p style="margin-top: 10px;"><strong>✅ Amazon:</strong> URLs longas ou curtas (amzn.to)</p>
        <p style="margin-top: 6px;"><strong>✅ Mercado Livre:</strong> meli.la, produto.mercadolivre.com.br, social/sec — mesmo fluxo do <code>telegram:process-ml</code></p>
        <p style="margin-top: 6px;"><strong>⛔ Shopee:</strong> integração temporariamente desabilitada</p>
        <p style="margin-top: 8px;"><strong>🎨 Novo:</strong> Adicione emojis com um clique para deixar suas postagens mais atrativas! 🔥💯</p>
    </div>

    <!-- Search Form -->
    <div class="search-card">
        <label class="form-label" for="amazonUrl">URL do Produto (Amazon ou Mercado Livre)</label>
        <input
            type="text"
            id="amazonUrl"
            class="form-input"
            placeholder="Cole aqui a URL da Amazon ou Mercado Livre"
        >
        <button type="button" class="btn-search" id="btnSearch" onclick="searchProduct()">
            🔍 Buscar Produto
        </button>
    </div>

    <!-- Alerts -->
    <div class="alert alert-error" id="errorMessage"></div>
    <div class="alert alert-success" id="successMessage"></div>

    <!-- Loading -->
    <div class="loading" id="loading">
        <div class="spinner"></div>
        <p>Buscando produto...</p>
    </div>

    <!-- Result -->
    <div class="result-card" id="resultContainer">
        <img id="productImage" class="product-image" alt="Imagem do produto" style="display: none;">
        
        <button type="button" class="btn-action btn-warning" id="btnDownloadImage" onclick="downloadImage()" style="display: none;">
            📥 Baixar Imagem
        </button>
        
        <button type="button" class="btn-action btn-secondary" id="btnNewSearch" onclick="newSearch()" style="display: none;">
            🔄 Gerar Novo
        </button>
        
        <!-- Emoji Toolbar -->
        <div class="emoji-toolbar">
            <button type="button" class="btn-emoji" onclick="toggleEmojiPicker()">
                😀 Adicionar Emojis
            </button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🔥')">🔥</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('⚡')">⚡</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('💥')">💥</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🎯')">🎯</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('✨')">✨</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🎉')">🎉</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('💰')">💰</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('🛒')">🛒</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('⭐')">⭐</button>
            <button type="button" class="btn-emoji" onclick="insertQuickEmoji('👉')">👉</button>
        </div>

        <!-- Emoji Picker -->
        <div class="emoji-picker" id="emojiPicker">
            <div class="emoji-picker-header">
                <span>Selecione um Emoji</span>
                <button type="button" class="btn-close-emoji" onclick="toggleEmojiPicker()">✕</button>
            </div>
            
            <div class="emoji-categories">
                <button type="button" class="emoji-category active" onclick="showEmojiCategory('popular')">🔥 Popular</button>
                <button type="button" class="emoji-category" onclick="showEmojiCategory('faces')">😀 Rostos</button>
                <button type="button" class="emoji-category" onclick="showEmojiCategory('symbols')">💯 Símbolos</button>
                <button type="button" class="emoji-category" onclick="showEmojiCategory('objects')">🎁 Objetos</button>
                <button type="button" class="emoji-category" onclick="showEmojiCategory('nature')">🌟 Natureza</button>
            </div>
            
            <div class="emoji-grid" id="emojiGrid">
                <!-- Emojis serão inseridos aqui via JavaScript -->
            </div>
        </div>
        
        <textarea id="productText" class="product-textarea" placeholder="O texto formatado aparecerá aqui..."></textarea>
        
        <button type="button" class="btn-action btn-primary" onclick="copyToClipboard()">
            <span id="copyText">📋 Copiar Texto</span>
        </button>
    </div>

</div>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    let currentImageUrl = null;
    let currentProductId = null;
    let currentPlatform = null;

    async function searchProduct() {
        const url = document.getElementById('amazonUrl').value.trim();
        
        if (!url) {
            showError('Por favor, cole a URL do produto');
            return;
        }

        // Validar URL (Amazon, Mercado Livre ou Shopee)
        const isAmazon = url.includes('amazon.com') || url.includes('amzn.to') || url.includes('a.co') || url.includes('amzlink.to');
        const isMercadoLivre = url.includes('meli.la') || url.includes('mercadolivre.com') || url.includes('mercadolibre.com') || url.includes('mercadol');
        const isShopee = url.includes('shopee.com.br') || url.includes('shp.ee') || url.includes('s.shopee.com.br');
        
        if (!isAmazon && !isMercadoLivre && !isShopee) {
            showError('URL inválida! Use uma URL da Amazon, Mercado Livre ou Shopee.');
            return;
        }

        hideAlerts();
        showLoading();
        disableButton();

        try {
            const response = await fetch('{{ route("amazon.search") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ url: url })
            });

            const contentType = response.headers.get('content-type') || '';
            const rawBody = await response.text();
            let data = null;

            if (contentType.includes('application/json')) {
                data = JSON.parse(rawBody);
            } else {
                // Backend retornou HTML (login/419/500). Evita quebrar em Unexpected token '<'
                throw new Error(
                    `Resposta inválida do servidor (HTTP ${response.status}). ` +
                    `Faça login novamente e tente de novo.`
                );
            }
            
            hideLoading();
            enableButton();
            
            if (data.success) {
                // Armazenar plataforma e ID do produto
                currentPlatform = data.platform || 'amazon';
                currentProductId = data.product_id || data.asin;
                
                // Debug
                if (data.debug_info) {
                    console.log('=== DEBUG API (' + currentPlatform.toUpperCase() + ') ===');
                    console.log('Product ID:', currentProductId);
                    console.log('Platform:', currentPlatform);
                    console.log('Debug Info:', data.debug_info);
                    console.log('Preço Atual:', data.product.price_display);
                    console.log('Preço Antigo:', data.product.old_price_display);
                    console.log('=======================');
                }
                
                window.lastApiResponse = data;
                currentImageUrl = data.image_url;
                
                // Imagem
                if (data.image_url) {
                    const img = document.getElementById('productImage');
                    img.src = data.image_url;
                    img.style.display = 'block';
                    img.onerror = function() {
                        this.style.display = 'none';
                        document.getElementById('btnDownloadImage').style.display = 'none';
                    };
                    document.getElementById('btnDownloadImage').style.display = 'block';
                }
                
                // Texto
                document.getElementById('productText').value = data.formatted_text;
                
                // Mostrar botão Gerar Novo
                document.getElementById('btnNewSearch').style.display = 'block';
                
                // Mostrar resultado
                showResult();
                showSuccess('Produto encontrado! Clique em "Baixar Imagem" para salvar na pasta Downloads.');
                
                // Scroll suave
                setTimeout(() => {
                    document.getElementById('resultContainer').scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'nearest' 
                    });
                }, 100);
                
            } else {
                // Montar mensagem de erro completa
                let errorMsg = data.error || data.message || 'Erro ao buscar produto';
                
                // Se tiver instruções de como corrigir, adicionar
                if (data.how_to_fix) {
                    errorMsg += '\n\n📝 Como corrigir:\n' + data.how_to_fix;
                }
                
                // Se tiver exemplo, adicionar
                if (data.example) {
                    errorMsg += '\n\n✅ Exemplo: ' + data.example;
                }
                
                showError(errorMsg);
            }
            
        } catch (error) {
            hideLoading();
            enableButton();
            showError('Erro de conexão: ' + error.message);
            console.error('Erro:', error);
        }
    }

    async function downloadImage() {
        if (!currentImageUrl) {
            alert('⚠️ Nenhuma imagem disponível para download');
            return;
        }
        
        const btn = document.getElementById('btnDownloadImage');
        const originalText = btn.innerHTML;
        btn.innerHTML = '⏳ Baixando...';
        btn.disabled = true;
        
        try {
            // Fazer requisição para a imagem
            const response = await fetch(currentImageUrl, {
                mode: 'cors',
                cache: 'no-cache'
            });
            
            if (!response.ok) {
                throw new Error('Erro ao buscar imagem');
            }
            
            // Converter resposta em blob
            const blob = await response.blob();
            
            // Criar URL temporária do blob
            const blobUrl = window.URL.createObjectURL(blob);
            
            // Criar link de download e clicar
            const a = document.createElement('a');
            a.href = blobUrl;
            const fileName = `${currentPlatform || 'produto'}-${currentProductId || Date.now()}.jpg`;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            
            // Limpar
            document.body.removeChild(a);
            window.URL.revokeObjectURL(blobUrl);
            
            // Feedback de sucesso
            btn.innerHTML = '✅ Imagem Baixada!';
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.disabled = false;
            }, 2000);
            
        } catch (error) {
            console.error('Erro ao baixar imagem:', error);
            
            // Se falhar, abre em nova aba (fallback)
            window.open(currentImageUrl, '_blank');
            
            btn.innerHTML = '⚠️ Erro - Aberta em nova aba';
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.disabled = false;
            }, 3000);
        }
    }

    function copyToClipboard() {
        const textarea = document.getElementById('productText');
        textarea.select();
        document.execCommand('copy');
        
        const copyBtn = document.getElementById('copyText');
        copyBtn.textContent = '✅ Texto Copiado!';
        setTimeout(() => {
            copyBtn.textContent = '📋 Copiar Texto';
        }, 2000);
    }

    function showLoading() {
        document.getElementById('loading').classList.add('show');
    }

    function hideLoading() {
        document.getElementById('loading').classList.remove('show');
    }

    function showResult() {
        document.getElementById('resultContainer').classList.add('show');
    }

    function showError(message) {
        const errorEl = document.getElementById('errorMessage');
        // Usar innerHTML para preservar quebras de linha
        errorEl.innerHTML = message.replace(/\n/g, '<br>');
        errorEl.classList.add('show');
    }

    function showSuccess(message) {
        const successEl = document.getElementById('successMessage');
        successEl.textContent = message;
        successEl.classList.add('show');
    }

    function hideAlerts() {
        document.getElementById('errorMessage').classList.remove('show');
        document.getElementById('successMessage').classList.remove('show');
    }

    function disableButton() {
        const btn = document.getElementById('btnSearch');
        btn.disabled = true;
        btn.textContent = '⏳ Aguarde...';
    }

    function enableButton() {
        const btn = document.getElementById('btnSearch');
        btn.disabled = false;
        btn.textContent = '🔍 Buscar Produto';
    }

    // Enter key
    document.getElementById('amazonUrl')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchProduct();
        }
    });

    // Nova busca - limpar resultados
    function newSearch() {
        // Limpar URL
        document.getElementById('amazonUrl').value = '';
        
        // Esconder resultado
        document.getElementById('resultContainer').classList.remove('show');
        
        // Limpar imagem
        const img = document.getElementById('productImage');
        img.style.display = 'none';
        img.src = '';
        
        // Limpar textarea
        document.getElementById('productText').value = '';
        
        // Esconder botões
        document.getElementById('btnDownloadImage').style.display = 'none';
        document.getElementById('btnNewSearch').style.display = 'none';
        
        // Limpar alertas
        hideAlerts();
        
        // Focar no campo de URL
        document.getElementById('amazonUrl').focus();
        
        // Scroll para o topo
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // ===========================
    // EMOJI PICKER FUNCTIONALITY
    // ===========================

    const emojiCategories = {
        popular: ['🔥', '⚡', '💥', '🎯', '✨', '🎉', '💰', '🛒', '❤️', '👍', '🎁', '🚀', '💎', '🌟', '⭐', '✅', '❗', '💪', '👏', '🤩', '😍', '🥳', '💯', '🔝', '📢'],
        faces: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔'],
        symbols: ['💯', '💢', '💬', '💭', '💤', '💮', '💰', '💱', '💲', '💳', '💴', '💵', '💶', '💷', '💸', '💹', '🔔', '🔕', '🔖', '🔗', '🔘', '🔙', '🔚', '🔛', '🔜', '🔝', '✅', '✔️', '❌', '❎', '➕', '➖', '➗', '➰', '➿'],
        objects: ['🎁', '🎀', '🎂', '🎃', '🎄', '🎅', '🎆', '🎇', '🎈', '🎉', '🎊', '🎋', '🎌', '🎍', '🎎', '🎏', '🎐', '🎑', '🎒', '🎓', '⚽', '⚾', '🏀', '🏈', '🎾', '🎱', '🎳', '🏏', '🏑', '🏒', '🏓', '🎯', '🎰', '🎲', '🎮', '🎸', '🎹', '🎺', '🎻', '🎼'],
        nature: ['🌟', '⭐', '🌠', '🌌', '⛅', '🌤️', '🌥️', '🌦️', '🌧️', '🌨️', '🌩️', '🌪️', '🌫️', '🌬️', '🌀', '🌈', '🌂', '☂️', '☔', '⛱️', '⚡', '❄️', '☃️', '⛄', '☄️', '🔥', '💧', '🌊', '🎄', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿']
    };


    let currentCategory = 'popular';

    // Mostrar categoria de emojis
    function showEmojiCategory(category) {
        currentCategory = category;
        const emojis = emojiCategories[category] || emojiCategories.popular;
        const grid = document.getElementById('emojiGrid');
        
        grid.innerHTML = emojis.map(emoji => 
            `<span class="emoji-item" onclick="insertEmoji('${emoji}')" title="${emoji}">${emoji}</span>`
        ).join('');
        
        // Atualizar botões de categoria
        document.querySelectorAll('.emoji-category').forEach(btn => {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
    }

    // Alternar visibilidade do emoji picker
    function toggleEmojiPicker() {
        const picker = document.getElementById('emojiPicker');
        const isVisible = picker.classList.contains('show');
        
        if (!isVisible) {
            showEmojiCategory('popular');
            picker.classList.add('show');
        } else {
            picker.classList.remove('show');
        }
    }

    // Inserir emoji rápido (botões da toolbar)
    function insertQuickEmoji(emoji) {
        insertEmoji(emoji);
    }

    // Inserir emoji no textarea na posição do cursor
    function insertEmoji(emoji) {
        const textarea = document.getElementById('productText');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const text = textarea.value;
        
        // Inserir emoji na posição do cursor
        const before = text.substring(0, start);
        const after = text.substring(end, text.length);
        textarea.value = before + emoji + after;
        
        // Mover cursor para depois do emoji
        const newPosition = start + emoji.length;
        textarea.selectionStart = newPosition;
        textarea.selectionEnd = newPosition;
        textarea.focus();
        
        // Feedback visual
        const btn = event.target;
        if (btn.classList.contains('emoji-item')) {
            btn.style.transform = 'scale(1.3)';
            setTimeout(() => {
                btn.style.transform = '';
            }, 200);
        }
    }

    // Inicializar categoria popular ao carregar
    document.addEventListener('DOMContentLoaded', function() {
        showEmojiCategory('popular');
    });

    // Fechar emoji picker ao clicar fora
    document.addEventListener('click', function(event) {
        const picker = document.getElementById('emojiPicker');
        const emojiButton = event.target.closest('.btn-emoji');
        const insidePicker = event.target.closest('.emoji-picker');
        
        if (!emojiButton && !insidePicker && picker.classList.contains('show')) {
            picker.classList.remove('show');
        }
    });
</script>
@endsection