@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Activity Statistics'))
@section('page_heading', __('dashboard.Activity Statistics'))
@section('page_subtitle', __('dashboard.Activity statistics subtitle'))
@section('skip_page_hero', true)

@section('content')
@php
    $statisticsItems = collect($statistics);
    $totalTimeSpent = $statisticsItems->sum('total_time');
    $selectedTeacherName = optional($teachers->firstWhere('id', (int) ($filters['teacher'] ?? null)))->name;
    $periodLabels = [
        'week' => __('dashboard.Last Week'),
        'month' => __('dashboard.Last Month'),
        'custom' => __('dashboard.Custom Period'),
    ];
@endphp

<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <h1 class="text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Activity Statistics') }}</h1>
        <p class="mt-3 max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ __('dashboard.Activity statistics subtitle') }}</p>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Tracked Events') }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($statisticsItems->count()) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Tracked Time') }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($totalTimeSpent) }}</p>
            <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.Total Time Spent (Seconds)') }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Selected Teacher') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $selectedTeacherName ?: '—' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Report Period') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">{{ $periodLabels[$period] ?? __('dashboard.Last Week') }}</p>
        </article>
    </section>

    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form action="{{ route('admin.statistics.activity-tracking') }}" method="GET" class="grid gap-4 md:grid-cols-2 xl:grid-cols-7">
            <select name="stage" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ __('dashboard.Select Stage') }}</option>
                @foreach($stages as $stage)
                    <option value="{{ $stage->id }}" {{ ($filters['stage'] ?? null) == $stage->id ? 'selected' : '' }}>{{ $stage->name }}</option>
                @endforeach
            </select>

            <select name="grade" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ __('dashboard.Select Grade') }}</option>
                @foreach($grades as $grade)
                    <option value="{{ $grade->id }}" {{ ($filters['grade'] ?? null) == $grade->id ? 'selected' : '' }}>{{ $grade->stage->name . ' - ' . $grade->name }}</option>
                @endforeach
            </select>

            <select name="school_class" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ __('dashboard.Select School Class') }}</option>
                @foreach($schoolClasses as $schoolClass)
                    <option value="{{ $schoolClass->id }}" {{ ($filters['school_class'] ?? null) == $schoolClass->id ? 'selected' : '' }}>{{ $schoolClass->grade->name . ' - ' . $schoolClass->name }}</option>
                @endforeach
            </select>

            <select name="teacher" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="">{{ __('dashboard.Select Teacher') }}</option>
                @foreach($teachers as $teacher)
                    <option value="{{ $teacher->id }}" {{ ($filters['teacher'] ?? null) == $teacher->id ? 'selected' : '' }}>{{ $teacher->name }}</option>
                @endforeach
            </select>

            <select name="period" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                <option value="week" {{ $period == 'week' ? 'selected' : '' }}>{{ __('dashboard.Last Week') }}</option>
                <option value="month" {{ $period == 'month' ? 'selected' : '' }}>{{ __('dashboard.Last Month') }}</option>
                <option value="custom" {{ $period == 'custom' ? 'selected' : '' }}>{{ __('dashboard.Custom Period') }}</option>
            </select>

            <input type="date" name="start_date" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" value="{{ $filters['start_date'] ?? '' }}" placeholder="{{ __('dashboard.Start Date') }}">
            <input type="date" name="end_date" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" value="{{ $filters['end_date'] ?? '' }}" placeholder="{{ __('dashboard.End Date') }}">

            <button type="submit" class="inline-flex h-11 items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 text-sm font-bold text-white transition hover:bg-brand-700">
                <i class="fa-solid fa-filter text-xs"></i>
                <span>{{ __('dashboard.Filter') }}</span>
            </button>

            <a href="{{ route('admin.statistics.activity-tracking') }}" class="inline-flex h-11 items-center justify-center rounded-2xl border border-surface-200 bg-white px-5 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
                {{ __('dashboard.Reset') }}
            </a>
        </form>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Statistics Results') }}</h2>
            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.Results') }}: {{ number_format($statisticsItems->count()) }}</p>
        </div>

        @if($statisticsItems->isEmpty())
            <div class="px-6 py-16 text-center">
                <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                    <i class="fa-solid fa-chart-column text-3xl"></i>
                </div>
                <h3 class="mt-6 text-xl font-black text-surface-900 dark:text-white">{{ __('dashboard.No activity statistics found') }}</h3>
            </div>
        @else
            <div class="grid gap-6 p-6 xl:grid-cols-[minmax(0,1.1fr)_360px]">
                <div class="overflow-x-auto rounded-xl border border-surface-200 dark:border-surface-800">
                    <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                        <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                            <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                                <th class="px-6 py-4">{{ __('dashboard.Event') }}</th>
                                <th class="px-6 py-4">{{ __('dashboard.Total Time Spent (Seconds)') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                            @foreach($statisticsItems as $stat)
                                <tr class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                    <td class="px-6 py-5 text-sm font-bold text-surface-900 dark:text-white">{{ $stat->event ?: __('dashboard.Unknown events') }}</td>
                                    <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ number_format($stat->total_time) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-surface-50/70 dark:bg-surface-800/30">
                            <tr>
                                <th class="px-6 py-4 text-right text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Total Time for All Events') }}</th>
                                <th class="px-6 py-4 text-right text-sm font-black text-surface-900 dark:text-white">{{ number_format($totalTimeSpent) }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="rounded-xl border border-surface-200 p-5 dark:border-surface-800">
                    <h3 class="text-base font-black text-surface-900 dark:text-white">{{ __('dashboard.Activity Statistics') }}</h3>
                    <div class="mt-5 space-y-4">
                        @foreach($statisticsItems as $stat)
                            @php
                                $percentage = $totalTimeSpent > 0 ? min(100, round(($stat->total_time / $totalTimeSpent) * 100, 1)) : 0;
                            @endphp
                            <div>
                                <div class="mb-2 flex items-center justify-between gap-3 text-sm">
                                    <span class="font-bold text-surface-900 dark:text-white">{{ $stat->event ?: __('dashboard.Unknown events') }}</span>
                                    <span class="text-surface-500 dark:text-surface-400">{{ number_format($stat->total_time) }}</span>
                                </div>
                                <div class="h-2 rounded-full bg-surface-100 dark:bg-surface-800">
                                    <div class="h-2 rounded-full bg-brand-600" style="width: {{ $percentage }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </section>
</div>
@endsection