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

const navigation = [
    { name: 'Dashboard', href: 'dashboard' },
    { name: 'Characters', href: 'characters.index' },
    { name: 'Leaderboard', href: 'leaderboard.index' },
    { name: 'Achievements', href: 'achievements.index' },
    { name: 'Roulette', href: 'roulette.index' },
];

export default function AppLayout({ children }: PropsWithChildren) {
    const { auth, flash } = usePage<SharedProps>().props;

    return (
        <div className="min-h-screen bg-gray-950 text-gray-100">
            <nav className="border-b border-white/10 bg-gray-900">
                <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
                    <div className="flex items-center gap-6">
                        <Link href={route('dashboard')} className="text-lg font-bold">
                            EmpireRP UCP
                        </Link>
                        <div className="hidden gap-4 md:flex">
                            {navigation.map((item) => (
                                <Link
                                    key={item.href}
                                    href={route(item.href)}
                                    className="text-sm text-gray-300 hover:text-white"
                                >
                                    {item.name}
                                </Link>
                            ))}
                            {auth.user?.permissions.includes('access-admin-panel') && (
                                <Link href={route('admin.dashboard')} className="text-sm text-brand-400 hover:text-brand-300">
                                    Admin Panel
                                </Link>
                            )}
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <Link href={route('profile.edit')} className="flex items-center gap-2 text-sm text-gray-300 hover:text-white">
                            {auth.user?.discord_avatar && (
                                <img src={auth.user.discord_avatar} alt="" className="h-7 w-7 rounded-full" />
                            )}
                            {auth.user?.name}
                        </Link>
                        <Link
                            href={route('logout')}
                            method="post"
                            as="button"
                            className="rounded-md bg-gray-800 px-3 py-1.5 text-sm text-gray-300 hover:bg-gray-700"
                        >
                            Log out
                        </Link>
                    </div>
                </div>
            </nav>

            <main className="mx-auto max-w-6xl px-4 py-8">
                {flash.success && (
                    <div className="mb-6 rounded-md bg-emerald-900/50 px-4 py-3 text-sm text-emerald-200 ring-1 ring-emerald-700">
                        {flash.success}
                    </div>
                )}
                {flash.error && (
                    <div className="mb-6 rounded-md bg-red-900/50 px-4 py-3 text-sm text-red-200 ring-1 ring-red-700">
                        {flash.error}
                    </div>
                )}
                {children}
            </main>
        </div>
    );
}
