import { Link, usePage } from '@inertiajs/react';
import { School, Bell, ChevronDown } from 'lucide-react';
import StudentSidebar from './StudentSidebar';
import BottomNav from './BottomNav';

export default function StudentLayout({
    children,
    activeSidebarKey = 'dashboard',
    title,
}) {
    const user = usePage().props.auth?.user;

    return (
        <div className="flex h-screen overflow-hidden bg-surface">
            <StudentSidebar activeKey={activeSidebarKey} />

            <main className="flex-1 flex flex-col overflow-hidden lg:ml-64">
                <header className="hidden lg:flex h-16 shrink-0 items-center justify-between border-b border-outline-variant bg-white/80 backdrop-blur-md px-8 sticky top-0 z-30">
                    <div className="flex items-center gap-2 text-sm text-slate-500">
                        <School className="w-4 h-4" />
                        <span>{title || 'Portal do Aluno'}</span>
                    </div>

                    <div className="flex items-center gap-3">
                        <button
                            type="button"
                            className="relative rounded-xl p-2.5 text-slate-500 hover:bg-surface transition-colors"
                            aria-label="Notificações"
                        >
                            <Bell className="w-5 h-5" />
                            <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-secondary" />
                        </button>

                        <Link
                            href={route('student.profile.edit')}
                            className="flex items-center gap-2 rounded-xl px-3 py-2 text-slate-600 hover:bg-surface transition-colors"
                        >
                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500 text-white text-xs font-bold">
                                {user?.name
                                    ?.split(' ')
                                    .slice(0, 2)
                                    .map((n) => n[0])
                                    .join('')
                                    .toUpperCase() ?? 'A'}
                            </div>
                            <span className="text-sm font-medium">{user?.name}</span>
                            <ChevronDown className="w-4 h-4" />
                        </Link>
                    </div>
                </header>

                <div className="flex-1 overflow-y-auto">
                    {children}
                </div>
            </main>

            <BottomNav activeKey={activeSidebarKey} />
        </div>
    );
}