import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link, usePage } from '@inertiajs/react';
import { PropsWithChildren } from 'react';
import { PageProps } from '@/types';
import Button from '@/Components/UI/Button';
import PoweredByFooter from '@/Components/PoweredByFooter';
import FlashBanner from '@/Components/FlashBanner';

const navItems = [
    { label: 'Dashboard', href: 'student.dashboard' },
    { label: 'My Leadership Portfolio', href: 'student.portfolio.show' },
    { label: 'Refer & Earn', href: 'student.referrals.index' },
    { label: 'Forum', href: 'forum.index' },
];

export default function StudentLayout({ children }: PropsWithChildren) {
    const { auth } = usePage<PageProps>().props;

    return (
        <div className="flex min-h-screen bg-surface">
            <FlashBanner />
            <aside className="sticky top-0 hidden h-screen w-64 shrink-0 flex-col justify-between overflow-y-auto border-r border-outline-variant bg-surface-container-lowest px-6 py-8 md:flex">
                <div>
                    <Link href="/" className="text-lg font-bold tracking-tight text-jgcp-navy">
                        <ApplicationLogo className="h-auto w-40 sm:w-48" />
                    </Link>
                    <p className="text-label-caps mt-1 text-on-surface-variant">Institutional Hub</p>

                    <nav className="mt-10 space-y-1">
                        {navItems.map((item) => (
                            <Link
                                key={item.href}
                                href={route(item.href)}
                                className={`block rounded px-3 py-2 text-sm font-medium transition ${
                                    route().current(item.href)
                                        ? 'bg-secondary-container text-jgcp-navy'
                                        : 'text-on-surface-variant hover:bg-surface-container'
                                }`}
                            >
                                {item.label}
                            </Link>
                        ))}
                    </nav>
                </div>

                <div className="rounded-lg border border-outline-variant bg-surface-container-low p-4">
                    <p className="text-sm font-semibold text-on-surface">{auth.user.name}</p>
                    <p className="text-xs text-on-surface-variant">Student</p>
                    <Link
                        href={route('profile.edit')}
                        className="mt-3 block rounded bg-jgcp-navy px-3 py-2 text-center text-xs font-medium text-white"
                    >
                        My Profile
                    </Link>
                </div>
            </aside>

            <div className="flex min-h-screen flex-1 flex-col">
                <header className="sticky top-0 z-10 flex items-center justify-between border-b border-outline-variant bg-surface-container-lowest px-6 py-4 md:px-10">
                    <Link href="/" className="md:hidden"><ApplicationLogo className="h-auto w-32" /></Link>
                    <div className="hidden md:block" />
                    <div className="flex items-center gap-4">
                        <div className="text-right">
                            <p className="text-sm font-semibold text-on-surface">{auth.user.name}</p>
                            <p className="text-xs text-on-surface-variant">Student</p>
                        </div>
                        <Button href={route('logout')} method="post" variant="ghost">
                            Log Out
                        </Button>
                    </div>
                </header>

                <main className="flex-1 px-6 py-8 md:px-10">{children}</main>

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