@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'لوحة المدرس' : 'Teacher Dashboard')
@section('page_heading', app()->getLocale() === 'ar' ? 'لوحة المدرس' : 'Teacher Dashboard')
@section('page_subtitle', app()->getLocale() === 'ar' ? 'إدارة المقررات والمحتوى والأنشطة القادمة من مساحة واحدة.' : 'Manage courses, teaching content, and upcoming activity from one space.')
@section('skip_page_hero', true)
@section('page_content_wrapper_class', 'min-h-full')

@section('content')
    @php
        $isArabic = app()->getLocale() === 'ar';
    @endphp

    <div class="flex min-h-full flex-col gap-6">
        <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
                <div class="space-y-3">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-brand-600 dark:text-brand-300">
                        {{ $isArabic ? 'مساحة إدارة التدريس' : 'Teaching workspace' }}
                    </p>
                    <div class="space-y-2">
                        <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white md:text-3xl">
                            {{ $isArabic ? "مرحبًا {$teacherName}" : "Welcome back, {$teacherName}" }}
                        </h2>
                        <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                            {{ $isArabic
                                ? 'لوحة تشغيل عملية للمقرر اليومي: راقب العبء التدريسي، افتح أدوات النشر بسرعة، وراجع الجلسات والنشاط الأخير من نفس الشاشة.'
                                : 'A practical teaching command board for your daily flow: monitor course load, jump into publishing tools, and review sessions and recent activity from the same screen.' }}
                        </p>
                    </div>
                </div>

                <div class="grid gap-3 sm:grid-cols-2 xl:min-w-[25rem]">
                    <div class="rounded-2xl border border-surface-200 bg-surface-50/80 px-5 py-4 dark:border-surface-700 dark:bg-surface-950/60">
                        <p class="text-[11px] font-black uppercase tracking-[0.18em] text-surface-500 dark:text-surface-400">{{ $isArabic ? 'متوسط العبء لكل مقرر' : 'Average load per course' }}</p>
                        <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $courseLoadAverage }}</p>
                        <p class="mt-2 text-xs leading-6 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'يحسب من المواد والواجبات والاختبارات المنشورة.' : 'Based on published materials, assignments, and quizzes.' }}</p>
                    </div>
                    <div class="rounded-2xl bg-brand-600 px-5 py-4 text-white dark:bg-brand-500">
                        <p class="text-[11px] font-black uppercase tracking-[0.18em] text-white/80">{{ $isArabic ? 'جلسات قائمة على المقررات' : 'Courses with live rooms' }}</p>
                        <p class="mt-3 text-3xl font-black">{{ $coursesWithLiveRooms }}</p>
                        <p class="mt-2 text-xs leading-6 text-brand-100">{{ $isArabic ? 'عدد المقررات التي تحتوي على فصول افتراضية.' : 'Number of courses already using live sessions.' }}</p>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('teacher.notifications.create') }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                    <span>{{ $isArabic ? 'إرسال إشعار جديد' : 'Send new notification' }}</span>
                </a>
                <a href="{{ route('teacher.questions.of_taught_subjects') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 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">
                    <i class="fa-solid fa-database text-xs"></i>
                    <span>{{ $isArabic ? 'فتح بنك الأسئلة' : 'Open question bank' }}</span>
                </a>
                @if ($hasSubjectHeadRole)
                    <a href="{{ route('teacher.dashboard.subject-head') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 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">
                        <i class="fa-solid fa-building-columns text-xs"></i>
                        <span>{{ $isArabic ? 'لوحة رئيس القسم' : 'Head dashboard' }}</span>
                    </a>
                @endif
            </div>
        </section>

        <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-6">
            @foreach ($metrics as $metric)
                <div class="flex min-h-[7.5rem] flex-col rounded-xl border border-surface-200 bg-white p-4 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="text-[11px] font-black uppercase tracking-[0.14em] text-surface-500 dark:text-surface-400">{{ $metric['label'] }}</p>
                            <p class="mt-2 text-[1.8rem] font-black leading-none text-surface-900 dark:text-white">{{ number_format($metric['value']) }}</p>
                        </div>
                        <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {{ $metric['bg'] }}">
                            <i class="fa-solid {{ $metric['icon'] }}"></i>
                        </div>
                    </div>
                </div>
            @endforeach
        </section>

        <section class="grid gap-6 xl:grid-cols-12">
            <div class="space-y-6 xl:col-span-7">
                <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">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h2 class="text-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'استفسارات بانتظار الرد' : 'Inquiries awaiting reply' }}</h2>
                                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'آخر الرسائل التي لم تتلقَّ ردًا منك بعد داخل المقررات المسندة.' : 'The latest messages across your assigned courses that are still waiting for your response.' }}</p>
                            </div>
                            <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-300">
                                <i class="fa-solid fa-circle-question"></i>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-3 p-6">
                        @if ($pendingInquiryCards->isNotEmpty())
                            @foreach ($pendingInquiryCards as $inquiry)
                            <a href="{{ $inquiry['url'] }}" class="flex items-start gap-4 rounded-xl border border-surface-200 bg-surface-50/70 p-4 transition hover:border-orange-200 hover:bg-white dark:border-surface-800 dark:bg-surface-950/30 dark:hover:border-orange-500/20 dark:hover:bg-surface-950">
                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-300">
                                    <i class="fa-solid fa-envelope-open-text"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center justify-between gap-3">
                                        <span class="rounded-full bg-white px-2.5 py-1 text-[11px] font-black text-orange-700 dark:bg-surface-900 dark:text-orange-300">
                                            {{ $inquiry['status_label'] }}
                                        </span>
                                        <span class="text-[11px] text-surface-400 dark:text-surface-500">{{ $inquiry['time_label'] }}</span>
                                    </div>
                                    <h3 class="mt-3 truncate text-sm font-black text-surface-900 dark:text-white">{{ $inquiry['title'] }}</h3>
                                    <p class="mt-1 text-xs leading-6 text-surface-500 dark:text-surface-400">
                                        {{ $inquiry['student_name'] }}
                                        @if ($inquiry['course_name'])
                                            • {{ $inquiry['course_name'] }}
                                        @endif
                                    </p>
                                    <p class="mt-2 line-clamp-2 text-xs leading-6 text-surface-500 dark:text-surface-400">
                                        {{ $inquiry['message_excerpt'] }}
                                    </p>
                                </div>
                            </a>
                            @endforeach
                        @else
                            <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                                {{ $isArabic ? 'لا توجد استفسارات معلقة حالياً.' : 'There are no pending inquiries right now.' }}
                            </div>
                        @endif
                    </div>
                </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-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'آخر الأنشطة' : 'Latest activity' }}</h2>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'ملخص زمني لما نُشر داخل مقرراتك مؤخراً.' : 'A chronological summary of what was published across your courses.' }}</p>
                    </div>

                    <div class="space-y-3 p-6">
                        @if ($activityFeed->isNotEmpty())
                            @foreach ($activityFeed as $item)
                            <a href="{{ $item['route'] }}" class="flex items-start gap-4 rounded-xl border border-surface-200 bg-surface-50/70 p-4 transition hover:border-brand-200 hover:bg-white dark:border-surface-800 dark:bg-surface-950/30 dark:hover:border-brand-500/20 dark:hover:bg-surface-950">
                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl {{ $item['tone'] === 'brand' ? 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300' : ($item['tone'] === 'amber' ? 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-300' : 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-300') }}">
                                    <i class="fa-solid {{ $item['icon'] }}"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center justify-between gap-3">
                                        <span class="rounded-full bg-white px-2.5 py-1 text-[11px] font-black text-surface-500 dark:bg-surface-900 dark:text-surface-300">{{ $item['type'] }}</span>
                                        <span class="text-[11px] text-surface-400 dark:text-surface-500">{{ $item['time_label'] }}</span>
                                    </div>
                                    <h3 class="mt-3 truncate text-sm font-black text-surface-900 dark:text-white">{{ $item['title'] }}</h3>
                                    <p class="mt-1 text-xs leading-6 text-surface-500 dark:text-surface-400">{{ $item['course'] }}</p>
                                </div>
                            </a>
                            @endforeach
                        @else
                            <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                                {{ $isArabic ? 'لا توجد أنشطة حديثة بعد داخل مقرراتك.' : 'There is no recent activity inside your courses yet.' }}
                            </div>
                        @endif
                    </div>
                </section>
            </div>

            <div class="space-y-6 xl:col-span-5">
                <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-xl font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الجلسات القادمة' : 'Upcoming live sessions' }}</h2>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الوصول السريع إلى أقرب الفصول الافتراضية المجدولة.' : 'Quick access to the nearest scheduled virtual classes.' }}</p>
                    </div>

                    <div class="space-y-3 p-6">
                        @if ($upcomingRoomCards->isNotEmpty())
                            @foreach ($upcomingRoomCards as $room)
                            <a href="{{ $room['url'] }}" class="flex items-start gap-4 rounded-xl border border-surface-200 bg-surface-50/70 p-4 transition hover:border-brand-200 hover:bg-white dark:border-surface-800 dark:bg-surface-950/30 dark:hover:border-brand-500/20 dark:hover:bg-surface-950">
                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-300">
                                    <i class="fa-solid fa-video"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <h3 class="truncate text-sm font-black text-surface-900 dark:text-white">{{ $room['title'] }}</h3>
                                    <p class="mt-1 text-xs leading-6 text-surface-500 dark:text-surface-400">{{ $room['course_name'] }}</p>
                                    <p class="mt-2 text-[11px] text-surface-400 dark:text-surface-500">{{ $room['start_label'] }}</p>
                                </div>
                                <span class="text-[11px] text-surface-400 dark:text-surface-500">{{ $room['relative_label'] }}</span>
                            </a>
                            @endforeach
                        @else
                            <div class="rounded-xl border border-dashed border-surface-300 px-5 py-8 text-center text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                                {{ $isArabic ? 'لا توجد جلسات مباشرة قادمة حالياً.' : 'There are no upcoming live sessions right now.' }}
                            </div>
                        @endif
                    </div>
                </section>

            </div>
        </section>
    </div>
@endsection