@extends('layouts.app')
@section('title', 'My Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
@endphp

<div class="space-y-6">

    {{-- Greeting --}}
    <div>
        <h2 class="text-2xl font-bold text-stone-800">{{ $greeting }}, {{ explode(' ', auth()->user()->name)[0] }}</h2>
        <p class="text-stone-500 text-sm mt-0.5">{{ $profile?->class_?->full_name ?? '' }} · Roll No: {{ $profile?->roll_number ?? '—' }}</p>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-green-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-clipboard-check text-green-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Attendance</p>
            <p class="text-2xl font-extrabold {{ $attendance['percentage'] >= 90 ? 'text-green-600' : ($attendance['percentage'] >= 75 ? 'text-amber-600' : 'text-red-600') }} mt-1">{{ $attendance['percentage'] }}%</p>
            <p class="text-[10px] text-stone-400 mt-0.5">{{ $attendance['present'] }}/{{ $attendance['total'] }} days</p>
        </div>
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-tasks text-blue-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Assignments</p>
            <p class="text-2xl font-extrabold text-stone-800 mt-1">{{ $pendingAssignments }}</p>
            <p class="text-[10px] text-stone-400 mt-0.5">pending</p>
        </div>
        <div class="bg-amber-500 rounded-2xl p-5 shadow-sm text-white">
            <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-rupee-sign text-white"></i>
            </div>
            <p class="text-xs text-amber-100 font-medium uppercase tracking-wide">Fees Due</p>
            <p class="text-2xl font-extrabold mt-1">₹{{ number_format($feesDue) }}</p>
        </div>
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm">
            <div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center mb-3">
                <i class="fas fa-graduation-cap text-purple-600"></i>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Class</p>
            <p class="text-xl font-extrabold text-stone-800 mt-1">{{ $profile?->class_?->full_name ?? 'N/A' }}</p>
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Left: Main content (2 cols) --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Subject Performance Chart --}}
            @if($subjectMarks->isNotEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <h3 class="font-bold text-stone-800 mb-4">Subject Performance</h3>
                <div class="space-y-3">
                    @foreach($subjectMarks as $subject => $pct)
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-stone-500 w-28 truncate font-medium">{{ $subject }}</span>
                        <div class="flex-1 h-5 bg-stone-100 rounded-full overflow-hidden">
                            <div class="h-full rounded-full transition-all {{ $pct >= 80 ? 'bg-amber-500' : ($pct >= 60 ? 'bg-amber-400' : ($pct >= 40 ? 'bg-stone-400' : 'bg-red-400')) }}"
                                 style="width: {{ min($pct, 100) }}%"></div>
                        </div>
                        <span class="text-xs font-bold {{ $pct >= 80 ? 'text-green-600' : ($pct >= 60 ? 'text-amber-600' : 'text-red-600') }} w-12 text-right">{{ $pct }}%</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Recent Marks --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <h3 class="font-bold text-stone-800 mb-4">Recent Marks</h3>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-[11px] text-stone-400 uppercase tracking-wider border-b border-stone-100">
                                <th class="text-left pb-3 font-semibold">Subject</th>
                                <th class="text-left pb-3 font-semibold">Exam</th>
                                <th class="text-left pb-3 font-semibold">Marks</th>
                                <th class="text-left pb-3 font-semibold">Grade</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentMarks as $mark)
                            <tr class="border-b border-stone-50 hover:bg-stone-50/50">
                                <td class="py-2.5 font-medium text-stone-700">{{ $mark->exam->subject->name ?? '—' }}</td>
                                <td class="py-2.5 text-stone-500">{{ $mark->exam->name }}</td>
                                <td class="py-2.5">
                                    @if($mark->is_absent)
                                    <span class="text-red-500 text-xs font-semibold">ABSENT</span>
                                    @else
                                    <span class="font-bold text-stone-700">{{ $mark->marks_obtained }}</span>
                                    <span class="text-stone-400">/{{ $mark->exam->total_marks }}</span>
                                    @endif
                                </td>
                                <td class="py-2.5">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold
                                        {{ in_array($mark->grade, ['A+','A']) ? 'bg-green-100 text-green-700' :
                                           (in_array($mark->grade, ['B+','B']) ? 'bg-amber-100 text-amber-700' :
                                           ($mark->grade === 'F' ? 'bg-red-100 text-red-700' : 'bg-stone-100 text-stone-600')) }}">
                                        {{ $mark->grade ?? '—' }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="py-6 text-center text-stone-400">No marks recorded yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- AI Insights --}}
            @if($insights->isNotEmpty())
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <h3 class="font-bold text-stone-800 mb-4"><i class="fas fa-lightbulb text-amber-500 mr-2"></i>AI Insights</h3>
                <div class="space-y-3">
                    @foreach($insights as $insight)
                    @php
                        $config = match($insight->type) {
                            'performance_overview' => ['bg' => 'bg-amber-50', 'border' => 'border-amber-200', 'icon' => 'fa-chart-line', 'color' => 'text-amber-600'],
                            'strength' => ['bg' => 'bg-green-50', 'border' => 'border-green-200', 'icon' => 'fa-star', 'color' => 'text-green-600'],
                            'improvement' => ['bg' => 'bg-orange-50', 'border' => 'border-orange-200', 'icon' => 'fa-arrow-up', 'color' => 'text-orange-600'],
                            'trend' => ['bg' => 'bg-blue-50', 'border' => 'border-blue-200', 'icon' => 'fa-chart-bar', 'color' => 'text-blue-600'],
                            'warning' => ['bg' => 'bg-red-50', 'border' => 'border-red-200', 'icon' => 'fa-exclamation-circle', 'color' => 'text-red-600'],
                            'attendance' => ['bg' => 'bg-purple-50', 'border' => 'border-purple-200', 'icon' => 'fa-clipboard-check', 'color' => 'text-purple-600'],
                            default => ['bg' => 'bg-stone-50', 'border' => 'border-stone-200', 'icon' => 'fa-info-circle', 'color' => 'text-stone-600'],
                        };
                    @endphp
                    <div class="flex gap-3 p-3 {{ $config['bg'] }} rounded-xl border {{ $config['border'] }}">
                        <i class="fas {{ $config['icon'] }} {{ $config['color'] }} mt-0.5"></i>
                        <p class="text-sm text-stone-700 leading-relaxed">{{ $insight->insight }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        {{-- Right sidebar --}}
        <div class="space-y-6">

            {{-- Class Teacher --}}
            @if(isset($classObj))
            @include('components.class-teacher-card')
            @endif

            {{-- Mini Calendar --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-5">
                @php
                    $today = now();
                    $firstDay = $today->copy()->startOfMonth();
                    $lastDay = $today->copy()->endOfMonth();
                @endphp
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-stone-800 text-sm">{{ $today->format('F Y') }}</h3>
                </div>
                <div class="grid grid-cols-7 gap-0.5 text-center">
                    @foreach(['S','M','T','W','T','F','S'] as $d)
                    <div class="text-[10px] font-semibold text-stone-400 py-1">{{ $d }}</div>
                    @endforeach
                    @for($i = 0; $i < $firstDay->dayOfWeek; $i++)
                    <div class="text-[11px] text-stone-300 py-1.5"></div>
                    @endfor
                    @for($d = 1; $d <= $lastDay->day; $d++)
                    <div class="text-[11px] py-1.5 font-medium rounded-lg {{ $d == $today->day ? 'bg-amber-500 text-white font-bold' : 'text-stone-600' }}">
                        {{ $d }}
                    </div>
                    @endfor
                </div>
            </div>

            {{-- Upcoming Events --}}
            @include('components.upcoming-events')

            {{-- Announcements --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-stone-100">
                    <h3 class="font-bold text-stone-800 text-sm"><i class="fas fa-bullhorn text-amber-500 mr-2"></i>Announcements</h3>
                </div>
                @forelse($announcements as $a)
                <div class="px-5 py-3 border-b border-stone-50 last:border-0">
                    <p class="text-sm font-semibold text-stone-700">{{ $a->title }}</p>
                    <p class="text-xs text-stone-400 mt-0.5 line-clamp-2">{{ Str::limit($a->content, 80) }}</p>
                    <p class="text-[10px] text-stone-300 mt-1">{{ $a->created_at->diffForHumans() }}</p>
                </div>
                @empty
                <div class="p-5 text-center text-stone-400 text-sm">No announcements</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection