import BackButton from '@/Components/BackButton';
import { Avatar, AvatarFallback } from '@/Components/ui/avatar';
import {
    DropdownMenuContent,
    DropdownMenuItem,
} from '@/Components/ui/dropdown-menu';
import { router, usePage } from '@inertiajs/react';
import {
    DropdownMenu,
    DropdownMenuTrigger,
} from '@radix-ui/react-dropdown-menu';
import { Home, LogOutIcon, SettingsIcon } from 'lucide-react';
import { PropsWithChildren, ReactNode } from 'react';

type AuthenticatedProps = PropsWithChildren<{
    header?: ReactNode;
    backLink?: string | null;
    backLinkLabel?: string | null;
}>;

export default function Authenticated({
    children,
    backLink,
    backLinkLabel,
}: AuthenticatedProps) {
    const user = usePage().props.auth.user;
    function getInitials(name: string, surname: string) {
        const firstNameInitial = name.trim()[0];
        const lastNameInitial = surname.trim()[0];

        return `${firstNameInitial}${lastNameInitial}`.toUpperCase();
    }

    const handleLogout = () => {
        router.post(route('logout'));
    };

    return (
        <div className="min-h-screen bg-cultured-grey">
            <nav className="bg-cultured-grey">
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="flex h-16 justify-between">
                        <div className="flex">
                            <div className="flex shrink-0 items-center">
                                {backLink ? (
                                    <BackButton
                                        href={backLink}
                                        label={backLinkLabel}
                                    />
                                ) : null}
                            </div>
                        </div>

                        <div className="-me-2 flex items-center">
                            <div className="sm:ms-6 sm:flex print:hidden">
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Avatar className="hover:cursor-pointer">
                                            <AvatarFallback>
                                                {getInitials(
                                                    user.name,
                                                    user.surname,
                                                )}
                                            </AvatarFallback>
                                        </Avatar>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent className="w-56">
                                        <DropdownMenuItem
                                            className="text-black"
                                            onClick={() => router.visit('/')}
                                        >
                                            <Home className="mr-2 h-4 w-4" />
                                            Dashboard
                                        </DropdownMenuItem>
                                        <DropdownMenuItem
                                            className="text-black"
                                            onClick={() =>
                                                router.visit(
                                                    route('settings.security'),
                                                )
                                            }
                                        >
                                            <SettingsIcon className="mr-2 h-4 w-4" />
                                            Impostazioni
                                        </DropdownMenuItem>
                                        <DropdownMenuItem
                                            className="text-black"
                                            onClick={handleLogout}
                                        >
                                            <LogOutIcon />
                                            Logout
                                        </DropdownMenuItem>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

            <main>{children}</main>

            <footer className="mt-8 border-t border-gray-200 py-3 print:hidden">
                <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 text-center sm:flex-row sm:justify-between sm:px-6 sm:text-left lg:px-8">
                    <div className="flex items-center gap-2">
                        <img
                            src="/img/footer-logo.png"
                            alt=""
                            className="h-6 w-6 shrink-0 object-contain"
                        />
                        <p className="text-[11px] leading-snug text-gray-500 sm:text-xs">
                            PluSalus24® | Dispositivo Medico Software Classe I
                            – MDR 2017/745 | Fabbricante: C-PLUS S.r.l. | UDI-DI
                            Base: 8052855100000
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-[11px] text-gray-400">
                            Azienda partner
                        </span>
                        <img
                            src="/img/login/logo-gima.jpg"
                            alt="GIMA"
                            className="h-7 w-auto object-contain"
                        />
                    </div>
                </div>
            </footer>
        </div>
    );
}