import { Link, usePage } from '@inertiajs/react';
import { PropsWithChildren } from 'react';
import { SharedProps } from '@/types';

const sections: { label: string; href: string; permission: string }[] = [
    { label: 'Server Status', href: 'admin.dashboard', permission: 'access-admin-panel' },
    { label: 'Players', href: 'admin.players.index', permission: 'players.manage' },
    { label: 'Characters', href: 'admin.characters.index', permission: 'players.manage' },
    { label: 'Bans', href: 'admin.bans.index', permission: 'bans.manage' },
    { label: 'Warnings', href: 'admin.warnings.index', permission: 'warnings.manage' },
    { label: 'Whitelist', href: 'admin.whitelist.index', permission: 'whitelist.manage' },
    { label: 'Jobs', href: 'admin.jobs.index', permission: 'jobs.manage' },
    { label: 'Vehicles', href: 'admin.vehicles.index', permission: 'vehicles.manage' },
    { label: 'Items', href: 'admin.items.index', permission: 'items.manage' },
    { label: 'Economy', href: 'admin.economy.index', permission: 'economy.manage' },
    { label: 'News', href: 'admin.news.index', permission: 'news.manage' },
    { label: 'Roulette', href: 'admin.roulette.index', permission: 'roulette.manage' },
    { label: 'Online Players', href: 'admin.online-players', permission: 'access-admin-panel' },
    { label: 'Server Logs', href: 'admin.logs.server', permission: 'logs.view' },
    { label: 'Discord Logs', href: 'admin.logs.discord', permission: 'logs.view' },
    { label: 'Audit Logs', href: 'admin.logs.audit', permission: 'logs.view' },
    { label: 'Settings', href: 'admin.settings.edit', permission: 'settings.manage' },
];

export default function AdminLayout({ children }: PropsWithChildren) {
    const { auth } = usePage<SharedProps>().props;
    const permissions = auth.user?.permissions ?? [];

    return (
        <div className="min-h-screen bg-gray-950 text-gray-100 md:flex">
            <aside className="w-full shrink-0 border-b border-white/10 bg-gray-900 md:w-56 md:border-b-0 md:border-r">
                <div className="px-4 py-4">
                    <Link href={route('dashboard')} className="text-sm text-brand-400 hover:text-brand-300">
                        ← Back to UCP
                    </Link>
                </div>
                <nav className="flex flex-col gap-0.5 px-2 pb-4">
                    {sections
                        .filter((s) => permissions.includes(s.permission))
                        .map((s) => (
                            <Link
                                key={s.href}
                                href={route(s.href)}
                                className="rounded-md px-3 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white"
                            >
                                {s.label}
                            </Link>
                        ))}
                </nav>
            </aside>
            <main className="min-w-0 flex-1 px-4 py-8 md:px-8">{children}</main>
        </div>
    );
}
