@extends('layouts.app')

@section('content')
<div class="w-full space-y-8 page-fade-in">
    {{-- Header --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div>
            <h2 class="text-4xl font-black text-slate-800 tracking-tight">System Control <span class="text-brand-primary">Dashboard</span></h2>
            <p class="text-slate-500 mt-2 font-medium">Monitoring academic operations and system health.</p>
        </div>
        <div class="flex items-center gap-4">
            <div class="flex -space-x-2 overflow-hidden">
                <div class="inline-block h-8 w-8 rounded-full ring-2 ring-white bg-slate-100 flex items-center justify-center text-[10px] font-bold text-slate-500">AD</div>
            </div>
            <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-black bg-white border border-slate-200 text-slate-600 shadow-sm">
                <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
                Administrator Active
            </span>
        </div>
    </div>

    {{-- Primary Stats Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {{-- Total Staff --}}
        <div class="stat-card-blue relative overflow-hidden">
            <div class="absolute top-0 right-0 opacity-10">
                <span class="material-icons-round" style="font-size: 120px;">people</span>
            </div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <span class="material-icons-round text-3xl">people</span>
                    </div>
                    <span class="text-white/80 text-sm font-bold">{{ $staffWithSubjectsCount }}/{{ $staffCount }} Active</span>
                </div>
                <h3 class="text-4xl font-black mb-1">{{ $staffCount }}</h3>
                <p class="text-white/90 text-sm font-bold uppercase tracking-wider">Total Faculty</p>
                <div class="mt-4 flex items-center gap-2">
                    <div class="flex-1 h-1.5 bg-white/20 rounded-full overflow-hidden">
                        <div class="h-full bg-white/60 rounded-full transition-all" style="width: {{ $staffUtilization }}%"></div>
                    </div>
                    <span class="text-xs font-bold text-white/80">{{ $staffUtilization }}%</span>
                </div>
            </div>
        </div>

        {{-- Enrolled Students --}}
        <div class="stat-card-green relative overflow-hidden">
            <div class="absolute top-0 right-0 opacity-10">
                <span class="material-icons-round" style="font-size: 120px;">school</span>
            </div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <span class="material-icons-round text-3xl">school</span>
                    </div>
                    <span class="text-white/80 text-sm font-bold">{{ $studentsWithAllocations }} Enrolled</span>
                </div>
                <h3 class="text-4xl font-black mb-1">{{ $studentCount }}</h3>
                <p class="text-white/90 text-sm font-bold uppercase tracking-wider">Total Students</p>
                <div class="mt-4 flex items-center gap-2">
                    <div class="flex-1 h-1.5 bg-white/20 rounded-full overflow-hidden">
                        <div class="h-full bg-white/60 rounded-full transition-all" style="width: {{ $studentEngagement }}%"></div>
                    </div>
                    <span class="text-xs font-bold text-white/80">{{ $studentEngagement }}%</span>
                </div>
            </div>
        </div>

        {{-- Active Subjects --}}
        <div class="stat-card-orange relative overflow-hidden">
            <div class="absolute top-0 right-0 opacity-10">
                <span class="material-icons-round" style="font-size: 120px;">menu_book</span>
            </div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <span class="material-icons-round text-3xl">menu_book</span>
                    </div>
                    <span class="text-white/80 text-sm font-bold">{{ $categoryCount }} Categories</span>
                </div>
                <h3 class="text-4xl font-black mb-1">{{ $subjectCount }}</h3>
                <p class="text-white/90 text-sm font-bold uppercase tracking-wider">Active Subjects</p>
                <div class="mt-4 flex items-center gap-2">
                    <div class="flex-1 h-1.5 bg-white/20 rounded-full overflow-hidden">
                        <div class="h-full bg-white/60 rounded-full transition-all" style="width: {{ min($subjectCapacity, 100) }}%"></div>
                    </div>
                    <span class="text-xs font-bold text-white/80">{{ round($averageCreditsPerSubject, 1) }} Avg Credits</span>
                </div>
            </div>
        </div>

        {{-- Total Allocations --}}
        <div class="stat-card-pink relative overflow-hidden">
            <div class="absolute top-0 right-0 opacity-10">
                <span class="material-icons-round" style="font-size: 120px;">assignment</span>
            </div>
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center">
                        <span class="material-icons-round text-3xl">assignment</span>
                    </div>
                    <span class="text-white/80 text-sm font-bold">{{ $deptCount }} Departments</span>
                </div>
                <h3 class="text-4xl font-black mb-1">{{ $allocationCount }}</h3>
                <p class="text-white/90 text-sm font-bold uppercase tracking-wider">Total Allocations</p>
                <div class="mt-4 flex items-center gap-2">
                    <div class="flex-1 h-1.5 bg-white/20 rounded-full overflow-hidden">
                        <div class="h-full bg-white/60 rounded-full transition-all" style="width: 85%"></div>
                    </div>
                    <span class="text-xs font-bold text-white/80">{{ $semesterCount }} Semesters</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts Row --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Students by Department Chart --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Students by Department</h3>
                <span class="material-icons-round text-brand-primary">pie_chart</span>
            </div>
            <div class="h-[300px] w-full relative">
                <canvas id="departmentChart"></canvas>
            </div>
        </div>

        {{-- Subjects by Category Chart --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Subjects by Category</h3>
                <span class="material-icons-round text-brand-primary">donut_small</span>
            </div>
            <div class="h-[300px] w-full relative">
                <canvas id="categoryChart"></canvas>
            </div>
        </div>
    </div>

    {{-- Allocation Trend Chart --}}
    <div class="glass-panel p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-black text-slate-800">Allocation Trend</h3>
                <p class="text-sm text-slate-500 mt-1">Last 6 months activity</p>
            </div>
            <span class="material-icons-round text-brand-primary">show_chart</span>
        </div>
        <div class="h-[100px] w-full relative">
            <canvas id="trendChart"></canvas>
        </div>
    </div>

    {{-- Data Tables Row --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Top Faculty by Subjects --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Top Faculty by Subjects</h3>
                <span class="badge badge-info">Top 5</span>
            </div>
            <div class="space-y-3">
                @forelse($staffWithSubjects as $staff)
                <div class="flex items-center justify-between p-4 bg-slate-50 rounded-xl hover:bg-slate-100 transition-all">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-white flex items-center justify-center font-bold text-sm">
                            {{ substr($staff->name, 0, 2) }}
                        </div>
                        <div>
                            <p class="font-bold text-slate-800 text-sm">{{ $staff->name }}</p>
                            <p class="text-xs text-slate-500">{{ $staff->email }}</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-black text-brand-primary">{{ $staff->subjects_count }}</p>
                        <p class="text-xs text-slate-400 uppercase font-bold">Subjects</p>
                    </div>
                </div>
                @empty
                <div class="text-center py-8 text-slate-400">
                    <span class="material-icons-round text-4xl">person_off</span>
                    <p class="mt-2">No faculty data available</p>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Top Subjects by Allocations --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Popular Subjects</h3>
                <span class="badge badge-success">Top 5</span>
            </div>
            <div class="space-y-3">
                @forelse($topSubjects as $subject)
                <div class="flex items-center justify-between p-4 bg-slate-50 rounded-xl hover:bg-slate-100 transition-all">
                    <div class="flex-1">
                        <p class="font-bold text-slate-800 text-sm">{{ $subject->name }}</p>
                        <p class="text-xs text-slate-500">{{ $subject->code }} • {{ $subject->credits ?? 3 }} Credits</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-black text-emerald-600">{{ $subject->allocations_count }}</p>
                        <p class="text-xs text-slate-400 uppercase font-bold">Students</p>
                    </div>
                </div>
                @empty
                <div class="text-center py-8 text-slate-400">
                    <span class="material-icons-round text-4xl">library_books</span>
                    <p class="mt-2">No subject data available</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Recent Activity & Quick Actions --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Recent Allocations --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Recent Allocations</h3>
                <a href="{{ route('admin.allocations.index') }}" class="text-brand-primary text-sm font-bold hover:underline">View All</a>
            </div>
            <div class="space-y-3">
                @forelse($recentAllocations as $allocation)
                <div class="flex items-start gap-3 p-3 bg-slate-50 rounded-xl">
                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 text-white flex items-center justify-center mt-0.5">
                        <span class="material-icons-round text-sm">assignment_turned_in</span>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-bold text-slate-800">{{ $allocation->student->name }}</p>
                        <p class="text-xs text-slate-600">{{ $allocation->subject->name }} • {{ $allocation->staff->name }}</p>
                        <p class="text-xs text-slate-400 mt-1">{{ $allocation->created_at->diffForHumans() }}</p>
                    </div>
                </div>
                @empty
                <div class="text-center py-8 text-slate-400">
                    <span class="material-icons-round text-4xl">assignment</span>
                    <p class="mt-2">No recent allocations</p>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Quick Management --}}
        <div class="glass-panel p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-black text-slate-800">Quick Management</h3>
                <span class="material-icons-round text-brand-primary">flash_on</span>
            </div>
            <div class="space-y-3">
                <a href="{{ route('admin.staff.create') }}" class="group flex items-center p-4 bg-gradient-to-r from-blue-50 to-transparent hover:from-blue-100 rounded-xl transition-all border border-blue-100 hover:border-blue-200 cursor-pointer">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white flex items-center justify-center mr-4 shadow-lg shadow-blue-200 group-hover:scale-110 transition-transform">
                        <span class="material-icons-round">person_add</span>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-black text-slate-800 text-sm">Add New Staff</h4>
                        <p class="text-xs text-slate-500 font-medium">Register a new faculty member</p>
                    </div>
                    <span class="material-icons-round text-blue-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all">arrow_forward</span>
                </a>

                <a href="{{ route('admin.students.create') }}" class="group flex items-center p-4 bg-gradient-to-r from-green-50 to-transparent hover:from-green-100 rounded-xl transition-all border border-green-100 hover:border-green-200 cursor-pointer">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 text-white flex items-center justify-center mr-4 shadow-lg shadow-green-200 group-hover:scale-110 transition-transform">
                        <span class="material-icons-round">group_add</span>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-black text-slate-800 text-sm">Add New Student</h4>
                        <p class="text-xs text-slate-500 font-medium">Enroll a new student</p>
                    </div>
                    <span class="material-icons-round text-green-400 group-hover:text-green-600 group-hover:translate-x-1 transition-all">arrow_forward</span>
                </a>

                <a href="{{ route('admin.subjects.create') }}" class="group flex items-center p-4 bg-gradient-to-r from-orange-50 to-transparent hover:from-orange-100 rounded-xl transition-all border border-orange-100 hover:border-orange-200 cursor-pointer">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 text-white flex items-center justify-center mr-4 shadow-lg shadow-orange-200 group-hover:scale-110 transition-transform">
                        <span class="material-icons-round">library_add</span>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-black text-slate-800 text-sm">Add New Subject</h4>
                        <p class="text-xs text-slate-500 font-medium">Create a new subject entry</p>
                    </div>
                    <span class="material-icons-round text-orange-400 group-hover:text-orange-600 group-hover:translate-x-1 transition-all">arrow_forward</span>
                </a>

                <a href="{{ route('admin.settings.index') }}" class="group flex items-center p-4 bg-gradient-to-r from-purple-50 to-transparent hover:from-purple-100 rounded-xl transition-all border border-purple-100 hover:border-purple-200 cursor-pointer">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white flex items-center justify-center mr-4 shadow-lg shadow-purple-200 group-hover:scale-110 transition-transform">
                        <span class="material-icons-round">settings</span>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-black text-slate-800 text-sm">System Settings</h4>
                        <p class="text-xs text-slate-500 font-medium">Configure dynamic limits</p>
                    </div>
                    <span class="material-icons-round text-purple-400 group-hover:text-purple-600 group-hover:translate-x-1 transition-all">arrow_forward</span>
                </a>
            </div>
        </div>
    </div>

    {{-- System Limits Overview --}}
    <div class="glass-panel p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-black text-slate-800">Dynamic System Limits</h3>
            <a href="{{ route('admin.settings.index') }}" class="text-brand-primary text-sm font-bold hover:underline">Configure</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="p-4 bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-xl border border-blue-200">
                <p class="text-xs font-black uppercase tracking-wider text-blue-600 mb-2">Max Subjects/Faculty</p>
                <p class="text-3xl font-black text-slate-800">{{ $maxSubjectsPerFaculty }}</p>
            </div>
            <div class="p-4 bg-gradient-to-br from-green-50 to-green-100/50 rounded-xl border border-green-200">
                <p class="text-xs font-black uppercase tracking-wider text-green-600 mb-2">Max Faculty/Subject</p>
                <p class="text-3xl font-black text-slate-800">{{ $maxFacultyPerSubject }}</p>
            </div>
            <div class="p-4 bg-gradient-to-br from-orange-50 to-orange-100/50 rounded-xl border border-orange-200">
                <p class="text-xs font-black uppercase tracking-wider text-orange-600 mb-2">Student Total Credits</p>
                <p class="text-3xl font-black text-slate-800">{{ $totalCreditLimit }}</p>
            </div>
            <div class="p-4 bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-xl border border-purple-200">
                <p class="text-xs font-black uppercase tracking-wider text-purple-600 mb-2">Semester Max Credits</p>
                <p class="text-3xl font-black text-slate-800">{{ $semesterCreditMax }}</p>
            </div>
        </div>
    </div>
</div>

{{-- Chart.js CDN --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
// Department Distribution Chart
const deptCtx = document.getElementById('departmentChart').getContext('2d');
new Chart(deptCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($studentsByDepartment->pluck('name')) !!},
        datasets: [{
            data: {!! json_encode($studentsByDepartment->pluck('count')) !!},
            backgroundColor: [
                'rgba(59, 130, 246, 0.8)',
                'rgba(16, 185, 129, 0.8)',
                'rgba(251, 146, 60, 0.8)',
                'rgba(236, 72, 153, 0.8)',
                'rgba(139, 92, 246, 0.8)',
            ],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: {
                        size: 12,
                        weight: 'bold'
                    }
                }
            }
        }
    }
});

// Category Distribution Chart
const catCtx = document.getElementById('categoryChart').getContext('2d');
new Chart(catCtx, {
    type: 'pie',
    data: {
        labels: {!! json_encode($subjectsByCategory->pluck('name')) !!},
        datasets: [{
            data: {!! json_encode($subjectsByCategory->pluck('count')) !!},
            backgroundColor: [
                'rgba(59, 130, 246, 0.8)',
                'rgba(16, 185, 129, 0.8)',
                'rgba(251, 146, 60, 0.8)',
                'rgba(236, 72, 153, 0.8)',
                'rgba(139, 92, 246, 0.8)',
                'rgba(245, 158, 11, 0.8)',
            ],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: {
                        size: 12,
                        weight: 'bold'
                    }
                }
            }
        }
    }
});

// Allocation Trend Chart
const trendCtx = document.getElementById('trendChart').getContext('2d');
new Chart(trendCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($monthlyAllocations->pluck('month')) !!},
        datasets: [{
            label: 'Allocations',
            data: {!! json_encode($monthlyAllocations->pluck('count')) !!},
            borderColor: 'rgba(236, 72, 153, 1)',
            backgroundColor: 'rgba(236, 72, 153, 0.1)',
            tension: 0.4,
            fill: true,
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        weight: 'bold'
                    }
                }
            },
            x: {
                ticks: {
                    font: {
                        weight: 'bold'
                    }
                }
            }
        }
    }
});
</script>
@endsection