script.js

// ====================== VARIÁVEIS GLOBAIS ====================== //
let hotelDataSource = []; // Dados originais (vazio até importação)
let filteredData = [];
let currentPage = 1;
const itemsPerPage = 10;
let charts = {};

// ====================== INICIALIZAÇÃO ====================== //
document.addEventListener('DOMContentLoaded', () => {
    initializeDateTime();
    loadDataFromStorage();

    // Atualizar relógio
    setInterval(updateTime, 1000);
});

// ====================== CARREGAR DADOS DO LOCALSTORAGE ====================== //
function loadDataFromStorage() {
    const savedData = localStorage.getItem('hotelDashboardData');

    if (savedData) {
        try {
            const parsedData = JSON.parse(savedData);

            if (parsedData && parsedData.length > 0) {
                // Restaurar dados
                hotelDataSource = parsedData;
                filteredData = [...parsedData];

                // Inicializar dashboard com dados carregados
                populateFilters();
                calculateKPIs();
                renderCharts();
                renderTable();
                initHeaderNavigation();
                updateHeaderStats();

                // Mostrar informações dos dados
                displayDataInfo(parsedData);

                // Mostrar botão de limpar
                document.getElementById('clearDataBtn').style.display = 'block';

                return;
            }
        } catch (error) {
            console.error('Erro ao carregar dados do localStorage:', error);
            localStorage.removeItem('hotelDashboardData');
        }
    }

    // Se não houver dados salvos, mostrar estado vazio
    showEmptyState();
}

// ====================== SALVAR DADOS NO LOCALSTORAGE ====================== //
function saveDataToStorage(data) {
    try {
        localStorage.setItem('hotelDashboardData', JSON.stringify(data));
    } catch (error) {
        console.error('Erro ao salvar dados no localStorage:', error);
    }
}

// ====================== LIMPAR DADOS CARREGADOS ====================== //
function clearLoadedData() {
    // Abrir modal de confirmação customizado
    const modal = document.getElementById('confirmModal');
    modal.classList.add('active');
}

// ====================== FECHAR MODAL DE CONFIRMAÇÃO ====================== //
function closeConfirmModal() {
    const modal = document.getElementById('confirmModal');
    modal.classList.remove('active');
}

// ====================== CONFIRMAR LIMPEZA DE DADOS ====================== //
function confirmClearData() {
    // Fechar modal
    closeConfirmModal();

    // Limpar localStorage
    localStorage.removeItem('hotelDashboardData');

    // Limpar variáveis
    hotelDataSource = [];
    filteredData = [];

    // Limpar input de arquivo
    document.getElementById('fileInput').value = '';

    // Ocultar botão de limpar
    document.getElementById('clearDataBtn').style.display = 'none';

    // Mostrar estado vazio
    showEmptyState();

    // Resetar filtros
    populateFilters();

    // Mensagem de confirmação
    const fileStatus = document.getElementById('fileStatus');
    fileStatus.textContent = '✓ Dados removidos com sucesso!';
    fileStatus.className = 'file-status success';

    setTimeout(() => {
        fileStatus.textContent = '';
        fileStatus.className = 'file-status';
    }, 3000);
}

// ====================== ESTADO VAZIO ====================== //
function showEmptyState() {
    // Mostrar mensagem de estado vazio
    const dataInfo = document.getElementById('dataInfo');
    dataInfo.innerHTML = `
        <div class="empty-state">
            <i class="fas fa-file-upload" style="font-size: 48px; color: var(--primary-gradient-start); margin-bottom: 16px;"></i>
            <h3>Nenhum dado carregado</h3>
            <p>Importe uma planilha Excel ou CSV para começar a visualizar os dados</p>
            <p style="margin-top: 8px; font-size: 13px; color: var(--text-secondary);">O sistema detectará automaticamente as categorias e departamentos</p>
        </div>
    `;
    dataInfo.style.display = 'block';

    // Limpar KPIs
    document.getElementById('avgRating').textContent = '0';
    document.getElementById('avgOcupacao').textContent = '0%';
    document.getElementById('totalReceita').textContent = 'R$ 0';
    document.getElementById('totalHospedes').textContent = '0';

    // Ocultar indicadores de tendência
    document.getElementById('avgRatingTrend').style.display = 'none';
    document.getElementById('avgOcupacaoTrend').style.display = 'none';
    document.getElementById('totalReceitaTrend').style.display = 'none';
    document.getElementById('totalHospedesTrend').style.display = 'none';

    // Limpar tabela
    document.getElementById('tableBody').innerHTML = `
        <tr>
            <td colspan="11" style="text-align: center; padding: 40px; color: var(--text-secondary);">
                <i class="fas fa-table" style="font-size: 32px; margin-bottom: 12px; display: block;"></i>
                Aguardando importação de dados
            </td>
        </tr>
    `;

    // Limpar info de paginação
    document.getElementById('pageInfo').textContent = 'Página 0 de 0';

    // Limpar header stats
    document.getElementById('totalRecords').textContent = '0 Registros';
    document.getElementById('totalRevenue').textContent = 'R$ 0';

    // Renderizar gráficos vazios
    renderEmptyCharts();
}

// ====================== IMPORTAR ARQUIVO ====================== //
function handleFileUpload(event) {
    const file = event.target.files[0];
    if (!file) return;

    const fileStatus = document.getElementById('fileStatus');
    fileStatus.textContent = 'Carregando...';
    fileStatus.className = 'file-status';

    const reader = new FileReader();

    reader.onload = function (e) {
        try {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });

            // Pegar a primeira planilha
            const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
            const jsonData = XLSX.utils.sheet_to_json(firstSheet);

            if (jsonData.length === 0) {
                throw new Error('Arquivo vazio');
            }

            // Processar e validar dados
            const processedData = processImportedData(jsonData);

            if (processedData.length === 0) {
                throw new Error('Nenhum dado válido encontrado');
            }

            // Substituir dados
            hotelDataSource = processedData;
            filteredData = [...processedData];

            // Salvar no localStorage para persistência
            saveDataToStorage(processedData);

            // Inicializar dashboard pela primeira vez
            populateFilters();
            calculateKPIs();
            if (Object.keys(charts).length === 0) {
                renderCharts();
            } else {
                updateCharts();
            }
            renderTable();
            initHeaderNavigation();
            updateHeaderStats();

            fileStatus.textContent = `✓ ${processedData.length} registros carregados com sucesso!`;
            fileStatus.className = 'file-status success';

            // Mostrar informações dos dados importados
            displayDataInfo(processedData);

            // Mostrar botão de limpar dados
            document.getElementById('clearDataBtn').style.display = 'block';

            // Limpar mensagem após 5 segundos
            setTimeout(() => {
                fileStatus.textContent = '';
                fileStatus.className = 'file-status';
            }, 5000);

        } catch (error) {
            console.error('Erro ao processar arquivo:', error);
            fileStatus.textContent = `✗ Erro: ${error.message}`;
            fileStatus.className = 'file-status error';
        }
    };

    reader.onerror = function () {
        fileStatus.textContent = '✗ Erro ao ler o arquivo';
        fileStatus.className = 'file-status error';
    };

    // Ler como ArrayBuffer para suportar Excel
    reader.readAsArrayBuffer(file);
}

// ====================== PROCESSAR DADOS IMPORTADOS ====================== //
function processImportedData(rawData) {
    return rawData.map(row => {
        // Mapear colunas do Excel para o formato esperado
        // Flexível para aceitar diferentes nomes de colunas

        // Função auxiliar para parsing seguro de números
        const safeParseFloat = (value) => {
            const parsed = parseFloat(value);
            return isNaN(parsed) || !isFinite(parsed) ? 0 : parsed;
        };

        const safeParseInt = (value) => {
            const parsed = parseInt(value);
            return isNaN(parsed) || !isFinite(parsed) ? 0 : parsed;
        };

        return {
            data: row.data || row.Data || row.DATE || row.date || '',
            mes: row.mes || row.Mes || row.MES || row.month || extractMonth(row.data || row.Data),
            departamento: row.departamento || row.Departamento || row.DEPARTAMENTO || row.department || '',
            categoria: row.categoria || row.Categoria || row.CATEGORIA || row.category || '',
            avaliacao: safeParseFloat(row.avaliacao || row.Avaliacao || row.AVALIACAO || row.rating || row.avaliação),
            hospedes: safeParseInt(row.hospedes || row.Hospedes || row.HOSPEDES || row.guests || row.hóspedes),
            ocupacao: safeParseFloat(row.ocupacao || row.Ocupacao || row.OCUPACAO || row.occupancy || row.ocupação),
            receita: safeParseFloat(row.receita || row.Receita || row.RECEITA || row.revenue),
            reclamacoes: safeParseInt(row.reclamacoes || row.Reclamacoes || row.RECLAMACOES || row.complaints || row.reclamações),
            elogios: safeParseInt(row.elogios || row.Elogios || row.ELOGIOS || row.compliments),
            tempoResposta: safeParseFloat(row.tempoResposta || row.TempoResposta || row.TEMPO_RESPOSTA || row.responseTime || row.tempo_resposta)
        };
    }).filter(row => {
        // Validar se tem dados mínimos necessários
        return row.departamento && row.avaliacao > 0;
    });
}

// ====================== EXTRAIR MÊS DA DATA ====================== //
function extractMonth(dateString) {
    if (!dateString) return '';

    const date = new Date(dateString);
    if (isNaN(date.getTime())) return '';

    const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
    return months[date.getMonth()];
}

// ====================== EXIBIR INFORMAÇÕES DOS DADOS ====================== //
function displayDataInfo(data) {
    const dataInfo = document.getElementById('dataInfo');

    // Extrair informações únicas
    const departamentos = [...new Set(data.map(d => d.departamento).filter(d => d))];
    const categorias = [...new Set(data.map(d => d.categoria).filter(c => c))];
    const meses = [...new Set(data.map(d => d.mes).filter(m => m))];

    // Criar HTML informativo
    let html = '<h4><i class="fas fa-info-circle"></i> Dados Detectados:</h4>';

    // Departamentos detectados
    if (departamentos.length > 0) {
        html += '<div class="info-item">';
        html += `<i class="fas fa-building"></i>`;
        html += `<strong>${departamentos.length} Departamento(s):</strong>`;
        html += '</div>';
        html += '<div class="badge-list">';
        departamentos.forEach(dept => {
            html += `<span class="mini-badge">${dept}</span>`;
        });
        html += '</div>';
    }

    // Categorias detectadas
    if (categorias.length > 0) {
        html += '<div class="info-item" style="margin-top: 8px;">';
        html += `<i class="fas fa-star"></i>`;
        html += `<strong>${categorias.length} Categoria(s):</strong>`;
        html += '</div>';
        html += '<div class="badge-list">';
        categorias.forEach(cat => {
            html += `<span class="mini-badge">${cat}</span>`;
        });
        html += '</div>';
    }

    // Período detectado
    if (meses.length > 0) {
        html += '<div class="info-item" style="margin-top: 8px;">';
        html += `<i class="fas fa-calendar"></i>`;
        html += `<strong>Período:</strong> ${meses.length} mês(es)`;
        html += '</div>';
    }

    dataInfo.innerHTML = html;
    dataInfo.style.display = 'block';
}

// ====================== DATA E HORA ====================== //
function initializeDateTime() {
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById('currentDate').textContent = new Date().toLocaleDateString('pt-BR', options);
    updateTime();
}

function updateTime() {
    document.getElementById('currentTime').textContent = new Date().toLocaleTimeString('pt-BR');
}

// ====================== THEME TOGGLE ====================== //
function toggleTheme() {
    document.body.classList.toggle('light-theme');
    const icon = document.querySelector('.theme-toggle i');
    if (document.body.classList.contains('light-theme')) {
        icon.className = 'fas fa-sun';
    } else {
        icon.className = 'fas fa-moon';
    }
}

// ====================== HEADER STATS NAVIGATION ====================== //
let currentStatIndex = 0;
const headerStats = [];

function initHeaderNavigation() {
    const statsContainer = document.querySelector('.header-stats');
    const allStats = statsContainer.querySelectorAll('.header-stat:not(.nav-arrow)');
    headerStats.length = 0;
    allStats.forEach(stat => headerStats.push(stat));

    if (window.innerWidth <= 768) {
        updateHeaderStatsVisibility();
    }
}

function updateHeaderStatsVisibility() {
    if (window.innerWidth > 768) {
        headerStats.forEach(stat => stat.style.display = 'flex');
        document.querySelectorAll('.nav-arrow').forEach(arrow => arrow.style.display = 'none');
        return;
    }

    headerStats.forEach((stat, index) => {
        stat.style.display = index === currentStatIndex ? 'flex' : 'none';
    });
    document.querySelectorAll('.nav-arrow').forEach(arrow => arrow.style.display = 'flex');
}

function navigateStats(direction) {
    currentStatIndex += direction;
    if (currentStatIndex < 0) currentStatIndex = headerStats.length - 1;
    if (currentStatIndex >= headerStats.length) currentStatIndex = 0;
    updateHeaderStatsVisibility();
}

window.addEventListener('resize', () => {
    if (headerStats.length > 0) {
        updateHeaderStatsVisibility();
    }
});

// ====================== DATE PICKER ====================== //
let currentCalendarDate = new Date();
let selectedDate = null;

function toggleDatePicker() {
    const modal = document.getElementById('datePickerModal');
    modal.classList.toggle('active');

    if (modal.classList.contains('active')) {
        renderCalendar();
    }
}

// ====================== RENDERIZAR CALENDÁRIO ====================== //
function renderCalendar() {
    const year = currentCalendarDate.getFullYear();
    const month = currentCalendarDate.getMonth();

    // Atualizar cabeçalho
    const monthNames = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
    document.getElementById('calendarMonthYear').textContent = `${monthNames[month]} ${year}`;

    // Obter primeiro e último dia do mês
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startDayOfWeek = firstDay.getDay();

    // Limpar calendário
    const calendarDays = document.getElementById('calendarDays');
    calendarDays.innerHTML = '';

    // Dias do mês anterior (vazios)
    for (let i = 0; i < startDayOfWeek; i++) {
        const emptyDay = document.createElement('div');
        emptyDay.className = 'calendar-day empty';
        calendarDays.appendChild(emptyDay);
    }

    // Dias do mês atual
    const today = new Date();
    for (let day = 1; day <= daysInMonth; day++) {
        const dayElement = document.createElement('div');
        dayElement.className = 'calendar-day';
        dayElement.textContent = day;

        const currentDate = new Date(year, month, day);

        // Marcar dia de hoje
        if (currentDate.toDateString() === today.toDateString()) {
            dayElement.classList.add('today');
        }

        // Marcar dia selecionado
        if (selectedDate && currentDate.toDateString() === selectedDate.toDateString()) {
            dayElement.classList.add('selected');
        }

        // Adicionar evento de clique
        dayElement.onclick = () => selectDate(year, month, day);

        calendarDays.appendChild(dayElement);
    }
}

// ====================== SELECIONAR DATA NO CALENDÁRIO ====================== //
function selectDate(year, month, day) {
    selectedDate = new Date(year, month, day);
    renderCalendar();

    // Formatar data para o input
    const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

    // Aplicar filtro imediatamente
    filteredData = hotelDataSource.filter(item => {
        const itemDate = new Date(item.data);
        return itemDate.toDateString() === selectedDate.toDateString();
    });

    // Atualizar data exibida no header
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById('currentDate').textContent = selectedDate.toLocaleDateString('pt-BR', options);

    // Resetar outros filtros
    document.getElementById('filterMonth').value = 'all';
    document.getElementById('filterYear').value = 'all';
    document.getElementById('mesFilter').value = 'all';
    document.getElementById('departamentoFilter').value = 'all';
    document.getElementById('categoriaFilter').value = 'all';

    currentPage = 1;
    calculateKPIs();
    updateCharts();
    renderTable();
    updateHeaderStats();

    // Fechar modal após seleção
    toggleDatePicker();
}

// ====================== MUDAR MÊS DO CALENDÁRIO ====================== //
function changeMonth(direction) {
    currentCalendarDate.setMonth(currentCalendarDate.getMonth() + direction);
    renderCalendar();
}

// ====================== IR PARA HOJE ====================== //
function goToToday() {
    currentCalendarDate = new Date();
    renderCalendar();
}

function applyDateFilter() {
    const month = document.getElementById('filterMonth').value;
    const year = document.getElementById('filterYear').value;

    // Atualizar o calendário para o mês/ano selecionado
    if (month !== 'all' && year !== 'all') {
        currentCalendarDate = new Date(parseInt(year), parseInt(month) - 1, 1);
    } else if (year !== 'all') {
        currentCalendarDate = new Date(parseInt(year), currentCalendarDate.getMonth(), 1);
    } else if (month !== 'all') {
        currentCalendarDate = new Date(currentCalendarDate.getFullYear(), parseInt(month) - 1, 1);
    }

    filteredData = hotelDataSource.filter(item => {
        const itemDate = new Date(item.data);

        let monthMatch = true;
        let yearMatch = true;

        if (month !== 'all') {
            const itemMonth = String(itemDate.getMonth() + 1).padStart(2, '0');
            monthMatch = itemMonth === month;
        }

        if (year !== 'all') {
            const itemYear = String(itemDate.getFullYear());
            yearMatch = itemYear === year;
        }

        return monthMatch && yearMatch;
    });

    // Limpar seleção de dia específico
    selectedDate = null;
    renderCalendar();

    // Atualizar filtros principais
    document.getElementById('mesFilter').value = 'all';
    document.getElementById('departamentoFilter').value = 'all';
    document.getElementById('categoriaFilter').value = 'all';

    currentPage = 1;
    calculateKPIs();
    updateCharts();
    renderTable();
    updateHeaderStats();
}

function resetDateFilter() {
    document.getElementById('filterMonth').value = 'all';
    document.getElementById('filterYear').value = 'all';

    // Limpar seleção de data
    selectedDate = null;
    currentCalendarDate = new Date();
    renderCalendar();

    filteredData = [...hotelDataSource];

    currentPage = 1;
    calculateKPIs();
    updateCharts();
    renderTable();
    updateHeaderStats();
}

// ====================== POPULAR FILTROS ====================== //
function populateFilters() {
    // Meses
    const meses = [...new Set(hotelDataSource.map(d => d.mes).filter(m => m))];
    const mesSelect = document.getElementById('mesFilter');
    mesSelect.innerHTML = '<option value="all">Todos os Meses</option>';
    meses.forEach(mes => {
        const option = document.createElement('option');
        option.value = mes;
        option.textContent = mes;
        mesSelect.appendChild(option);
    });

    // Departamentos
    const departamentos = [...new Set(hotelDataSource.map(d => d.departamento).filter(d => d))];
    const deptSelect = document.getElementById('departamentoFilter');
    deptSelect.innerHTML = '<option value="all">Todos</option>';
    departamentos.forEach(dept => {
        const option = document.createElement('option');
        option.value = dept;
        option.textContent = dept;
        deptSelect.appendChild(option);
    });

    // Categorias
    const categorias = [...new Set(hotelDataSource.map(d => d.categoria).filter(c => c))];
    const catSelect = document.getElementById('categoriaFilter');
    catSelect.innerHTML = '<option value="all">Todas</option>';
    categorias.forEach(cat => {
        const option = document.createElement('option');
        option.value = cat;
        option.textContent = cat;
        catSelect.appendChild(option);
    });
}

// ====================== APLICAR FILTROS ====================== //
function applyFilters() {
    const mesFilter = document.getElementById('mesFilter').value;
    const deptFilter = document.getElementById('departamentoFilter').value;
    const catFilter = document.getElementById('categoriaFilter').value;

    filteredData = hotelDataSource.filter(item => {
        return (mesFilter === 'all' || item.mes === mesFilter) &&
            (deptFilter === 'all' || item.departamento === deptFilter) &&
            (catFilter === 'all' || item.categoria === catFilter);
    });

    currentPage = 1;
    calculateKPIs();
    updateCharts();
    renderTable();
    updateHeaderStats();
}

function resetFilters() {
    document.getElementById('mesFilter').value = 'all';
    document.getElementById('departamentoFilter').value = 'all';
    document.getElementById('categoriaFilter').value = 'all';
    applyFilters();
}

// ====================== RENDERIZAR GRÁFICOS VAZIOS ====================== //
function renderEmptyCharts() {
    const chartIds = ['qualidadeChart', 'departamentoChart', 'ocupacaoReceitaChart', 'feedbackChart'];

    chartIds.forEach(chartId => {
        const ctx = document.getElementById(chartId).getContext('2d');
        if (charts[chartId]) {
            charts[chartId].destroy();
        }
        charts[chartId] = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Sem dados',
                    data: [],
                    borderColor: 'rgba(102, 126, 234, 0.3)',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                },
                scales: {
                    y: { display: false },
                    x: { display: false }
                }
            }
        });
    });
}

// ====================== CALCULAR KPIs ====================== //
function calculateKPIs() {
    if (filteredData.length === 0) {
        document.getElementById('avgRating').textContent = '0';
        document.getElementById('avgOcupacao').textContent = '0%';
        document.getElementById('totalReceita').textContent = 'R$ 0';
        document.getElementById('totalHospedes').textContent = '0';

        // Ocultar indicadores de tendência quando não há dados
        document.getElementById('avgRatingTrend').style.display = 'none';
        document.getElementById('avgOcupacaoTrend').style.display = 'none';
        document.getElementById('totalReceitaTrend').style.display = 'none';
        document.getElementById('totalHospedesTrend').style.display = 'none';
        return;
    }

    const avgRating = (filteredData.reduce((acc, d) => acc + d.avaliacao, 0) / filteredData.length).toFixed(1);
    const avgOcupacao = (filteredData.reduce((acc, d) => acc + d.ocupacao, 0) / filteredData.length).toFixed(0);
    const totalReceita = filteredData.reduce((acc, d) => acc + d.receita, 0);
    const totalHospedes = filteredData.reduce((acc, d) => acc + d.hospedes, 0);

    document.getElementById('avgRating').textContent = avgRating;
    document.getElementById('avgOcupacao').textContent = avgOcupacao + '%';
    document.getElementById('totalReceita').textContent = 'R$ ' + totalReceita.toLocaleString('pt-BR');
    document.getElementById('totalHospedes').textContent = totalHospedes.toLocaleString('pt-BR');

    // Calcular tendências
    calculateTrends();
}

// ====================== CALCULAR TENDÊNCIAS ====================== //
function calculateTrends() {
    // Agrupar dados por mês
    const mesesUnicos = [...new Set(hotelDataSource.map(d => d.mes).filter(m => m))];

    // Se houver menos de 2 meses, não é possível calcular tendência
    if (mesesUnicos.length < 2) {
        document.getElementById('avgRatingTrend').style.display = 'none';
        document.getElementById('avgOcupacaoTrend').style.display = 'none';
        document.getElementById('totalReceitaTrend').style.display = 'none';
        document.getElementById('totalHospedesTrend').style.display = 'none';
        return;
    }

    // Definir ordem dos meses
    const ordemMeses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];

    // Ordenar meses disponíveis
    const mesesOrdenados = mesesUnicos.sort((a, b) =>
        ordemMeses.indexOf(a) - ordemMeses.indexOf(b)
    );

    // Pegar últimos 2 meses
    const mesAtual = mesesOrdenados[mesesOrdenados.length - 1];
    const mesAnterior = mesesOrdenados[mesesOrdenados.length - 2];

    // Dados do mês atual
    const dadosAtual = hotelDataSource.filter(d => d.mes === mesAtual);
    const dadosAnterior = hotelDataSource.filter(d => d.mes === mesAnterior);

    // Calcular médias do mês atual
    const avgRatingAtual = dadosAtual.reduce((acc, d) => acc + d.avaliacao, 0) / dadosAtual.length;
    const avgOcupacaoAtual = dadosAtual.reduce((acc, d) => acc + d.ocupacao, 0) / dadosAtual.length;
    const receitaAtual = dadosAtual.reduce((acc, d) => acc + d.receita, 0);
    const hospedesAtual = dadosAtual.reduce((acc, d) => acc + d.hospedes, 0);

    // Calcular médias do mês anterior
    const avgRatingAnterior = dadosAnterior.reduce((acc, d) => acc + d.avaliacao, 0) / dadosAnterior.length;
    const avgOcupacaoAnterior = dadosAnterior.reduce((acc, d) => acc + d.ocupacao, 0) / dadosAnterior.length;
    const receitaAnterior = dadosAnterior.reduce((acc, d) => acc + d.receita, 0);
    const hospedesAnterior = dadosAnterior.reduce((acc, d) => acc + d.hospedes, 0);

    // Calcular variações percentuais
    const variacaoRating = ((avgRatingAtual - avgRatingAnterior) / avgRatingAnterior * 100);
    const variacaoOcupacao = ((avgOcupacaoAtual - avgOcupacaoAnterior) / avgOcupacaoAnterior * 100);
    const variacaoReceita = ((receitaAtual - receitaAnterior) / receitaAnterior * 100);
    const variacaoHospedes = ((hospedesAtual - hospedesAnterior) / hospedesAnterior * 100);

    // Atualizar indicadores de tendência
    updateTrendIndicator('avgRatingTrend', variacaoRating);
    updateTrendIndicator('avgOcupacaoTrend', variacaoOcupacao);
    updateTrendIndicator('totalReceitaTrend', variacaoReceita);
    updateTrendIndicator('totalHospedesTrend', variacaoHospedes);
}

// ====================== ATUALIZAR INDICADOR DE TENDÊNCIA ====================== //
function updateTrendIndicator(elementId, variacao) {
    const element = document.getElementById(elementId);

    if (isNaN(variacao) || !isFinite(variacao)) {
        element.style.display = 'none';
        return;
    }

    const isPositive = variacao >= 0;
    const valorAbsoluto = Math.abs(variacao).toFixed(1);

    // Atualizar classe e ícone
    element.className = isPositive ? 'kpi-trend up' : 'kpi-trend down';
    element.innerHTML = `<i class="fas fa-arrow-${isPositive ? 'up' : 'down'}"></i> ${isPositive ? '+' : ''}${valorAbsoluto}%`;
    element.style.display = 'flex';
}

// ====================== OBTER MESES ORDENADOS ====================== //
function getMesesOrdenados(dataSource) {
    const ordemMeses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];

    // Extrair meses únicos dos dados
    const mesesUnicos = [...new Set(dataSource.map(d => d.mes).filter(m => m))];

    // Ordenar pelos meses do ano
    return mesesUnicos.sort((a, b) => ordemMeses.indexOf(a) - ordemMeses.indexOf(b));
}

// ====================== RENDERIZAR GRÁFICOS ====================== //
function renderCharts() {
    // Obter meses reais dos dados
    const mesesOrdenados = getMesesOrdenados(filteredData);

    // Se não houver dados, não renderizar
    if (mesesOrdenados.length === 0) {
        return;
    }

    // Gráfico 1: Evolução da Qualidade
    const qualidadeCtx = document.getElementById('qualidadeChart').getContext('2d');
    const qualidadePorMes = mesesOrdenados.map(mes => {
        const dados = filteredData.filter(d => d.mes === mes);
        return dados.length ? (dados.reduce((acc, d) => acc + d.avaliacao, 0) / dados.length).toFixed(2) : 0;
    });

    charts.qualidadeChart = new Chart(qualidadeCtx, {
        type: 'line',
        data: {
            labels: mesesOrdenados,
            datasets: [{
                label: 'Avaliação Média',
                data: qualidadePorMes,
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointRadius: 6,
                pointHoverRadius: 8,
                pointBackgroundColor: '#667eea',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, labels: { color: getComputedStyle(document.body).getPropertyValue('--text-primary'), font: { size: 11 } } },
                tooltip: { mode: 'index', intersect: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 5,
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                },
                x: {
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                }
            }
        }
    });

    // Gráfico 2: Distribuição por Departamento
    const deptCtx = document.getElementById('departamentoChart').getContext('2d');
    const departamentos = [...new Set(filteredData.map(d => d.departamento))];
    const countPorDept = departamentos.map(dept =>
        filteredData.filter(d => d.departamento === dept).length
    );

    // Gerar cores dinamicamente baseado na quantidade de departamentos
    const coresPaleta = [
        'rgba(102, 126, 234, 0.8)',
        'rgba(245, 87, 108, 0.8)',
        'rgba(79, 172, 254, 0.8)',
        'rgba(67, 233, 123, 0.8)',
        'rgba(139, 92, 246, 0.8)',
        'rgba(245, 158, 11, 0.8)',
        'rgba(236, 72, 153, 0.8)',
        'rgba(14, 165, 233, 0.8)',
        'rgba(132, 204, 22, 0.8)',
        'rgba(168, 85, 247, 0.8)'
    ];
    const coresDepartamentos = departamentos.map((_, i) => coresPaleta[i % coresPaleta.length]);

    charts.departamentoChart = new Chart(deptCtx, {
        type: 'doughnut',
        data: {
            labels: departamentos,
            datasets: [{
                data: countPorDept,
                backgroundColor: coresDepartamentos,
                borderColor: getComputedStyle(document.body).getPropertyValue('--bg-card'),
                borderWidth: 4,
                hoverOffset: 15,
                spacing: 2,
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '65%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        color: getComputedStyle(document.body).getPropertyValue('--text-primary'),
                        padding: 12,
                        font: { size: 11, weight: '500' },
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                },
                tooltip: {
                    backgroundColor: getComputedStyle(document.body).getPropertyValue('--bg-secondary'),
                    titleColor: getComputedStyle(document.body).getPropertyValue('--text-primary'),
                    bodyColor: getComputedStyle(document.body).getPropertyValue('--text-secondary'),
                    borderColor: getComputedStyle(document.body).getPropertyValue('--border-color'),
                    borderWidth: 1,
                    padding: 12,
                    displayColors: true,
                    callbacks: {
                        label: function (context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((value / total) * 100).toFixed(1);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            },
            animation: {
                animateRotate: true,
                animateScale: true
            }
        }
    });

    // Gráfico 3: Ocupação vs Receita
    const ocupacaoReceitaCtx = document.getElementById('ocupacaoReceitaChart').getContext('2d');
    const ocupacaoPorMes = mesesOrdenados.map(mes => {
        const dados = filteredData.filter(d => d.mes === mes);
        return dados.length ? (dados.reduce((acc, d) => acc + d.ocupacao, 0) / dados.length).toFixed(0) : 0;
    });
    const receitaPorMes = mesesOrdenados.map(mes => {
        const dados = filteredData.filter(d => d.mes === mes);
        return dados.reduce((acc, d) => acc + d.receita, 0) / 1000;
    });

    charts.ocupacaoReceitaChart = new Chart(ocupacaoReceitaCtx, {
        type: 'bar',
        data: {
            labels: mesesOrdenados,
            datasets: [
                {
                    label: 'Ocupação %',
                    data: ocupacaoPorMes,
                    backgroundColor: 'rgba(79, 172, 254, 0.7)',
                    borderColor: '#4facfe',
                    borderWidth: 2,
                    yAxisID: 'y'
                },
                {
                    label: 'Receita (R$ mil)',
                    data: receitaPorMes,
                    backgroundColor: 'rgba(67, 233, 123, 0.7)',
                    borderColor: '#43e97b',
                    borderWidth: 2,
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { labels: { color: getComputedStyle(document.body).getPropertyValue('--text-primary'), font: { size: 11 } } }
            },
            scales: {
                y: {
                    type: 'linear',
                    position: 'left',
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                },
                y1: {
                    type: 'linear',
                    position: 'right',
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { drawOnChartArea: false }
                },
                x: {
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                }
            }
        }
    });

    // Gráfico 4: Reclamações vs Elogios
    const feedbackCtx = document.getElementById('feedbackChart').getContext('2d');
    const reclamacoesPorMes = mesesOrdenados.map(mes => {
        const dados = filteredData.filter(d => d.mes === mes);
        return dados.reduce((acc, d) => acc + d.reclamacoes, 0);
    });
    const elogiosPorMes = mesesOrdenados.map(mes => {
        const dados = filteredData.filter(d => d.mes === mes);
        return dados.reduce((acc, d) => acc + d.elogios, 0);
    });

    charts.feedbackChart = new Chart(feedbackCtx, {
        type: 'line',
        data: {
            labels: mesesOrdenados,
            datasets: [
                {
                    label: 'Reclamações',
                    data: reclamacoesPorMes,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 5,
                    pointBackgroundColor: '#ef4444'
                },
                {
                    label: 'Elogios',
                    data: elogiosPorMes,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 5,
                    pointBackgroundColor: '#10b981'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { labels: { color: getComputedStyle(document.body).getPropertyValue('--text-primary'), font: { size: 11 } } }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                },
                x: {
                    ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-secondary') },
                    grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
                }
            }
        }
    });
}

// ====================== ATUALIZAR GRÁFICOS ====================== //
function updateCharts() {
    Object.values(charts).forEach(chart => chart.destroy());
    renderCharts();
}

// ====================== MUDAR TIPO DE GRÁFICO ====================== //
function changeChartType(chartId, type) {
    if (charts[chartId]) {
        charts[chartId].config.type = type;
        charts[chartId].update();
    }
}

// ====================== RENDERIZAR TABELA ====================== //
function renderTable() {
    const tbody = document.getElementById('tableBody');
    tbody.innerHTML = '';

    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const pageData = filteredData.slice(start, end);

    pageData.forEach(item => {
        // Formatar data corretamente
        let dataFormatada = '-';
        if (item.data) {
            const data = new Date(item.data);
            if (!isNaN(data.getTime())) {
                const dia = String(data.getDate()).padStart(2, '0');
                const mes = String(data.getMonth() + 1).padStart(2, '0');
                const ano = data.getFullYear();
                dataFormatada = `${dia}/${mes}/${ano}`;
            } else {
                dataFormatada = item.data;
            }
        }

        const row = tbody.insertRow();
        row.innerHTML = `
      <td>${dataFormatada}</td>
      <td>${item.mes || '-'}</td>
      <td><span class="badge">${item.departamento || 'N/A'}</span></td>
      <td>${item.categoria || '-'}</td>
      <td><strong style="color: ${getColorByRating(item.avaliacao)}">${item.avaliacao ? item.avaliacao.toFixed(1) : '0'}</strong></td>
      <td>${item.hospedes || 0}</td>
      <td>${item.ocupacao ? item.ocupacao.toFixed(0) : 0}%</td>
      <td>R$ ${(item.receita || 0).toLocaleString('pt-BR')}</td>
      <td><span style="color: #ef4444">${item.reclamacoes || 0}</span></td>
      <td><span style="color: #10b981">${item.elogios || 0}</span></td>
      <td>${item.tempoResposta ? item.tempoResposta.toFixed(0) : 0} min</td>
    `;
    });

    // Atualizar paginação
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);
    document.getElementById('pageInfo').textContent = `Página ${currentPage} de ${totalPages}`;
}

function getColorByRating(rating) {
    if (rating >= 4.5) return '#10b981';
    if (rating >= 4.0) return '#f59e0b';
    return '#ef4444';
}

// ====================== BUSCAR NA TABELA ====================== //
function searchTable() {
    const input = document.getElementById('searchInput').value.toLowerCase();
    const rows = document.querySelectorAll('#tableBody tr');

    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(input) ? '' : 'none';
    });
}

// ====================== ORDENAR TABELA ====================== //
function sortTable() {
    const sortBy = document.getElementById('sortSelect').value;
    if (!sortBy) return;

    filteredData.sort((a, b) => {
        if (sortBy === 'data') return new Date(a.data) - new Date(b.data);
        if (sortBy === 'departamento') return a.departamento.localeCompare(b.departamento);
        if (sortBy === 'avaliacao') return b.avaliacao - a.avaliacao;
        if (sortBy === 'ocupacao') return b.ocupacao - a.ocupacao;
        if (sortBy === 'receita') return b.receita - a.receita;
    });

    renderTable();
}

function sortTableByColumn(columnIndex) {
    // Implementar ordenação por clique na coluna
    console.log('Sort by column:', columnIndex);
}

// ====================== PAGINAÇÃO ====================== //
function previousPage() {
    if (currentPage > 1) {
        currentPage--;
        renderTable();
    }
}

function nextPage() {
    const totalPages = Math.ceil(filteredData.length / itemsPerPage);
    if (currentPage < totalPages) {
        currentPage++;
        renderTable();
    }
}

// ====================== EXPORTAR DADOS ====================== //
function exportData(format) {
    if (format === 'csv') {
        const csv = convertToCSV(filteredData);
        downloadFile(csv, 'hotel_data.csv', 'text/csv');
    } else if (format === 'json') {
        const json = JSON.stringify(filteredData, null, 2);
        downloadFile(json, 'hotel_data.json', 'application/json');
    }
}

function convertToCSV(data) {
    const headers = Object.keys(data[0]).join(',');
    const rows = data.map(obj => Object.values(obj).join(',')).join('\n');
    return headers + '\n' + rows;
}

function downloadFile(content, filename, type) {
    const blob = new Blob([content], { type });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
}

// ====================== ATUALIZAR HEADER STATS ====================== //
function updateHeaderStats() {
    // Atualizar total de registros
    document.getElementById('totalRecords').textContent = `${filteredData.length} Registros`;

    // Atualizar receita total
    const totalRevenue = filteredData.reduce((sum, item) => sum + (item.receita || 0), 0);
    document.getElementById('totalRevenue').textContent = `R$ ${totalRevenue.toLocaleString('pt-BR')}`;
}

// ====================== INICIALIZAÇÃO ====================== //
window.addEventListener('load', () => {
    initHeaderNavigation();
    updateHeaderStats();
});

// ====================== NOVOS RECURSOS ====================== //

// ====================== EXPORTAR PARA PDF ====================== //
async function exportToPDF() {
    try {
        showNotification('Gerando PDF...', 'Aguarde enquanto preparamos o documento', 'info');

        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');

        // Cabeçalho
        pdf.setFontSize(20);
        pdf.setTextColor(102, 126, 234);
        pdf.text('Dashboard Pajuçara Praia Hotel', 105, 20, { align: 'center' });

        pdf.setFontSize(10);
        pdf.setTextColor(100, 100, 100);
        pdf.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, 28, { align: 'center' });

        // KPIs
        pdf.setFontSize(14);
        pdf.setTextColor(0, 0, 0);
        pdf.text('Indicadores de Performance', 14, 40);

        const avgRating = document.getElementById('avgRating').textContent;
        const avgOcupacao = document.getElementById('avgOcupacao').textContent;
        const totalReceita = document.getElementById('totalReceita').textContent;
        const totalHospedes = document.getElementById('totalHospedes').textContent;

        pdf.setFontSize(10);
        pdf.text(`Avaliação Média: ${avgRating}`, 14, 50);
        pdf.text(`Taxa de Ocupação: ${avgOcupacao}`, 14, 56);
        pdf.text(`Receita Total: ${totalReceita}`, 14, 62);
        pdf.text(`Total de Hóspedes: ${totalHospedes}`, 14, 68);

        // Gráficos (captura como imagem)
        let yPosition = 80;

        // Capturar gráficos
        const charts = ['qualidadeChart', 'departamentoChart'];
        for (let i = 0; i < charts.length; i++) {
            const canvas = document.getElementById(charts[i]);
            if (canvas) {
                const imgData = canvas.toDataURL('image/png');
                pdf.addPage();
                pdf.text(`Gráfico ${i + 1}`, 105, 20, { align: 'center' });
                pdf.addImage(imgData, 'PNG', 15, 30, 180, 100);
            }
        }

        // Tabela de dados (primeiros 50 registros)
        pdf.addPage();
        pdf.setFontSize(14);
        pdf.text('Dados Detalhados', 14, 20);

        pdf.setFontSize(8);
        let tableY = 30;

        filteredData.slice(0, 50).forEach((item, index) => {
            if (tableY > 270) {
                pdf.addPage();
                tableY = 20;
            }

            const line = `${item.data || ''} | ${item.departamento || ''} | Aval: ${item.avaliacao || 0} | Ocup: ${item.ocupacao || 0}% | R$ ${item.receita || 0}`;
            pdf.text(line, 14, tableY);
            tableY += 5;
        });

        pdf.save(`dashboard_hotel_${Date.now()}.pdf`);
        showNotification('PDF Gerado!', 'Download iniciado com sucesso', 'success');
    } catch (error) {
        console.error('Erro ao gerar PDF:', error);
        showNotification('Erro ao gerar PDF', 'Tente novamente mais tarde', 'error');
    }
}

// ====================== MODO DE IMPRESSÃO ====================== //
function printDashboard() {
    showNotification('Preparando impressão...', 'Abrindo visualização de impressão', 'info');
    window.print();
}

// ====================== SELETOR DE TEMAS ====================== //
function openThemeSelector() {
    document.getElementById('themeSelectorModal').classList.add('active');
}

function closeThemeSelector() {
    document.getElementById('themeSelectorModal').classList.remove('active');
}

function applyTheme(themeName) {
    document.body.setAttribute('data-theme', themeName);
    localStorage.setItem('selectedTheme', themeName);

    // Marcar tema selecionado
    document.querySelectorAll('.theme-option').forEach(option => {
        option.classList.remove('active');
    });
    document.querySelector(`[data-theme="${themeName}"]`).classList.add('active');

    // Atualizar gráficos com novas cores
    if (Object.keys(charts).length > 0) {
        updateCharts();
    }

    showNotification('Tema Alterado!', `Tema "${themeName}" aplicado com sucesso`, 'success');
}

// Carregar tema salvo
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('selectedTheme');
    if (savedTheme) {
        applyTheme(savedTheme);
    }
});

// ====================== COMPARAÇÃO DE PERÍODOS ====================== //
function openComparison() {
    document.getElementById('comparisonModal').classList.add('active');
}

function closeComparison() {
    document.getElementById('comparisonModal').classList.remove('active');
}

function comparePeriodsData() {
    const period1Month = document.getElementById('period1Month').value;
    const period1Year = document.getElementById('period1Year').value;
    const period2Month = document.getElementById('period2Month').value;
    const period2Year = document.getElementById('period2Year').value;

    if (!period1Month || !period1Year || !period2Month || !period2Year) {
        showNotification('Seleção incompleta', 'Por favor, selecione ambos os períodos', 'warning');
        return;
    }

    // Filtrar dados do período 1
    const period1Data = hotelDataSource.filter(item => {
        const itemDate = new Date(item.data);
        const itemMonth = String(itemDate.getMonth() + 1).padStart(2, '0');
        const itemYear = String(itemDate.getFullYear());
        return itemMonth === period1Month && itemYear === period1Year;
    });

    // Filtrar dados do período 2
    const period2Data = hotelDataSource.filter(item => {
        const itemDate = new Date(item.data);
        const itemMonth = String(itemDate.getMonth() + 1).padStart(2, '0');
        const itemYear = String(itemDate.getFullYear());
        return itemMonth === period2Month && itemYear === period2Year;
    });

    if (period1Data.length === 0 || period2Data.length === 0) {
        showNotification('Sem dados', 'Um ou ambos os períodos não possuem dados', 'warning');
        return;
    }

    // Calcular métricas
    const metrics1 = calculatePeriodMetrics(period1Data);
    const metrics2 = calculatePeriodMetrics(period2Data);

    // Exibir resultados
    displayComparisonResults(metrics1, metrics2, period1Month, period1Year, period2Month, period2Year);
    showNotification('Comparação Concluída!', 'Confira os resultados abaixo', 'success');
}

function calculatePeriodMetrics(data) {
    const totalRecords = data.length;
    const avgRating = data.reduce((sum, item) => sum + (item.avaliacao || 0), 0) / totalRecords;
    const avgOcupacao = data.reduce((sum, item) => sum + (item.ocupacao || 0), 0) / totalRecords;
    const totalReceita = data.reduce((sum, item) => sum + (item.receita || 0), 0);
    const totalHospedes = data.reduce((sum, item) => sum + (item.hospedes || 1), 0);

    return {
        totalRecords,
        avgRating: avgRating.toFixed(1),
        avgOcupacao: avgOcupacao.toFixed(1),
        totalReceita: totalReceita.toFixed(2),
        totalHospedes
    };
}

function displayComparisonResults(metrics1, metrics2, month1, year1, month2, year2) {
    const monthNames = ['', 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];

    const period1Name = `${monthNames[parseInt(month1)]} ${year1}`;
    const period2Name = `${monthNames[parseInt(month2)]} ${year2}`;

    const calculateDiff = (val1, val2) => {
        const diff = ((val1 - val2) / val2 * 100).toFixed(1);
        const isPositive = diff >= 0;
        return {
            text: `${isPositive ? '+' : ''}${diff}%`,
            class: isPositive ? 'positive' : 'negative'
        };
    };

    const avgRatingDiff = calculateDiff(parseFloat(metrics1.avgRating), parseFloat(metrics2.avgRating));
    const ocupacaoDiff = calculateDiff(parseFloat(metrics1.avgOcupacao), parseFloat(metrics2.avgOcupacao));
    const receitaDiff = calculateDiff(parseFloat(metrics1.totalReceita), parseFloat(metrics2.totalReceita));
    const hospedesDiff = calculateDiff(metrics1.totalHospedes, metrics2.totalHospedes);

    const resultsHTML = `
        <div class="comparison-card">
            <h4><i class="fas fa-chart-line"></i> Comparação: ${period1Name} vs ${period2Name}</h4>
            
            <div class="comparison-row">
                <span class="comparison-label">Total de Registros</span>
                <div class="comparison-values">
                    <span class="comparison-value">${metrics1.totalRecords}</span>
                    <span>vs</span>
                    <span class="comparison-value">${metrics2.totalRecords}</span>
                </div>
            </div>
            
            <div class="comparison-row">
                <span class="comparison-label">Avaliação Média</span>
                <div class="comparison-values">
                    <span class="comparison-value">${metrics1.avgRating}</span>
                    <span>vs</span>
                    <span class="comparison-value">${metrics2.avgRating}</span>
                    <span class="comparison-diff ${avgRatingDiff.class}">${avgRatingDiff.text}</span>
                </div>
            </div>
            
            <div class="comparison-row">
                <span class="comparison-label">Taxa de Ocupação</span>
                <div class="comparison-values">
                    <span class="comparison-value">${metrics1.avgOcupacao}%</span>
                    <span>vs</span>
                    <span class="comparison-value">${metrics2.avgOcupacao}%</span>
                    <span class="comparison-diff ${ocupacaoDiff.class}">${ocupacaoDiff.text}</span>
                </div>
            </div>
            
            <div class="comparison-row">
                <span class="comparison-label">Receita Total</span>
                <div class="comparison-values">
                    <span class="comparison-value">R$ ${parseFloat(metrics1.totalReceita).toLocaleString('pt-BR')}</span>
                    <span>vs</span>
                    <span class="comparison-value">R$ ${parseFloat(metrics2.totalReceita).toLocaleString('pt-BR')}</span>
                    <span class="comparison-diff ${receitaDiff.class}">${receitaDiff.text}</span>
                </div>
            </div>
            
            <div class="comparison-row">
                <span class="comparison-label">Total de Hóspedes</span>
                <div class="comparison-values">
                    <span class="comparison-value">${metrics1.totalHospedes}</span>
                    <span>vs</span>
                    <span class="comparison-value">${metrics2.totalHospedes}</span>
                    <span class="comparison-diff ${hospedesDiff.class}">${hospedesDiff.text}</span>
                </div>
            </div>
        </div>
    `;

    document.getElementById('comparisonResults').innerHTML = resultsHTML;
}

// ====================== SISTEMA DE NOTIFICAÇÕES ====================== //
function showNotification(title, message, type = 'info') {
    const container = document.getElementById('notificationContainer');

    const icons = {
        success: 'fa-check-circle',
        error: 'fa-exclamation-circle',
        warning: 'fa-exclamation-triangle',
        info: 'fa-info-circle'
    };

    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
        <div class="notification-icon">
            <i class="fas ${icons[type]}"></i>
        </div>
        <div class="notification-content">
            <div class="notification-title">${title}</div>
            <div class="notification-message">${message}</div>
        </div>
        <div class="notification-close">
            <i class="fas fa-times"></i>
        </div>
    `;

    container.appendChild(notification);

    // Adicionar evento de clique para fechar
    notification.querySelector('.notification-close').addEventListener('click', () => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    });

    // Auto-remover após 5 segundos
    setTimeout(() => {
        if (notification.parentElement) {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => notification.remove(), 300);
        }
    }, 5000);
}

// ====================== GRÁFICOS ADICIONAIS ====================== //
// Os gráficos de dispersão e área já estão sendo renderizados no renderCharts()
// Vamos melhorar a função existente para incluir mais tipos de gráficos

function changeChartType(chartId, newType) {
    const chart = charts[chartId];
    if (chart) {
        chart.config.type = newType;
        chart.update();
        showNotification('Tipo de Gráfico Alterado', `Gráfico alterado para ${newType}`, 'success');
    }
}

// Integrar notificações nas funções existentes
const originalImportFile = window.handleFileUpload;
if (typeof handleFileUpload === 'function') {
    // Wrapper para adicionar notificações
}

// Notificações em ações do usuário
document.addEventListener('DOMContentLoaded', () => {
    // Notificar ao aplicar filtros
    const originalApplyFilters = window.applyFilters;
    if (typeof applyFilters === 'function') {
        window.applyFilters = function () {
            originalApplyFilters.apply(this, arguments);
            showNotification('Filtros Aplicados', `${filteredData.length} registros encontrados`, 'info');
        };
    }
});