@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;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }
    .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;
        width: 50px;
        height: 50px;
    }
    .activity-item {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: background 0.3s ease;
    }
    .activity-item:hover {
        background: #e9ecef;
    }
    .chart-container {
        position: relative;
        height: 300px;
    }
</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 flex-wrap">
                <div class="mb-3 mb-md-0">
                    <h1 class="h2 mb-2 d-flex align-items-center">
                        <i class="bi bi-bar-chart-fill text-primary me-2"></i>
                        Analíticas de Visitas
                    </h1>
                    <p class="text-muted mb-0">
                        Estadísticas de la página: <span class="fw-bold text-primary">/{{ $pageUrl }}</span>
                    </p>
                </div>
                <div class="text-end">
                    <small class="text-muted d-block">Última actualización</small>
                    <span class="fw-bold">{{ now()->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>
    </div>

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

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

        <!-- Visitas Hoy -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="stat-card purple">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-calendar-check-fill fs-4"></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-6 fw-bold mb-1">{{ number_format($todayViews) }}</h2>
                <p class="mb-0 opacity-75 small">Visitas</p>
            </div>
        </div>

        <!-- Promedio por Visitante -->
        <div class="col-6 col-md-6 col-lg-3">
            <div class="stat-card orange">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="icon-box">
                        <i class="bi bi-graph-up-arrow fs-4"></i>
                    </div>
                    <small class="opacity-75">Promedio</small>
                </div>
                @php
                    $avgPerVisitor = $uniqueVisitors > 0 ? round($totalPageviews / $uniqueVisitors, 1) : 0;
                @endphp
                <h2 class="display-6 fw-bold mb-1">{{ $avgPerVisitor }}x</h2>
                <p class="mb-0 opacity-75 small">Por visitante</p>
            </div>
        </div>
    </div>

    @if($dailyStats->isNotEmpty())
    <!-- Gráfico y Resumen -->
    <div class="row g-3 mb-4">
        <!-- Gráfico -->
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-graph-up text-primary me-2"></i>
                            Tendencia de Visitas (Últimos 30 días)
                        </h5>
                        <div>
                            <span class="badge bg-primary me-1">
                                <span class="badge bg-primary rounded-circle p-1"></span> Visitas
                            </span>
                            <span class="badge bg-success">
                                <span class="badge bg-success rounded-circle p-1"></span> Únicos
                            </span>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="trendsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Resumen Estadístico -->
        <div class="col-lg-4">
            <div class="card shadow-sm h-100">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-clipboard-data text-primary me-2"></i>
                        Resumen Estadístico
                    </h5>
                    @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-start border-4 border-primary ps-3 mb-3">
                        <small class="text-muted">Total últimos 30 días</small>
                        <h3 class="mb-0">{{ number_format($totalLast30) }}</h3>
                    </div>
                    
                    <div class="border-start border-4 border-success ps-3 mb-3">
                        <small class="text-muted">Promedio diario</small>
                        <h3 class="mb-0">{{ number_format($avgDaily, 1) }}</h3>
                    </div>
                    
                    @if($maxDay)
                    <div class="border-start border-4 border-warning ps-3 mb-3">
                        <small class="text-muted">Día más activo</small>
                        <h4 class="mb-0">{{ number_format($maxDay->views) }} visitas</h4>
                        <small class="text-muted">{{ \Carbon\Carbon::parse($maxDay->date)->format('d/m/Y') }}</small>
                    </div>
                    @endif
                    
                    @if($minDay)
                    <div class="border-start border-4 border-info ps-3">
                        <small class="text-muted">Día menos activo</small>
                        <h4 class="mb-0">{{ number_format($minDay->views) }} visitas</h4>
                        <small class="text-muted">{{ \Carbon\Carbon::parse($minDay->date)->format('d/m/Y') }}</small>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Detalles -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-calendar3 text-primary me-2"></i>
                        Detalle Diario
                    </h5>
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Visitas</th>
                                    <th>Visitantes Únicos</th>
                                    <th>Promedio</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($dailyStats->take(10) as $stat)
                                <tr>
                                    <td class="fw-medium">{{ \Carbon\Carbon::parse($stat->date)->format('d/m/Y') }}</td>
                                    <td>
                                        <span class="badge bg-primary">{{ number_format($stat->views) }}</span>
                                        @php
                                            $percentage = $maxDay ? ($stat->views / $maxDay->views) * 100 : 0;
                                        @endphp
                                        <div class="progress mt-1" style="height: 4px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $percentage }}%"></div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success">{{ number_format($stat->unique_visitors) }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">
                                            {{ $stat->unique_visitors > 0 ? number_format($stat->views / $stat->unique_visitors, 1) : 0 }}x
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Actividad Reciente -->
    @if($recentVisits->isNotEmpty())
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-clock-history text-primary me-2"></i>
                        Actividad Reciente
                    </h5>
                    <div class="row g-2">
                        @foreach($recentVisits as $visit)
                        <div class="col-12">
                            <div class="activity-item d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-purple d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #A855F7, #9333EA);">
                                        <i class="bi bi-person-fill text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <span class="fw-bold">{{ $visit->ip_address }}</span>
                                        <small class="text-muted">{{ $visit->created_at->diffForHumans() }}</small>
                                    </div>
                                    <small class="text-muted d-block text-truncate" style="max-width: 100%;">
                                        {{ Str::limit($visit->user_agent, 100) }}
                                    </small>
                                    <small class="badge bg-light text-dark mt-1">
                                        {{ $visit->created_at->format('d/m/Y H:i:s') }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($totalPageviews === 0)
    <div class="alert alert-warning d-flex align-items-center" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <div>
            <strong>No hay visitas registradas aún.</strong>
            <p class="mb-0 small">Asegúrate de que el middleware esté configurado correctamente en la ruta <strong>/empresas</strong>.</p>
        </div>
    </div>
    @endif

    <!-- IPs Ignoradas -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-shield-fill-exclamation text-warning me-2"></i>
                            IPs Ignoradas
                        </h5>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addIpModal">
                            <i class="bi bi-plus-lg me-1"></i>
                            Agregar IP
                        </button>
                    </div>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if($ignoredIps->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 200px;">IP Address</th>
                                    <th>Descripción</th>
                                    <th style="width: 150px;">Agregada</th>
                                    <th style="width: 80px;" class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ignoredIps as $ignoredIp)
                                <tr>
                                    <td>
                                        <code class="text-primary">{{ $ignoredIp->ip_address }}</code>
                                    </td>
                                    <td>
                                        @if($ignoredIp->description)
                                            {{ $ignoredIp->description }}
                                        @else
                                            <span class="text-muted fst-italic">Sin descripción</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $ignoredIp->created_at->format('d/m/Y') }}</small>
                                    </td>
                                    <td class="text-center">
                                        <form action="{{ route('admin.analytics.ignored-ips.destroy', $ignoredIp->id) }}" method="POST" class="d-inline"
                                              onsubmit="return confirm('¿Estás seguro de eliminar esta IP de la lista de ignoradas?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="text-center py-5">
                        <i class="bi bi-shield-slash display-1 text-muted"></i>
                        <p class="text-muted mt-3">No hay IPs ignoradas aún</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addIpModal">
                            <i class="bi bi-plus-lg me-1"></i>
                            Agregar primera IP
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </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())
    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()) !!};

    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,
                    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);
                        }
                    }
                },
                x: {
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });
    @endif
});
</script>
@endsection

<!-- Modal para agregar IP ignorada -->
<div class="modal fade" id="addIpModal" tabindex="-1" aria-labelledby="addIpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addIpModalLabel">
                    <i class="bi bi-shield-fill-exclamation me-2"></i>
                    Agregar IP a Ignorar
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.analytics.ignored-ips.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ip_address" class="form-label">Dirección IP</label>
                        <input type="text" class="form-control @error('ip_address') is-invalid @enderror" 
                               id="ip_address" name="ip_address" 
                               placeholder="Ej: 192.168.1.100"
                               value="{{ old('ip_address') }}"
                               required>
                        <div class="form-text">
                            <small>Tu IP actual: <strong id="currentIp">Cargando...</strong></small>
                        </div>
                        @error('ip_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Descripción (opcional)</label>
                        <input type="text" class="form-control @error('description') is-invalid @enderror" 
                               id="description" name="description" 
                               placeholder="Ej: IP de Matias, Oficina principal"
                               value="{{ old('description') }}">
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-shield-plus me-1"></i>
                        Agregar IP
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Obtener IP actual del usuario
fetch('https://api.ipify.org?format=json')
    .then(response => response.json())
    .then(data => {
        document.getElementById('currentIp').textContent = data.ip;
        
        // Botón para usar IP actual
        const currentIpElement = document.getElementById('currentIp');
        currentIpElement.style.cursor = 'pointer';
        currentIpElement.title = 'Click para usar esta IP';
        currentIpElement.addEventListener('click', function() {
            document.getElementById('ip_address').value = data.ip;
        });
    })
    .catch(error => {
        document.getElementById('currentIp').textContent = 'No disponible';
    });

// Mostrar modal si hay errores de validación
@if($errors->has('ip_address') || $errors->has('description'))
    const addIpModal = new bootstrap.Modal(document.getElementById('addIpModal'));
    addIpModal.show();
@endif
</script>