<?php
// relatorios.php (Dentro da pasta /relatorios)
if (session_status() == PHP_SESSION_NONE) { session_start(); }
require_once '../middleware-auth.php'; 
authAdministrador();
?>
<!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 do Sistema - Selflix Vagas</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <style>
        body { background-color: #f0f2f5; overflow-x: hidden; }
        .container-main { padding-top: 20px; padding-bottom: 40px; }
        .card { margin-bottom: 25px; border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); border-radius: .75rem; height: 100%; }
        
        /* CABEÇALHO EM DUAS LINHAS */
        .card-header { 
            font-weight: 600; 
            background-color: #12929e; 
            color: white; 
            border-bottom: none; 
            padding: 0.8rem 1.25rem; 
            display: flex; 
            flex-direction: column; /* Força duas linhas */
            align-items: flex-start; 
            justify-content: center;
            min-height: 80px; /* Garante alinhamento visual entre os cards */
        }
        
        /* Estilo da Quantidade (Branca e Bold na 2ª linha) */
        .header-count { 
            color: #ffffff !important; 
            font-weight: 800; 
            font-size: 1rem; 
            margin-top: 4px; /* Espaço entre as linhas */
        }

        .chart-container { position: relative; margin: auto; height: 280px; width: 100%; }
        .chart-resumo-small { height: 180px; }
        .btn-voltar-painel { background-color: #6c757d; color: white; border: none; transition: 0.3s; }
        
        #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 9999; display: none; justify-content: center; align-items: center; backdrop-filter: blur(3px); }
        #loading-overlay .spinner-border { width: 3rem; height: 3rem; color: #12929e; }
    </style>
</head>
<body>
    <div id="loading-overlay"><div class="spinner-border" role="status"></div></div>

    <?php if (file_exists('../menu-paineis.php')) include '../menu-paineis.php'; ?>
    
    <div class="container container-main mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
            <h1 class="h3 mb-0 fw-bold"><i class="bi bi-bar-chart-line-fill me-2"></i>Relatórios de Gestão</h1>
            <a href="../painel-adm.php" class="btn btn-voltar-painel shadow-sm"><i class="bi bi-arrow-left-circle me-1"></i> Painel ADM</a>
        </div>

        <div class="card mb-4" style="height: auto;">
            <div class="card-header" style="background-color: #495057; min-height: auto; flex-direction: row; align-items: center;">
                <span>Filtros de Período</span>
            </div>
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3"><label class="form-label small fw-bold">De:</label><input type="date" class="form-control" id="data_inicio"></div>
                    <div class="col-md-3"><label class="form-label small fw-bold">Até:</label><input type="date" class="form-control" id="data_fim"></div>
                    <div class="col-md-2 d-grid"><button class="btn btn-primary fw-bold" id="btnFiltrar">Aplicar</button></div>
                    <div class="col-md-4 border-start ps-3">
                        <button class="btn btn-sm btn-outline-secondary" id="btnSemana">7 dias</button>
                        <button class="btn btn-sm btn-outline-dark" id="btnTodos">Total Geral</button>
                    </div>
                </div>
            </div>
        </div>
        
        <h4 class="mb-3 fw-bold text-secondary">Resumo da Atividade</h4>
        <div class="row g-3">
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">Novos Candidatos <span id="txt-novos-candidatos" class="header-count"></span></div>
                    <div class="card-body"><div class="chart-container chart-resumo-small"><canvas id="novosCandidatosSemanaChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">Novas Empresas <span id="txt-novas-empresas" class="header-count"></span></div>
                    <div class="card-body"><div class="chart-container chart-resumo-small"><canvas id="novasEmpresasSemanaChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">Vagas Publicadas <span id="txt-novas-vagas" class="header-count"></span></div>
                    <div class="card-body"><div class="chart-container chart-resumo-small"><canvas id="novasVagasSemanaChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-6">
                <div class="card">
                    <div class="card-header">Candidaturas <span id="txt-novas-candidaturas" class="header-count"></span></div>
                    <div class="card-body"><div class="chart-container chart-resumo-small"><canvas id="novasCandidaturasSemanaChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="card">
                    <div class="card-header">Tipos de Contratação <span id="txt-tipos-contratacao" class="header-count"></span></div>
                    <div class="card-body"><div class="chart-container chart-resumo-small"><canvas id="tiposContratacaoChart"></canvas></div></div>
                </div>
            </div>
        </div>

        <h4 class="mt-4 mb-3 fw-bold text-secondary">Estatísticas Acumuladas</h4>
        <div class="row g-3">
            <div class="col-lg-7">
                <div class="card">
                    <div class="card-header" style="flex-direction: row; align-items: center; min-height: 60px;">Candidatos vs Empresas</div>
                    <div class="card-body"><div class="chart-container" style="height: 350px;"><canvas id="totalGeralBaseChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header" style="flex-direction: row; align-items: center; min-height: 60px;">Compartilhamentos</div>
                    <div class="card-body"><div class="chart-container" style="height: 350px;"><canvas id="compartilhamentoChart"></canvas></div></div>
                </div>
            </div>
        </div>

        <h4 class="mt-4 mb-3 fw-bold text-secondary">Métricas Desempenho e Segmentos</h4>
        <div class="row g-3">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header" style="flex-direction: row; align-items: center; min-height: 60px;">Vagas Extremais de Candidatura no Período</div>
                    <div class="card-body"><div class="chart-container" style="height: 350px;"><canvas id="vagasCandidaturasChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header" style="flex-direction: row; align-items: center; min-height: 60px;">Segmentos Mais Numerosos do Site</div>
                    <div class="card-body"><div class="chart-container" style="height: 350px;"><canvas id="segmentosNumerososChart"></canvas></div></div>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        Chart.register(ChartDataLabels);
        const loading = document.getElementById('loading-overlay');
        const dataInicioInput = document.getElementById('data_inicio');
        const dataFimInput = document.getElementById('data_fim');
        let chartMap = {};

        const formatNum = (n) => "Quant. " + String(n || 0).padStart(2, '0');

        async function carregarRelatorios(inicio = '', fim = '') {
            loading.style.display = 'flex';
            let url = 'api-relatorios.php';
            if (inicio && fim) url += `?data_inicio=${inicio}&data_fim=${fim}`;
            try {
                const res = await fetch(url);
                const data = await res.json();
                popularGraficos(data);
            } catch (e) { console.error(e); } finally { loading.style.display = 'none'; }
        }

        function criarGrafico(id, config) {
            if (chartMap[id]) chartMap[id].destroy();
            chartMap[id] = new Chart(document.getElementById(id).getContext('2d'), config);
        }

        function popularGraficos(data) {
            // Atualização dos títulos em 2 linhas
            document.getElementById('txt-novos-candidatos').innerText = formatNum(data.novosCandidatosSemana);
            document.getElementById('txt-novas-empresas').innerText = formatNum(data.novasEmpresasSemana);
            document.getElementById('txt-novas-vagas').innerText = formatNum(data.novasVagasSemana);
            document.getElementById('txt-novas-candidaturas').innerText = formatNum(data.novasCandidaturasSemana);
            
            const totalTipos = data.tiposContratacao ? Object.values(data.tiposContratacao).reduce((a, b) => a + b, 0) : 0;
            document.getElementById('txt-tipos-contratacao').innerText = formatNum(totalTipos);

            // Gráfico Geral de Barras (Preto Bold nas Labels)
            criarGrafico('totalGeralBaseChart', {
                type: 'bar',
                data: {
                    labels: ['Candidatos', 'Empresas'],
                    datasets: [{ data: [data.totalGeralCandidatos, data.totalGeralEmpresas], backgroundColor: ['#4e73df', '#12929e'], borderRadius: 10 }]
                },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { color: '#000', font: { weight: 'bold' }, anchor: 'end', align: 'top', formatter: (v) => String(v).padStart(2, '0') } }, scales: { y: { beginAtZero: true, grid: { display: false } } } }
            });

            // Configuração dos Donuts Grossos (60%) e Limpos
            const donutCfg = (val, color) => ({
                type: 'doughnut',
                data: { datasets: [{ data: [val || 1, 0], backgroundColor: [color, '#f1f1f1'] }] },
                options: { cutout: '60%', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { display: false } } }
            });

            criarGrafico('novosCandidatosSemanaChart', donutCfg(data.novosCandidatosSemana, '#4e73df'));
            criarGrafico('novasEmpresasSemanaChart', donutCfg(data.novasEmpresasSemana, '#1cc88a'));
            criarGrafico('novasVagasSemanaChart', donutCfg(data.novasVagasSemana, '#f6c23e'));
            criarGrafico('novasCandidaturasSemanaChart', donutCfg(data.novasCandidaturasSemana, '#e74a3b'));

            // Tipos de Contratação
            if (data.tiposContratacao) {
                criarGrafico('tiposContratacaoChart', {
                    type: 'doughnut',
                    data: { labels: Object.keys(data.tiposContratacao), datasets: [{ data: Object.values(data.tiposContratacao), backgroundColor: ['#12929e', '#4e73df', '#f6c23e', '#e74a3b', '#6c757d'] }] },
                    options: { cutout: '60%', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true, position: 'right', labels: { boxWidth: 12, font: { size: 10, weight: 'bold' } } }, datalabels: { display: false } } }
                });
            }

            // Gráfico de Compartilhamento
            criarGrafico('compartilhamentoChart', {
                type: 'pie',
                data: { labels: Object.keys(data.dadosCompartilhamento), datasets: [{ data: Object.values(data.dadosCompartilhamento), backgroundColor: ['#25d366', '#3b5998', '#0077b5'] }] },
                options: { responsive: true, maintainAspectRatio: false, plugins: { datalabels: { color: '#000', font: { weight: 'bold' } } } }
            });

            // NOVO: Gráfico Comparativo de Vagas (Mais vs Menos Candidatadas)
            const vMaisLabels = data.vagasMaisCandidatadas ? Object.keys(data.vagasMaisCandidatadas) : [];
            const vMaisValores = data.vagasMaisCandidatadas ? Object.values(data.vagasMaisCandidatadas) : [];
            const vMenosLabels = data.vagasMenosCandidatadas ? Object.keys(data.vagasMenosCandidatadas) : [];
            const vMenosValores = data.vagasMenosCandidatadas ? Object.values(data.vagasMenosCandidatadas) : [];
            
            criarGrafico('vagasCandidaturasChart', {
                type: 'bar',
                data: {
                    labels: [...vMaisLabels, ...vMenosLabels],
                    datasets: [
                        {
                            label: 'Mais Candidatadas',
                            data: [...vMaisValores, ...Array(vMenosLabels.length).fill(null)],
                            backgroundColor: '#1cc88a',
                            borderRadius: 5
                        },
                        {
                            label: 'Menos Candidatadas',
                            data: [...Array(vMaisLabels.length).fill(null), ...vMenosValores],
                            backgroundColor: '#e74a3b',
                            borderRadius: 5
                        }
                    ]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true, position: 'top' },
                        datalabels: { color: '#000', font: { weight: 'bold' }, anchor: 'end', align: 'right', formatter: (v) => v !== null ? String(v).padStart(2, '0') : '' }
                    },
                    scales: { x: { beginAtZero: true, grid: { display: false } }, y: { grid: { display: false } } }
                }
            });

            // NOVO: Gráfico de Segmentos Mais Numerosos
            const segLabels = data.segmentosMaisNumerosos ? Object.keys(data.segmentosMaisNumerosos) : [];
            const segValores = data.segmentosMaisNumerosos ? Object.values(data.segmentosMaisNumerosos) : [];

            criarGrafico('segmentosNumerososChart', {
                type: 'bar',
                data: {
                    labels: segLabels,
                    datasets: [{ data: segValores, backgroundColor: '#4e73df', borderRadius: 8 }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        datalabels: { color: '#000', font: { weight: 'bold' }, anchor: 'end', align: 'top', formatter: (v) => String(v).padStart(2, '0') }
                    },
                    scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } }
                }
            });
        }

        document.getElementById('btnFiltrar').addEventListener('click', () => carregarRelatorios(dataInicioInput.value, dataFimInput.value));
        document.getElementById('btnSemana').addEventListener('click', () => { 
            const hoje = new Date().toISOString().split('T')[0];
            const semana = new Date(); semana.setDate(semana.getDate() - 7);
            const inicio = semana.toISOString().split('T')[0];
            dataInicioInput.value = inicio; dataFimInput.value = hoje;
            carregarRelatorios(inicio, hoje);
        });
        document.getElementById('btnTodos').addEventListener('click', () => { dataInicioInput.value = ''; dataFimInput.value = ''; carregarRelatorios('2000-01-01', new Date().toISOString().split('T')[0]); });

        document.getElementById('btnSemana').click();
    });
    </script>
</body>
</html>