@extends('layouts.admin', ['title' => 'Admin Dashboard — ESMT Berlin', 'currentPage' => 'dashboard', 'breadcrumbs' => []])

@push('head')
<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { 
            font-family: 'Inter', system-ui, sans-serif; 
            background: linear-gradient(135deg, #FBF9F2 0%, #F0F4F8 100%);
            min-height: 100vh;
        }
        .gradient-bg { 
            background: linear-gradient(135deg, #001E4E 0%, #03318C 100%);
            position: relative;
            overflow: hidden;
        }
        .gradient-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }
        .dashboard-scope .glass { 
            background: rgba(255, 255, 255, 0.1); 
            backdrop-filter: blur(10px); 
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        .dashboard-scope .glass:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        .animate-fade-in { animation: fadeIn 0.6s ease-out; }
        .animate-slide-up { animation: slideUp 0.6s ease-out; }
        .floating-element { animation: none; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
</style>
@endpush

@section('content')
    <!-- Hero removed: jump straight to content -->

    <div class="max-w-6xl mx-auto p-6">

        <!-- Quick Stats with background -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8 animate-slide-up gradient-bg text-white rounded-3xl p-6">
            <div class="stat-card rounded-2xl p-6 card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-lg">
                        🎓
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold" id="programs-count">{{ $programsCount ?? '-' }}</div>
                        <div class="text-xs text-white/80">Programs</div>
                    </div>
                </div>
                <div class="text-sm text-white/80">Active programs</div>
            </div>
            <div class="stat-card rounded-2xl p-6 card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center text-blue-900 font-bold text-lg">
                        👥
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold" id="cohorts-count">{{ $activeCohortsCount ?? '-' }}</div>
                        <div class="text-xs text-white/80">Cohorts</div>
                    </div>
                </div>
                <div class="text-sm text-white/80">Active cohorts</div>
            </div>
            <div class="stat-card rounded-2xl p-6 card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                        📚
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold" id="courses-count">{{ $activeCoursesCount ?? '-' }}</div>
                        <div class="text-xs text-white/80">Courses</div>
                    </div>
                </div>
                <div class="text-sm text-white/80">Active courses</div>
            </div>
            <div class="stat-card rounded-2xl p-6 card-hover">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
                        📊
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold" id="activities-count">{{ $activitiesCount ?? '-' }}</div>
                        <div class="text-xs text-white/80">Activities</div>
                    </div>
                </div>
                <div class="text-sm text-white/80">Learning activities</div>
            </div>
        </div>

        <!-- Interactive Drill-Down -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 animate-slide-up" style="animation-delay: 0.2s">
            <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                        🎓
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Programs</h2>
                </div>
                <div id="programs" class="space-y-2 text-sm min-h-[100px]">
                    <div class="loading-shimmer h-4 rounded w-3/4 mb-2"></div>
                    <div class="loading-shimmer h-4 rounded w-1/2 mb-2"></div>
                    <div class="loading-shimmer h-4 rounded w-2/3"></div>
                </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center text-blue-900 font-bold text-lg mr-3">
                        👥
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Cohorts</h2>
                </div>
                <div id="cohorts" class="space-y-2 text-sm min-h-[100px] text-gray-400 max-h-80 overflow-y-auto pr-1">
                    <div class="text-center py-4">Select a program</div>
                </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                        📚
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Courses</h2>
                </div>
                <div id="courses" class="space-y-2 text-sm min-h-[100px] text-gray-400">
                    <div class="text-center py-4">Select a cohort to view courses</div>
                </div>
            </div>
            <div class="bg-white rounded-2xl shadow-lg p-6 card-hover">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                        🎯
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2>
                </div>
                <div class="space-y-3">
                    <a href="{{ route('admin.activities') }}" class="block p-3 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg hover:from-blue-100 hover:to-blue-200 transition-all duration-300 group">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white mr-3 group-hover:scale-110 transition-transform">
                                📊
                            </div>
                            <div>
                                <div class="font-medium text-blue-800">All Activities</div>
                                <div class="text-xs text-blue-600">View and manage all activity types</div>
                            </div>
                        </div>
                    </a>
                    <div class="text-xs text-gray-500 text-center py-2">Select a course above to access its dashboard</div>
                </div>
            </div>
        </div>

        <!-- Recent Activity & Quick Actions -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
            <!-- Recent Activity -->
            <div class="bg-white rounded-2xl shadow-lg p-6 animate-slide-up" style="animation-delay: 0.3s">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-gradient-to-r from-blue-600 to-blue-800 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                            📝
                        </div>
                        <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
                    </div>
                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">{{ isset($surveys) ? count($surveys) : 0 }} items</span>
                </div>
                @if(isset($surveys) && count($surveys))
                    <div class="space-y-3">
                        @foreach($surveys->take(5) as $survey)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                                <div class="flex-1">
                                    <a class="text-blue-600 hover:underline font-medium" href="#" data-results-url="{{ route('survey.results', $survey) }}" onclick="openResultsModal(this.dataset.resultsUrl); return false;">
                                        {{ $survey->title }}
                                    </a>
                                    @if($survey->activityInstance)
                                        <div class="text-xs text-gray-500 mt-1">{{ $survey->activityInstance->name }}</div>
                                    @endif
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
                                        {{ $survey->responses()->count() }} responses
                                    </span>
                                    <a href="#" data-results-url="{{ route('survey.results', $survey) }}" onclick="openResultsModal(this.dataset.resultsUrl); return false;" class="text-blue-600 hover:text-blue-800">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <p class="text-gray-500 text-sm">No recent activity yet</p>
                        <p class="text-gray-400 text-xs mt-1">Create your first activity to get started</p>
                    </div>
                @endif
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-2xl shadow-lg p-6 animate-slide-up" style="animation-delay: 0.4s">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3">
                        ⚡
                    </div>
                    <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <a href="/admin/activities" class="p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg hover:from-blue-100 hover:to-blue-200 transition-all duration-300 group">
                        <div class="text-2xl mb-2">📊</div>
                        <div class="text-sm font-medium text-gray-800">Create Activity</div>
                        <div class="text-xs text-gray-600 mt-1">New learning activity</div>
                    </a>
                    <a href="/admin/programs" class="p-4 bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-lg hover:from-yellow-100 hover:to-yellow-200 transition-all duration-300 group">
                        <div class="text-2xl mb-2">🎓</div>
                        <div class="text-sm font-medium text-gray-800">Manage Programs</div>
                        <div class="text-xs text-gray-600 mt-1">Programs & cohorts</div>
                    </a>
                    <a href="/admin/courses" class="p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-lg hover:from-green-100 hover:to-green-200 transition-all duration-300 group">
                        <div class="text-2xl mb-2">📚</div>
                        <div class="text-sm font-medium text-gray-800">View Courses</div>
                        <div class="text-xs text-gray-600 mt-1">All courses</div>
                    </a>
                    <a href="#" class="p-4 bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg hover:from-purple-100 hover:to-purple-200 transition-all duration-300 group">
                        <div class="text-2xl mb-2">📈</div>
                        <div class="text-sm font-medium text-gray-800">Analytics</div>
                        <div class="text-xs text-gray-600 mt-1">View insights</div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
    // Enhanced utility functions
    async function fetchJson(url){ 
        const r = await fetch(url); 
        return r.json(); 
    }
    
    function createListItem(text, onclick, isActive = false){ 
        const a = document.createElement('a'); 
        a.href = '#'; 
        a.textContent = text; 
        a.className = `block px-3 py-2 rounded-lg text-sm transition-all duration-200 ${isActive ? 'bg-blue-100 text-blue-800' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}`;
        if(onclick){ 
            a.addEventListener('click', e=>{
                e.preventDefault(); 
                onclick();
            }); 
        } 
        return a;
    }

    function animateCounter(element, target, duration = 1000) {
        const start = 0;
        const increment = target / (duration / 16);
        let current = start;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            element.textContent = Math.floor(current);
        }, 16);
    }

    // DOM elements
    const programsEl = document.getElementById('programs');
    const cohortsEl = document.getElementById('cohorts');
    const coursesEl = document.getElementById('courses');
    
    const programsCountEl = document.getElementById('programs-count');
    const cohortsCountEl = document.getElementById('cohorts-count');
    const coursesCountEl = document.getElementById('courses-count');
    const activitiesCountEl = document.getElementById('activities-count');

    // State management
    let currentProgramId = null;
    let currentCohortId = null;
    let currentCourseId = null;

    async function loadPrograms(){
        try {
            programsEl.innerHTML = '<div class="loading-shimmer h-4 rounded w-3/4 mb-2"></div><div class="loading-shimmer h-4 rounded w-1/2 mb-2"></div><div class="loading-shimmer h-4 rounded w-2/3"></div>';
            cohortsEl.innerHTML = '<div class="text-center py-4 text-gray-400">Select a program</div>';
            coursesEl.innerHTML = '<div class="text-center py-4 text-gray-400">Select a cohort</div>';
            
            const items = await fetchJson('/admin/api/programs');
            
            // Update count
            animateCounter(programsCountEl, items.length);
            
            // Clear and populate
            programsEl.innerHTML = '';
            items.forEach(p => {
                const item = createListItem(p.name, () => loadCohorts(p.id));
                programsEl.appendChild(item);
            });
            
            // Reset other counts
            animateCounter(cohortsCountEl, 0);
            animateCounter(coursesCountEl, 0);
            animateCounter(activitiesCountEl, 0);
            
        } catch (error) {
            console.error('Error loading programs:', error);
            programsEl.innerHTML = '<div class="text-center py-4 text-red-500">Error loading programs</div>';
        }
    }

    async function loadCohorts(programId){
        try {
            currentProgramId = programId;
            cohortsEl.innerHTML = '<div class="loading-shimmer h-4 rounded w-3/4 mb-2"></div><div class="loading-shimmer h-4 rounded w-1/2"></div>';
            coursesEl.innerHTML = '<div class="text-center py-4 text-gray-400">Select a cohort to view courses</div>';
            
            const items = await fetchJson(`/admin/api/program/${programId}/cohorts`);
            
            // Update count
            animateCounter(cohortsCountEl, items.length);
            
            // Clear and populate
            cohortsEl.innerHTML = '';
            items.forEach(c => {
                const item = createListItem(`${c.name}${c.year ? ' (' + c.year + ')' : ''}`, () => loadCourses(c.id));
                cohortsEl.appendChild(item);
            });
            
            // Reset other counts
            animateCounter(coursesCountEl, 0);
            
        } catch (error) {
            console.error('Error loading cohorts:', error);
            cohortsEl.innerHTML = '<div class="text-center py-4 text-red-500">Error loading cohorts</div>';
        }
    }

    let showOnlyCourse31 = JSON.parse(localStorage.getItem('showOnlyCourse31') || 'false');

    function toggleCourseFilter() {
        showOnlyCourse31 = !showOnlyCourse31;
        localStorage.setItem('showOnlyCourse31', JSON.stringify(showOnlyCourse31));
        if (currentCohortId) {
            loadCourses(currentCohortId);
        }
        document.getElementById('courseFilterToggle').textContent = showOnlyCourse31 ? 'Showing only Course 31' : 'Showing all courses';
    }

    async function loadCourses(cohortId){
        try {
            currentCohortId = cohortId;
            coursesEl.innerHTML = '<div class="loading-shimmer h-4 rounded w-3/4 mb-2"></div><div class="loading-shimmer h-4 rounded w-1/2"></div>';
            
            const items = await fetchJson(`/admin/api/cohort/${cohortId}/courses`);
            const filtered = showOnlyCourse31 ? items.filter(i => i.id === 31) : items;
            
            // Update count
            animateCounter(coursesCountEl, filtered.length);
            
            // Clear and populate with direct links to course dashboards
            coursesEl.innerHTML = '';
            filtered.forEach(c => {
                const item = document.createElement('div');
                item.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group';
                item.innerHTML = `
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3 group-hover:scale-110 transition-transform">
                            📚
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">${c.name}</div>
                            <div class="text-xs text-gray-500">Click to open course dashboard</div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="text-xs text-gray-500 hover:text-gray-700 underline" data-archive>Archive</button>
                        <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                `;
                item.addEventListener('click', (e) => {
                    // allow clicking archive without navigating
                    if (!(e.target && e.target.hasAttribute('data-archive'))) {
                        window.location.href = `/admin/course/${c.id}`;
                    }
                });
                const archiveBtn = item.querySelector('[data-archive]');
                archiveBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    fetch(`/admin/course/${c.id}/archive`, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }
                    }).then(() => loadCourses(cohortId));
                });
                coursesEl.appendChild(item);
            });
            // Add filter toggle button
            const filterBtn = document.createElement('button');
            filterBtn.id = 'courseFilterToggle';
            filterBtn.className = 'mt-3 text-xs text-blue-600 hover:text-blue-800 underline';
            filterBtn.textContent = showOnlyCourse31 ? 'Showing only Course 31' : 'Showing all courses';
            filterBtn.onclick = toggleCourseFilter;
            coursesEl.appendChild(filterBtn);
            
        } catch (error) {
            console.error('Error loading courses:', error);
            coursesEl.innerHTML = '<div class="text-center py-4 text-red-500">Error loading courses</div>';
        }
    }

    async function loadActivities(courseId){
        try {
            currentCourseId = courseId;
            activitiesEl.innerHTML = '<div class="loading-shimmer h-4 rounded w-3/4 mb-2"></div><div class="loading-shimmer h-4 rounded w-1/2"></div>';
            
            const items = await fetchJson(`/admin/api/course/${courseId}/activities`);
            
            // Update count
            animateCounter(activitiesCountEl, items.length);
            
            // Clear and populate
            activitiesEl.innerHTML = '';
            items.forEach(a => {
                const item = createListItem(a.name, () => {
                    if (a.survey_id) {
                        window.open(`/survey/${a.survey_id}`, '_blank');
                    }
                });
                activitiesEl.appendChild(item);
            });
            
        } catch (error) {
            console.error('Error loading activities:', error);
            activitiesEl.innerHTML = '<div class="text-center py-4 text-red-500">Error loading activities</div>';
        }
    }

    // Modal for results
    function openResultsModal(url){
        let modal = document.getElementById('resultsModal');
        if(!modal){
            modal = document.createElement('div');
            modal.id = 'resultsModal';
            modal.className = 'fixed inset-0 bg-black/50 z-50 hidden';
            modal.innerHTML = `
                <div class="w-full h-full flex items-center justify-center p-4">
                    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl h-[80vh] flex flex-col">
                        <div class="flex items-center justify-between p-3 border-b">
                            <h3 class="font-semibold text-gray-800 text-sm">Activity Results</h3>
                            <div class="space-x-2">
                                <button onclick="window.parent?.postMessage({ type: 'closeDashboardModal' }, '*')" class="text-gray-500 hover:text-gray-700 text-xs">Close in Canvas</button>
                                <button onclick="document.getElementById('resultsModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <iframe id="resultsFrame" src="" class="flex-1 w-full border-0"></iframe>
                    </div>
                </div>`;
            document.body.appendChild(modal);
        }
        document.getElementById('resultsFrame').src = url;
        modal.classList.remove('hidden');
    }

    // Initialize dashboard
    document.addEventListener('DOMContentLoaded', () => {
        loadPrograms();
        
        // Add some delightful micro-interactions
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-4px)';
            });
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
            });
        });
    });
    </script>
@endsection