@extends('dashboard.layout')

@section('content')
    <section class="grid gap-6 xl:grid-cols-[1.6fr,1fr]">
        <div class="overflow-hidden rounded-[32px] bg-[linear-gradient(135deg,#0f172a_0%,#1d4ed8_45%,#2563eb_100%)] p-6 text-white shadow-theme-lg sm:p-8">
            <p class="text-sm uppercase tracking-[0.3em] text-white/65">Teaching Pipeline</p>
            <h2 class="mt-3 max-w-2xl text-3xl font-semibold leading-tight sm:text-4xl">Manage your courses, monitor enrollments, and move drafts toward publication.</h2>
            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('instructor.courses.create') }}" 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">Draft New Course</a>
                <a href="{{ route('instructor.enrollments') }}" 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">Review Enrollments</a>
            </div>
        </div>

        <div class="cepi-panel p-6">
            <p class="text-sm font-medium text-slate-500">Instructor 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">Name</dt><dd class="text-sm font-semibold text-slate-900">{{ auth()->user()->name }}</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">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">Role</dt><dd class="text-sm font-semibold text-slate-900">Instructor</dd></div>
            </dl>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.2fr,1fr]">
        <div class="cepi-panel p-6 sm:p-8">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-brand-600">Course Library</p>
                    <h2 class="text-2xl font-semibold text-slate-900">Your recent courses</h2>
                </div>
                <a href="{{ route('instructor.courses.index') }}" class="text-sm font-semibold text-brand-600 hover:text-brand-700">Manage all</a>
            </div>

            @if ($courses->isNotEmpty())
                <div class="mt-6 grid gap-4 sm:grid-cols-2">
                    @foreach ($courses as $course)
                        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                            <div class="flex items-center justify-between gap-3">
                                <h3 class="text-lg font-semibold text-slate-900">{{ $course->title }}</h3>
                                <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $course->status === 'published' ? 'bg-success-50 text-success-600' : 'bg-warning-50 text-amber-700' }}">
                                    {{ str_replace('_', ' ', ucfirst($course->status)) }}
                                </span>
                            </div>
                            <p class="mt-2 text-sm text-slate-500">{{ \Illuminate\Support\Str::limit($course->description, 110) ?: 'No description added yet.' }}</p>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="mt-6 rounded-3xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center text-sm text-slate-500">
                    No courses yet. Start with your first draft and build from there.
                </div>
            @endif
        </div>

        <div class="cepi-panel p-6 sm:p-8">
            <p class="text-sm font-medium text-brand-600">Recent Activity</p>
            <h2 class="text-2xl font-semibold text-slate-900">Latest enrollments</h2>

            @if ($recentEnrollments->isNotEmpty())
                <div class="mt-6 space-y-4">
                    @foreach ($recentEnrollments as $enrollment)
                        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-4">
                            <p class="text-sm font-semibold text-slate-900">{{ $enrollment->user->name }}</p>
                            <p class="mt-1 text-sm text-slate-500">{{ $enrollment->course->title }}</p>
                            <p class="mt-2 text-xs font-medium uppercase tracking-[0.2em] text-slate-400">{{ optional($enrollment->enrolled_at)->diffForHumans() }}</p>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="mt-6 rounded-3xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center text-sm text-slate-500">
                    No recent enrollments yet.
                </div>
            @endif
        </div>
    </section>
@endsection