/**
 * assets/js/account-page.js
 * Script principal para a Área do Artista (Front-end).
 * VERSÃO FINAL COMPLETA:
 * - Toasts, Upload Seguro, Abas, Modais de Pagamento.
 * - Suporte para Modal de Motivo de Rejeição.
 * - Captura de erros de pagamento via URL.
 */

document.addEventListener('DOMContentLoaded', function() {

    // ==========================================================================
    // 1. SISTEMA DE NOTIFICAÇÕES (TOASTS)
    // ==========================================================================
    
    // Cria o container de toasts se não existir
    if (!document.getElementById('rmbz-toast-container')) {
        const container = document.createElement('div');
        container.id = 'rmbz-toast-container';
        document.body.appendChild(container);
    }

    /**
     * Exibe uma notificação flutuante.
     * @param {string} message - Mensagem a exibir.
     * @param {string} type - 'success', 'error' ou 'info'.
     */
    function showToast(message, type = 'info') {
        const container = document.getElementById('rmbz-toast-container');
        const toast = document.createElement('div');
        toast.className = `rmbz-toast ${type}`;
        
        let icon = 'ℹ️';
        if (type === 'success') icon = '✅';
        if (type === 'error') icon = '❌';

        toast.innerHTML = `<span>${icon} ${message}</span>`;
        container.appendChild(toast);

        // Animação de Entrada
        setTimeout(() => toast.classList.add('show'), 10);

        // Remover após 5 segundos
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 5000);
    }


    // ==========================================================================
    // 2. GESTÃO DE URL E MENSAGENS PHP
    // Captura redirecionamentos do PHP e mostra como Toasts.
    // ==========================================================================
    const urlParams = new URLSearchParams(window.location.search);
    let hasMessage = false;

    // A. Mensagens de Subscrição e Depósito
    if (urlParams.has('sub_status')) {
        const status = urlParams.get('sub_status');
        const msg = urlParams.get('msg') || '';
        
        if (status === 'success') showToast('Subscrição ativada com sucesso!', 'success');
        else if (status === 'deposit_requested') showToast('Depósito solicitado. Aguarde a aprovação.', 'success');
        else if (status === 'error') showToast(decodeURIComponent(msg), 'error');
        hasMessage = true;
    }

    // B. Mensagens de Upload
    if (urlParams.has('status')) {
        const status = urlParams.get('status');
        const msg = urlParams.get('msg') || '';

        if (status === 'upload_success') showToast('Música enviada com sucesso para avaliação!', 'success');
        else if (status === 'error') showToast(decodeURIComponent(msg), 'error');
        hasMessage = true;
    }

    // C. Mensagens de Feedback
    if (urlParams.has('feedback_updated')) {
        showToast('Feedback enviado com sucesso.', 'success');
        hasMessage = true;
    }

    // D. Mensagens de Pagamento de Produção
    if (urlParams.has('payment')) {
        const pStatus = urlParams.get('payment');
        const pMsg = urlParams.get('msg');

        if (pStatus === 'success') {
            showToast('Pagamento confirmado! O estado do projeto foi atualizado.', 'success');
        } else if (pStatus === 'error') {
            // Mostra o erro específico (ex: Saldo Insuficiente)
            showToast(decodeURIComponent(pMsg || 'Erro ao processar pagamento.'), 'error');
        }
        hasMessage = true;
    }

    // Limpar a URL para ficar limpa visualmente
    if (hasMessage && window.history.replaceState) {
        const newUrl = window.location.pathname;
        window.history.replaceState({}, document.title, newUrl);
    }


    // ==========================================================================
    // 3. UPLOAD DE MÚSICA VIA AJAX
    // ==========================================================================
    const fileInput = document.getElementById('ajax-music-file');
    const hiddenUrlInput = document.getElementById('music_file_url_input');
    const submitBtn = document.getElementById('final-submit-btn');
    const progressBar = document.getElementById('upload-progress-bar');
    const progressContainer = document.getElementById('upload-progress-container');
    const statusText = document.getElementById('upload-status-text');
    const percentText = document.getElementById('upload-percent');

    if (fileInput && hiddenUrlInput && submitBtn) {
        
        fileInput.addEventListener('change', function() {
            const file = this.files[0];
            if (!file) return;

            // Validação JS: Tamanho (50MB)
            if (file.size > 50 * 1024 * 1024) {
                showToast('O ficheiro é demasiado grande (Máx: 50MB).', 'error');
                this.value = '';
                return;
            }

            // Validação JS: Tipo
            if (!file.type.match('audio.*')) {
                showToast('Formato inválido. Apenas MP3 é permitido.', 'error');
                this.value = '';
                return;
            }

            // UI Update
            submitBtn.disabled = true;
            submitBtn.style.opacity = '0.6';
            submitBtn.innerText = 'A carregar... 0%';
            
            if (progressContainer) {
                progressContainer.style.display = 'block';
                progressBar.style.width = '0%';
                progressBar.style.background = '#f0b90b';
            }

            const formData = new FormData();
            formData.append('action', 'onemz_upload_music_chunk');
            if (typeof onemz_ajax_data !== 'undefined') {
                formData.append('nonce', onemz_ajax_data.upload_nonce);
            }
            formData.append('music_file', file);

            const xhr = new XMLHttpRequest();
            const ajaxUrl = (typeof onemz_ajax_data !== 'undefined') ? onemz_ajax_data.ajax_url : '/wp-admin/admin-ajax.php';
            
            xhr.open('POST', ajaxUrl, true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    const percent = Math.round((e.loaded / e.total) * 100);
                    if (progressBar) progressBar.style.width = percent + '%';
                    if (percentText) percentText.innerText = percent + '%';
                    submitBtn.innerText = `A carregar... ${percent}%`;
                }
            };

            xhr.onload = function() {
                if (xhr.status === 200) {
                    try {
                        const res = JSON.parse(xhr.responseText);
                        if (res.success) {
                            hiddenUrlInput.value = res.data.url;
                            showToast('Upload concluído! Pode enviar.', 'success');
                            if (progressBar) progressBar.style.background = '#2ecc71';
                            submitBtn.disabled = false;
                            submitBtn.style.opacity = '1';
                            submitBtn.innerText = 'ENVIAR PARA AVALIAÇÃO 🚀';
                            submitBtn.style.background = '#f0b90b';
                            submitBtn.style.color = '#1e1e1e';
                        } else {
                            handleUploadError(res.data);
                        }
                    } catch (err) {
                        handleUploadError('Erro na resposta do servidor.');
                    }
                } else {
                    handleUploadError('Erro de conexão.');
                }
            };

            xhr.onerror = function() { handleUploadError('Falha na conexão.'); };
            xhr.send(formData);
        });

        function handleUploadError(msg) {
            showToast(msg, 'error');
            if (progressContainer) progressContainer.style.display = 'none';
            submitBtn.innerText = 'Tente outro ficheiro';
            fileInput.value = '';
        }
    }


    // ==========================================================================
    // 4. ABAS DE NAVEGAÇÃO
    //    Em desktop (>768px): comportamento de tabs clássico (CSS gere o visual).
    //    Em mobile (≤768px): a tab activa funciona como trigger de dropdown.
    //                        Toggle: abre/fecha. Escolha de outra tab: fecha.
    //                        Clique fora ou ESC: fecha.
    // ==========================================================================
    const tabs = document.querySelectorAll('.tab-link');
    const contents = document.querySelectorAll('.account-tab-content');
    // NOTA: excluímos `.rmbz-tabs--auth` porque essas tabs (Entrar/Criar Conta)
    // usam onclick="switchAuthTab(...)" próprio e devem manter-se como
    // segmented control horizontal mesmo em mobile.
    const tabContainers = document.querySelectorAll(
        '.rmbz-tabs:not(.rmbz-tabs--auth), .account-tabs:not(.rmbz-tabs--auth)'
    );

    // Helper: estamos em viewport mobile? (sincronizado com o CSS @media 768px)
    const isMobileTabs = () => window.matchMedia('(max-width: 768px)').matches;

    // Helper: fechar todos os dropdowns abertos
    const closeAllTabDropdowns = () => {
        tabContainers.forEach(c => {
            c.classList.remove('is-open');
            c.removeAttribute('aria-expanded');
        });
    };

    if (tabs.length > 0) {
        tabs.forEach(tab => {
            tab.addEventListener('click', (e) => {
                e.preventDefault();

                const container = tab.closest('.rmbz-tabs:not(.rmbz-tabs--auth), .account-tabs:not(.rmbz-tabs--auth)');
                const isActiveTab = tab.classList.contains('active');

                // MOBILE: se clicar na tab activa (o trigger), apenas alterna o dropdown.
                if (isMobileTabs() && container && isActiveTab) {
                    const willOpen = !container.classList.contains('is-open');
                    closeAllTabDropdowns(); // fecha outros containers, se houver
                    if (willOpen) {
                        container.classList.add('is-open');
                        container.setAttribute('aria-expanded', 'true');
                    }
                    return; // não muda de tab, apenas abre/fecha
                }

                // Mudança de tab (desktop ou mobile escolhendo outra opção)
                tabs.forEach(t => {
                    t.classList.remove('active');
                    t.setAttribute('aria-selected', 'false');
                });
                contents.forEach(c => c.classList.remove('active'));

                tab.classList.add('active');
                tab.setAttribute('aria-selected', 'true');
                const targetId = tab.getAttribute('data-tab');
                const targetContent = document.getElementById(targetId);
                if (targetContent) targetContent.classList.add('active');

                // Em mobile, depois de escolher uma tab nova, o dropdown fecha.
                if (isMobileTabs() && container) {
                    container.classList.remove('is-open');
                    container.removeAttribute('aria-expanded');
                }
            });
        });

        // Fechar dropdown ao clicar fora (apenas em mobile)
        document.addEventListener('click', (e) => {
            if (!isMobileTabs()) return;
            // Se o clique foi dentro de um container de tabs (que não auth), ignora
            if (e.target.closest('.rmbz-tabs:not(.rmbz-tabs--auth), .account-tabs:not(.rmbz-tabs--auth)')) return;
            closeAllTabDropdowns();
        });

        // Fechar dropdown com tecla ESC
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && isMobileTabs()) {
                closeAllTabDropdowns();
            }
        });

        // Se a janela for redimensionada de mobile para desktop, garantir
        // que os dropdowns ficam fechados (evita estado inconsistente).
        window.addEventListener('resize', () => {
            if (!isMobileTabs()) closeAllTabDropdowns();
        });
    }


    // ==========================================================================
    // 5. MODAIS (Popups) - DEPÓSITO E LEVANTAMENTO
    // ==========================================================================
    function setupModal(triggerId, modalId) {
        const trigger = document.getElementById(triggerId);
        const modal = document.getElementById(modalId);
        if (trigger && modal) {
            trigger.addEventListener('click', (e) => { e.preventDefault(); modal.style.display = 'flex'; });
            
            const closeBtns = modal.querySelectorAll('.modal-close-btn');
            closeBtns.forEach(btn => btn.addEventListener('click', () => modal.style.display = 'none'));
            modal.addEventListener('click', (e) => { if (e.target === modal) modal.style.display = 'none'; });
        }
    }
    setupModal('rmbz-show-deposit-btn', 'deposit-modal');
    setupModal('rmbz-show-withdrawal-btn', 'withdrawal-modal');


    // ==========================================================================
    // 6. EXIBIÇÃO DE DADOS DE PAGAMENTO
    // ==========================================================================
    function setupPaymentDisplay(selectId, instructionsId, numDisplayId) {
        const select = document.getElementById(selectId);
        const instructions = document.getElementById(instructionsId);
        const numDisplay = document.getElementById(numDisplayId);

        if (select && instructions && numDisplay) {
            select.addEventListener('change', function() {
                const option = this.options[this.selectedIndex];
                const number = option.getAttribute('data-number');
                if (number) {
                    numDisplay.textContent = number;
                    instructions.style.display = 'block';
                } else {
                    instructions.style.display = 'none';
                }
            });
        }
    }
    setupPaymentDisplay('deposit_payment_method', 'deposit-payment-instructions', 'deposit-display-num');
    setupPaymentDisplay('reg_payment_method', 'payment-instructions', 'display-pay-number');


    // ==========================================================================
    // 7. TOGGLE LOGIN/REGISTO & COPY
    // ==========================================================================
    const loginBlock = document.getElementById('login-block');
    const regBlock = document.getElementById('register-block');
    const btnShowReg = document.getElementById('show-register-btn');
    const btnShowLogin = document.getElementById('show-login-btn');

    if (loginBlock && regBlock && btnShowReg && btnShowLogin) {
        btnShowReg.addEventListener('click', (e) => { e.preventDefault(); loginBlock.style.display = 'none'; regBlock.style.display = 'block'; });
        btnShowLogin.addEventListener('click', (e) => { e.preventDefault(); regBlock.style.display = 'none'; loginBlock.style.display = 'block'; });
    }

    const copyBtn = document.getElementById('copy-referral-code-btn');
    const referralInput = document.getElementById('referral-code-input');
    if (copyBtn && referralInput) {
        copyBtn.addEventListener('click', (e) => {
            e.preventDefault();
            referralInput.select();
            referralInput.setSelectionRange(0, 99999);
            try {
                navigator.clipboard.writeText(referralInput.value);
                showToast('Código copiado!', 'success');
            } catch (err) {
                document.execCommand('copy');
                showToast('Código copiado!', 'success');
            }
        });
    }

    // ==========================================================================
    // 8. MODAL DE MOTIVO DE REJEIÇÃO
    // ==========================================================================
    const rejectionBtns = document.querySelectorAll('.rmbz-view-reason-btn');
    const rejectionModal = document.getElementById('rejection-modal');
    const rejectionText = document.getElementById('rejection-reason-text');

    if (rejectionBtns.length > 0 && rejectionModal && rejectionText) {
        rejectionBtns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                // Buscar o motivo do atributo data
                const reason = btn.getAttribute('data-reason');
                // Substituir quebras de linha por <br>
                rejectionText.innerHTML = reason ? reason.replace(/\n/g, '<br>') : 'Sem motivo especificado.';
                rejectionModal.style.display = 'flex';
            });
        });

        // Fechar ao clicar no fundo
        rejectionModal.addEventListener('click', (e) => {
            if (e.target === rejectionModal) {
                rejectionModal.style.display = 'none';
            }
        });
    }

});