@extends('dashboard.layout')

@section('content')
    <section class="grid gap-6 xl:grid-cols-[1.8fr,1fr]">
        <div class="overflow-hidden rounded-[32px] bg-[linear-gradient(135deg,#161950_0%,#1e3a8a_45%,#465fff_100%)] p-6 text-white shadow-theme-lg sm:p-8">
            <p class="text-sm uppercase tracking-[0.3em] text-white/65">Focused progress</p>
            <h2 class="mt-3 max-w-2xl text-3xl font-semibold leading-tight sm:text-4xl">{{ auth()->user()->name }}, keep building steady progress across your enrolled courses.</h2>
            <p class="mt-4 max-w-2xl text-sm text-white/75 sm:text-base">Pick up where you left off, review course progress, and keep your learning routine moving.</p>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('courses.index') }}" class="inline-flex items-center justify-center rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-theme-xs transition hover:bg-slate-100">Explore more courses</a>
                <a href="#my-courses" class="inline-flex items-center justify-center rounded-2xl border border-white/20 bg-white/10 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/15">View my courses</a>
            </div>
        </div>

        <div class="cepi-panel p-6">
            <p class="text-sm font-medium text-slate-500">Account snapshot</p>
            <dl class="mt-5 space-y-4">
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Email</dt><dd class="text-sm font-semibold text-slate-900">{{ auth()->user()->email }}</dd></div>
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Mobile</dt><dd class="text-sm font-semibold text-slate-900">{{ auth()->user()->phone ?: 'Not added yet' }}</dd></div>
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3"><dt class="text-sm text-slate-500">Gender</dt><dd class="text-sm font-semibold capitalize text-slate-900">{{ str_replace('_', ' ', auth()->user()->gender ?: 'Not set') }}</dd></div>
            </dl>
        </div>
    </section>

    <section id="my-courses" class="cepi-panel p-6 sm:p-8">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-sm font-medium text-brand-600">My Courses</p>
                <h2 class="text-2xl font-semibold text-slate-900">Continue learning</h2>
                <p class="mt-1 text-sm text-slate-500">A focused list of your active enrollments and current progress.</p>
            </div>
            <a href="{{ route('courses.index') }}" class="inline-flex items-center text-sm font-semibold text-brand-600 hover:text-brand-700">Browse catalog</a>
        </div>

        @if ($enrollments->isNotEmpty())
            <div class="mt-8 grid gap-6 lg:grid-cols-2 2xl:grid-cols-3">
                @foreach ($enrollments as $enrollment)
                    @php
                        $course = $enrollment->course;
                        $progress = (int) ($enrollment->progress_percent ?? 0);
                        $lessonCount = $course?->modules->sum(fn ($module) => $module->lessons->count()) ?? 0;
                        $courseProgressRows = $progressByCourse->get($course?->id, collect());
                        $latestProgress = $courseProgressRows->first();
                    @endphp
                    <article class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-theme-xs transition duration-200 hover:-translate-y-1 hover:shadow-theme-sm">
                        <div class="relative aspect-[16/9] overflow-hidden bg-slate-100">
                            @if ($course?->thumbnail)
                                <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}" class="h-full w-full object-cover" />
                            @else
                                <div class="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_45%,#e0e7ff_100%)]"><div class="rounded-2xl border border-white/50 bg-white/60 px-4 py-2 text-sm font-semibold text-slate-700">{{ $course?->title }}</div></div>
                            @endif
                            <div class="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-slate-700 shadow-theme-xs">Enrolled {{ optional($enrollment->enrolled_at)->format('M Y') }}</div>
                        </div>

                        <div class="p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <h3 class="text-lg font-semibold text-slate-900">{{ $course?->title }}</h3>
                                    <p class="mt-1 text-sm text-slate-500">{{ $course?->instructor?->name ?: 'Instructor pending' }}</p>
                                </div>
                                <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">{{ $lessonCount }} lessons</span>
                            </div>

                            <div class="mt-5">
                                <div class="mb-2 flex items-center justify-between text-xs font-semibold uppercase tracking-[0.18em] text-slate-400"><span>Progress</span><span>{{ $progress }}%</span></div>
                                <div class="h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full bg-brand-500" style="width: {{ $progress }}%"></div></div>
                            </div>

                            <div class="mt-5 grid gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
                                @if ($latestProgress)
                                    <div class="flex items-start justify-between gap-3">
                                        <span>Last watched</span>
                                        <span class="max-w-[58%] text-right font-semibold text-slate-900">{{ $latestProgress->lesson?->title }}</span>
                                    </div>
                                    <div class="flex items-center justify-between gap-3">
                                        <span>Watched time</span>
                                        <span class="font-semibold text-slate-900">{{ gmdate('H:i:s', (int) $latestProgress->watched_seconds) }}</span>
                                    </div>
                                    <div class="flex items-center justify-between gap-3">
                                        <span>Watch sessions</span>
                                        <span class="font-semibold text-slate-900">{{ (int) $latestProgress->watch_count }}</span>
                                    </div>
                                @endif
                                <div class="flex items-center justify-between gap-3">
                                    <span>Activation date</span>
                                    <span class="font-semibold text-slate-900">{{ optional($enrollment->enrolled_at)->format('d M Y') }}</span>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <span>Expiry date</span>
                                    <span class="font-semibold text-slate-900">{{ $enrollment->expires_at ? $enrollment->expires_at->format('d M Y') : 'Lifetime' }}</span>
                                </div>
                            </div>

                            <div class="mt-5 flex items-center justify-between gap-3">
                                <div class="text-sm text-slate-500">{{ $progress > 0 ? 'Momentum is building. Pick up where you left off.' : 'Ready to begin your first lesson.' }}</div>
                                <a href="{{ route('student.course.hub', $course->slug) }}" class="inline-flex shrink-0 items-center justify-center rounded-2xl bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white shadow-theme-xs transition hover:bg-brand-600">Start Learning</a>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="mt-8 rounded-[28px] border border-dashed border-slate-300 bg-slate-50 px-6 py-14 text-center">
                <h3 class="text-xl font-semibold text-slate-900">No active courses yet</h3>
                <p class="mx-auto mt-2 max-w-lg text-sm text-slate-500">Enroll in a course to unlock your learning queue here.</p>
            </div>
        @endif
    </section>

    @if (($recentLessonProgress ?? collect())->isNotEmpty())
        <section class="cepi-panel p-6 sm:p-8">
            <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                <div>
                    <p class="text-sm font-medium text-brand-600">Watch History</p>
                    <h2 class="text-2xl font-semibold text-slate-900">Recent video activity</h2>
                    <p class="mt-1 text-sm text-slate-500">Partial watch time, repeat sessions, and last activity are recorded from the protected player.</p>
                </div>
            </div>

            <div class="mt-6 overflow-hidden rounded-[24px] border border-slate-200 bg-white">
                <div class="grid grid-cols-12 gap-4 border-b border-slate-100 bg-slate-50 px-5 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
                    <div class="col-span-5">Lecture</div>
                    <div class="col-span-3">Course</div>
                    <div class="col-span-2">Watched</div>
                    <div class="col-span-1">Plays</div>
                    <div class="col-span-1 text-right">Last</div>
                </div>
                <div class="divide-y divide-slate-100">
                    @foreach ($recentLessonProgress as $progressRow)
                        <div class="grid grid-cols-12 gap-4 px-5 py-4 text-sm text-slate-600">
                            <div class="col-span-5 min-w-0">
                                <p class="truncate font-semibold text-slate-900">{{ $progressRow->lesson?->title }}</p>
                                <p class="mt-1 text-xs text-slate-400">{{ $progressRow->completed ? 'Completed' : 'In progress' }}</p>
                            </div>
                            <div class="col-span-3 truncate">{{ $progressRow->lesson?->module?->course?->title }}</div>
                            <div class="col-span-2 font-semibold text-slate-900">{{ gmdate('H:i:s', (int) $progressRow->watched_seconds) }}</div>
                            <div class="col-span-1 font-semibold text-slate-900">{{ (int) $progressRow->watch_count }}</div>
                            <div class="col-span-1 text-right text-xs text-slate-500">{{ $progressRow->last_watched_at ? $progressRow->last_watched_at->diffForHumans() : 'Open' }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if (($pendingPayments ?? collect())->isNotEmpty())
        <section class="cepi-panel p-6 sm:p-8">
            <div>
                <p class="text-sm font-medium text-brand-600">Payment Review</p>
                <h2 class="text-2xl font-semibold text-slate-900">Pending course requests</h2>
                <p class="mt-1 text-sm text-slate-500">These payments are waiting for admin confirmation before the course becomes active.</p>
            </div>

            <div class="mt-8 grid gap-4 lg:grid-cols-2">
                @foreach ($pendingPayments as $payment)
                    <div class="rounded-[26px] border border-amber-200 bg-amber-50 p-5">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <h3 class="text-lg font-semibold text-slate-900">{{ $payment->course?->title }}</h3>
                                <p class="mt-1 text-sm text-slate-600">Reference: {{ $payment->transfer_reference }}</p>
                            </div>
                            <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-amber-700">Pending</span>
                        </div>
                        <div class="mt-4 text-sm text-slate-600">
                            Submitted {{ optional($payment->submitted_at)->format('d M Y, h:i A') }}
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif
@endsection