// Sistema PELL - Controle de Produção (Modo Somente Leitura)

/* const API_BASE = 'http://localhost:3000/api'; */
// O host da API será o mesmo do endereço que você acessa no navegador
const API_BASE = `${window.location.protocol}//${window.location.hostname}:3000/api`;

// Função utilitária para fazer requisições com autenticação
async function apiRequest(url, options = {}) {
    const token = localStorage.getItem('authToken');

    const defaultOptions = {
        headers: {
            'Content-Type': 'application/json',
            ...(token && { 'Authorization': `Bearer ${token}` })
        }
    };

    const finalOptions = {
        ...defaultOptions,
        ...options,
        headers: {
            ...defaultOptions.headers,
            ...options.headers
        }
    };

    console.log('🚀 API Request:', url, 'Token:', token ? 'EXISTS' : 'MISSING');

    const response = await fetch(url, finalOptions);

    if (response.status === 401) {
        console.log('❌ 401 Unauthorized - redirecting to login');
        window.location.href = '/login.html';
        throw new Error('Não autorizado');
    }

    return response;
}

// Estado da aplicação
let paginaAtual = '';

// Função para carregar páginas
async function carregarPagina(pagina) {
    const conteudo = document.getElementById('conteudo-principal');

    // Atualizar navegação ativa
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
    });
    event?.target.classList.add('active');

    paginaAtual = pagina;

    try {
        switch (pagina) {
            case 'dashboard':
                await carregarDashboard(conteudo);
                break;
            case 'ordens':
                await carregarOrdens(conteudo);
                break;
            case 'acompanhamento':
                await carregarAcompanhamento(conteudo);
                break;
            case 'relatorios':
                await carregarRelatorios(conteudo);
                break;
            case 'whatsapp':
                await carregarWhatsApp(conteudo);
                break;
            case 'clientes':
                await carregarClientes(conteudo);
                break;
            case 'materiais':
                await carregarMateriais(conteudo);
                break;
            default:
                conteudo.innerHTML = '<div class="alert alert-warning">Página não encontrada</div>';
        }
    } catch (error) {
        console.error('Erro ao carregar página:', error);
        conteudo.innerHTML = `<div class="alert alert-danger">Erro ao carregar ${pagina}: ${error.message}</div>`;
    }
}

// Dashboard
async function carregarDashboard(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-tachometer-alt me-2"></i>Dashboard - Sistema PELL</h2>
            </div>
        </div>
        <div id="dashboard-stats" class="row mb-4">
            <div class="col-12 text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Carregando...</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-chart-pie me-1"></i>Ordens por Empresa</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="graficoEmpresas" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-clipboard-list me-1"></i>Últimas Ordens</h5>
                    </div>
                    <div class="card-body" id="ultimas-ordens">
                        <div class="spinner-border spinner-border-sm" role="status"></div>
                    </div>
                </div>
            </div>
        </div>
    `;

    try {
        const response = await apiRequest(`${API_BASE}/dashboard`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirEstatisticasDashboard(data.data.estatisticas);
            exibirGraficoEmpresas(data.data.ordens_por_empresa);
            exibirUltimasOrdens(data.data.ultimas_ordens);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        document.getElementById('dashboard-stats').innerHTML =
            `<div class="alert alert-danger">Erro ao carregar dashboard: ${error.message}</div>`;
    }
}

// Exibir estatísticas do dashboard
function exibirEstatisticasDashboard(stats) {
    const statsContainer = document.getElementById('dashboard-stats');
    statsContainer.innerHTML = `
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h4>${stats.total_ordens}</h4>
                    <small>Total de Ordens</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h4>${stats.ordens_iniciadas}</h4>
                    <small>Iniciadas</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h4>${stats.em_testes}</h4>
                    <small>Em Testes</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h4>${stats.expedidas}</h4>
                    <small>Expedidas</small>
                </div>
            </div>
        </div>

    `;
}

// Gráfico de ordens por empresa
function exibirGraficoEmpresas(dados) {
    const ctx = document.getElementById('graficoEmpresas').getContext('2d');

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: dados.map(item => item.Empresa || 'Sem empresa'),
            datasets: [{
                data: dados.map(item => item.total),
                backgroundColor: [
                    '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
                    '#9966FF', '#FF9F40', '#FF6384', '#C9CBCF',
                    '#4BC0C0', '#FF6384'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

// Últimas ordens
function exibirUltimasOrdens(ordens) {
    const container = document.getElementById('ultimas-ordens');

    if (ordens.length === 0) {
        container.innerHTML = '<p class="text-muted">Nenhuma ordem encontrada</p>';
        return;
    }

    container.innerHTML = ordens.map(ordem => `
        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
            <div>
                <strong>OF #${ordem.idOF}</strong><br>
                <small class="text-muted">
                    ${ordem.Empresa || 'Sem empresa'} | 
                    ${ordem.Matricula || 'Sem máquina'}
                </small>
            </div>
            <div class="text-end">
                <small>${formatarData(ordem.DataPedido)}</small><br>
                <small class="text-danger">Prazo: ${formatarData(ordem.PrazoEntrega)}</small>
            </div>
        </div>
    `).join('');
}

// Ordens de Fabricação
async function carregarOrdens(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-clipboard-list me-2"></i>Ordens de Fabricação</h2>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="filtroEmpresa" placeholder="Filtrar por empresa">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="filtroMatricula" placeholder="Filtrar por máquina">
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-primary" onclick="buscarOrdens()">
                            <i class="fas fa-search me-1"></i>Buscar
                        </button>
                        <button class="btn btn-outline-secondary" onclick="limparFiltrosOrdens()">
                            <i class="fas fa-eraser me-1"></i>Limpar
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="tabela-ordens">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    await buscarOrdens();
}

async function buscarOrdens() {
    const tabelaContainer = document.getElementById('tabela-ordens');

    try {
        const empresa = document.getElementById('filtroEmpresa')?.value || '';
        const matricula = document.getElementById('filtroMatricula')?.value || '';

        const params = new URLSearchParams();
        if (empresa) params.append('empresa', empresa);
        if (matricula) params.append('matricula', matricula);

        const response = await apiRequest(`${API_BASE}/registros?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirTabelaOrdens(data.data, tabelaContainer);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        tabelaContainer.innerHTML = `<div class="alert alert-danger">Erro ao buscar ordens: ${error.message}</div>`;
    }
}

function exibirTabelaOrdens(ordens, container) {
    if (ordens.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Nenhuma ordem encontrada com os filtros aplicados</div>';
        return;
    }

    container.innerHTML = `
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Comessa</th>
                        <th>Cliente</th>
                        <th>Código Máquina</th>
                        <th>Nome Comercial</th>
                        <th>Data do Pedido</th>
                        <th>Prazo de Entrega</th>
                        <th>Progresso</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    ${ordens.map(ordem => `
                        <tr>
                            <td><strong>${ordem.idOF}</strong></td>
                            <td>${ordem.Empresa || '-'}</td>
                            <td><code>${ordem.Matricula || '-'}</code></td>
                            <td>${ordem.NomeComercial || '-'}</td>
                            <td>${formatarData(ordem.DataPedido)}</td>
                            <td class="${isPrazoVencido(ordem.PrazoEntrega) ? 'text-danger' : ''}">
                                ${formatarData(ordem.PrazoEntrega)}
                            </td>
                            <td>
                                <div class="progress-workflow-mini">
                                    ${gerarWorkflowMini(ordem)}
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="verDetalhesOrdem(${ordem.idOF})">
                                    <i class="fas fa-eye"></i> Ver
                                </button>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        </div>
        <div class="mt-3">
            <small class="text-muted">Total: ${ordens.length} ordem(ns) encontrada(s)</small>
        </div>
        
        <style>
        .progress-workflow-mini {
            display: flex;
            gap: 1px;
            max-width: 200px;
        }
        
        .mini-step {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            border: 1px solid #ddd;
            display: inline-block;
        }
        
        .mini-step.concluida {
            background-color: #28a745;
            border-color: #1e7e34;
        }
        
        .mini-step.pendente {
            background-color: #dee2e6;
            border-color: #adb5bd;
        }
        
        .mini-step.em-andamento {
            background-color: #ffc107;
            border-color: #e0a800;
            animation: mini-pulse 1.5s infinite;
        }
        
        @keyframes mini-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        </style>
    `;
}

// Workflow mini para a tabela
function gerarWorkflowMini(ordem) {
    const etapas = [
        ordem.OrdemFabricacao,
        ordem.AprovacaoLayout,
        ordem.LiberacaoListasMecanica,
        ordem.LiberacaoListasEletrica,
        ordem.Separacao,
        ordem.PreMontagem,
        ordem.PreMontagemEletrica,
        ordem.PreMontagemMecanica,
        ordem.PreMontagemPainel,
        ordem.EletricaMontagem,
        ordem.Testes,
        ordem.FAT,
        ordem.PreparacaoExpedicao
    ];

    let html = '';

    etapas.forEach((etapa, index) => {
        let classe = 'pendente';

        if (etapa === 1) {
            classe = 'concluida';
        } else if (index > 0 && etapas[index - 1] === 1 && etapa !== 1) {
            classe = 'em-andamento';
        }

        html += `<div class="mini-step ${classe}" title="Etapa ${index + 1}"></div>`;
    });

    return html;
}

// Funções auxiliares para ordens
function obterStatusOrdem(ordem) {
    if (ordem.Expedicao === 1) return '<span class="badge bg-success">Expedida</span>';
    if (ordem.Testes === 1) return '<span class="badge bg-warning">Em Testes</span>';
    if (ordem.OrdemFabricacao === 1) return '<span class="badge bg-info">Iniciada</span>';
    return '<span class="badge bg-secondary">Pendente</span>';
}

function isPrazoVencido(prazoEntrega) {
    if (!prazoEntrega) return false;
    const hoje = new Date();
    const prazo = new Date(prazoEntrega);
    return prazo < hoje;
}

function limparFiltrosOrdens() {
    document.getElementById('filtroEmpresa').value = '';
    document.getElementById('filtroMatricula').value = '';
    buscarOrdens();
}

async function verDetalhesOrdem(idOF) {
    const modal = new bootstrap.Modal(document.getElementById('modalDetalhes'));
    const modalTitle = document.querySelector('#modalDetalhes .modal-title');
    const modalBody = document.getElementById('modal-body-content');

    modalTitle.textContent = 'Detalhes da Ordem de Fabricação';
    modalBody.innerHTML = `
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Carregando...</span>
            </div>
        </div>
    `;

    modal.show();

    try {
        const response = await apiRequest(`${API_BASE}/registros?idof=${idOF}`);
        const data = await response.json();

        if (data.status === 'success' && data.data.length > 0) {
            const ordem = data.data[0];
            modalBody.innerHTML = `
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h5><i class="fas fa-info-circle me-2"></i>Informações Gerais</h5>
                        <table class="table table-sm">
                            <tr><td><strong>Comessa:</strong></td><td>${ordem.idOF}</td></tr>
                            <tr><td><strong>Matrícula:</strong></td><td><code>${ordem.Matricula || '-'}</code></td></tr>
                            <tr><td><strong>Cliente:</strong></td><td>${ordem.Empresa || '-'}</td></tr>
                            <tr><td><strong>Nome Comercial:</strong></td><td>${ordem.NomeComercial || '-'}</td></tr>
                            <tr><td><strong>Data do Pedido:</strong></td><td>${formatarData(ordem.DataPedido)}</td></tr>
                            <tr><td><strong>Prazo de Entrega:</strong></td><td class="${isPrazoVencido(ordem.PrazoEntrega) ? 'text-danger' : ''}">${formatarData(ordem.PrazoEntrega)}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h5><i class="fas fa-user me-2"></i>Responsáveis</h5>
                        <div class="small">
                            ${ordem.ResponsavelOrdemFabricacao ? `<div><strong>OF:</strong> ${ordem.ResponsavelOrdemFabricacao}</div>` : ''}
                            ${ordem.ResponsavelAprovacaoLayout ? `<div><strong>Layout:</strong> ${ordem.ResponsavelAprovacaoLayout}</div>` : ''}
                            ${ordem.ResponsavelLiberacaoListasMecanica ? `<div><strong>Lista Mecânica:</strong> ${ordem.ResponsavelLiberacaoListasMecanica}</div>` : ''}
                            ${ordem.ResponsavelLiberacaoListasEletrica ? `<div><strong>Lista Elétrica:</strong> ${ordem.ResponsavelLiberacaoListasEletrica}</div>` : ''}
                            ${ordem.ResponsavelSeparacao ? `<div><strong>Separação:</strong> ${ordem.ResponsavelSeparacao}</div>` : ''}
                            ${ordem.ResponsavelPreMontagem ? `<div><strong>Pré-Montagem:</strong> ${ordem.ResponsavelPreMontagem}</div>` : ''}
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12">
                        <h5><i class="fas fa-tasks me-2"></i>Workflow de Produção</h5>
                        <div id="workflow-container">
                            ${gerarWorkflowVisual(ordem)}
                        </div>
                    </div>
                </div>
            `;
        } else {
            modalBody.innerHTML = '<div class="alert alert-warning">Ordem não encontrada</div>';
        }
    } catch (error) {
        modalBody.innerHTML = `<div class="alert alert-danger">Erro ao carregar detalhes: ${error.message}</div>`;
    }
}

// Gerar workflow visual igual ao da imagem
function gerarWorkflowVisual(ordem) {
    const etapas = [
        { key: 'OrdemFabricacao', label: 'OF', valor: ordem.OrdemFabricacao },
        { key: 'AprovacaoLayout', label: 'Layout', valor: ordem.AprovacaoLayout },
        { key: 'LiberacaoListasMecanica', label: 'Lista Mecânica', valor: ordem.LiberacaoListasMecanica },
        { key: 'LiberacaoListasEletrica', label: 'Lista Elétrica', valor: ordem.LiberacaoListasEletrica },
        { key: 'Separacao', label: 'Separação', valor: ordem.Separacao },
        { key: 'PreMontagemEletrica', label: 'Pré-Montagem<br>Elétrica', valor: ordem.PreMontagemEletrica, sublabel: true },
        { key: 'PreMontagemMecanica', label: 'Pré-Montagem<br>Mecânica', valor: ordem.PreMontagemMecanica, sublabel: true },
        { key: 'PreMontagemPainel', label: 'Painel Elétrico', valor: ordem.PreMontagemPainel },
        { key: 'EletricaMontagem', label: 'Cabeamento', valor: ordem.EletricaMontagem },
        { key: 'Testes', label: 'Testes', valor: ordem.Testes },
        { key: 'FAT', label: 'FAT', valor: ordem.FAT },
        { key: 'PreparacaoExpedicao', label: 'Preparação Expedição', valor: ordem.PreparacaoExpedicao }
    ];

    let html = `
        <div class="workflow-info mb-3">
            <strong>Comessa:</strong> ${ordem.idOF} | <strong>Matricula:</strong> ${ordem.Matricula}
        </div>
        <div class="workflow-steps">
    `;

    etapas.forEach((etapa, index) => {
        const concluida = etapa.valor === 1;
        const emAndamento = index > 0 && etapas[index - 1].valor === 1 && !concluida;

        let statusClass = '';
        let statusColor = '';

        if (concluida) {
            statusClass = 'concluida';
            statusColor = '#28a745'; // Verde
        } else if (emAndamento) {
            statusClass = 'em-andamento';
            statusColor = '#ffc107'; // Amarelo
        } else {
            statusClass = 'pendente';
            statusColor = '#6c757d'; // Cinza
        }

        html += `
            <div class="workflow-step ${statusClass}" style="background-color: ${statusColor};">
                <div class="step-content">
                    ${etapa.sublabel ? etapa.label : `<span>${etapa.label}</span>`}
                </div>
            </div>
        `;
    });

    html += '</div>';

    // Adicionar estilos CSS para o workflow
    html += `
        <style>
        .workflow-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            margin-top: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            background-color: #f8f9fa;
        }
        
        .workflow-step {
            flex: 1;
            min-width: 120px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 11px;
            text-align: center;
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,0.3);
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .workflow-step.concluida {
            background-color: #28a745 !important;
            border-color: #1e7e34;
        }
        
        .workflow-step.em-andamento {
            background-color: #ffc107 !important;
            color: #000 !important;
            border-color: #e0a800;
            animation: pulse 2s infinite;
        }
        
        .workflow-step.pendente {
            background-color: #6c757d !important;
            border-color: #545b62;
        }
        
        .step-content {
            padding: 5px;
            line-height: 1.2;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
        
        .workflow-info {
            font-size: 14px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            border-left: 4px solid #007bff;
        }
        
        @media (max-width: 768px) {
            .workflow-steps {
                flex-direction: column;
            }
            .workflow-step {
                min-width: 100%;
                margin-bottom: 5px;
            }
        }
        </style>
    `;

    return html;
}

// Relatórios
async function carregarRelatorios(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-chart-bar me-2"></i>Relatórios do Sistema PELL</h2>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5><i class="fas fa-calendar-alt me-2"></i>Ordens por Período</h5>
                    </div>
                    <div class="card-body">
                        <p>Relatório de ordens de fabricação filtradas por período e empresa.</p>
                        <div class="mb-3">
                            <label class="form-label">Data Início:</label>
                            <input type="date" class="form-control" id="dataInicio" value="2025-07-01">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Data Fim:</label>
                            <input type="date" class="form-control" id="dataFim" value="2025-07-31">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Empresa (opcional):</label>
                            <input type="text" class="form-control" id="empresaFiltro" placeholder="Ex: FRAMA">
                        </div>
                        <button class="btn btn-primary w-100" onclick="gerarRelatorioOrdensPeriodo()">
                            <i class="fas fa-chart-line me-1"></i>Gerar Relatório
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h5><i class="fas fa-building me-2"></i>Ordens por Empresa</h5>
                    </div>
                    <div class="card-body">
                        <p>Relatório consolidado de ordens agrupadas por empresa/cliente.</p>
                        <div class="mb-3">
                            <label class="form-label">Empresa (opcional):</label>
                            <input type="text" class="form-control" id="empresaRelatorio" placeholder="Filtrar empresa específica">
                        </div>
                        <br><br><br>
                        <button class="btn btn-success w-100" onclick="gerarRelatorioOrdensEmpresa()">
                            <i class="fas fa-chart-pie me-1"></i>Gerar Relatório
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-info text-white">
                        <h5><i class="fas fa-tasks me-2"></i>Status do Workflow</h5>
                    </div>
                    <div class="card-body">
                        <p>Relatório do status das etapas do workflow de produção.</p>
                        <div class="mb-3">
                            <label class="form-label">Período (dias):</label>
                            <select class="form-select" id="periodoWorkflow">
                                <option value="">Todos os registros</option>
                                <option value="30">Últimos 30 dias</option>
                                <option value="60">Últimos 60 dias</option>
                                <option value="90">Últimos 90 dias</option>
                            </select>
                        </div>
                        <br><br>
                        <button class="btn btn-info w-100" onclick="gerarRelatorioWorkflow()">
                            <i class="fas fa-chart-area me-1"></i>Gerar Relatório
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header bg-warning text-dark">
                        <h5><i class="fas fa-clipboard-check me-2"></i>Comessas</h5>
                    </div>
                    <div class="card-body">
                        <p>Relatório detalhado de comessas do sistema.</p>
                        <div class="mb-3">
                            <label class="form-label">Código da Comessa:</label>
                            <input type="text" class="form-control" id="codigoComessa" placeholder="Ex: MA00003452">
                        </div>
                        <br><br>
                        <button class="btn btn-warning w-100" onclick="gerarRelatorioComessas()">
                            <i class="fas fa-list-alt me-1"></i>Gerar Relatório
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        <h5><i class="fas fa-clock me-2"></i>Cartão de Ponto por Comessa</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Em Desenvolvimento:</strong> O relatório de cartão de ponto está sendo preparado com as particularidades específicas do sistema.
                        </div>
                        <p class="text-muted">Este relatório mostrará dados detalhados de ponto dos funcionários por comessa, incluindo horas trabalhadas, períodos e totalizações.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div id="resultado-relatorio">
                    <!-- Resultados dos relatórios aparecerão aqui -->
                </div>
            </div>
        </div>
    `;
}

// Funções para gerar relatórios
async function gerarRelatorioOrdensPeriodo() {
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const empresa = document.getElementById('empresaFiltro').value;

    const container = document.getElementById('resultado-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5>Relatório: Ordens por Período</h5>
            </div>
            <div class="card-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Gerando relatório...</span>
                </div>
            </div>
        </div>
    `;

    try {
        const params = new URLSearchParams();
        if (dataInicio) params.append('data_inicio', dataInicio);
        if (dataFim) params.append('data_fim', dataFim);
        if (empresa) params.append('empresa', empresa);

        const response = await apiRequest(`${API_BASE}/relatorios/ordens-periodo?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioOrdensPeriodo(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Erro ao gerar relatório: ${error.message}
            </div>
        `;
    }
}

async function gerarRelatorioOrdensEmpresa() {
    const empresa = document.getElementById('empresaRelatorio').value;

    const container = document.getElementById('resultado-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5>Relatório: Ordens por Empresa</h5>
            </div>
            <div class="card-body text-center">
                <div class="spinner-border text-success" role="status">
                    <span class="visually-hidden">Gerando relatório...</span>
                </div>
            </div>
        </div>
    `;

    try {
        const params = new URLSearchParams();
        if (empresa) params.append('empresa', empresa);

        const response = await apiRequest(`${API_BASE}/relatorios/ordens-empresa?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioOrdensEmpresa(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Erro ao gerar relatório: ${error.message}
            </div>
        `;
    }
}

async function gerarRelatorioWorkflow() {
    const periodo = document.getElementById('periodoWorkflow').value;

    const container = document.getElementById('resultado-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5>Relatório: Status do Workflow</h5>
            </div>
            <div class="card-body text-center">
                <div class="spinner-border text-info" role="status">
                    <span class="visually-hidden">Gerando relatório...</span>
                </div>
            </div>
        </div>
    `;

    try {
        const params = new URLSearchParams();
        if (periodo) params.append('periodo', periodo);

        const response = await apiRequest(`${API_BASE}/relatorios/workflow-status?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioWorkflow(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Erro ao gerar relatório: ${error.message}
            </div>
        `;
    }
}

async function gerarRelatorioComessas() {
    const codigo = document.getElementById('codigoComessa').value;

    const container = document.getElementById('resultado-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5>Relatório: Comessas</h5>
            </div>
            <div class="card-body text-center">
                <div class="spinner-border text-warning" role="status">
                    <span class="visually-hidden">Gerando relatório...</span>
                </div>
            </div>
        </div>
    `;

    try {
        const params = new URLSearchParams();
        if (codigo) params.append('codigo_comessa', codigo);

        const response = await apiRequest(`${API_BASE}/relatorios/comessas?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioComessas(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Erro ao gerar relatório: ${error.message}
            </div>
        `;
    }
}

// Materiais (placeholder)
async function carregarMateriais(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-boxes me-2"></i>Materiais</h2>
            </div>
        </div>
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            Módulo de materiais em desenvolvimento. Esta seção permitirá visualizar o estoque e informações dos materiais.
        </div>
    `;
}

// Relatórios
async function carregarRelatorios(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-chart-line me-2"></i>Relatórios do Sistema PELL</h2>
                <div class="alert alert-info">
                    <i class="fas fa-shield-alt me-2"></i>
                    <strong>Sistema em Modo Somente Leitura:</strong> Este sistema está conectado ao banco de dados de produção para visualização apenas.
                </div>
            </div>
        </div>
        
        <!-- Relatórios de Cartão de Ponto -->
        <div class="row mb-4">
            <div class="col-12">
                <h4><i class="fas fa-clock me-2"></i>Relatórios de Cartão de Ponto</h4>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-building fa-2x text-primary mb-3"></i>
                        <h6>Por Comessa</h6>
                        <p class="text-muted small">Filtrar por número da comessa</p>
                        <button class="btn btn-primary btn-sm" onclick="mostrarRelatorioPorComessa()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-user fa-2x text-success mb-3"></i>
                        <h6>Por Nome</h6>
                        <p class="text-muted small">Filtrar por nome do funcionário</p>
                        <button class="btn btn-success btn-sm" onclick="mostrarRelatorioPorNome()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-user-clock fa-2x text-warning mb-3"></i>
                        <h6>Por Nome e Data</h6>
                        <p class="text-muted small">Filtrar por funcionário e período</p>
                        <button class="btn btn-warning btn-sm" onclick="mostrarRelatorioPorNomeData()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-calendar fa-2x text-info mb-3"></i>
                        <h6>Por Data</h6>
                        <p class="text-muted small">Filtrar por período</p>
                        <button class="btn btn-info btn-sm" onclick="mostrarRelatorioPorData()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-building-user fa-2x text-secondary mb-3"></i>
                        <h6>Por Comessa e Data</h6>
                        <p class="text-muted small">Filtrar por comessa e período</p>
                        <button class="btn btn-secondary btn-sm" onclick="mostrarRelatorioPorComessaData()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-users-cog fa-2x text-dark mb-3"></i>
                        <h6>Por Comessa e Funcionário</h6>
                        <p class="text-muted small">Filtrar por comessa e funcionário</p>
                        <button class="btn btn-dark btn-sm" onclick="mostrarRelatorioPorComessaFuncionario()">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Outros Relatórios -->
        <div class="row mb-4">
            <div class="col-12">
                <h4><i class="fas fa-chart-bar me-2"></i>Outros Relatórios</h4>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-clock fa-3x text-primary mb-3"></i>
                        <h5>Cartão de Ponto</h5>
                        <p class="text-muted">Relatório de horas por comessa</p>
                        <button class="btn btn-primary" onclick="mostrarRelatorioCartaoPonto()">
                            <i class="fas fa-eye me-1"></i>Visualizar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-list fa-3x text-success mb-3"></i>
                        <h5>Lista de Comessas</h5>
                        <p class="text-muted">Todas as comessas disponíveis</p>
                        <button class="btn btn-success" onclick="mostrarListaComessas()">
                            <i class="fas fa-eye me-1"></i>Visualizar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-users fa-3x text-warning mb-3"></i>
                        <h5>Funcionários</h5>
                        <p class="text-muted">Lista de funcionários cadastrados</p>
                        <button class="btn btn-warning" onclick="mostrarRelatorioFuncionarios()">
                            <i class="fas fa-eye me-1"></i>Visualizar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-chart-bar fa-3x text-info mb-3"></i>
                        <h5>Estatísticas</h5>
                        <p class="text-muted">Estatísticas gerais do sistema</p>
                        <button class="btn btn-info" onclick="mostrarEstatisticas()">
                            <i class="fas fa-eye me-1"></i>Visualizar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="conteudo-relatorio">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Selecione um relatório acima para visualizar os dados.
            </div>
        </div>
    `;
}

// Mostrar relatório de cartão de ponto
async function mostrarRelatorioCartaoPonto() {
    const container = document.getElementById('conteudo-relatorio');

    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-clock me-2"></i>Relatório de Cartão de Ponto por Comessa</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="matriculaRelatorio" class="form-label">Matrícula/Comessa:</label>
                        <select class="form-select" id="matriculaRelatorio">
                            <option value="">Carregando...</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="dataInicio" class="form-label">Data Início:</label>
                        <input type="date" class="form-control" id="dataInicio" value="${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]}">
                    </div>
                    <div class="col-md-3">
                        <label for="dataFim" class="form-label">Data Fim:</label>
                        <input type="date" class="form-control" id="dataFim" value="${new Date().toISOString().split('T')[0]}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" onclick="gerarRelatorioCartaoPonto()">
                                <i class="fas fa-search me-1"></i>Gerar Relatório
                            </button>
                        </div>
                    </div>
                </div>
                <div id="resultado-relatorio">
                    <div class="text-muted text-center py-4">
                        <i class="fas fa-file-alt fa-3x mb-2"></i><br>
                        Selecione uma matrícula e clique em "Gerar Relatório"
                    </div>
                </div>
            </div>
        </div>
    `;

    // Carregar lista de comessas
    await carregarComessasSelect();
}

// Carregar comessas no select
async function carregarComessasSelect() {
    try {
        const response = await apiRequest(`${API_BASE}/relatorios/comessas`);
        const data = await response.json();

        const select = document.getElementById('matriculaRelatorio');

        if (data.status === 'success') {
            select.innerHTML = '<option value="">Selecione uma matrícula...</option>';
            data.data.forEach(comessa => {
                select.innerHTML += `<option value="${comessa.Matricula}">${comessa.Matricula} (${comessa.total_registros} registros)</option>`;
            });
        } else {
            select.innerHTML = '<option value="">Erro ao carregar comessas</option>';
        }
    } catch (error) {
        document.getElementById('matriculaRelatorio').innerHTML = '<option value="">Erro ao carregar</option>';
    }
}

// Gerar relatório de cartão de ponto
async function gerarRelatorioCartaoPonto() {
    const matricula = document.getElementById('matriculaRelatorio').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const container = document.getElementById('resultado-relatorio');

    if (!matricula) {
        mostrarErro('Selecione uma matrícula para gerar o relatório');
        return;
    }

    container.innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Gerando relatório...</span>
            </div>
            <p class="mt-2">Gerando relatório...</p>
        </div>
    `;

    try {
        const params = new URLSearchParams();
        if (dataInicio) params.append('dataInicio', dataInicio);
        if (dataFim) params.append('dataFim', dataFim);

        const response = await apiRequest(`${API_BASE}/relatorios/cartao-ponto/${matricula}?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioCartaoPonto(data.dados);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro ao gerar relatório: ${error.message}</div>`;
    }
}

// Exibir relatório de cartão de ponto
function exibirRelatorioCartaoPonto(dados) {
    const container = document.getElementById('resultado-relatorio');

    if (dados.registros.length === 0) {
        container.innerHTML = `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Nenhum registro encontrado para a matrícula <strong>${dados.matricula}</strong> no período de 
                <strong>${formatarData(dados.periodo.inicio)}</strong> a <strong>${formatarData(dados.periodo.fim)}</strong>
            </div>
        `;
        return;
    }

    container.innerHTML = `
        <div class="card">
            <div class="card-header bg-primary text-white">
                <div class="row">
                    <div class="col">
                        <h6 class="mb-0">Comessa: ${dados.matricula}</h6>
                        <small>Período: ${formatarData(dados.periodo.inicio)} a ${formatarData(dados.periodo.fim)}</small>
                    </div>
                    <div class="col-auto">
                        <h5 class="mb-0">Total: ${dados.totais.total_horas_formatado}</h5>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-hover mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>Nome</th>
                                <th>Data</th>
                                <th>Matrícula</th>
                                <th>Serviço</th>
                                <th>Início</th>
                                <th>Fim</th>
                                <th>Especificar</th>
                                <th>Total Minutos</th>
                                <th>Total Horas</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${dados.registros.map(registro => `
                                <tr>
                                    <td>${registro.Nome || '-'}</td>
                                    <td>${formatarData(registro.Data)}</td>
                                    <td><code>${registro.Matricula}</code></td>
                                    <td>${registro.Servico || '-'}</td>
                                    <td>${registro.Inicio || '-'}</td>
                                    <td>${registro.Fim || '-'}</td>
                                    <td><small>${registro.Especificar || '-'}</small></td>
                                    <td class="text-end">${registro.total_minutos || 0}</td>
                                    <td class="text-end"><strong>${registro.total_horas || '-'}</strong></td>
                                </tr>
                            `).join('')}
                        </tbody>
                        <tfoot class="table-success">
                            <tr>
                                <td colspan="7" class="text-end"><strong>TOTAL:</strong></td>
                                <td class="text-end"><strong>${dados.totais.total_minutos}</strong></td>
                                <td class="text-end"><strong>${dados.totais.total_horas_formatado}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="mt-3 text-center">
            <button class="btn btn-success" onclick="exportarRelatorio('${dados.matricula}')">
                <i class="fas fa-download me-1"></i>Exportar para Excel
            </button>
            <button class="btn btn-secondary" onclick="imprimirRelatorio()">
                <i class="fas fa-print me-1"></i>Imprimir
            </button>
        </div>
    `;
}

// Lista de comessas
async function mostrarListaComessas() {
    const container = document.getElementById('conteudo-relatorio');

    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-list me-2"></i>Lista de Comessas</h5>
            </div>
            <div class="card-body">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                </div>
            </div>
        </div>
    `;

    try {
        const response = await apiRequest(`${API_BASE}/relatorios/comessas`);
        const data = await response.json();

        if (data.status === 'success') {
            container.innerHTML = `
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-list me-2"></i>Lista de Comessas (${data.total})</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Matrícula</th>
                                        <th>Total de Registros</th>
                                        <th>Primeira Data</th>
                                        <th>Última Data</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${data.data.map(comessa => `
                                        <tr>
                                            <td><code>${comessa.Matricula}</code></td>
                                            <td><span class="badge bg-primary">${comessa.total_registros}</span></td>
                                            <td>${formatarData(comessa.primeira_data)}</td>
                                            <td>${formatarData(comessa.ultima_data)}</td>
                                            <td>
                                                <button class="btn btn-sm btn-outline-primary" onclick="gerarRelatorioRapido('${comessa.Matricula}')">
                                                    <i class="fas fa-eye"></i> Ver Relatório
                                                </button>
                                            </td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro ao carregar comessas: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por comessa
async function mostrarRelatorioPorComessa() {
    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-building me-2"></i>Relatório por Comessa</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorComessa(event)">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="comessa" class="form-label">Número da Comessa:</label>
                            <input type="text" class="form-control" id="comessa" required 
                                   placeholder="Ex: 21" value="21">
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search me-1"></i>Gerar Relatório
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorComessa(event) {
    event.preventDefault();
    const comessa = document.getElementById('comessa').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const response = await apiRequest(`${API_BASE}/relatorios/por-comessa?comessa=${comessa}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por nome
async function mostrarRelatorioPorNome() {
    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-user me-2"></i>Relatório por Nome</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorNome(event)">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="nome" class="form-label">Nome do Funcionário:</label>
                            <input type="text" class="form-control" id="nome" required 
                                   placeholder="Ex: Marcio" value="Marcio">
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-search me-1"></i>Gerar Relatório
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorNome(event) {
    event.preventDefault();
    const nome = document.getElementById('nome').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const response = await apiRequest(`${API_BASE}/relatorios/por-nome?nome=${encodeURIComponent(nome)}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por nome e data
async function mostrarRelatorioPorNomeData() {
    const hoje = new Date().toISOString().split('T')[0];
    const semanaAtras = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-user-clock me-2"></i>Relatório por Nome e Data</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorNomeData(event)">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="nomeData" class="form-label">Nome do Funcionário:</label>
                            <input type="text" class="form-control" id="nomeData" required 
                                   placeholder="Ex: Marcio" value="Marcio">
                        </div>
                        <div class="col-md-3">
                            <label for="dataInicio" class="form-label">Data Início:</label>
                            <input type="date" class="form-control" id="dataInicio" required value="${semanaAtras}">
                        </div>
                        <div class="col-md-3">
                            <label for="dataFim" class="form-label">Data Fim:</label>
                            <input type="date" class="form-control" id="dataFim" required value="${hoje}">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-warning">
                                <i class="fas fa-search me-1"></i>Gerar
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorNomeData(event) {
    event.preventDefault();
    const nome = document.getElementById('nomeData').value;
    const dataInicio = document.getElementById('dataInicio').value;
    const dataFim = document.getElementById('dataFim').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const params = new URLSearchParams({
            nome: nome,
            dataInicio: dataInicio,
            dataFim: dataFim
        });

        const response = await fetch(`${API_BASE}/relatorios/por-nome-data?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por data
async function mostrarRelatorioPorData() {
    const hoje = new Date().toISOString().split('T')[0];
    const semanaAtras = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-calendar me-2"></i>Relatório por Data</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorData(event)">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="dataInicioData" class="form-label">Data Início:</label>
                            <input type="date" class="form-control" id="dataInicioData" required value="${semanaAtras}">
                        </div>
                        <div class="col-md-4">
                            <label for="dataFimData" class="form-label">Data Fim:</label>
                            <input type="date" class="form-control" id="dataFimData" required value="${hoje}">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-info">
                                <i class="fas fa-search me-1"></i>Gerar Relatório
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorData(event) {
    event.preventDefault();
    const dataInicio = document.getElementById('dataInicioData').value;
    const dataFim = document.getElementById('dataFimData').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const params = new URLSearchParams({
            dataInicio: dataInicio,
            dataFim: dataFim
        });

        const response = await fetch(`${API_BASE}/relatorios/por-data?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por comessa e data
async function mostrarRelatorioPorComessaData() {
    const hoje = new Date().toISOString().split('T')[0];
    const semanaAtras = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];

    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-building-user me-2"></i>Relatório por Comessa e Data</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorComessaData(event)">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="comessaData" class="form-label">Comessa:</label>
                            <input type="text" class="form-control" id="comessaData" required 
                                   placeholder="Ex: 21" value="21">
                        </div>
                        <div class="col-md-3">
                            <label for="dataInicioComessaData" class="form-label">Data Início:</label>
                            <input type="date" class="form-control" id="dataInicioComessaData" required value="${semanaAtras}">
                        </div>
                        <div class="col-md-3">
                            <label for="dataFimComessaData" class="form-label">Data Fim:</label>
                            <input type="date" class="form-control" id="dataFimComessaData" required value="${hoje}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-secondary">
                                <i class="fas fa-search me-1"></i>Gerar
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorComessaData(event) {
    event.preventDefault();
    const comessa = document.getElementById('comessaData').value;
    const dataInicio = document.getElementById('dataInicioComessaData').value;
    const dataFim = document.getElementById('dataFimComessaData').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const params = new URLSearchParams({
            comessa: comessa,
            dataInicio: dataInicio,
            dataFim: dataFim
        });

        const response = await fetch(`${API_BASE}/relatorios/por-comessa-data?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função para mostrar relatório por comessa e funcionário
async function mostrarRelatorioPorComessaFuncionario() {
    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-users-cog me-2"></i>Relatório por Comessa e Funcionário</h5>
            </div>
            <div class="card-body">
                <form onsubmit="gerarRelatorioPorComessaFuncionario(event)">
                    <div class="row">
                        <div class="col-md-5">
                            <label for="comessaFunc" class="form-label">Comessa:</label>
                            <input type="text" class="form-control" id="comessaFunc" required 
                                   placeholder="Ex: 21" value="21">
                        </div>
                        <div class="col-md-5">
                            <label for="nomeFunc" class="form-label">Nome do Funcionário:</label>
                            <input type="text" class="form-control" id="nomeFunc" required 
                                   placeholder="Ex: Marcio" value="Marcio">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-dark">
                                <i class="fas fa-search me-1"></i>Gerar
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-relatorio" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function gerarRelatorioPorComessaFuncionario(event) {
    event.preventDefault();
    const comessa = document.getElementById('comessaFunc').value;
    const nome = document.getElementById('nomeFunc').value;
    const container = document.getElementById('resultado-relatorio');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const params = new URLSearchParams({
            comessa: comessa,
            nome: nome
        });

        const response = await fetch(`${API_BASE}/relatorios/por-comessa-funcionario?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirRelatorioGenerico(data, container);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

// Função genérica para exibir relatórios
function exibirRelatorioGenerico(data, container) {
    if (!data.registros || data.registros.length === 0) {
        container.innerHTML = `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Nenhum registro encontrado para os filtros informados.
            </div>
        `;
        return;
    }

    let totalMinutos = 0;
    data.registros.forEach(registro => {
        if (registro.total_minutos) {
            totalMinutos += registro.total_minutos;
        }
    });

    const totalHoras = Math.floor(totalMinutos / 60);
    const totalMinutosRestantes = totalMinutos % 60;
    const totalFormatado = `${totalHoras}:${totalMinutosRestantes.toString().padStart(2, '0')}`;

    container.innerHTML = `
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">${data.relatorio}</h6>
                <span class="badge bg-primary">${data.total} registros</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <strong>Total de Horas Trabalhadas:</strong> ${totalFormatado}
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>Nome</th>
                                <th>Data</th>
                                <th>Matrícula</th>
                                <th>Serviço</th>
                                <th>Início</th>
                                <th>Fim</th>
                                <th>Horas</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${data.registros.map(registro => `
                                <tr>
                                    <td>${registro.Nome || '-'}</td>
                                    <td>${new Date(registro.Data).toLocaleDateString('pt-BR')}</td>
                                    <td>${registro.Matricula || '-'}</td>
                                    <td>${registro.Servico || '-'}</td>
                                    <td>${registro.Inicio || '-'}</td>
                                    <td>${registro.Fim || '-'}</td>
                                    <td><span class="badge bg-success">${registro.total_horas || '0:00'}</span></td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `;
}

// Funcionários placeholder
async function mostrarRelatorioFuncionarios() {
    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-users me-2"></i>Relatório de Funcionários</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Relatório de funcionários em desenvolvimento.
                </div>
            </div>
        </div>
    `;
}

// Estatísticas placeholder
async function mostrarEstatisticas() {
    const container = document.getElementById('conteudo-relatorio');
    container.innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-chart-bar me-2"></i>Estatísticas Gerais</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Estatísticas gerais em desenvolvimento.
                </div>
            </div>
        </div>
    `;
}

// Gerar relatório rápido
function gerarRelatorioRapido(matricula) {
    // Mudar para aba de cartão de ponto e preencher automaticamente
    mostrarRelatorioCartaoPonto().then(() => {
        document.getElementById('matriculaRelatorio').value = matricula;
        gerarRelatorioCartaoPonto();
    });
}

// Funções de exportação e impressão (placeholder)
function exportarRelatorio(matricula) {
    mostrarSucesso('Funcionalidade de exportação em desenvolvimento');
}

function imprimirRelatorio() {
    window.print();
}

// Utilitários
function formatarData(data) {
    if (!data) return '-';
    try {
        return new Date(data).toLocaleDateString('pt-BR');
    } catch (error) {
        return '-';
    }
}

function mostrarErro(mensagem) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger alert-dismissible fade show';
    alert.innerHTML = `
        ${mensagem}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.insertBefore(alert, document.body.firstChild);

    setTimeout(() => {
        alert.remove();
    }, 5000);
}

function mostrarSucesso(mensagem) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-success alert-dismissible fade show';
    alert.innerHTML = `
        ${mensagem}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.insertBefore(alert, document.body.firstChild);

    setTimeout(() => {
        alert.remove();
    }, 3000);
}

// WhatsApp - Sistema de Notificações
async function carregarWhatsApp(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fab fa-whatsapp me-2 text-success"></i>Sistema de Notificações WhatsApp</h2>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Sistema para envio automático de notificações sobre mudanças no workflow de produção.
                </div>
            </div>
        </div>
        
        <!-- Status do Sistema -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-signal fa-2x text-primary mb-3"></i>
                        <h5>Status da Conexão</h5>
                        <div id="status-whatsapp">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                            Verificando...
                        </div>
                        <button class="btn btn-primary btn-sm mt-2" onclick="verificarStatusWhatsApp()">
                            <i class="fas fa-refresh me-1"></i>Atualizar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-users fa-2x text-success mb-3"></i>
                        <h5>Contatos Cadastrados</h5>
                        <div id="total-contatos">-</div>
                        <button class="btn btn-success btn-sm mt-2" onclick="listarContatos()">
                            <i class="fas fa-list me-1"></i>Ver Contatos
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-chart-line fa-2x text-info mb-3"></i>
                        <h5>Estatísticas</h5>
                        <div id="estatisticas-whatsapp">-</div>
                        <button class="btn btn-info btn-sm mt-2" onclick="mostrarEstatisticas()">
                            <i class="fas fa-chart-bar me-1"></i>Ver Stats
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Ações -->
        <div class="row mb-4">
            <div class="col-12">
                <h4><i class="fas fa-cogs me-2"></i>Ações do Sistema</h4>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-play fa-2x text-success mb-3"></i>
                        <h6>Inicializar WhatsApp</h6>
                        <button class="btn btn-success btn-sm" onclick="inicializarWhatsApp()">
                            <i class="fas fa-power-off me-1"></i>Conectar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-paper-plane fa-2x text-primary mb-3"></i>
                        <h6>Teste de Mensagem</h6>
                        <button class="btn btn-primary btn-sm" onclick="mostrarTesteMessage()">
                            <i class="fas fa-sms me-1"></i>Testar
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-cog fa-2x text-warning mb-3"></i>
                        <h6>Teste Workflow</h6>
                        <button class="btn btn-warning btn-sm" onclick="testarNotificacaoWorkflow()">
                            <i class="fas fa-bell me-1"></i>Simular
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body text-center">
                        <i class="fas fa-history fa-2x text-secondary mb-3"></i>
                        <h6>Logs de Envio</h6>
                        <button class="btn btn-secondary btn-sm" onclick="mostrarLogs()">
                            <i class="fas fa-file-alt me-1"></i>Ver Logs
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="conteudo-whatsapp">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Selecione uma ação acima para começar.
            </div>
        </div>
    `;

    // Carregar status inicial
    await verificarStatusWhatsApp();
    await carregarEstatisticas();
}

async function verificarStatusWhatsApp() {
    try {
        const response = await apiRequest(`${API_BASE}/whatsapp/status`);
        const data = await response.json();

        const statusDiv = document.getElementById('status-whatsapp');
        if (data.whatsapp.conectado) {
            statusDiv.innerHTML = '<span class="badge bg-success">✅ Conectado</span>';
        } else if (data.whatsapp.inicializando) {
            statusDiv.innerHTML = '<span class="badge bg-warning">🔄 Inicializando...</span>';
        } else {
            statusDiv.innerHTML = '<span class="badge bg-danger">❌ Desconectado</span>';
        }
    } catch (error) {
        document.getElementById('status-whatsapp').innerHTML = '<span class="badge bg-danger">❌ Erro</span>';
    }
}

async function carregarEstatisticas() {
    try {
        const response = await apiRequest(`${API_BASE}/whatsapp/estatisticas`);
        const data = await response.json();

        if (data.status === 'success') {
            const stats = data.estatisticas;
            document.getElementById('total-contatos').innerHTML = `${stats.contatos_ativos}/${stats.total_contatos}`;
            document.getElementById('estatisticas-whatsapp').innerHTML = `Hoje: ${stats.enviados_hoje} ✅ ${stats.erros_hoje} ❌`;
        }
    } catch (error) {
        console.error('Erro ao carregar estatísticas:', error);
    }
}

async function inicializarWhatsApp() {
    try {
        const response = await apiRequest(`${API_BASE}/whatsapp/inicializar`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const data = await response.json();

        alert(data.message);

        if (data.status === 'success') {
            document.getElementById('conteudo-whatsapp').innerHTML = `
                <div class="alert alert-warning">
                    <h5><i class="fas fa-qrcode me-2"></i>QR Code para Conexão</h5>
                    <p>Verifique o console do servidor para ver o QR Code e escaneie com seu WhatsApp.</p>
                    <p><strong>Importante:</strong> O QR Code aparece no terminal onde o servidor está rodando.</p>
                </div>
            `;
        }

        setTimeout(verificarStatusWhatsApp, 2000);
    } catch (error) {
        alert('Erro ao inicializar WhatsApp: ' + error.message);
    }
}

async function mostrarTesteMessage() {
    document.getElementById('conteudo-whatsapp').innerHTML = `
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-paper-plane me-2"></i>Teste de Mensagem</h5>
            </div>
            <div class="card-body">
                <form onsubmit="enviarMensagemTeste(event)">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="telefone-teste" class="form-label">Telefone (com DDD):</label>
                            <input type="text" class="form-control" id="telefone-teste" required 
                                   placeholder="Ex: 11999999999" pattern="[0-9]{10,11}">
                        </div>
                        <div class="col-md-6">
                            <label for="mensagem-teste" class="form-label">Mensagem:</label>
                            <input type="text" class="form-control" id="mensagem-teste" required 
                                   value="🔔 Teste do Sistema PELL - WhatsApp funcionando!">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-1"></i>Enviar Teste
                            </button>
                        </div>
                    </div>
                </form>
                <div id="resultado-teste" class="mt-3"></div>
            </div>
        </div>
    `;
}

async function enviarMensagemTeste(event) {
    event.preventDefault();

    const telefone = document.getElementById('telefone-teste').value;
    const mensagem = document.getElementById('mensagem-teste').value;
    const container = document.getElementById('resultado-teste');

    try {
        container.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div></div>';

        const response = await apiRequest(`${API_BASE}/whatsapp/teste`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ telefone, mensagem })
        });
        const data = await response.json();

        container.innerHTML = `
            <div class="alert alert-${data.status === 'success' ? 'success' : 'danger'}">
                ${data.message}
            </div>
        `;
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

async function testarNotificacaoWorkflow() {
    try {
        const response = await apiRequest(`${API_BASE}/whatsapp/teste-workflow`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({})
        });
        const data = await response.json();

        alert(data.message);

        if (data.status === 'success') {
            setTimeout(carregarEstatisticas, 2000);
        }
    } catch (error) {
        alert('Erro ao testar notificação: ' + error.message);
    }
}

async function listarContatos() {
    try {
        const response = await fetch(`${API_BASE}/whatsapp/contatos`);
        const data = await response.json();

        if (data.status === 'success') {
            let html = `
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5><i class="fas fa-users me-2"></i>Contatos Cadastrados (${data.total})</h5>
                        <button class="btn btn-primary btn-sm" onclick="abrirModalContato()">
                            <i class="fas fa-plus me-1"></i>Adicionar Contato
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Nome</th>
                                        <th>Telefone</th>
                                        <th>Tipo</th>
                                        <th>Status</th>
                                        <th>Cadastro</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
            `;

            data.contatos.forEach(contato => {
                const statusBadge = contato.ativo ? 'success' : 'danger';
                const statusText = contato.ativo ? 'Ativo' : 'Inativo';
                const toggleText = contato.ativo ? 'Desativar' : 'Ativar';
                const toggleIcon = contato.ativo ? 'pause' : 'play';
                const toggleClass = contato.ativo ? 'warning' : 'success';

                html += `
                    <tr>
                        <td>${contato.nome}</td>
                        <td>${contato.telefone}</td>
                        <td><span class="badge bg-primary">${contato.tipo_notificacao}</span></td>
                        <td><span class="badge bg-${statusBadge}">${statusText}</span></td>
                        <td>${new Date(contato.data_cadastro).toLocaleDateString('pt-BR')}</td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-primary" onclick="abrirModalContato(${JSON.stringify(contato).replace(/"/g, '&quot;')})" title="Editar">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-${toggleClass}" onclick="alternarStatusContato(${contato.id}, ${contato.ativo})" title="${toggleText}">
                                    <i class="fas fa-${toggleIcon}"></i>
                                </button>
                                <button class="btn btn-outline-danger" onclick="excluirContato(${contato.id}, '${contato.nome}')" title="Excluir">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            if (data.contatos.length === 0) {
                html += `
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            <i class="fas fa-users fa-2x mb-2"></i><br>
                            Nenhum contato cadastrado<br>
                            <button class="btn btn-primary btn-sm mt-2" onclick="abrirModalContato()">
                                <i class="fas fa-plus me-1"></i>Adicionar Primeiro Contato
                            </button>
                        </td>
                    </tr>
                `;
            }

            html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('conteudo-whatsapp').innerHTML = html;
        }
    } catch (error) {
        document.getElementById('conteudo-whatsapp').innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}

async function mostrarLogs() {
    try {
        const response = await fetch(`${API_BASE}/whatsapp/logs?limite=20`);
        const data = await response.json();

        if (data.status === 'success') {
            let html = `
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-file-alt me-2"></i>Logs de Envio (últimos 20)</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>Data/Hora</th>
                                        <th>Telefone</th>
                                        <th>Mensagem</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
            `;

            data.logs.forEach(log => {
                html += `
                    <tr>
                        <td>${new Date(log.data_envio).toLocaleString('pt-BR')}</td>
                        <td>${log.telefone}</td>
                        <td>${log.mensagem.substring(0, 50)}...</td>
                        <td><span class="badge bg-${log.status === 'enviado' ? 'success' : 'danger'}">${log.status}</span></td>
                    </tr>
                `;
            });

            html += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('conteudo-whatsapp').innerHTML = html;
        }
    } catch (error) {
        document.getElementById('conteudo-whatsapp').innerHTML = `<div class="alert alert-danger">Erro: ${error.message}</div>`;
    }
}