import { Link, usePage } from "@inertiajs/react";

export default function TopNavigation() {
    const { auth } = usePage().props;
    const user = auth?.user;
    const navigationDisabled = user?.status === "deactivated";

    return (
        <nav className="border-b border-gray-200 bg-white shadow-sm">
            <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-6 py-4">
                <Link href={user ? route("dashboard") : "/"} className="text-xl font-bold text-blue-600">
                    Les bons comptes
                </Link>

                {user ? (
                    <>
                        <div className="flex flex-wrap items-center gap-6">
                            <Link href={route("dashboard")} className="text-gray-700 transition hover:text-blue-600">
                                Tableau de bord
                            </Link>
                            {user.is_admin && (
                                <Link href={route("admin.dashboard")} className="font-medium text-red-600 hover:text-red-800">
                                    Administration
                                </Link>
                            )}
                            {navigationDisabled ? (
                                <span className="cursor-not-allowed text-gray-400">Entreprises</span>
                            ) : (
                                <Link href={route("companies.network")} className="text-gray-700 transition hover:text-blue-600">Entreprises</Link>
                            )}
                            {navigationDisabled ? (
                                <span className="cursor-not-allowed text-gray-400">Mises en relation</span>
                            ) : (
                                <Link href={route("introductions.index")} className="text-gray-700 transition hover:text-blue-600">Mises en relation</Link>
                            )}
                            <Link href={route("profile.edit")} className="text-gray-700 transition hover:text-blue-600">Profil</Link>
                        </div>
                        <div className="flex items-center gap-4">
                            <div className="text-right">
                                <div className="font-medium text-gray-900">{user.firstname || user.name}</div>
                                <div className="text-sm text-gray-500">{user.email}</div>
                            </div>
                            <Link href={route("logout")} method="post" as="button" className="rounded-lg bg-red-50 px-4 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100">
                                Déconnexion
                            </Link>
                        </div>
                    </>
                ) : (
                    <div className="flex flex-wrap items-center gap-3">
                        <Link href={route("login")} className="rounded-lg px-4 py-2 text-sm font-bold text-[#003e86] hover:bg-[#eef5ff]">
                            Se connecter
                        </Link>
                        <Link href={route("register")} className="rounded-lg bg-[#0057b8] px-4 py-2 text-sm font-bold text-white hover:bg-[#003e86]">
                            Créer un compte
                        </Link>
                    </div>
                )}
            </div>
        </nav>
    );
}