@extends('layouts.app')

@section('title', 'Admin - Resumen')
@section('content')

<div class="p-4 w-full">

    <!-- Header -->
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <h1 class="text-3xl font-bold dark:text-gray-400">Resumen</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Dashboard de la campaña activa.
        </p>

        <!-- Meta campaña (rellena por JS) -->
        <div id="campanaMeta" class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-3"></div>
    </div>

    <!-- Validaciones / mensajes -->
    @include('../validaciones')

    <!-- KPIs -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <p class="text-xs text-gray-500 dark:text-gray-400">Total de participantes</p>
            <p id="kpiTotal" class="text-3xl font-bold mt-2 dark:text-gray-200">-</p>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <p class="text-xs text-gray-500 dark:text-gray-400">Pico de participación (día y hora)</p>
            <p id="kpiPico" class="mt-2 text-sm text-gray-700 dark:text-gray-300">-</p>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <p class="text-xs text-gray-500 dark:text-gray-400">Top palabras (equipo)</p>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Se calcula a partir del campo <b>equipo</b> de los registros.
            </p>
        </div>
    </div>

    <!-- Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <h2 class="text-lg font-semibold dark:text-gray-200">Participaciones por día (últimos 30 días)</h2>
            <div class="mt-3">
                <canvas id="chartPorDia"></canvas>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <h2 class="text-lg font-semibold dark:text-gray-200">Participaciones por semana (últimas 12 semanas)</h2>
            <div class="mt-3">
                <canvas id="chartPorSemana"></canvas>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <h2 class="text-lg font-semibold dark:text-gray-200">Rango de edad</h2>
            <div class="mt-3 h-70">
                <canvas id="chartEdades" class="w-full h-full"></canvas>
            </div>

        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <h2 class="text-lg font-semibold dark:text-gray-200">Palabras más utilizadas (equipo)</h2>
            <div class="mt-3 h-70">
                <canvas id="chartPalabras"></canvas>
            </div>
        </div>
    </div>

    <!-- Estado de carga / errores -->
    <div id="resumenEstado" class="mt-6 text-sm text-gray-600 dark:text-gray-400"></div>
</div>

@endsection

@vite('resources/js/admin/resumen_campanas.js')