import { Link, router } from "@inertiajs/react";
import { KeyRound, LogOut, Monitor, Settings, UserRound } from "lucide-react";
import {
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { UserInfo } from "@/components/user-info";
import { useMobileNavigation } from "@/hooks/use-mobile-navigation";
import { usePermissions } from "@/hooks/use-permissions";
import { logout } from "@/routes";
import { edit as appearanceEdit } from "@/routes/appearance";
import { index as backupsIndex } from "@/routes/backups";
import { edit as brandingEdit } from "@/routes/branding";
import { edit as profileEdit } from "@/routes/profile";
import { edit as securityEdit } from "@/routes/security";
import type { User } from "@/types";

type Props = {
    user: User;
};

export function UserMenuContent({ user }: Props) {
    const cleanup = useMobileNavigation();
    const { can } = usePermissions();

    const handleLogout = () => {
        cleanup();
        router.flushAll();
    };

    return (
        <>
            <DropdownMenuLabel className="p-0 font-normal">
                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                    <UserInfo user={user} showEmail={true} />
                </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />

            {/* The person's own things come first, and are always here. Company
                settings are only offered to somebody the server would actually
                let in — a link that ends in a 403 is worse than no link. */}
            <DropdownMenuGroup>
                <DropdownMenuItem asChild>
                    <Link
                        className="block w-full cursor-pointer"
                        href={profileEdit()}
                        prefetch
                        onClick={cleanup}
                    >
                        <UserRound className="mr-2" />
                        Your profile
                    </Link>
                </DropdownMenuItem>

                <DropdownMenuItem asChild>
                    <Link
                        className="block w-full cursor-pointer"
                        href={securityEdit()}
                        prefetch
                        onClick={cleanup}
                    >
                        <KeyRound className="mr-2" />
                        Sign in & security
                    </Link>
                </DropdownMenuItem>

                <DropdownMenuItem asChild>
                    <Link
                        className="block w-full cursor-pointer"
                        href={appearanceEdit()}
                        prefetch
                        onClick={cleanup}
                    >
                        <Monitor className="mr-2" />
                        Appearance
                    </Link>
                </DropdownMenuItem>
            </DropdownMenuGroup>

            {can("settings.manage") || can("settings.company") ? (
                <>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                        <Link
                            className="block w-full cursor-pointer"
                            href={
                                can("settings.manage")
                                    ? backupsIndex()
                                    : brandingEdit()
                            }
                            prefetch
                            onClick={cleanup}
                        >
                            <Settings className="mr-2" />
                            {can("settings.manage")
                                ? "Company settings"
                                : "Company profile"}
                        </Link>
                    </DropdownMenuItem>
                </>
            ) : null}

            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
                <Link
                    className="block w-full cursor-pointer"
                    href={logout()}
                    as="button"
                    onClick={handleLogout}
                    data-test="logout-button"
                >
                    <LogOut className="mr-2" />
                    Log out
                </Link>
            </DropdownMenuItem>
        </>
    );
}