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

const navItems = [
    { label: 'Command Center', href: 'admin.dashboard' },
    { label: 'Institutes', href: 'admin.institutes.index' },
    { label: 'Programmes', href: 'admin.programmes.index' },
    { label: 'Courses', href: 'admin.courses.index' },
    { label: 'Course Bank', href: 'admin.course-bank.index' },
    { label: 'Referral Wallets', href: 'admin.referrals.index', roles: ['super_admin', 'finance_officer'] },
    { label: 'Forum', href: 'forum.index' },
    { label: 'Forum Categories', href: 'admin.forum-categories.index', roles: ['super_admin'] },
    { label: 'Settings', href: 'admin.settings.edit', roles: ['super_admin'] },
];

const roleLabels: Record<string, string> = {
    super_admin: 'Super Administrator',
    academic_admin: 'Academic Administrator',
    facilitator: 'Facilitator',
    assessor: 'Assessor',
    support_officer: 'Support Officer',
    finance_officer: 'Finance Officer',
};

export default function AdminLayout({ 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 bg-jgcp-navy px-6 py-8 text-white md:flex">
                <div>
                    <Link href="/" className="block rounded-lg bg-white p-2"><ApplicationLogo className="h-auto w-full" /></Link>
                    <p className="text-label-caps mt-1 text-white/50">Institutional Control</p>

                    <nav className="mt-10 space-y-1">
                        {navItems
                            .filter((item) => !item.roles || item.roles.includes(auth.user.role))
                            .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-white/10 text-white'
                                            : 'text-white/70 hover:bg-white/5 hover:text-white'
                                    }`}
                                >
                                    {item.label}
                                </Link>
                            ))}
                    </nav>
                </div>

                <div className="space-y-3">
                    <div className="rounded-lg border border-white/10 bg-white/5 p-3 text-xs text-white/60">
                        Signed in as{' '}
                        <span className="font-semibold text-white">
                            {roleLabels[auth.user.role] ?? auth.user.role}
                        </span>
                    </div>
                    <Link
                        href={route('logout')}
                        method="post"
                        as="button"
                        className="block w-full rounded px-3 py-2 text-left text-sm text-white/70 hover:bg-white/5 hover:text-white"
                    >
                        Log Out
                    </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">
                    <p className="text-sm text-on-surface-variant">
                        Institutional Nodes: <span className="font-medium text-status-published">100% Operational</span>
                    </p>
                    <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">
                                {roleLabels[auth.user.role] ?? auth.user.role}
                            </p>
                        </div>
                        <Link
                            href={route('logout')}
                            method="post"
                            as="button"
                            className="rounded border border-outline-variant px-3 py-1.5 text-xs font-medium text-on-surface-variant hover:bg-surface-container"
                        >
                            Log Out
                        </Link>
                    </div>
                </header>

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