@extends('layouts.app')

@section('title', 'Analytics em Tempo Real - Link na Bio')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>{{ __('Analytics em Tempo Real') }}</span>
                    <a href="{{ route('admin.analytics.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-chart-bar"></i> Voltar para Analytics
                    </a>
                </div>

                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6 mx-auto">
                            <div class="card bg-primary text-white mb-3">
                                <div class="card-body text-center">
                                    <h5 class="card-title">Visitantes Ativos nos Últimos 5 Minutos</h5>
                                    <h1 class="display-1" id="active-visitors">0</h1>
                                    <p class="mb-0">Atualizando em <span id="countdown">15</span> segundos</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Visualizações Recentes</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Horário</th>
                                            <th>Dispositivo</th>
                                            <th>Navegador</th>
                                            <th>Sistema</th>
                                            <th>País</th>
                                            <th>Página</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recent-views">
                                        <tr>
                                            <td colspan="6" class="text-center">Carregando dados...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const activeVisitorsElement = document.getElementById('active-visitors');
        const recentViewsElement = document.getElementById('recent-views');
        const countdownElement = document.getElementById('countdown');
        
        let countdownValue = 15;
        
        // Função para formatar data
        function formatDate(dateString) {
            const date = new Date(dateString);
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }
        
        // Função para buscar dados em tempo real
        function fetchRealTimeData() {
            fetch('{{ route("admin.analytics.realtime-data") }}')
                .then(response => response.json())
                .then(data => {
                    // Atualizar contador de visitantes ativos
                    activeVisitorsElement.textContent = data.count;
                    
                    // Atualizar tabela de visualizações recentes
                    if (data.views.length > 0) {
                        let tableRows = '';
                        
                        data.views.forEach(view => {
                            tableRows += `
                                <tr>
                                    <td>${formatDate(view.created_at)}</td>
                                    <td>${view.visitor_device || 'Desconhecido'}</td>
                                    <td>${view.visitor_browser || 'Desconhecido'}</td>
                                    <td>${view.visitor_os || 'Desconhecido'}</td>
                                    <td>${view.visitor_country || 'Desconhecido'}</td>
                                    <td>${view.page_viewed || 'Página principal'}</td>
                                </tr>
                            `;
                        });
                        
                        recentViewsElement.innerHTML = tableRows;
                    } else {
                        recentViewsElement.innerHTML = '<tr><td colspan="6" class="text-center">Nenhuma visualização nos últimos 5 minutos</td></tr>';
                    }
                    
                    // Reiniciar contagem regressiva
                    countdownValue = 15;
                    countdownElement.textContent = countdownValue;
                })
                .catch(error => {
                    console.error('Erro ao buscar dados em tempo real:', error);
                });
        }
        
        // Iniciar contagem regressiva
        const countdownInterval = setInterval(function() {
            countdownValue--;
            countdownElement.textContent = countdownValue;
            
            if (countdownValue <= 0) {
                fetchRealTimeData();
            }
        }, 1000);
        
        // Buscar dados iniciais
        fetchRealTimeData();
        
        // Limpar intervalo quando a página for fechada
        window.addEventListener('beforeunload', function() {
            clearInterval(countdownInterval);
        });
    });
</script>
@endsection