import type { TWUILink } from "@/src/components/twui/elements/LinkList";
import LinkList from "@/src/components/twui/elements/LinkList";
import Stack from "@/src/components/twui/layout/Stack";
import { AppContext } from "@/src/pages/__root";
import { useContext } from "react";
import { LayoutDashboard, LogOut, Server, Settings, Users } from "lucide-react";

const sectionLabel = (label: string) => (
    <div className="px-3 pt-6 pb-1.5 text-[11.5px] font-semibold uppercase tracking-[0.08em] text-foreground-light/40 dark:text-foreground-dark/40">
        {label}
    </div>
);

const linkClassName =
    "px-3 py-2 w-full rounded-[5px] no-underline! border-b-0! " +
    "text-[14px] font-medium text-foreground-light/70 dark:text-foreground-dark/70 " +
    "hover:text-foreground-light! dark:hover:text-foreground-dark! " +
    "hover:bg-foreground-light/5 dark:hover:bg-foreground-dark/5 transition-colors";

const iconClassName = "shrink-0 opacity-60";

export default function AdminAsideLinks() {
    const { pageProps } = useContext(AppContext);
    const { user, user_types } = pageProps || {};

    if (!user?.logged_in_status) {
        return null;
    }

    const links: TWUILink[] = [
        { component: sectionLabel("Overview") },
        {
            title: "Dashboard",
            url: "/admin",
            strict: true,
            icon: (
                <LayoutDashboard
                    size={16}
                    strokeWidth={2}
                    className={iconClassName}
                />
            ),
        },
        { component: sectionLabel("WireGuard") },
        {
            title: "Clients",
            url: "/admin/clients",
            icon: (
                <Users size={16} strokeWidth={2} className={iconClassName} />
            ),
        },
        {
            title: "Host",
            url: "/admin/host",
            icon: <Server size={16} strokeWidth={2} className={iconClassName} />,
        },
        { component: sectionLabel("Account") },
        {
            title: "Settings",
            url: "/admin/settings",
            icon: (
                <Settings size={16} strokeWidth={2} className={iconClassName} />
            ),
        },
        {
            title: "Logout",
            url: "/auth/logout",
            icon: (
                <LogOut size={16} strokeWidth={2} className={iconClassName} />
            ),
        },
    ];

    return (
        <Stack className="w-full items-stretch">
            <LinkList
                links={links}
                className="gap-0.5 flex-col items-start pb-6"
                linkProps={{ className: linkClassName }}
            />
        </Stack>
    );
}