import { StudentTopBar } from '@/components/student-top-bar';
import { useFlashToast } from '@/hooks/use-flash-toast';
import { Link, usePage } from '@inertiajs/react';
import { LayoutGrid, BookOpen, CalendarDays, Trophy, User } from 'lucide-react';
import { cn } from '@/lib/utils';

const bottomNavItems = [
    { title: 'Beranda', href: '/dashboard', icon: CalendarDays },
    { title: 'To Do', href: '/planner', icon: CalendarDays },
    { title: 'Kelas', href: '/my-courses', icon: BookOpen },
    { title: 'Leaderboard', href: '/leaderboard', icon: Trophy },
    { title: 'Profil', href: '/settings', icon: User },
];

export default function StudentLayout({ children, noContainer = false }: { children: React.ReactNode; noContainer?: boolean }) {
    useFlashToast();
    const { url, props } = usePage();
    const { auth } = props as unknown as { auth: Auth };

    const getThemeClass = (uiTheme: string | null | undefined) => {
        switch (uiTheme) {
            case 'siswa':
            case 'mahasiswa':
                return 'theme-pelajar';
            case 'pekerja':
                return 'theme-profesional';
            case 'umum':
            default:
                return 'theme-umum';
        }
    };

    const userTheme = getThemeClass(auth.user?.theme);

    return (
        <div className={`min-h-screen bg-slate-50 pb-20 md:pb-0 ${userTheme}`}>
            {/* Topbar for Desktop */}
            <StudentTopBar />

            {/* Main Content Area */}
            {noContainer ? (
                <main>{children}</main>
            ) : (
                <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
                    {children}
                </main>
            )}

            {/* Mobile Bottom Navigation Bar */}
            <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white shadow-lg md:hidden">
                <div className="flex h-16 items-center justify-around px-2">
                    {bottomNavItems.map((item) => {
                        const active = url.startsWith(item.href);
                        const activeTextClasses =
                            userTheme === 'theme-pelajar'
                                ? 'text-teal-600'
                                : userTheme === 'theme-profesional'
                                ? 'text-indigo-600'
                                : 'text-blue-600';

                        return (
                            <Link
                                key={item.title}
                                href={item.href}
                                className={cn(
                                    "flex flex-col items-center gap-1 text-xs transition-colors",
                                    active ? `${activeTextClasses} font-bold` : "text-gray-400 hover:text-gray-600"
                                )}
                            >
                                <item.icon className="h-5 w-5" />
                                <span>{item.title}</span>
                            </Link>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}