import { usePage, Link, router } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import {
    CalendarCheck,
    ClipboardList,
    Users,
    BookOpen,
    Clock,
    ArrowRight,
    BarChart3,
    Check,
    Activity,
    Target,
} from 'lucide-react';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import WeeklyScheduleCard from '@/components/WeeklyScheduleCard';
import { UpcomingHolidaysWidget, type UpcomingHolidayItem } from '@/components/UpcomingHolidaysWidget';
import { cn } from '@/lib/utils';
import type { PageProps } from '@/types';
import { useState } from 'react';

interface BookingScheduleData {
    bookings: Array<{
        id: number;
        tanggal: string;
        hari: number;
        jam_ke: number;
        jumlah_jp: number;
        status: 'menunggu' | 'terlaksana';
        checkin_at: string | null;
        kode: string;
        kelas_nama: string;
        kelas_tingkat: number;
        mapel_nama: string;
        mapel_kode: string;
    }>;
    jam_pelajaran: Array<{
        jam_ke: number;
        label: string;
        jam_mulai: string;
        jam_selesai: string;
    }>;
    meta: {
        guru_nama: string | null;
        guru_nip: string;
        week_start: string;
        week_end: string;
        total_kelas: number;
        total_jp: number;
        error?: string | null;
    };
    available: boolean;
}

interface StudentActivity {
    student_id: number;
    name: string;
    class_name: string;
    last_seen_at: string | null;
    minutes_ago: number | null;
    status: 'online' | 'baru_aktif' | 'offline' | 'belum_pernah';
    last_event: string | null;
    last_event_desc: string | null;
}

interface TeacherTarget {
    id: number;
    target_jp: number;
    progress_jp: number;
    kelas_nama: string;
    kelas_tingkat: number;
    mapel_nama: string;
    mapel_kode: string;
}

interface ActivityFeedItem {
    id: number;
    user_id: number;
    student_name: string;
    class_name: string;
    event: string;
    description: string;
    created_at: string;
    time_ago: string;
}

interface TeacherDashboardProps extends PageProps {
    stats: {
        totalClasses: number;
        attendanceToday: number;
        journalsThisMonth: number;
        jpTodayTotal: number;
        jpTodayCompleted: number;
        jpWeekTotal: number;
        jpWeekCompleted: number;
        classesTodayTotal: number;
        classesTodayCompleted: number;
        teachingProgressPercentage: number;
    };
    recentAttendance: Array<{
        id: number;
        date: string;
        class_name: string;
        subject_name: string;
        present: number;
        total: number;
    }>;
    bookingSchedule: BookingScheduleData;
    teacherTargets?: TeacherTarget[];
    gurus?: Array<{
        nip: string;
        nama: string;
    }>;
    teacherClasses?: Array<{
        id: number;
        name: string;
        level: string;
        is_homeroom?: boolean;
    }>;
    currentTeacherNip?: string;
    studentActivities?: StudentActivity[];
    recentActivityFeed?: ActivityFeedItem[];
    upcomingHolidays?: UpcomingHolidayItem[];
}


export default function TeacherDashboard() {
    const {
        stats,
        recentAttendance,
        bookingSchedule,
        teacherTargets = [],
        gurus,
        teacherClasses = [],
        currentTeacherNip,
        auth,
        studentActivities = [],
        recentActivityFeed = [],
        upcomingHolidays = [],
    } = usePage<TeacherDashboardProps>().props;

    const currentHour = new Date().getHours();
    let greeting = 'Selamat pagi';
    if (currentHour >= 11 && currentHour < 15) greeting = 'Selamat siang';
    else if (currentHour >= 15 && currentHour < 18) greeting = 'Selamat sore';
    else if (currentHour >= 18 || currentHour < 4) greeting = 'Selamat malam';

    // Keep the greeting consistent with the profile/sidebar name, including
    // every part of the teacher's name and any academic title (e.g. S.Pd.).
    const displayGreetingName = auth.user.name;

    // Unique classes taught (for filter dropdown)
    const classOptions = ['Semua Kelas', ...Array.from(new Set(recentActivityFeed.map(s => s.class_name))).sort()];
    const [filterClass, setFilterClass] = useState('Semua Kelas');

    const filteredActivityFeed = filterClass === 'Semua Kelas'
        ? recentActivityFeed
        : recentActivityFeed.filter(a => a.class_name === filterClass);

    const displayedActivityFeed = filteredActivityFeed.slice(0, 8);

    // Mapels for Target Tabs
    const mapels = Array.from(new Set(teacherTargets.map(t => t.mapel_nama))).sort();
    const [activeMapelTab, setActiveMapelTab] = useState(mapels[0] || '');

    const totalTargetJp = teacherTargets.reduce((sum, t) => sum + (t.target_jp || 0), 0);
    const totalProgressJp = teacherTargets.reduce((sum, t) => sum + (t.progress_jp || 0), 0);
    const totalSisaJp = Math.max(0, totalTargetJp - totalProgressJp);
    const totalPercentage = totalTargetJp > 0 ? ((totalProgressJp / totalTargetJp) * 100).toFixed(1) : '0.0';
    
    // Ensure current tab is valid if data changes
    const currentMapelTab = mapels.includes(activeMapelTab) ? activeMapelTab : (mapels[0] || '');


    const guruStatCards = [
        { key: 'teachingProgress', label: 'Status Mengajar (Minggu Ini)', icon: BookOpen, color: 'text-amber-400', bgHover: 'hover:shadow-amber-500/10', type: 'progress' },
        { key: 'jpWeek', label: 'Total JP (Minggu Ini)', icon: ClipboardList, color: 'text-teal-400', bgHover: 'hover:shadow-teal-500/10', type: 'ratioWeek' },
        { key: 'classesToday', label: 'Kelas Selesai (Hari Ini)', icon: CalendarCheck, color: 'text-emerald-400', bgHover: 'hover:shadow-emerald-500/10', type: 'ratioClass' },
        { key: 'jpToday', label: 'JP Terlaksana (Hari Ini)', icon: Clock, color: 'text-sky-400', bgHover: 'hover:shadow-sky-500/10', type: 'ratioJp' },
    ] as const;

    const quickActions = [
        { href: route('booking-drafts.index'), label: 'Booking', icon: CalendarCheck, color: 'text-emerald-500', ring: 'ring-emerald-500/20 hover:ring-emerald-500/40 hover:bg-emerald-500/5' },
        { href: route('attendance.recap'), label: 'Rekap', icon: BarChart3, color: 'text-teal-500', ring: 'ring-teal-500/20 hover:ring-teal-500/40 hover:bg-teal-500/5' },
        { href: route('materials.index'), label: 'Materi', icon: BookOpen, color: 'text-sky-500', ring: 'ring-sky-500/20 hover:ring-sky-500/40 hover:bg-sky-500/5' },
        { href: route('games.index'), label: 'Game', icon: Users, color: 'text-amber-500', ring: 'ring-amber-500/20 hover:ring-amber-500/40 hover:bg-amber-500/5' },
    ] as const;

    return (
        <>
            <Head title="Portal Guru" />

            {/* Greeting */}
            <div className="mb-4">
                <h1 className="text-xl sm:text-2xl font-black text-text-light mb-1">
                    {greeting},{' '}
                    <span className="bg-gradient-to-r from-emerald-600 to-lime-500 dark:from-emerald-400 dark:to-lime-400 bg-clip-text text-transparent">
                        {displayGreetingName}
                    </span>
                    ! 👋
                </h1>
            </div>

            {/* Stat Cards */}
            <div className="mb-4 grid gap-2 sm:gap-3 grid-cols-2 sm:grid-cols-4 lg:grid-cols-4">
                {guruStatCards.map((card, index) => {
                    let value: React.ReactNode;

                    if (card.type === 'progress') {
                        const pct = stats.teachingProgressPercentage ?? 0;
                        value = (
                            <div className="flex flex-col w-full">
                                <div className="flex items-center gap-2">
                                    <div className="relative h-6 w-6 sm:h-7 sm:w-7 shrink-0 rounded-full flex items-center justify-center overflow-hidden" style={{ background: `conic-gradient(#fbbf24 ${pct}%, rgba(255,255,255,0.05) ${pct}%)` }}>
                                        <div className="absolute inset-[3px] rounded-full bg-white dark:bg-[#0a0f1c]" />
                                    </div>
                                    <div className="flex items-baseline gap-1">
                                        <span className="text-xl sm:text-2xl font-black text-text-light">{pct}%</span>
                                    </div>
                                </div>
                            </div>
                        );
                    } else if (card.type === 'ratioWeek') {
                        const total = stats.jpWeekTotal ?? 0;
                        const completed = stats.jpWeekCompleted ?? 0;
                        const pct = total > 0 ? (completed / total) * 100 : 0;
                        value = (
                            <div className="flex flex-col w-full">
                                <div className="flex items-baseline gap-1">
                                    <span className="text-xl sm:text-2xl font-black text-text-light">{completed}</span>
                                    <span className="text-xs sm:text-sm font-bold text-text-muted">/ {total} JP</span>
                                </div>
                                <div className="mt-1 h-1 w-full bg-surface-hover rounded-full overflow-hidden">
                                    <div className="h-full bg-teal-500 rounded-full" style={{ width: `${pct}%` }} />
                                </div>
                            </div>
                        );
                    } else if (card.type === 'ratioClass') {
                        const total = stats.classesTodayTotal ?? 0;
                        const completed = stats.classesTodayCompleted ?? 0;
                        value = (
                            <div className="flex items-center gap-2 w-full">
                                <div className="flex items-baseline gap-1">
                                    <span className={cn("text-xl sm:text-2xl font-black", total > 0 && completed >= total ? "text-emerald-500" : "text-text-light")}>{completed}</span>
                                    <span className="text-xs sm:text-sm font-bold text-text-muted">/ {total} Kelas</span>
                                </div>
                                {total > 0 && completed >= total && (
                                    <div className="bg-emerald-500/20 p-0.5 rounded-full flex shrink-0 ml-auto">
                                        <Check className="h-3 w-3 sm:h-4 sm:w-4 text-emerald-500" strokeWidth={3} />
                                    </div>
                                )}
                            </div>
                        );
                    } else if (card.type === 'ratioJp') {
                        const total = stats.jpTodayTotal ?? 0;
                        const completed = stats.jpTodayCompleted ?? 0;
                        value = (
                            <div className="flex items-center gap-2 w-full">
                                <div className="flex items-baseline gap-1">
                                    <span className={cn("text-xl sm:text-2xl font-black", total > 0 && completed >= total ? "text-sky-500" : "text-text-light")}>{completed}</span>
                                    <span className="text-xs sm:text-sm font-bold text-text-muted">/ {total} JP</span>
                                </div>
                                {total > 0 && completed >= total && (
                                    <div className="bg-sky-500/20 p-0.5 rounded-full flex shrink-0 ml-auto">
                                        <Check className="h-3 w-3 sm:h-4 sm:w-4 text-sky-500" strokeWidth={3} />
                                    </div>
                                )}
                            </div>
                        );
                    }

                    return (
                        <div
                            key={card.key}
                            className={cn("glass reveal group relative overflow-hidden rounded-xl sm:rounded-2xl p-3 sm:p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl border border-white/20 dark:border-white/5", card.bgHover, `reveal-delay-${index + 1}`)}
                        >
                            <div className="flex flex-col xl:flex-row xl:items-center justify-start xl:justify-between gap-2.5 xl:gap-3 h-full">
                                <div
                                    className={cn(
                                        'flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-surface ring-1 ring-border/50 transition-transform group-hover:scale-110 shrink-0',
                                        card.color,
                                    )}
                                >
                                    <card.icon className="h-4 w-4 sm:h-5 sm:w-5" />
                                </div>
                                <div className="min-w-0 flex-1">
                                    <p className="text-[10px] sm:text-xs font-bold sm:font-medium text-text-muted leading-tight">
                                        {card.label}
                                    </p>
                                    <div className="mt-1 sm:mt-1.5 flex items-center w-full">
                                        {value}
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>

            {/* ── Quick Actions ── */}
            <div className="mb-4 reveal reveal-delay-4">
                <div className="glass rounded-xl p-2 sm:p-2.5 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
                    <div className="hidden sm:flex items-center gap-2 shrink-0">
                        <span className="text-[10px] font-bold text-text-muted uppercase tracking-widest pl-1">
                            Aksi Cepat
                        </span>
                        <div className="w-px h-5 bg-border/40" />
                    </div>
                    <div className="grid grid-cols-2 sm:flex sm:flex-1 gap-2">
                        {quickActions.map(({ href, label, icon: Icon, color, ring }) => (
                            <Link
                                key={label}
                                href={href}
                                className={cn(
                                    'flex items-center justify-center sm:justify-start gap-2 px-3 py-2.5 sm:py-2 rounded-lg ring-1 transition-all duration-200 sm:flex-1',
                                    ring,
                                )}
                            >
                                <Icon className={cn('h-4 w-4 shrink-0', color)} />
                                <span className="text-xs sm:text-sm font-semibold text-text-light whitespace-nowrap">{label}</span>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>

            {/* Booking Schedule from KALASI'U */}
            {bookingSchedule && (
                <div className="mb-4 reveal reveal-delay-5">
                    <WeeklyScheduleCard
                        data={bookingSchedule}
                        gurus={gurus || []}
                        teacherClasses={teacherClasses}
                        currentTeacherNip={currentTeacherNip || auth.user?.nip || undefined}
                    />
                </div>
            )}

            {/* Total Progres Mengajar */}
            {teacherTargets.length > 0 && (
                <div className="mb-4 reveal reveal-delay-4">
                    <div className="glass rounded-2xl p-3 sm:p-5 flex flex-col">
                        <div className="flex flex-row items-center justify-between gap-2 sm:gap-4">
                            {/* Left: Title & Percentage */}
                            <div className="flex items-center gap-2 sm:gap-3">
                                <div className="flex h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-emerald-500/10 items-center justify-center shrink-0">
                                    <Target className="h-4 w-4 sm:h-5 sm:w-5 text-emerald-500" />
                                </div>
                                <div className="flex flex-col justify-center">
                                    <p className="text-[9px] sm:text-[11px] font-bold text-text-muted mb-0.5 uppercase tracking-wider">Total Progres</p>
                                    <div className="flex items-baseline gap-1">
                                        <p className="text-lg sm:text-2xl font-black text-emerald-500 tracking-tight leading-none">
                                            {totalPercentage}%
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            {/* Right: Stats */}
                            <div className="flex items-center gap-2 sm:gap-4 shrink-0">
                                <div className="text-right">
                                    <div className="text-sm sm:text-xl font-black text-text-light leading-none mb-0.5 sm:mb-1">{totalTargetJp}</div>
                                    <div className="text-[8px] sm:text-[10px] font-bold text-text-muted uppercase tracking-wider">Target</div>
                                </div>
                                <div className="w-px h-5 sm:h-8 bg-border/40"></div>
                                <div className="text-right">
                                    <div className="text-sm sm:text-xl font-black text-emerald-500 leading-none mb-0.5 sm:mb-1">{totalProgressJp}</div>
                                    <div className="text-[8px] sm:text-[10px] font-bold text-emerald-500/80 uppercase tracking-wider">Selesai</div>
                                </div>
                                <div className="w-px h-5 sm:h-8 bg-border/40"></div>
                                <div className="text-right">
                                    <div className="text-sm sm:text-xl font-black text-rose-500 leading-none mb-0.5 sm:mb-1">{totalSisaJp}</div>
                                    <div className="text-[8px] sm:text-[10px] font-bold text-rose-500/80 uppercase tracking-wider">Sisa</div>
                                </div>
                            </div>
                        </div>
                        
                        <div className="mt-3 sm:mt-4 h-1 sm:h-1.5 w-full bg-surface-hover rounded-full overflow-hidden">
                            <div 
                                className="h-full bg-emerald-500 rounded-full transition-all duration-1000 ease-out relative" 
                                style={{ width: `${Math.min(100, Number(totalPercentage))}%` }}
                            >
                                <div className="absolute inset-0 bg-white/20 w-full animate-shimmer" />
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Progres Target Mengajar */}
            {mapels.length > 0 && (
                <div className="mb-4 glass reveal reveal-delay-5 rounded-2xl p-4 sm:p-5 flex flex-col">
                    <div className="mb-4 flex items-center justify-between gap-3">
                        <div className="flex items-center gap-3">
                            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-surface text-amber-400">
                                <Target className="h-4 w-4" />
                            </div>
                            <h3 className="text-base font-bold text-text-light">Progres Target Mengajar</h3>
                        </div>
                    </div>

                    {/* Tabs */}
                    <div className="flex justify-center sm:justify-start gap-2 overflow-x-auto pt-1 pb-2 mb-2 snap-x hide-scrollbar">
                        {mapels.map((mapel) => (
                            <button
                                key={mapel}
                                onClick={() => setActiveMapelTab(mapel)}
                                className={cn(
                                    "snap-start px-4 py-1.5 sm:py-2 rounded-xl text-[13px] sm:text-sm font-semibold transition-all whitespace-nowrap",
                                    currentMapelTab === mapel
                                        ? "bg-amber-500/10 text-amber-500 ring-1 ring-amber-500/30"
                                        : "bg-surface text-text-muted hover:text-text-light hover:bg-surface-hover"
                                )}
                            >
                                {mapel}
                            </button>
                        ))}
                    </div>

                    {/* Target List for Active Mapel */}
                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3">
                        {teacherTargets.filter(t => t.mapel_nama === currentMapelTab).map((target) => {
                            const pct = target.target_jp > 0 
                                ? Math.min(100, Math.round((target.progress_jp / target.target_jp) * 100)) 
                                : 0;
                            
                            return (
                                <div key={target.id} className="rounded-xl bg-surface/50 p-2.5 sm:p-3.5 border border-border/30 flex flex-col justify-between group">
                                    <div className="flex justify-between items-start mb-2">
                                        <p className="text-xs sm:text-sm font-bold text-text-light leading-none">{target.kelas_nama}</p>
                                        <p className="text-[10px] sm:text-[11px] font-bold text-text-light leading-none">
                                            {target.progress_jp} / {target.target_jp} <span className="hidden sm:inline">JP</span>
                                        </p>
                                    </div>
                                    {/* Progress Bar */}
                                    <div>
                                        <div className="h-1.5 w-full bg-surface-hover rounded-full overflow-hidden mb-1 sm:mb-1.5">
                                            <div 
                                                className="h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full transition-all duration-500" 
                                                style={{ width: `${pct}%` }}
                                            />
                                        </div>
                                        <p className="text-[9px] text-text-muted text-right leading-none">{pct}% Selesai</p>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                {/* Presensi Terakhir — ordered by created_at, max 4 */}
                <div className="glass reveal reveal-delay-6 rounded-2xl p-4 sm:p-5 flex flex-col">
                    <div className="mb-3 flex items-center gap-3">
                        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-surface text-text-muted">
                            <Clock className="h-4 w-4" />
                        </div>
                        <h3 className="text-base font-bold text-text-light">Presensi Terakhir</h3>
                    </div>

                    {recentAttendance && recentAttendance.length > 0 ? (
                        <div className="space-y-2 flex-1">
                            {recentAttendance.map((item) => {
                                const pct =
                                    item.total > 0
                                        ? Math.round((item.present / item.total) * 100)
                                        : 0;
                                return (
                                    <Link
                                        key={item.id}
                                        href={route('attendance.edit', item.id)}
                                        className="flex items-center justify-between rounded-xl bg-surface/50 p-3 border border-border/30 hover:bg-surface transition-all group"
                                    >
                                        <div>
                                            <p className="text-sm font-bold text-text-light group-hover:text-teal-400 transition-colors">
                                                {item.class_name}
                                            </p>
                                            <p className="text-xs text-text-muted mt-0.5">
                                                {item.subject_name} • {item.date}
                                            </p>
                                        </div>
                                        <div className="flex items-center gap-3">
                                            <div className="text-right">
                                                <p className="text-xs font-bold text-text-light">
                                                    {item.present}/{item.total}
                                                </p>
                                                <p className="text-[10px] text-text-muted">hadir</p>
                                            </div>
                                            <div
                                                className={cn(
                                                    'flex h-10 w-10 items-center justify-center rounded-full text-[10px] font-black',
                                                    pct >= 80
                                                        ? 'bg-emerald-500/10 text-emerald-500'
                                                        : pct >= 60
                                                          ? 'bg-amber-500/10 text-amber-500'
                                                          : 'bg-rose-500/10 text-rose-500',
                                                )}
                                            >
                                                {pct}%
                                            </div>
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
                            <CalendarCheck className="h-12 w-12 text-text-muted/30 mb-3" />
                            <p className="text-text-muted">Belum ada sesi presensi.</p>
                        </div>
                    )}

                    <div className="mt-4 pt-3 border-t border-border/40 text-center">
                        <Link
                            href={route('attendance.index')}
                            className="inline-flex items-center gap-2 text-[13px] font-medium text-teal-400 hover:text-teal-300"
                        >
                            Lihat Semua Riwayat <ArrowRight className="h-3.5 w-3.5" />
                        </Link>
                    </div>

                    <div className="mt-4">
                        <UpcomingHolidaysWidget holidays={upcomingHolidays} />
                    </div>
                </div>

                {/* Student Activity Feed & Presence */}
                <div className="glass reveal reveal-delay-7 rounded-2xl p-4 sm:p-5 flex flex-col">
                    <div className="mb-3 flex items-center justify-between gap-3 flex-wrap">
                        <div className="flex items-center gap-2">
                            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-surface text-sky-400">
                                <Activity className="h-4 w-4" />
                            </div>
                            <h3 className="text-base font-bold text-text-light">Aktivitas Siswa</h3>
                        </div>

                        <div className="flex items-center gap-2">
                            {/* Class filter */}
                            {classOptions.length > 2 && (
                                <select
                                    value={filterClass}
                                    onChange={e => setFilterClass(e.target.value)}
                                    className="text-xs bg-surface border border-border/40 rounded-lg px-2 py-1 text-text-muted focus:outline-none focus:ring-1 focus:ring-border"
                                >
                                    {classOptions.map(c => (
                                        <option key={c} value={c}>{c}</option>
                                    ))}
                                </select>
                            )}
                            <Link
                                href={route('activity.student.index')}
                                className="inline-flex items-center gap-1 text-xs font-semibold text-sky-400 hover:text-sky-300 whitespace-nowrap"
                            >
                                Lihat Semua <ArrowRight className="h-3 w-3" />
                            </Link>
                        </div>
                    </div>

                    {/* Activity Feed Content */}
                    {displayedActivityFeed.length > 0 ? (
                        <div className="space-y-2 flex-1">
                                    {displayedActivityFeed.map((item) => (
                                        <div
                                            key={item.id}
                                            className="flex items-start justify-between rounded-xl bg-surface/50 p-2.5 border border-border/30 gap-2 hover:bg-surface/80 transition-colors"
                                        >
                                            <div className="flex items-start gap-2.5 min-w-0">
                                                <div className="h-7 w-7 rounded-full bg-sky-500/10 text-sky-400 flex items-center justify-center text-[10px] font-black shrink-0 mt-0.5 border border-sky-500/20">
                                                    {item.student_name.split(' ').map(w => w[0]).slice(0, 2).join('')}
                                                </div>
                                                <div className="min-w-0">
                                                    <div className="flex items-center gap-1.5 flex-wrap">
                                                        <p className="text-xs font-bold text-text-light truncate">{item.student_name}</p>
                                                        <span className="text-[9px] px-1.5 py-0.2 rounded bg-surface border border-border/40 text-text-muted">
                                                            {item.class_name}
                                                        </span>
                                                    </div>
                                                    <p className="text-[11px] text-text-muted mt-0.5 truncate">
                                                        {item.description}
                                                    </p>
                                                </div>
                                            </div>
                                            <span className="text-[9px] text-text-muted shrink-0 mt-0.5">
                                                {item.time_ago}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
                                    <Activity className="h-10 w-10 text-text-muted/30 mb-2" />
                                    <p className="text-xs text-text-muted">
                                        Belum ada aktivitas akademik siswa tercatat hari ini.
                                    </p>
                                </div>
                    )}
                </div>
            </div>

        </>
    );
}

TeacherDashboard.layout = (page: any) => <AuthenticatedLayout title="Portal Guru">{page}</AuthenticatedLayout>;