const swiper = new Swiper('.galeria', {
    direction: 'horizontal',
    loop: true,

    pagination: {
        el: '.galeria-pagination',
    },
    autoplay: {
        delay: 8000,
    },
});

function pegarMetaAtual() {
    const elementoValor = document.getElementById("valorMobile");
    if (elementoValor) {
        const textoCompleto = elementoValor.parentElement.innerText;
        const match = textoCompleto.match(/de R\$ ([\d.,]+)/);
        if (match) {
            const valorMeta = parseFloat(match[1].replace(".", "").replace(",", "."));
            return valorMeta || 800000;
        }
    }
    return 800000; // valor padrão caso não encontre
}

let arrecadado = 0;
let apoiadores = 992;
let coracoes = 278;

const arrayDados = [
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 40, coracoes: 1 },
    { nome: "Juliana Aparecida", image: "files/icon.png", apoiador: 1, doado: 30, coracoes: 0 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 113.20, coracoes: 0 },
    { nome: "Lucas Fernandes", image: "files/icon.png", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Fernanda Oliveira", image: "files/icon.png", apoiador: 1, doado: 200, coracoes: 0 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 50, coracoes: 1 },
    { nome: "João Castro", image: "files/icon.png", apoiador: 1, doado: 40, coracoes: 0 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 100, coracoes: 1 },
    { nome: "Marcela de Moraes", image: "files/icon.png", apoiador: 1, doado: 50, coracoes: 0 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 250, coracoes: 0 },
    { nome: "Marcelo Rodrigues", image: "files/icon.png", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Taís Costa", image: "files/icon.png", apoiador: 1, doado: 150, coracoes: 1 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 100, coracoes: 0 },
    { nome: "Doador anônimo", image: "files/icon.png", apoiador: 1, doado: 40, coracoes: 1 },
    { nome: "Manoel Caetano Santos", image: "files/icon.png", apoiador: 1, doado: 30, coracoes: 0 }
];

let index = 0;

function pegarValorAtual() {
    const elementoValor = document.getElementById("valorMobile");
    if (elementoValor) {
        const textoValor = elementoValor.innerText;
        const valorNumerico = parseFloat(textoValor.replace("R$ ", "").replace(".", "").replace(",", "."));
        return valorNumerico || 0;
    }
    return 0;
}

function atualizarValores() {
    if (index >= arrayDados.length) return;
    
    if (index === 0) {
        arrecadado = pegarValorAtual();
    }
    
    let item = arrayDados[index];
    apoiadores += item.apoiador;
    coracoes += item.coracoes;
    animarValor("apoiadores", apoiadores);
    animarValor("coracoes", coracoes);

    let novoValor = arrecadado + item.doado;
    animarValor("doado", novoValor, arrecadado);
    arrecadado = novoValor;
    
    exibirNotificacao(item.nome, item.image, item.doado);
    atualizarBarra();
    index++;
}

function atualizarBarra() {
    if (arrecadado === 0) {
        arrecadado = pegarValorAtual();
    }
    
    let porcentagem = (arrecadado / pegarMetaAtual()) * 100;
    let porcento = Math.round(porcentagem);
    document.getElementById("barra").style.width = porcentagem + "%";
    document.getElementById("barraMobile").style.width = porcentagem + "%";
    document.getElementById("porcentagem").innerHTML = porcento + "%";
}

function formatarMoeda(valor) {
    return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(valor);
}

function animarValor(id, novoValor, valorAntigo = 0) {
    let elementos = document.querySelectorAll(`#${id}, #valorMobile`);
    let inicio = valorAntigo || parseFloat(elementos[0].innerText.replace(/[^0-9.,]/g, "")) || 0;
    let incremento = (novoValor - inicio) / 50;
    let atual = inicio;
    let contador = 0;
    
    let animacao = setInterval(() => {
        atual += incremento;
        elementos.forEach(elemento => {
            elemento.innerText = id === "doado" ? formatarMoeda(atual) : atual.toFixed(0);
        });

        contador++;
        if (contador >= 50) {
            clearInterval(animacao);
            elementos.forEach(elemento => {
                elemento.innerText = id === "doado" ? formatarMoeda(novoValor) : novoValor;
            });
        }
    }, 20);
}

function criarAvatarIniciais(nome, tamanho = 50) {
    const iniciais = nome.split(' ')
        .map(n => n.charAt(0))
        .join('')
        .toUpperCase()
        .slice(0, 2);
    
    const cores = [
        '#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8',
        '#6f42c1', '#fd7e14', '#20c997', '#e83e8c', '#6c757d'
    ];
    
    const corAleatoria = cores[Math.floor(Math.random() * cores.length)];
    
    const canvas = document.createElement('canvas');
    canvas.width = tamanho;
    canvas.height = tamanho;
    const ctx = canvas.getContext('2d');
    
    // Gradiente de fundo
    const gradient = ctx.createLinearGradient(0, 0, tamanho, tamanho);
    gradient.addColorStop(0, corAleatoria);
    gradient.addColorStop(1, ajustarBrilho(corAleatoria, -20));
    
    // Desenhar círculo de fundo
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(tamanho/2, tamanho/2, tamanho/2, 0, 2 * Math.PI);
    ctx.fill();
    
    // Adicionar texto das iniciais
    ctx.fillStyle = '#ffffff';
    ctx.font = `bold ${tamanho * 0.4}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(iniciais, tamanho/2, tamanho/2);
    
    return canvas.toDataURL();
}

function ajustarBrilho(cor, percentual) {
    const num = parseInt(cor.replace("#", ""), 16);
    const amt = Math.round(2.55 * percentual);
    const R = (num >> 16) + amt;
    const G = (num >> 8 & 0x00FF) + amt;
    const B = (num & 0x0000FF) + amt;
    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
        (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
        (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}

function exibirNotificacao(nome, image, valor) {
    let notificacao = document.createElement("div");
    notificacao.className = "notificacao";
    
    // Verificar se a imagem existe e carrega corretamente
    const img = new Image();
    img.onload = function() {
        // Imagem carregou com sucesso, usar a imagem original
        notificacao.innerHTML = `<div class="avatar"><img src="${image}" alt="${nome}"></div><div class="content"><h4>${nome}</h4> Acabou de doar <strong>${formatarMoeda(valor)}</strong>.</div>`;
    };
    
    img.onerror = function() {
        // Imagem falhou ao carregar, criar avatar com iniciais
        const avatarDataURL = criarAvatarIniciais(nome);
        notificacao.innerHTML = `<div class="avatar"><img src="${avatarDataURL}" alt="${nome}"></div><div class="content"><h4>${nome}</h4> Acabou de doar <strong>${formatarMoeda(valor)}</strong>.</div>`;
    };
    
    img.src = image;
    
    document.body.appendChild(notificacao);

    setTimeout(() => {
        let rect = notificacao.getBoundingClientRect();

        confetti({
            particleCount: 100,
            spread: 70,
            origin: {
                x: (rect.left + rect.width / 2) / window.innerWidth,
                y: (rect.top + rect.height / 2) / window.innerHeight
            }
        });
    }, 100);
    
    setTimeout(() => {
        notificacao.style.transform = "translatey(0)";
        notificacao.style.opacity = "0";
        setTimeout(() => notificacao.remove(), 500);
    }, 6000);
}

setInterval(atualizarValores, 30000);

document.addEventListener("DOMContentLoaded", () => {
    arrecadado = pegarValorAtual();
    atualizarBarra();
    aplicarAvatarPerfil();
});

document.addEventListener("DOMContentLoaded", () => {
    let script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";
    document.head.appendChild(script);
});

function getTrackingParams() {
    const params = new URLSearchParams(window.location.search);
    return {
        src: params.get('src'),
        sck: params.get('sck'),
        utm_source: params.get('utm_source'),
        utm_campaign: params.get('utm_campaign'),
        utm_medium: params.get('utm_medium'),
        utm_content: params.get('utm_content'),
        utm_term: params.get('utm_term')
    };
}

function serializeParams(params) {
    const urlParams = new URLSearchParams();
    
    // Adiciona todos os parâmetros, mesmo os nulos
    Object.entries(params).forEach(([key, value]) => {
        urlParams.append(key, value !== null ? value : null);
    });
    
    return urlParams.toString();
}

function aplicarAvatarPerfil() {
    const avatarPerfil = document.querySelector('.perfil .avatar img');
    if (avatarPerfil) {
        const nomePerfil = document.querySelector('.dadosPerfil h3');
        const nome = nomePerfil ? nomePerfil.textContent : 'Usuário';
        
        avatarPerfil.onerror = function() {
            // Se a imagem falhar, criar avatar com iniciais
            const avatarDataURL = criarAvatarIniciais(nome, 80);
            this.src = avatarDataURL;
        };
        
        // Testar se a imagem carrega
        const img = new Image();
        img.onerror = function() {
            avatarPerfil.src = criarAvatarIniciais(nome, 80);
        };
        img.src = avatarPerfil.src;
    }
}