import { Head, Link } from '@inertiajs/react';
import { BookOpen, Users, Video, ClipboardList, ChevronLeft, ChevronRight, Calendar as CalendarIcon, ArrowRight, GraduationCap, CheckCircle2, Clock } from 'lucide-react';
import React, { useState } from 'react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type Stats = {
    total_courses: number;
    total_students: number;
    pending_assignments: number;
    upcoming_live_classes: number;
};

type PendingSubmission = {
    id: number;
    assignment_title: string;
    student_name: string;
    course_title: string;
    submitted_at: string;
    url: string;
};

type UpcomingLiveClass = {
    id: number;
    title: string;
    course_title: string;
    scheduled_at: string;
    duration_minutes: number;
    url: string;
};

type CalendarEvent = {
    id: string;
    title: string;
    type: 'live_class' | 'assignment_deadline';
    date: string; // YYYY-MM-DD
    time: string; // HH:MM
    course_title: string;
    url: string;
};

type Props = {
    stats: Stats;
    pendingSubmissions: PendingSubmission[];
    upcomingLiveClasses: UpcomingLiveClass[];
    calendarEvents: CalendarEvent[];
};

const breadcrumbs: BreadcrumbItem[] = [{ title: 'Dashboard Instruktur', href: '/instructor/dashboard' }];

const MONTHS_INDONESIAN = [
    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];

const DAYS_INDONESIAN = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];

function getInitials(name: string) {
    return name
        .split(' ')
        .slice(0, 2)
        .map((n) => n[0])
        .join('')
        .toUpperCase();
}

type StatCardProps = {
    label: string;
    value: number | string;
    icon: React.ElementType;
    bgClass: string;
    textClass: string;
    iconBgClass: string;
    href: string;
};

function StatCard({ label, value, icon: Icon, bgClass, textClass, iconBgClass, href }: StatCardProps) {
    return (
        <Link href={href} className="group block">
            <div className={`relative overflow-hidden rounded-2xl p-5 shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 ${bgClass}`}>
                <div className="flex items-start justify-between">
                    <div>
                        <p className={`text-sm font-medium opacity-70 ${textClass}`}>{label}</p>
                        <p className={`mt-1.5 text-2xl font-bold ${textClass}`}>{typeof value === 'number' ? value.toLocaleString() : value}</p>
                    </div>
                    <div className={`rounded-xl p-2.5 ${iconBgClass}`}>
                        <Icon className={`h-6 w-6 ${textClass}`} />
                    </div>
                </div>
                <div className={`mt-4 flex items-center gap-1 text-xs opacity-60 group-hover:opacity-100 transition-opacity ${textClass}`}>
                    <span>Lihat detail</span>
                    <ArrowRight className="h-3 w-3" />
                </div>
                <div className={`absolute -right-4 -top-4 h-20 w-20 rounded-full opacity-40 ${iconBgClass}`} />
                <div className={`absolute -right-2 -bottom-6 h-28 w-28 rounded-full opacity-25 ${iconBgClass}`} />
            </div>
        </Link>
    );
}

export default function InstructorDashboard({ stats, pendingSubmissions, upcomingLiveClasses, calendarEvents }: Props) {
    const today = new Date();
    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
    
    const [currentDate, setCurrentDate] = useState(new Date());
    const [selectedDateStr, setSelectedDateStr] = useState<string>(todayStr);

    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();

    // Helper functions for calendar grid
    const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
    const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay();

    const daysInMonth = getDaysInMonth(currentYear, currentMonth);
    const firstDayIndex = getFirstDayOfMonth(currentYear, currentMonth);

    // Build days array
    const calendarDays = [];

    // Previous month details
    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
    const prevMonthDaysCount = getDaysInMonth(prevYear, prevMonth);

    for (let i = firstDayIndex - 1; i >= 0; i--) {
        const dayNum = prevMonthDaysCount - i;
        calendarDays.push({
            day: dayNum,
            isCurrentMonth: false,
            dateString: `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`
        });
    }

    // Current month days
    for (let i = 1; i <= daysInMonth; i++) {
        calendarDays.push({
            day: i,
            isCurrentMonth: true,
            dateString: `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
        });
    }

    // Next month details
    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
    
    const totalGridCells = 42; // 6 rows
    const nextMonthDaysNeeded = totalGridCells - calendarDays.length;
    for (let i = 1; i <= nextMonthDaysNeeded; i++) {
        calendarDays.push({
            day: i,
            isCurrentMonth: false,
            dateString: `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`
        });
    }

    const nextMonthHandler = () => {
        setCurrentDate(new Date(currentYear, currentMonth + 1, 1));
    };

    const prevMonthHandler = () => {
        setCurrentDate(new Date(currentYear, currentMonth - 1, 1));
    };

    // Filter events for specific dates
    const getEventsForDate = (dateStr: string) => {
        return calendarEvents.filter((event) => event.date === dateStr);
    };

    const selectedDateEvents = getEventsForDate(selectedDateStr);

    const formatReadableDate = (dateStr: string) => {
        const dateObj = new Date(dateStr);
        if (isNaN(dateObj.getTime())) return dateStr;
        return `${dateObj.getDate()} ${MONTHS_INDONESIAN[dateObj.getMonth()]} ${dateObj.getFullYear()}`;
    };

    return (
        <>
            <Head title="Dashboard Instruktur" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Hero header */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-100 via-sky-50 to-indigo-100 p-6 shadow-sm dark:border-blue-800/30 dark:from-blue-950/50 dark:via-sky-950/40 dark:to-indigo-950/40">
                    <div className="relative z-10">
                        <div className="flex items-center gap-3 mb-1">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-200 dark:bg-blue-800/60">
                                <GraduationCap className="h-5 w-5 text-blue-700 dark:text-blue-300" />
                            </div>
                            <div>
                                <h1 className="text-2xl font-bold text-blue-900 dark:text-blue-100">Dashboard Instruktur</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">Kelola kelas, live session, dan pantau hasil pembelajaran siswa</p>
                            </div>
                        </div>
                    </div>
                    <div className="absolute right-6 top-1/2 -translate-y-1/2 hidden sm:block">
                        <div className="flex gap-3 text-center">
                            <div className="rounded-xl bg-blue-200/60 px-4 py-3 dark:bg-blue-800/40">
                                <p className="text-2xl font-bold text-blue-900 dark:text-blue-100">{stats.total_courses}</p>
                                <p className="text-xs text-blue-600 dark:text-blue-400">Kelas Diajar</p>
                            </div>
                            <div className="rounded-xl bg-indigo-200/60 px-4 py-3 dark:bg-indigo-800/40">
                                <p className="text-2xl font-bold text-blue-900 dark:text-blue-100">{stats.total_students}</p>
                                <p className="text-xs text-blue-600 dark:text-blue-400">Siswa Terdaftar</p>
                            </div>
                        </div>
                    </div>
                    <div className="absolute -left-8 -bottom-8 h-32 w-32 rounded-full bg-blue-200/30 dark:bg-blue-700/10" />
                    <div className="absolute right-40 -top-6 h-24 w-24 rounded-full bg-indigo-200/30 dark:bg-indigo-700/10" />
                </div>

                {/* Stat cards */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatCard
                        label="Kelas Diajar"
                        value={stats.total_courses}
                        icon={BookOpen}
                        bgClass="bg-teal-100 dark:bg-teal-900/30"
                        textClass="text-teal-800 dark:text-teal-200"
                        iconBgClass="bg-teal-200 dark:bg-teal-800/60"
                        href="/instructor/courses"
                    />
                    <StatCard
                        label="Siswa Mengikuti"
                        value={stats.total_students}
                        icon={Users}
                        bgClass="bg-blue-100 dark:bg-blue-900/30"
                        textClass="text-blue-800 dark:text-blue-200"
                        iconBgClass="bg-blue-200 dark:bg-blue-800/60"
                        href="/instructor/courses"
                    />
                    <StatCard
                        label="Tugas Perlu Dinilai"
                        value={stats.pending_assignments}
                        icon={ClipboardList}
                        bgClass="bg-amber-100 dark:bg-amber-900/30"
                        textClass="text-amber-800 dark:text-amber-200"
                        iconBgClass="bg-amber-200 dark:bg-amber-800/60"
                        href="/instructor/courses"
                    />
                    <StatCard
                        label="Sesi Live Class"
                        value={stats.upcoming_live_classes}
                        icon={Video}
                        bgClass="bg-indigo-100 dark:bg-indigo-900/30"
                        textClass="text-indigo-800 dark:text-indigo-200"
                        iconBgClass="bg-indigo-200 dark:bg-indigo-800/60"
                        href="/instructor/live-classes"
                    />
                </div>

                {/* Main Content Sections: Calendar and Lists */}
                <div className="grid gap-6 lg:grid-cols-3">
                    
                    {/* Calendar & Selected Day Details (2 columns) */}
                    <div className="lg:col-span-2 flex flex-col gap-6">
                        
                        {/* Monthly Calendar Card */}
                        <div className="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div className="flex items-center justify-between border-b border-blue-50 bg-gradient-to-r from-blue-50 to-indigo-50 px-5 py-4 dark:border-blue-900/20 dark:from-blue-950/40 dark:to-indigo-950/40">
                                <div className="flex items-center gap-2">
                                    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/50">
                                        <CalendarIcon className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <h2 className="font-semibold text-blue-900 dark:text-blue-100">
                                        Kalender Kegiatan — {MONTHS_INDONESIAN[currentMonth]} {currentYear}
                                    </h2>
                                </div>
                                <div className="flex items-center gap-1.5">
                                    <button 
                                        onClick={prevMonthHandler}
                                        className="p-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 text-blue-700 dark:border-blue-800 dark:hover:bg-blue-950 dark:text-blue-300 transition-colors"
                                    >
                                        <ChevronLeft className="h-4 w-4" />
                                    </button>
                                    <button 
                                        onClick={nextMonthHandler}
                                        className="p-1.5 rounded-lg border border-blue-200 hover:bg-blue-100 text-blue-700 dark:border-blue-800 dark:hover:bg-blue-950 dark:text-blue-300 transition-colors"
                                    >
                                        <ChevronRight className="h-4 w-4" />
                                    </button>
                                </div>
                            </div>

                            <div className="p-4">
                                {/* Week Days Headers */}
                                <div className="grid grid-cols-7 text-center mb-2 font-semibold text-xs text-muted-foreground">
                                    {DAYS_INDONESIAN.map((day) => (
                                        <div key={day} className="py-1">{day}</div>
                                    ))}
                                </div>

                                {/* Days Grid */}
                                <div className="grid grid-cols-7 gap-1">
                                    {calendarDays.map(({ day, isCurrentMonth, dateString }, idx) => {
                                        const events = getEventsForDate(dateString);
                                        const hasLiveClass = events.some(e => e.type === 'live_class');
                                        const hasAssignment = events.some(e => e.type === 'assignment_deadline');
                                        const isSelected = dateString === selectedDateStr;
                                        const isToday = dateString === todayStr;

                                        return (
                                            <button
                                                key={idx}
                                                onClick={() => setSelectedDateStr(dateString)}
                                                className={`
                                                    relative flex flex-col items-center justify-between aspect-square rounded-xl p-1.5 text-sm transition-all duration-155 border
                                                    ${isCurrentMonth ? 'text-foreground font-medium' : 'text-muted-foreground/55'}
                                                    ${isSelected 
                                                        ? 'border-blue-600 bg-blue-50/70 dark:border-blue-500 dark:bg-blue-950/40 ring-1 ring-blue-600 dark:ring-blue-500' 
                                                        : isToday
                                                            ? 'border-indigo-200 bg-indigo-50/50 dark:border-indigo-900/30 dark:bg-indigo-950/20'
                                                            : 'border-transparent hover:bg-gray-100 dark:hover:bg-zinc-800/50'
                                                    }
                                                `}
                                            >
                                                {/* Day Number */}
                                                <span className={`text-xs md:text-sm ${isToday && !isSelected ? 'text-indigo-600 dark:text-indigo-400 font-bold' : ''}`}>
                                                    {day}
                                                </span>

                                                {/* Event Indicators */}
                                                <div className="flex gap-1 mt-auto">
                                                    {hasLiveClass && (
                                                        <span className="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" title="Live Class" />
                                                    )}
                                                    {hasAssignment && (
                                                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500 dark:bg-amber-400" title="Tenggat Tugas" />
                                                    )}
                                                </div>
                                            </button>
                                        );
                                    })}
                                </div>
                            </div>
                        </div>

                        {/* Selected Day Events List */}
                        <div className="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div className="border-b border-blue-50 bg-gradient-to-r from-blue-50 to-indigo-50 px-5 py-4 dark:border-blue-900/20 dark:from-blue-950/40 dark:to-indigo-950/40">
                                <h3 className="font-semibold text-blue-900 dark:text-blue-100">
                                    Agenda Hari: {formatReadableDate(selectedDateStr)}
                                </h3>
                            </div>
                            <div className="p-5">
                                {selectedDateEvents.length === 0 ? (
                                    <div className="flex flex-col items-center justify-center py-6 text-center text-muted-foreground">
                                        <CalendarIcon className="h-8 w-8 text-muted-foreground/40 mb-2" />
                                        <p className="text-sm">Tidak ada jadwal atau tenggat waktu pada hari ini.</p>
                                    </div>
                                ) : (
                                    <div className="space-y-3">
                                        {selectedDateEvents.map((event) => (
                                            <div 
                                                key={event.id}
                                                className={`flex items-start justify-between p-4 rounded-xl border transition-all ${
                                                    event.type === 'live_class'
                                                        ? 'border-blue-100 bg-blue-50/30 dark:border-blue-950/40 dark:bg-blue-950/10'
                                                        : 'border-amber-100 bg-amber-50/30 dark:border-amber-950/40 dark:bg-amber-950/10'
                                                }`}
                                            >
                                                <div className="flex gap-3">
                                                    <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg mt-0.5 ${
                                                        event.type === 'live_class'
                                                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
                                                            : 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300'
                                                    }`}>
                                                        {event.type === 'live_class' ? <Video className="h-5 w-5" /> : <ClipboardList className="h-5 w-5" />}
                                                    </div>
                                                    <div>
                                                        <h4 className="text-sm font-semibold text-foreground leading-snug">{event.title}</h4>
                                                        <p className="text-xs text-muted-foreground mt-0.5">{event.course_title}</p>
                                                        <div className="flex items-center gap-1.5 mt-2 text-xs text-muted-foreground">
                                                            <Clock className="h-3.5 w-3.5" />
                                                            <span>Pukul {event.time}</span>
                                                            <span className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none ${
                                                                event.type === 'live_class'
                                                                    ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200'
                                                                    : 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200'
                                                            }`}>
                                                                {event.type === 'live_class' ? 'Live Class' : 'Tenggat Tugas'}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <Link 
                                                    href={event.url}
                                                    className={`shrink-0 rounded-lg px-3 py-1.5 text-xs font-semibold shadow-sm transition-colors ${
                                                        event.type === 'live_class'
                                                            ? 'bg-blue-600 text-white hover:bg-blue-700'
                                                            : 'bg-amber-500 text-amber-950 hover:bg-amber-600'
                                                    }`}
                                                >
                                                    {event.type === 'live_class' ? 'Mulai Kelas' : 'Periksa Tugas'}
                                                </Link>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Urgent Panels (1 column) */}
                    <div className="flex flex-col gap-6">

                        {/* Grading Queue Panel */}
                        <div className="overflow-hidden rounded-2xl border border-amber-100 bg-white shadow-sm dark:border-amber-900/30 dark:bg-card">
                            <div className="flex items-center justify-between border-b border-amber-50 bg-gradient-to-r from-amber-50 to-orange-50 px-5 py-4 dark:border-amber-900/20 dark:from-amber-950/30 dark:to-orange-950/30">
                                <div className="flex items-center gap-2">
                                    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/50">
                                        <Clock className="h-4 w-4 text-amber-600 dark:text-amber-400" />
                                    </div>
                                    <h2 className="font-semibold text-amber-900 dark:text-amber-100">Tugas Perlu Dinilai</h2>
                                </div>
                            </div>
                            {pendingSubmissions.length === 0 ? (
                                <div className="flex flex-col items-center justify-center py-12 text-center">
                                    <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/20">
                                        <CheckCircle2 className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
                                    </div>
                                    <p className="text-sm text-muted-foreground px-4">Semua tugas siswa telah dinilai</p>
                                </div>
                            ) : (
                                <ul className="divide-y divide-amber-50 dark:divide-amber-900/20">
                                    {pendingSubmissions.map((sub) => (
                                        <li key={sub.id} className="flex items-start gap-3 px-5 py-4 hover:bg-amber-50/30 dark:hover:bg-amber-950/10 transition-colors">
                                            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-400 to-orange-400 text-xs font-bold text-white shadow-sm">
                                                {getInitials(sub.student_name)}
                                            </div>
                                            <div className="min-w-0 flex-1">
                                                <p className="text-sm font-semibold truncate text-foreground">{sub.student_name}</p>
                                                <p className="text-xs text-muted-foreground font-medium truncate mt-0.5">{sub.assignment_title}</p>
                                                <p className="text-[10px] text-muted-foreground mt-1 truncate">{sub.course_title}</p>
                                                <p className="text-[10px] text-amber-600 dark:text-amber-400 font-medium mt-1">{sub.submitted_at}</p>
                                            </div>
                                            <Link
                                                href={sub.url}
                                                className="shrink-0 rounded-lg bg-amber-400 px-3 py-1.5 text-xs font-semibold text-amber-950 hover:bg-amber-500 transition-colors shadow-sm"
                                            >
                                                Nilai
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            )}
                        </div>

                        {/* Upcoming Live Classes Panel */}
                        <div className="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div className="flex items-center justify-between border-b border-blue-50 bg-gradient-to-r from-blue-50 to-indigo-50 px-5 py-4 dark:border-blue-900/20 dark:from-blue-950/40 dark:to-indigo-950/40">
                                <div className="flex items-center gap-2">
                                    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/50">
                                        <Video className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <h2 className="font-semibold text-blue-900 dark:text-blue-100">Live Class Terdekat</h2>
                                </div>
                                <Link
                                    href="/instructor/live-classes"
                                    className="flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900/30 transition-colors"
                                >
                                    Semua <ArrowRight className="h-3 w-3" />
                                </Link>
                            </div>
                            {upcomingLiveClasses.length === 0 ? (
                                <div className="flex flex-col items-center justify-center py-12 text-center">
                                    <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
                                        <Video className="h-6 w-6 text-blue-300" />
                                    </div>
                                    <p className="text-sm text-muted-foreground px-4">Belum ada sesi Live Class terjadwal</p>
                                    <Link
                                        href="/instructor/live-classes/create"
                                        className="mt-3 inline-flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 transition-colors"
                                    >
                                        Buat Sesi <ArrowRight className="h-3.5 w-3.5" />
                                    </Link>
                                </div>
                            ) : (
                                <ul className="divide-y divide-blue-50 dark:divide-blue-900/20">
                                    {upcomingLiveClasses.map((lc) => {
                                        const lcDate = new Date(lc.scheduled_at);
                                        const formattedTime = lcDate.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
                                        const formattedDate = `${lcDate.getDate()} ${MONTHS_INDONESIAN[lcDate.getMonth()]}`;

                                        return (
                                            <li key={lc.id} className="flex items-start gap-3 px-5 py-4 hover:bg-blue-50/30 dark:hover:bg-blue-950/10 transition-colors">
                                                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                                                    <Video className="h-5 w-5" />
                                                </div>
                                                <div className="min-w-0 flex-1">
                                                    <p className="text-sm font-semibold truncate text-foreground">{lc.title}</p>
                                                    <p className="text-xs text-muted-foreground truncate mt-0.5">{lc.course_title}</p>
                                                    <div className="flex items-center gap-2 mt-1 text-[10px] text-muted-foreground font-medium">
                                                        <span>{formattedDate}, Pukul {formattedTime}</span>
                                                        <span>•</span>
                                                        <span>{lc.duration_minutes} Menit</span>
                                                    </div>
                                                </div>
                                                <Link
                                                    href={lc.url}
                                                    className="shrink-0 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 transition-colors shadow-sm"
                                                >
                                                    Mulai
                                                </Link>
                                            </li>
                                        );
                                    })}
                                </ul>
                            )}
                        </div>

                    </div>

                </div>
            </div>
        </>
    );
}

InstructorDashboard.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;