// * Packages
import { Link, usePage } from "@inertiajs/react";
import { ElementType, ReactNode, useEffect, useRef } from "react";
import {
    ChevronDownIcon,
    MoreHorizontalIcon,
    HomeIcon,
    UsersIcon,
    SquareArrowOutUpRightIcon,
    TelescopeIcon,
    StickyNoteIcon,
    CogIcon,
    HistoryIcon,
    ContactIcon,
    NewspaperIcon,
    Building2Icon,
    RadarIcon,
    RollerCoasterIcon,
    FileInputIcon,
    TagIcon,
    FolderIcon,
} from "lucide-react";
import { route } from "ziggy-js";
// * Components shadcn
import {
    Sidebar,
    SidebarHeader,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuAction,
    useSidebar,
} from "@/components/ui/sidebar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
} from "@/components/ui/collapsible";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
// * Other
import ApplicationLogo from "@/back/Components/ApplicationLogo";
import { Views } from "@/lib/utils";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";
import { AppEnv, AuthProp, LaravelEnum } from "@/back/types/global";

type NavListProps = Array<{
    /** Title of the group. */
    title: string,
    /** Condition to set the visibility of the group. */
    show: boolean,
    /** Links presents in the group. */
    links: Array<{
        /** Title of the button. */
        title: string,
        /** Main model of the button (used for route checking). */
        model?: string,
        /** External link of the button (if it's a not CRUD, just a simple link). */
        link?: string,
        /** Define some conditions for active or not the button (in addition to the route model checking if defined). */
        activeCondition?: boolean[],
        /** Condition to set the visibility of the button. */
        show: boolean,
        /** Lucide icon of the button. */
        icon: ElementType,
        /** Define some actions in side popover (like create/trash). */
        actions?: (model: string) => ReactNode,
    }>
}>

type CustomDropdownMenuItemProps = {
    /** Link of the action. */
    route: string;
    /** Lucide icon of the action. */
    icon?: ElementType;
    /** Translation of the action. */
    trans?: string;
};

export default function AppSidebar() {
    const { appEnv, auth, enumUserRole } = usePage().props as unknown as {
        appEnv: AppEnv;
        auth: AuthProp;
        enumUserRole: LaravelEnum;
    };
    const authPolicies = auth.policies;
    const { state } = useSidebar();
    const prevStateRef = useRef(state);
    const isCollapsed = state === "collapsed";
    const navList: NavListProps = [
        {
            title: useTrans("back.pages"),
            show: true,
            links: [
                {
                    title: useTrans("back.dashboard"),
                    model: "dashboard",
                    show: true,
                    icon: HomeIcon,
                },
                {
                    title: useTrans("back.your_website"),
                    link: "/",
                    show: true,
                    icon: SquareArrowOutUpRightIcon,
                },
                {
                    title: str(useTrans("models.classes.dynamic-page", { choice: 2 })).ucFirst().value(),
                    model: "dynamic-pages",
                    show: authPolicies.dynamicPages.viewAny,
                    icon: StickyNoteIcon,
                    actions: (model: string) => filterActions({
                        items: [
                            authPolicies.dynamicPages.create && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.create`)}
                                />
                            ),
                            authPolicies.dynamicPages.viewTrash && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.trash`)}
                                    icon={Views.ARCHIVATION.icon}
                                    trans={str(useTrans("back.archives")).ucFirst().value()}
                                />
                            ),
                        ]
                    })
                },
            ],
        },
        {
            title: useTrans("back.modules"),
            show: authPolicies.news.viewAny || auth.policies.contact_counts.viewAny,
            links: [
                {
                    title: str(useTrans("models.classes.news", { choice: 2 })).ucFirst().value(),
                    model: "news",
                    activeCondition: [route().current("back.news-categories.*"), route().current('back.news-tags.*')],
                    icon: NewspaperIcon,
                    show: auth.policies.news.viewAny,
                    actions: (model: string) => filterActions({
                        items: [
                            authPolicies.news.create && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.create`)}
                                />
                            ),
                            authPolicies.news.viewTrash && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.trash`)}
                                    icon={Views.ARCHIVATION.icon}
                                    trans={str(useTrans("back.archives")).ucFirst().value()}
                                />
                            ),
                            authPolicies.newsCategories.viewAny && (
                                <CustomDropdownMenuItem
                                    route={route(`back.news-categories.index`)}
                                    icon={FolderIcon}
                                    trans={str(useTrans("models.classes.news-category", { choice: 2 })).ucFirst().value()}
                                />
                            ),
                            authPolicies.newsTags.viewAny && (
                                <CustomDropdownMenuItem
                                    route={route(`back.news-tags.index`)}
                                    icon={TagIcon}
                                    trans={str(useTrans("models.classes.news-tag", { choice: 2 })).ucFirst().value()}
                                />
                            ),
                        ]
                    })
                },
                {
                    title: str(useTrans("models.classes.contact-count")).ucFirst().value(),
                    model: "contact-counts",
                    icon: ContactIcon,
                    show: auth.policies.contact_counts.viewAny,
                },
                {
                    title: str(useTrans("models.classes.document", { choice: 2 })).ucFirst().value(),
                    model: "documents",
                    activeCondition: [route().current("back.document-categories.*"), route().current('back.document-tags.*')],
                    icon: FileInputIcon,
                    show: auth.policies.documents.viewAny,
                    actions: (model: string) => filterActions({
                        items: [
                            authPolicies.documents.create && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.create`)}
                                />
                            ),
                            authPolicies.documentCategories.create && (
                                <CustomDropdownMenuItem
                                    icon={FolderIcon}
                                    route={route(`back.document-categories.index`)}
                                    trans={str(useTrans("models.classes.document-category", { choice: 2 })).ucFirst().value()}
                                />
                            ),
                            authPolicies.documentTags.create && (
                                <CustomDropdownMenuItem
                                    icon={TagIcon}
                                    route={route(`back.document-tags.index`)}
                                    trans={str(useTrans("models.classes.document-tag", { choice: 2 })).ucFirst().value()}
                                />
                            )
                        ]
                    })
                },
                {
                    title: str(useTrans("models.classes.company", { choice: 2 })).ucFirst().plural().value(),
                    model: "companies",
                    activeCondition: [route().current("back.company-activities.*"), route().current('back.company-sectors.*')],
                    icon: Building2Icon,
                    show: auth.policies.companies.viewAny,
                    actions: (model: string) => filterActions({
                        items: [
                            authPolicies.companies.create && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.create`)}
                                />
                            ),
                            authPolicies.companies.viewTrash && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.trash`)}
                                    icon={Views.ARCHIVATION.icon}
                                    trans={str(useTrans("back.archives")).ucFirst().value()}
                                />
                            ),
                            authPolicies.companyActivities.viewAny && (
                                <CustomDropdownMenuItem
                                    icon={RollerCoasterIcon}
                                    trans={str(useTrans("models.classes.company-activity", { choice: 2 })).ucFirst().value()}
                                    route={route(`back.company-activities.index`)}
                                />
                            ),
                            authPolicies.companySectors.viewAny && (
                                <CustomDropdownMenuItem
                                    icon={RadarIcon}
                                    trans={str(useTrans("models.classes.company-sector", { choice: 2 })).ucFirst().value()}
                                    route={route(`back.company-sectors.index`)}
                                />
                            ),
                        ]
                    })
                },
            ],
        },
        {
            title: str(useTrans("enums.user-role.admin")).plural().value(),
            show: auth.user.role === enumUserRole.conceptor.value,
            links: [
                {
                    title: str(useTrans("models.classes.user")).ucFirst().plural().value(),
                    model: "users",
                    icon: UsersIcon,
                    show: authPolicies.users.viewAny,
                    actions: (model: string) => filterActions({ model }),
                },
                {
                    title: str(useTrans("models.classes.activity-log")).ucFirst().plural().value(),
                    model: "activity-logs",
                    icon: HistoryIcon,
                    show: authPolicies.activityLogs.viewAny,
                },
                {
                    title: str(useTrans("models.classes.page-config", { choice: 2 })).ucFirst().value(),
                    model: "page-configs",
                    show: authPolicies.pageConfigs.viewAny,
                    icon: CogIcon,
                    actions: (model: string) => filterActions({
                        items: [
                            authPolicies.pageConfigs.create && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.create`)}
                                />
                            ),
                            authPolicies.pageConfigs.viewTrash && (
                                <CustomDropdownMenuItem
                                    route={route(`back.${model}.trash`)}
                                    icon={Views.ARCHIVATION.icon}
                                    trans={str(useTrans("back.archives")).ucFirst().value()}
                                />
                            ),
                        ]
                    })
                },
                {
                    title: useTrans("back.telescope"),
                    link: route().has("telescope") ? route("telescope") : undefined,
                    icon: TelescopeIcon,
                    show: appEnv.mode === "local" && route().has("telescope"),
                },
            ],
        },
    ];

    const filterActions = ({ items, model }: { items?: ReactNode[], model?: string }) => {
        // Set create action by default.
        if (!items && model) {
            items = [authPolicies[model].create && <CustomDropdownMenuItem key="create" route={route(`back.${model}.create`)} />];
        }
        const visibleItems = items ? items.filter(Boolean) : null;
        return visibleItems && visibleItems.length > 0 ? <>{visibleItems}</> : null;
    };

    const CustomDropdownMenuItem = ({
        route,
        icon: Icon = Views.CREATION.icon,
        trans = str(useTrans(`crud.actions.${Views.CREATION.label}`)).ucFirst().value(),
    }: CustomDropdownMenuItemProps) => {
        return (
            <DropdownMenuItem className="p-0">
                <Button variant="ghost" asChild>
                    <Link href={route} className="w-full">
                        <Icon />
                        {trans}
                    </Link>
                </Button>
            </DropdownMenuItem>
        );
    };

    useEffect(() => {
        if (prevStateRef.current !== state) {
            const elmts = document.querySelectorAll(".sidebar-transition");
            elmts.forEach((element) => {
                element.classList.add("animation-transition");
                setTimeout(() => {
                    element.classList.remove("animation-transition");
                }, 400);
            });
            prevStateRef.current = state;
        }
    }, [state]);

    return (
        <Sidebar collapsible="icon" className="z-30">
            <SidebarHeader className="sidebar-transition">
                <ApplicationLogo forceLight={true} isCollapsed={isCollapsed} />
            </SidebarHeader>
            <SidebarContent className={`sidebar-transition ${isCollapsed ? "pt-2" : ""}`}>
                {navList.map(
                    (navGroup) => navGroup.show && (
                        <Collapsible
                            key={navGroup.title}
                            className="group/collapsible"
                            defaultOpen
                        >
                            <SidebarGroup>
                                {!isCollapsed && (
                                    <SidebarGroupLabel asChild>
                                        <CollapsibleTrigger>
                                            {navGroup.title}
                                            <ChevronDownIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                        </CollapsibleTrigger>
                                    </SidebarGroupLabel>
                                )}
                                <CollapsibleContent>
                                    <SidebarGroupContent>
                                        <SidebarMenu>
                                            {navGroup.links.map((navLink) => {
                                                if (navLink.show) {
                                                    const isActive = route().current(`back.${navLink.model}.*`) || navLink.activeCondition?.some(Boolean);
                                                    const sidebarButton = (
                                                        <SidebarMenuButton
                                                            className={isActive ? "text-secondary-foreground" : "text-primary-foreground"}
                                                            asChild
                                                        >
                                                            {navLink.link ? (
                                                                <a
                                                                    href={navLink.link}
                                                                    target="_blank"
                                                                    rel="noreferrer"
                                                                >
                                                                    <navLink.icon />
                                                                    {navLink.title}
                                                                </a>
                                                            ) : (
                                                                <Link
                                                                    href={route(`back.${navLink.model}.index`)}
                                                                    className="bg-transparent"
                                                                >
                                                                    <navLink.icon />
                                                                    {navLink.title}
                                                                </Link>
                                                            )}
                                                        </SidebarMenuButton>
                                                    );
                                                    return <SidebarMenuItem
                                                        key={navLink.title}
                                                        className={
                                                            `transition-colors rounded-md ${isActive ? "bg-secondary text-secondary-foreground" : "bg-opacity-0"}`
                                                        }
                                                    >
                                                        {isCollapsed ? (
                                                            <Tooltip>
                                                                <TooltipTrigger asChild>
                                                                    {sidebarButton}
                                                                </TooltipTrigger>
                                                                <TooltipContent side="right">
                                                                    <p>{navLink.title}</p>
                                                                </TooltipContent>
                                                            </Tooltip>
                                                        ) : (
                                                            sidebarButton
                                                        )}
                                                        {navLink.model && navLink.actions?.(navLink.model) && (
                                                            <DropdownMenu>
                                                                <DropdownMenuTrigger asChild>
                                                                    <SidebarMenuAction
                                                                        className={
                                                                            `${isActive ? "text-secondary-foreground" : ""} !top-0 !right-0 px-4 h-full`
                                                                        }
                                                                    >
                                                                        <MoreHorizontalIcon />
                                                                    </SidebarMenuAction>
                                                                </DropdownMenuTrigger>
                                                                <DropdownMenuContent
                                                                    side="right"
                                                                    align="start"
                                                                >
                                                                    {navLink.actions(navLink.model)}
                                                                </DropdownMenuContent>
                                                            </DropdownMenu>
                                                        )}
                                                    </SidebarMenuItem>
                                                }
                                            })}
                                        </SidebarMenu>
                                    </SidebarGroupContent>
                                </CollapsibleContent>
                            </SidebarGroup>
                        </Collapsible>
                    ),
                )}
            </SidebarContent>
        </Sidebar>
    );
}