<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relatórios Zenvia - SON</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            background: linear-gradient(115deg, #2563EB 0%, #7C3AED 50%, #DB2777 100%);
            padding: 28px 36px;
            border-radius: 40px;
            color: white;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header h1 {
            font-size: 32px;
            font-weight: 800;
        }

        .header h1 i {
            margin-right: 15px;
        }

        .filtros {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 30px;
            display: flex;
            gap: 20px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .filtro-group {
            flex: 1;
            min-width: 200px;
        }

        .filtro-group label {
            display: block;
            font-size: 14px;
            color: #64748B;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .filtro-group input, .filtro-group select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #E2E8F0;
            border-radius: 12px;
            font-size: 14px;
            outline: none;
        }

        .filtro-group input:focus, .filtro-group select:focus {
            border-color: #2563EB;
        }

        .btn-filtrar {
            background: #2563EB;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-filtrar:hover {
            background: #1D4ED8;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            border: 1px solid #E2E8F0;
        }

        .stat-title {
            font-size: 14px;
            color: #64748B;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: #0F172A;
        }

        .stat-value small {
            font-size: 14px;
            font-weight: 400;
            color: #64748B;
            margin-left: 5px;
        }

        .tabela-container {
            background: white;
            border-radius: 20px;
            padding: 20px;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: left;
            padding: 15px;
            background: #F8FAFC;
            color: #0F172A;
            font-weight: 600;
            font-size: 14px;
        }

        td {
            padding: 15px;
            border-bottom: 1px solid #E2E8F0;
            color: #1E293B;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-atendida {
            background: #D1FAE5;
            color: #065F46;
        }

        .status-nao-atendida {
            background: #FEE2E2;
            color: #991B1B;
        }

        .status-ocupado {
            background: #FEF3C7;
            color: #92400E;
        }

        .btn-audio {
            background: none;
            border: none;
            color: #2563EB;
            cursor: pointer;
            font-size: 18px;
        }

        .btn-audio:hover {
            color: #1D4ED8;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #64748B;
        }

        .loading i {
            font-size: 40px;
            margin-bottom: 15px;
            color: #2563EB;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .paginacao {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-pagina {
            padding: 8px 12px;
            border: 1px solid #E2E8F0;
            background: white;
            border-radius: 8px;
            cursor: pointer;
        }

        .btn-pagina.active {
            background: #2563EB;
            color: white;
            border-color: #2563EB;
        }

        .btn-pagina:hover {
            background: #F1F5F9;
        }

        .btn-pagina.active:hover {
            background: #1D4ED8;
        }

        .info-fonte {
            background: #EFF6FF;
            border-radius: 12px;
            padding: 10px 15px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #1E40AF;
            font-size: 14px;
        }

        .info-fonte i {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>
                <i class="fas fa-chart-bar"></i>
                Relatórios Zenvia
            </h1>
            <div class="info-fonte" style="background: rgba(255,255,255,0.2); color: white;">
                <i class="fas fa-database"></i>
                Dados em tempo real da API Zenvia
            </div>
        </div>

        <div class="filtros">
            <div class="filtro-group">
                <label><i class="far fa-calendar-alt"></i> Data Início</label>
                <input type="date" id="dataInicio" value="<?php echo date('Y-m-d', strtotime('-30 days')); ?>">
            </div>
            <div class="filtro-group">
                <label><i class="far fa-calendar-alt"></i> Data Fim</label>
                <input type="date" id="dataFim" value="<?php echo date('Y-m-d'); ?>">
            </div>
            <div class="filtro-group">
                <label><i class="fas fa-filter"></i> Status</label>
                <select id="filtroStatus">
                    <option value="todos">Todos</option>
                    <option value="atendida">Atendidas</option>
                    <option value="sem resposta">Não Atendidas</option>
                    <option value="ocupado">Ocupado</option>
                    <option value="falha">Falhas</option>
                </select>
            </div>
            <button class="btn-filtrar" onclick="carregarDados()">
                <i class="fas fa-search"></i> Buscar
            </button>
            <button class="btn-filtrar" onclick="exportarCSV()" style="background: #10B981;">
                <i class="fas fa-file-csv"></i> Exportar
            </button>
        </div>

        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-title">
                    <i class="fas fa-phone-alt" style="color:#2563EB"></i>
                    Total de Chamadas
                </div>
                <div class="stat-value" id="totalChamadas">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">
                    <i class="fas fa-check-circle" style="color:#10B981"></i>
                    Atendidas
                </div>
                <div class="stat-value" id="atendidas">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">
                    <i class="fas fa-times-circle" style="color:#EF4444"></i>
                    Não Atendidas
                </div>
                <div class="stat-value" id="naoAtendidas">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">
                    <i class="fas fa-clock" style="color:#F59E0B"></i>
                    Duração Total
                </div>
                <div class="stat-value" id="duracaoTotal">-</div>
            </div>
            <div class="stat-card">
                <div class="stat-title">
                    <i class="fas fa-dollar-sign" style="color:#059669"></i>
                    Custo Total
                </div>
                <div class="stat-value" id="custoTotal">-</div>
            </div>
        </div>

        <div class="tabela-container">
            <table id="tabelaChamadas">
                <thead>
                    <tr>
                        <th>Data/Hora</th>
                        <th>Origem</th>
                        <th>Destino</th>
                        <th>Duração</th>
                        <th>Status</th>
                        <th>Custo</th>
                        <th>Gravação</th>
                    </tr>
                </thead>
                <tbody id="corpoTabela">
                    <tr>
                        <td colspan="7" class="loading">
                            <i class="fas fa-circle-notch"></i>
                            <div>Carregando dados da Zenvia...</div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="paginacao" id="paginacao"></div>
            
            <div class="info-fonte">
                <i class="fas fa-cloud"></i>
                Dados consultados diretamente da API da Zenvia em tempo real
            </div>
        </div>
    </div>

    <script>
        let dadosAtuais = [];
        let paginaAtual = 1;
        const itensPorPagina = 20;

        async function carregarDados(pagina = 1) {
            paginaAtual = pagina;
            
            const dataInicio = document.getElementById('dataInicio').value;
            const dataFim = document.getElementById('dataFim').value;
            
            document.getElementById('corpoTabela').innerHTML = `
                <tr>
                    <td colspan="7" class="loading">
                        <i class="fas fa-circle-notch"></i>
                        <div>Consultando API da Zenvia...</div>
                    </td>
                </tr>
            `;
            
            try {
                // Buscar estatísticas
                const statsResponse = await fetch(`api_webphone.php?acao=estatisticas-zenvia&data_inicio=${dataInicio}&data_fim=${dataFim}`);
                const statsData = await statsResponse.json();
                
                if (statsData.success) {
                    atualizarEstatisticas(statsData.estatisticas);
                }
                
                // Buscar chamadas
                const response = await fetch(`api_webphone.php?acao=historico-zenvia&data_inicio=${dataInicio}&data_fim=${dataFim}&limite=1000`);
                const data = await response.json();
                
                if (data.success) {
                    dadosAtuais = data.chamadas;
                    aplicarFiltroEAtualizarTabela();
                } else {
                    mostrarErro(data.error || 'Erro ao carregar dados');
                }
                
            } catch (error) {
                console.error('Erro:', error);
                mostrarErro('Erro de conexão com a API');
            }
        }

        function aplicarFiltroEAtualizarTabela() {
            const statusFiltro = document.getElementById('filtroStatus').value;
            
            let dadosFiltrados = dadosAtuais;
            
            if (statusFiltro !== 'todos') {
                dadosFiltrados = dadosAtuais.filter(c => c.status === statusFiltro);
            }
            
            atualizarTabela(dadosFiltrados);
        }

        function atualizarEstatisticas(stats) {
            document.getElementById('totalChamadas').textContent = stats.total;
            document.getElementById('atendidas').textContent = stats.atendidas;
            document.getElementById('naoAtendidas').textContent = stats.nao_atendidas + stats.ocupado;
            
            const horas = Math.floor(stats.duracao_total / 3600);
            const minutos = Math.floor((stats.duracao_total % 3600) / 60);
            document.getElementById('duracaoTotal').innerHTML = `${horas}h ${minutos}m <small>${stats.duracao_total}s</small>`;
            
            document.getElementById('custoTotal').innerHTML = `R$ ${stats.custo_total.toFixed(2)}`;
        }

        function atualizarTabela(dados) {
            const inicio = (paginaAtual - 1) * itensPorPagina;
            const fim = inicio + itensPorPagina;
            const dadosPagina = dados.slice(inicio, fim);
            
            let html = '';
            
            if (dadosPagina.length === 0) {
                html = `
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 40px; color: #64748B;">
                            <i class="fas fa-inbox" style="font-size: 40px; margin-bottom: 10px; display: block;"></i>
                            Nenhuma chamada encontrada no período
                        </td>
                    </tr>
                `;
            } else {
                dadosPagina.forEach(chamada => {
                    const data = new Date(chamada.data);
                    const dataFormatada = data.toLocaleDateString('pt-BR') + ' ' + data.toLocaleTimeString('pt-BR');
                    
                    let statusClass = '';
                    let statusText = chamada.status;
                    
                    switch(chamada.status) {
                        case 'atendida':
                            statusClass = 'status-atendida';
                            statusText = 'Atendida';
                            break;
                        case 'sem resposta':
                            statusClass = 'status-nao-atendida';
                            statusText = 'Não Atendida';
                            break;
                        case 'ocupado':
                            statusClass = 'status-ocupado';
                            statusText = 'Ocupado';
                            break;
                        case 'falha':
                        case 'cancelada':
                            statusClass = 'status-nao-atendida';
                            statusText = 'Falha';
                            break;
                    }
                    
                    html += `
                        <tr>
                            <td>${dataFormatada}</td>
                            <td>${chamada.origem || '-'}</td>
                            <td>${chamada.destino}</td>
                            <td>${chamada.duracao}</td>
                            <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                            <td>R$ ${chamada.preco.toFixed(2)}</td>
                            <td>
                                ${chamada.url_gravacao ? 
                                    `<button class="btn-audio" onclick="ouvirGravacao('${chamada.id}')" title="Ouvir gravação">
                                        <i class="fas fa-headphones"></i>
                                    </button>` : 
                                    '<span style="color:#94A3B8">-</span>'}
                            </td>
                        </tr>
                    `;
                });
            }
            
            document.getElementById('corpoTabela').innerHTML = html;
            
            // Atualizar paginação
            const totalPaginas = Math.ceil(dados.length / itensPorPagina);
            let paginacaoHtml = '';
            
            for (let i = 1; i <= totalPaginas; i++) {
                paginacaoHtml += `
                    <button class="btn-pagina ${i === paginaAtual ? 'active' : ''}" 
                            onclick="mudarPagina(${i})">${i}</button>
                `;
            }
            
            document.getElementById('paginacao').innerHTML = paginacaoHtml;
        }

        function mudarPagina(pagina) {
            paginaAtual = pagina;
            aplicarFiltroEAtualizarTabela();
        }

        function mostrarErro(mensagem) {
            document.getElementById('corpoTabela').innerHTML = `
                <tr>
                    <td colspan="7" style="text-align: center; padding: 40px; color: #EF4444;">
                        <i class="fas fa-exclamation-triangle" style="font-size: 40px; margin-bottom: 10px; display: block;"></i>
                        ${mensagem}
                    </td>
                </tr>
            `;
        }

        function ouvirGravacao(id) {
            window.open(`api_webphone.php?acao=gravacao-zenvia&id=${id}`, '_blank');
        }

        function exportarCSV() {
            if (dadosAtuais.length === 0) {
                alert('Nenhum dado para exportar');
                return;
            }
            
            let csv = 'Data/Hora,Origem,Destino,Duração,Status,Custo\n';
            
            dadosAtuais.forEach(chamada => {
                const data = new Date(chamada.data).toLocaleString('pt-BR');
                csv += `"${data}","${chamada.origem}","${chamada.destino}","${chamada.duracao}","${chamada.status}","${chamada.preco}"\n`;
            });
            
            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `chamadas_zenvia_${new Date().toISOString().split('T')[0]}.csv`;
            link.click();
        }

        // Carregar dados ao iniciar
        window.onload = () => {
            carregarDados();
            
            // Atualizar automático a cada 60 segundos
            setInterval(carregarDados, 60000);
        };
    </script>
</body>
</html>