@extends('layouts.app')

@section('content')
<style>
    .stat-card {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        border-radius: 12px;
        padding: 1.5rem;
        color: white;
        transition: transform 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-5px);
    }
    .stat-card.blue {
        --gradient-start: #3B82F6;
        --gradient-end: #2563EB;
    }
    .stat-card.green {
        --gradient-start: #22C55E;
        --gradient-end: #16A34A;
    }
    .stat-card.purple {
        --gradient-start: #A855F7;
        --gradient-end: #9333EA;
    }
    .stat-card.orange {
        --gradient-start: #F97316;
        --gradient-end: #EA580C;
    }
    .icon-box {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        padding: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .activity-item {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: background 0.3s ease;
    }
    .activity-item:hover {
        background: #e9ecef;
    }
    .progress-bar-custom {
        height: 8px;
        border-radius: 4px;
    }
</style>

<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h2 mb-2">
                        <i class="bi bi-bar-chart-fill text-primary me-2"></i>
                        Analíticas de Visitas
                    </h1>
                    <p class="text-muted">
                        Estadísticas de la página: <span class="fw-bold text-primary">/{{ $pageUrl }}</span>
                    </p>
                </div>
                <div class="text-end">
                    <small class="text-muted">Última actualización</small>
                    <p class="fw-bold mb-0">{{ now()->format('d/m/Y H:i') }}</p>
                </div>
            </div>
        </div>
    </div>

    </div>

    <!-- Tarjetas de Métricas Principales -->
    <div class="row g-3 mb-4">
        <!-- Total Pageviews -->
        <div class="col-md-6 col-lg-3">
            <div class="stat-card blue shadow">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-bar-chart-fill fs-3"></i>
                    </div>
                    <small class="opacity-75">Total</small>
                </div>
                <h2 class="display-5 fw-bold mb-1">{{ number_format($totalPageviews) }}</h2>
                <p class="mb-0 opacity-75">Pageviews</p>
            </div>
        </div>

        <!-- Visitantes Únicos -->
        <div class="col-md-6 col-lg-3">
            <div class="stat-card green shadow">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-people-fill fs-3"></i>
                    </div>
                    <small class="opacity-75">Únicos</small>
                </div>
                <h2 class="display-5 fw-bold mb-1">{{ number_format($uniqueVisitors) }}</h2>
                <p class="mb-0 opacity-75">Visitantes</p>
            </div>
        </div>

        <!-- Visitas Hoy -->
        <div class="col-md-6 col-lg-3">
            <div class="stat-card purple shadow">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-calendar-check-fill fs-3"></i>
                    </div>
                    <small class="opacity-75">Hoy</small>
                </div>
                @php
                    $todayViews = \App\Models\AnalyticsVisit::where('page_url', $pageUrl)->whereDate('created_at', today())->count();
                @endphp
                <h2 class="display-5 fw-bold mb-1">{{ number_format($todayViews) }}</h2>
                <p class="mb-0 opacity-75">Visitas</p>
            </div>
        </div>

        <!-- Promedio por Visitante -->
        <div class="col-md-6 col-lg-3">
            <div class="stat-card orange shadow">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-graph-up-arrow fs-3"></i>
                    </div>
                    <small class="opacity-75">Promedio</small>
                </div>
                @php
                    $avgPerVisitor = $uniqueVisitors > 0 ? round($totalPageviews / $uniqueVisitors, 1) : 0;
                @endphp
                <h2 class="display-5 fw-bold mb-1">{{ $avgPerVisitor }}x</h2>
                <p class="mb-0 opacity-75">Por visitante</p>
            </div>
        </div>
    </div>
                    <span class="text-sm font-medium opacity-80">Hoy</span>
                </div>
                <div>
                    @php
                        $todayViews = \App\Models\AnalyticsVisit::where('page_url', $pageUrl)->whereDate('created_at', today())->count();
                    @endphp
                    <p class="text-4xl font-bold mb-1">{{ number_format($todayViews) }}</p>
                    <p class="text-sm opacity-80">Visitas</p>
                </div>
            </div>

            <!-- Promedio por Visitante -->
            <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl shadow-lg p-6 text-white transform transition hover:scale-105">
                <div class="flex items-center justify-between mb-4">
                    <div class="bg-white bg-opacity-20 rounded-lg p-3">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <span class="text-sm font-medium opacity-80">Promedio</span>
                </div>
                <div>
                    @php
                        $avgPerVisitor = $uniqueVisitors > 0 ? round($totalPageviews / $uniqueVisitors, 1) : 0;
                    @endphp
                    <p class="text-4xl font-bold mb-1">{{ $avgPerVisitor }}x</p>
                    <p class="text-sm opacity-80">Por visitante</p>
                </div>
            </div>
        </div>

        </div>

        <!-- Gráfico de Tendencia -->
        @if($dailyStats->isNotEmpty())
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Gráfico Principal -->
            <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                        📈 Tendencia de Visitas (Últimos 30 días)
                    </h2>
                    <div class="flex space-x-2">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                            <span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
                            Visitas
                        </span>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                            <span class="w-2 h-2 bg-green-600 rounded-full mr-2"></span>
                            Únicos
                        </span>
                    </div>
                </div>
                <div class="relative" style="height: 300px;">
                    <canvas id="trendsChart"></canvas>
                </div>
            </div>

            <!-- Resumen Estadístico -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">📊 Resumen Estadístico</h3>
                <div class="space-y-4">
                    @php
                        $totalLast30 = $dailyStats->sum('views');
                        $avgDaily = $dailyStats->avg('views');
                        $maxDay = $dailyStats->sortByDesc('views')->first();
                        $minDay = $dailyStats->sortBy('views')->where('views', '>', 0)->first();
                    @endphp
                    
                    <div class="border-l-4 border-blue-500 pl-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Total últimos 30 días</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($totalLast30) }}</p>
                    </div>
                    
                    <div class="border-l-4 border-green-500 pl-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Promedio diario</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($avgDaily, 1) }}</p>
                    </div>
                    
                    @if($maxDay)
                    <div class="border-l-4 border-orange-500 pl-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Día más activo</p>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($maxDay->views) }} visitas</p>
                        <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($maxDay->date)->format('d/m/Y') }}</p>
                    </div>
                    @endif
                    
                    @if($minDay)
                    <div class="border-l-4 border-purple-500 pl-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Día menos activo</p>
                        <p class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($minDay->views) }} visitas</p>
                        <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($minDay->date)->format('d/m/Y') }}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Tabla de Estadísticas Diarias -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                Detalle Diario
            </h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-900">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Fecha
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Visitas
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Visitantes Únicos
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Promedio
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($dailyStats->take(10) as $stat)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        {{ \Carbon\Carbon::parse($stat->date)->format('d/m/Y') }}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-lg">
                                        <span class="text-blue-600 dark:text-blue-400 font-bold text-sm">{{ number_format($stat->views) }}</span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="w-32 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                                            @php
                                                $percentage = $maxDay ? ($stat->views / $maxDay->views) * 100 : 0;
                                            @endphp
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-green-100 dark:bg-green-900 rounded-lg">
                                        <span class="text-green-600 dark:text-green-400 font-bold text-sm">{{ number_format($stat->unique_visitors) }}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                    {{ $stat->unique_visitors > 0 ? number_format($stat->views / $stat->unique_visitors, 1) : 0 }}x
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Últimas Visitas -->
        @if($recentVisits->isNotEmpty())
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                <svg class="w-6 h-6 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                Actividad Reciente
            </h2>
            <div class="space-y-3">
                @foreach($recentVisits as $visit)
                <div class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="ml-4 flex-1">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $visit->ip_address }}
                            </p>
                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                {{ $visit->created_at->diffForHumans() }}
                            </span>
                        </div>
                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 truncate" title="{{ $visit->user_agent }}">
                            {{ Str::limit($visit->user_agent, 100) }}
                        </p>
                        <div class="flex items-center mt-2 space-x-2">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                {{ $visit->created_at->format('d/m/Y H:i:s') }}
                            </span>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        @if($totalPageviews === 0)
        <div class="bg-gradient-to-r from-yellow-50 to-yellow-100 dark:from-yellow-900 dark:to-yellow-800 border-l-4 border-yellow-400 p-6 rounded-xl">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                        No hay visitas registradas aún
                    </h3>
                    <p class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                        Asegúrate de que el middleware esté configurado correctamente en la ruta <strong>/empresas</strong>.
                    </p>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    @if($dailyStats->isNotEmpty())
    // Preparar datos para el gráfico
    const labels = {!! json_encode($dailyStats->pluck('date')->map(function($date) {
        return \Carbon\Carbon::parse($date)->format('d/m');
    })->reverse()->values()) !!};
    
    const visitsData = {!! json_encode($dailyStats->pluck('views')->reverse()->values()) !!};
    const uniqueData = {!! json_encode($dailyStats->pluck('unique_visitors')->reverse()->values()) !!};

    // Configuración del gráfico
    const ctx = document.getElementById('trendsChart');
    
    const gradient1 = ctx.getContext('2d').createLinearGradient(0, 0, 0, 300);
    gradient1.addColorStop(0, 'rgba(59, 130, 246, 0.3)');
    gradient1.addColorStop(1, 'rgba(59, 130, 246, 0.0)');
    
    const gradient2 = ctx.getContext('2d').createLinearGradient(0, 0, 0, 300);
    gradient2.addColorStop(0, 'rgba(34, 197, 94, 0.3)');
    gradient2.addColorStop(1, 'rgba(34, 197, 94, 0.0)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Visitas',
                data: visitsData,
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: gradient1,
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointHoverRadius: 6,
                pointBackgroundColor: 'rgb(59, 130, 246)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }, {
                label: 'Visitantes Únicos',
                data: uniqueData,
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: gradient2,
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointHoverRadius: 6,
                pointBackgroundColor: 'rgb(34, 197, 94)',
                pointBorderColor: '#fff',
                pointBorderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleColor: '#fff',
                    bodyColor: '#fff',
                    borderColor: 'rgba(255, 255, 255, 0.1)',
                    borderWidth: 1,
                    displayColors: true,
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += new Intl.NumberFormat('es-ES').format(context.parsed.y);
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                        drawBorder: false
                    },
                    ticks: {
                        callback: function(value) {
                            return new Intl.NumberFormat('es-ES').format(value);
                        },
                        font: {
                            size: 11
                        }
                    }
                },
                x: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        font: {
                            size: 11
                        },
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });
    @endif
});
</script>
@endsection