@extends('layouts.master')
@section('title', 'Estatísticas - ' . $publicacao->titulo)

@push('styles')
<style>
.stat-card {
    border-left: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.stat-card.primary { border-left-color: #4680ff; }
.stat-card.success { border-left-color: #2ed8b6; }
.stat-card.warning { border-left-color: #ffb64d; }
.stat-card.danger { border-left-color: #ff5370; }
.stat-card.info { border-left-color: #00bcd4; }

.chart-container {
    position: relative;
    height: 300px;
}
</style>
@endpush

@section('main-content')
    <div class="container-fluid">
        <!-- Breadcrumb -->
        <div class="row m-1">
            <div class="col-12">
                <h5><i class="ph-duotone ph-chart-line f-s-16 me-2"></i>Estatísticas da Publicação</h5>
                <ul class="app-line-breadcrumbs mb-3">
                    <li>
                        <a href="{{ route('publicacoes.index') }}" class="f-s-14 f-w-500">
                            <span>Publicações</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('publicacoes.show', $publicacao) }}" class="f-s-14 f-w-500">
                            <span>{{ Str::limit($publicacao->titulo, 30) }}</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#" class="f-s-14 f-w-500">Estatísticas</a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Info da Publicação -->
        <div class="row">
            <div class="col-12">
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h4 class="mb-2">{{ $publicacao->titulo }}</h4>
                                <p class="text-muted mb-2">
                                    <i class="ph-duotone ph-calendar me-1"></i>
                                    {{ $publicacao->data_inicio->format('d/m/Y') }} até {{ $publicacao->data_fim->format('d/m/Y') }}
                                    <span class="mx-2">•</span>
                                    <span class="badge bg-{{ $publicacao->status === 'ativa' ? 'success' : 'secondary' }}">
                                        {{ ucfirst($publicacao->status) }}
                                    </span>
                                </p>
                                <p class="text-muted mb-0">
                                    <i class="ph-duotone ph-user me-1"></i>
                                    <strong>Cliente:</strong> {{ $publicacao->cliente->name ?? 'N/A' }}
                                    <span class="mx-2">•</span>
                                    <strong>Franquia:</strong> {{ $publicacao->franquia->name ?? 'N/A' }}
                                </p>
                            </div>
                            <div class="col-md-4 text-end">
                                <a href="{{ route('publicacoes.show', $publicacao) }}" class="btn btn-outline-secondary">
                                    <i class="ph-duotone ph-arrow-left me-1"></i>Voltar
                                </a>
                                <a href="{{ route('publicacoes.edit', $publicacao) }}" class="btn btn-primary">
                                    <i class="ph-duotone ph-pencil me-1"></i>Editar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerta de Dados Agregados -->
        @if(isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] && $stats['total_impressoes'] > 0)
        <div class="row">
            <div class="col-12">
                <div class="alert alert-info mb-3">
                    <i class="ph-duotone ph-info me-2"></i>
                    <strong>Visualizações:</strong> Esta publicação possui {{ number_format($stats['total_impressoes'], 0, ',', '.') }} visualizações registradas (dados agregados).
                    Gráficos e detalhamentos por dia estão disponíveis apenas quando há registros detalhados de impressões.
                </div>
            </div>
        </div>
        @endif

        <!-- Cards de Estatísticas -->
        <div class="row">
            <div class="col-md-3">
                <div class="card stat-card primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">{{ isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] ? 'Total de Visualizações' : 'Total de Impressões' }}</h6>
                                <h2 class="mb-0">{{ number_format($stats['total_impressoes'] ?? 0, 0, ',', '.') }}</h2>
                            </div>
                            <div class="text-primary">
                                <i class="ph-duotone ph-eye" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                        <small class="text-muted">
                            <i class="ph-duotone ph-trending-up me-1"></i>
                            Média: {{ number_format($stats['media_diaria_impressoes'] ?? 0, 1, ',', '.') }}/dia
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card stat-card success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">Total de Cliques</h6>
                                <h2 class="mb-0">{{ number_format($stats['total_cliques'] ?? 0, 0, ',', '.') }}</h2>
                            </div>
                            <div class="text-success">
                                <i class="ph-duotone ph-cursor-click" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                        <small class="text-muted">
                            <i class="ph-duotone ph-trending-up me-1"></i>
                            Média: {{ number_format($stats['media_diaria_cliques'] ?? 0, 1, ',', '.') }}/dia
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card stat-card warning">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">CTR (Taxa de Cliques)</h6>
                                <h2 class="mb-0">{{ number_format($stats['ctr'] ?? 0, 2, ',', '.') }}%</h2>
                            </div>
                            <div class="text-warning">
                                <i class="ph-duotone ph-target" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                        <small class="text-muted">
                            @if(($stats['ctr'] ?? 0) >= 5)
                                <i class="ph-duotone ph-thumbs-up me-1"></i>
                                Excelente performance!
                            @elseif(($stats['ctr'] ?? 0) >= 2)
                                <i class="ph-duotone ph-info me-1"></i>
                                Performance boa
                            @else
                                <i class="ph-duotone ph-warning me-1"></i>
                                Pode melhorar
                            @endif
                        </small>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card stat-card info">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">{{ isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] ? 'Usuários Únicos' : 'Hotspots Ativos' }}</h6>
                                <h2 class="mb-0">
                                    @if(isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'])
                                        {{ $stats['total_usuarios_logs'] ?? 0 }}
                                    @else
                                        {{ count($stats['top_hotspots'] ?? []) }}
                                    @endif
                                </h2>
                            </div>
                            <div class="text-info">
                                <i class="ph-duotone {{ isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] ? 'ph-users' : 'ph-wifi-high' }}" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                        <small class="text-muted">
                            <i class="ph-duotone {{ isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] ? 'ph-user-list' : 'ph-broadcast' }} me-1"></i>
                            {{ isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] ? 'Que visualizaram' : 'Exibindo o anúncio' }}
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="row">
            <!-- Gráfico de Impressões e Cliques por Dia -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-chart-line me-2"></i>
                            Impressões e Cliques - Últimos 30 dias
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(isset($stats['usando_dados_detalhados']) && $stats['usando_dados_detalhados'] && !empty($stats['impressoes_por_dia']))
                        <div class="chart-container">
                            <canvas id="impressoesCliquesChart"></canvas>
                        </div>
                        @else
                        <div class="text-center py-5">
                            <i class="ph-duotone ph-chart-line-down text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-3 mb-0">
                                Dados detalhados de rastreamento não disponíveis.
                                @if(isset($stats['usando_dados_detalhados']) && !$stats['usando_dados_detalhados'] && $stats['total_impressoes'] > 0)
                                    <br><small>Esta publicação possui <strong>{{ number_format($stats['total_impressoes'], 0, ',', '.') }} visualizações</strong> em formato agregado.</small>
                                @endif
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Gráfico de Cliques por Hora -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-clock me-2"></i>
                            Cliques por Hora do Dia
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(isset($stats['cliques_por_hora']) && count($stats['cliques_por_hora']) > 0)
                        <div class="chart-container">
                            <canvas id="cliquesPorHoraChart"></canvas>
                        </div>
                        @else
                        <div class="text-center py-5">
                            <i class="ph-duotone ph-clock-countdown text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-3 mb-0">
                                <small>Nenhum clique registrado ainda</small>
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Hotspots e Dados Diários -->
        <div class="row">
            <!-- Top Hotspots -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-trophy me-2"></i>
                            Top 10 Hotspots - Mais Impressões
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Serial</th>
                                        <th class="text-end">Impressões</th>
                                        <th class="text-end">Cliques</th>
                                        <th class="text-end">CTR</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($stats['top_hotspots'] ?? [] as $index => $hotspot)
                                    <tr>
                                        <td>
                                            @if($index === 0)
                                                🥇
                                            @elseif($index === 1)
                                                🥈
                                            @elseif($index === 2)
                                                🥉
                                            @else
                                                {{ $index + 1 }}
                                            @endif
                                        </td>
                                        <td>
                                            <strong>{{ $hotspot->serial }}</strong>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-primary">
                                                {{ number_format($hotspot->total_impressoes, 0, ',', '.') }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-success">
                                                {{ number_format($hotspot->total_cliques, 0, ',', '.') }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-warning">
                                                {{ number_format($hotspot->ctr, 2, ',', '.') }}%
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-4">
                                            <i class="ph-duotone ph-info me-2"></i>
                                            Nenhum dado disponível ainda
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dados Diários Detalhados -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-calendar me-2"></i>
                            Dados por Dia - Últimos 7 dias
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Data</th>
                                        <th class="text-end">Impressões</th>
                                        <th class="text-end">Cliques</th>
                                        <th class="text-end">CTR</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $dadosDiarios = collect($stats['impressoes_por_dia'] ?? [])
                                            ->sortByDesc('data')
                                            ->take(7);
                                    @endphp
                                    @forelse($dadosDiarios as $dia)
                                    <tr>
                                        <td>
                                            <strong>{{ \Carbon\Carbon::parse($dia['data'])->format('d/m/Y') }}</strong>
                                            <small class="text-muted d-block">
                                                {{ \Carbon\Carbon::parse($dia['data'])->translatedFormat('l') }}
                                            </small>
                                        </td>
                                        <td class="text-end">
                                            {{ number_format($dia['impressoes'], 0, ',', '.') }}
                                        </td>
                                        <td class="text-end">
                                            {{ number_format($dia['cliques'], 0, ',', '.') }}
                                        </td>
                                        <td class="text-end">
                                            @php
                                                $ctrDia = $dia['impressoes'] > 0
                                                    ? ($dia['cliques'] / $dia['impressoes']) * 100
                                                    : 0;
                                            @endphp
                                            <span class="badge bg-{{ $ctrDia >= 5 ? 'success' : ($ctrDia >= 2 ? 'warning' : 'secondary') }}">
                                                {{ number_format($ctrDia, 2, ',', '.') }}%
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">
                                            <i class="ph-duotone ph-info me-2"></i>
                                            Nenhum dado disponível ainda
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de Usuários que Visualizaram -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-users me-2"></i>
                            Usuários que Visualizaram a Publicação
                            @if(isset($stats['total_usuarios_logs']) && $stats['total_usuarios_logs'] > 0)
                                ({{ $stats['total_usuarios_logs'] }} {{ $stats['total_usuarios_logs'] == 1 ? 'usuário único' : 'usuários únicos' }})
                            @endif
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Data/Hora</th>
                                        <th>MAC</th>
                                        <th>IP</th>
                                        <th>Dispositivo</th>
                                        <th>Hotspot</th>
                                        <th>Cliente</th>
                                        <th>Tempo Sessão</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($stats['logs_acesso'] ?? [] as $log)
                                    <tr>
                                        <td>
                                            <small>{{ $log['created_at'] }}</small>
                                        </td>
                                        <td>
                                            <code class="text-muted">{{ $log['mac_parcial'] }}</code>
                                        </td>
                                        <td>
                                            <small>{{ $log['ip_address'] }}</small>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">
                                                <i class="ph ph-{{ $log['dispositivo'] === 'Celular' ? 'device-mobile' : ($log['dispositivo'] === 'Desktop' ? 'desktop' : 'tablet') }} me-1"></i>
                                                {{ $log['dispositivo'] }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ $log['hotspot'] }}</small>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ $log['cliente'] }}</small>
                                        </td>
                                        <td>
                                            <small>{{ $log['tempo_sessao'] > 0 ? floor($log['tempo_sessao'] / 60) . 'min' : '-' }}</small>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">
                                            <i class="ph-duotone ph-info me-2"></i>
                                            Nenhum registro de visualização disponível ainda
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if(isset($stats['logs_acesso']) && count($stats['logs_acesso']) >= 30)
                        <div class="text-center mt-3">
                            <small class="text-muted">
                                <i class="ph-duotone ph-info me-1"></i>
                                Mostrando os 30 registros mais recentes
                            </small>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Walled Gardens (se houver) -->
        @if($publicacao->walledGardens && $publicacao->walledGardens->count() > 0)
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="ph-duotone ph-shield-check me-2"></i>
                            Walled Gardens Configurados
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($publicacao->walledGardens as $wg)
                            <div class="col-md-4 mb-3">
                                <div class="card bg-light h-100">
                                    <div class="card-body">
                                        <div class="d-flex align-items-start">
                                            <div class="me-3">
                                                @if($wg->tipo === 'domain')
                                                    <i class="ph-duotone ph-globe text-primary" style="font-size: 2rem;"></i>
                                                @elseif($wg->tipo === 'ip')
                                                    <i class="ph-duotone ph-broadcast text-success" style="font-size: 2rem;"></i>
                                                @else
                                                    <i class="ph-duotone ph-network text-info" style="font-size: 2rem;"></i>
                                                @endif
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1">
                                                    @if($wg->tipo === 'domain')
                                                        🌐 Domínio
                                                    @elseif($wg->tipo === 'ip')
                                                        📡 IP
                                                    @else
                                                        🔒 Subnet
                                                    @endif
                                                </h6>
                                                <code class="d-block mb-2">{{ $wg->endereco }}</code>
                                                @if($wg->descricao)
                                                <small class="text-muted">{{ $wg->descricao }}</small>
                                                @endif
                                                <div class="mt-2">
                                                    <span class="badge bg-{{ $wg->ativo ? 'success' : 'secondary' }}">
                                                        {{ $wg->ativo ? 'Ativo' : 'Inativo' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Dados para os gráficos
    const impressoesPorDia = @json($stats['impressoes_por_dia'] ?? []);
    const cliquesPorHora = @json($stats['cliques_por_hora'] ?? []);

    // Configuração comum de cores
    const colors = {
        primary: '#4680ff',
        success: '#2ed8b6',
        warning: '#ffb64d',
        danger: '#ff5370',
        info: '#00bcd4'
    };

    // Gráfico de Impressões e Cliques por Dia
    const ctxImpressoesCliques = document.getElementById('impressoesCliquesChart');
    if (ctxImpressoesCliques) {
        new Chart(ctxImpressoesCliques, {
            type: 'line',
            data: {
                labels: impressoesPorDia.map(d => {
                    const date = new Date(d.data);
                    return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
                }),
                datasets: [
                    {
                        label: 'Impressões',
                        data: impressoesPorDia.map(d => d.impressoes),
                        borderColor: colors.primary,
                        backgroundColor: colors.primary + '20',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Cliques',
                        data: impressoesPorDia.map(d => d.cliques),
                        borderColor: colors.success,
                        backgroundColor: colors.success + '20',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    }

    // Gráfico de Cliques por Hora
    const ctxCliquesPorHora = document.getElementById('cliquesPorHoraChart');
    if (ctxCliquesPorHora) {
        new Chart(ctxCliquesPorHora, {
            type: 'bar',
            data: {
                labels: cliquesPorHora.map(h => h.hora + 'h'),
                datasets: [{
                    label: 'Cliques',
                    data: cliquesPorHora.map(h => h.total),
                    backgroundColor: colors.warning,
                    borderColor: colors.warning,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            title: function(context) {
                                return 'Horário: ' + context[0].label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    }
</script>
@endpush