@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    {{-- Tarjetas de estadísticas --}}
    <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
        @if ($isSuperAdmin)
            <x-card class="flex items-center gap-4">
                <div class="flex size-12 items-center justify-center rounded-xl bg-primary-light text-primary dark:bg-primary/20">
                    <i class="fa-solid fa-users text-lg"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Usuarios</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['users_total'] }}</p>
                </div>
            </x-card>

            <x-card class="flex items-center gap-4">
                <div class="flex size-12 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                    <i class="fa-solid fa-user-check text-lg"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Usuarios activos</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $stats['users_active'] }}</p>
                </div>
            </x-card>
        @endif

        <x-card class="flex items-center gap-4">
            <div class="flex size-12 items-center justify-center rounded-xl bg-amber-100 text-amber-600 dark:bg-amber-500/15 dark:text-amber-400">
                <i class="fa-solid fa-clock text-lg"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Último acceso</p>
                <p class="text-sm font-semibold text-gray-900 dark:text-white">
                    {{ $stats['last_login']?->diffForHumans() ?? 'Primera sesión' }}
                </p>
            </div>
        </x-card>
    </div>

    @if ($isSuperAdmin)
        {{-- Gráficos de plataforma (solo superadmin) --}}
        <div class="mt-6 grid gap-6 lg:grid-cols-3">
            <x-card class="lg:col-span-2">
                <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">Usuarios registrados por mes</h3>
                <div class="h-72"><canvas id="usersChart"></canvas></div>
            </x-card>

            <x-card>
                <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">Estado de usuarios</h3>
                <div class="h-72"><canvas id="statusChart"></canvas></div>
            </x-card>
        </div>

        @push('scripts')
            <script type="module">
                const primary = getComputedStyle(document.documentElement).getPropertyValue('--app-primary').trim() || '#4f46e5';
                const isDark = document.documentElement.classList.contains('dark');
                const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
                const textColor = isDark ? '#9ca3af' : '#6b7280';

                new window.Chart(document.getElementById('usersChart'), {
                    type: 'bar',
                    data: {
                        labels: @json($chartLabels),
                        datasets: [{
                            label: 'Usuarios',
                            data: @json($chartData),
                            backgroundColor: primary,
                            borderRadius: 8,
                            maxBarThickness: 48,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            y: { beginAtZero: true, ticks: { precision: 0, color: textColor }, grid: { color: gridColor } },
                            x: { ticks: { color: textColor }, grid: { display: false } },
                        },
                    },
                });

                new window.Chart(document.getElementById('statusChart'), {
                    type: 'doughnut',
                    data: {
                        labels: ['Activos', 'Inactivos'],
                        datasets: [{
                            data: [{{ $stats['users_active'] }}, {{ $stats['users_total'] - $stats['users_active'] }}],
                            backgroundColor: [primary, isDark ? '#374151' : '#e5e7eb'],
                            borderWidth: 0,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '65%',
                        plugins: { legend: { position: 'bottom', labels: { color: textColor } } },
                    },
                });
            </script>
        @endpush
    @else
        {{-- Bienvenida del usuario: la biblioteca llega con los proyectos/links (F004+). --}}
        <x-card class="mt-6">
            <div class="flex flex-col items-center justify-center gap-3 py-10 text-center">
                <span class="flex size-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/20">
                    <i class="fa-solid fa-bookmark text-xl"></i>
                </span>
                <h3 class="text-base font-semibold text-gray-900 dark:text-white">Tu biblioteca está lista para empezar</h3>
                <p class="max-w-md text-sm text-gray-500 dark:text-gray-400">
                    Pronto podrás guardar y organizar tus enlaces por proyectos y carpetas, con resúmenes
                    automáticos. Esta sección mostrará tus métricas cuando guardes tu primer enlace.
                </p>
            </div>
        </x-card>

        {{-- F015: recordatorios próximos --}}
        <x-card class="mt-6">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-bell text-amber-500"></i> Próximos recordatorios
                </h3>
                <a href="{{ route('reminders.index') }}"
                   class="text-sm text-primary hover:text-primary-dark">Ver todos</a>
            </div>
            @if($upcomingReminders->count() > 0)
                <ul class="space-y-3">
                    @foreach($upcomingReminders as $reminder)
                        <li class="flex items-start gap-3">
                            <span class="mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600 dark:bg-amber-500/15 dark:text-amber-300">
                                <i class="fa-regular fa-clock text-sm"></i>
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                    {{ $reminder->title }}
                                </p>
                                @if($reminder->link)
                                    <a href="{{ route('links.read', $reminder->link) }}"
                                       class="text-xs text-gray-500 dark:text-gray-400 hover:text-primary truncate inline-block max-w-full">
                                        {{ $reminder->link->display_title }}
                                    </a>
                                @endif
                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
                                    {{ $reminder->remind_at->format('d/m/Y H:i') }}
                                    <span class="text-gray-300 dark:text-gray-600">·</span>
                                    {{ $reminder->remind_at->diffForHumans() }}
                                </p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
                    No tienes recordatorios próximos.
                </p>
            @endif
        </x-card>
    @endif
@endsection