"use client";

import * as React from "react";

import { NavDocuments } from "@/components/nav-documents";
import { NavMain } from "@/components/nav-main";
import { NavSecondary } from "@/components/nav-secondary";
import { NavUser } from "@/components/nav-user";
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from "@/components/ui/sidebar";
import {
    LayoutDashboardIcon,
    ListIcon,
    ChartBarIcon,
    FolderIcon,
    UsersIcon,
    CameraIcon,
    FileTextIcon,
    Settings2Icon,
    CircleHelpIcon,
    SearchIcon,
    DatabaseIcon,
    FileChartColumnIcon,
    FileIcon,
    CommandIcon,
    ImageIcon,
    ImagesIcon,
} from "lucide-react";

const data = {
    user: {
        name: "Wallora Admin",
        email: "admin@wallora.top",
        avatar: "/avatars/shadcn.jpg",
    },
    navMain: [
        {
            title: "Dashboard",
            url: "/admin/dashboard",
            icon: <LayoutDashboardIcon />,
        },
        {
            title: "Gallery",
            url: "/admin/gallery",
            icon: <ImageIcon />,
        },
        {
            title: "Collections",
            url: "/admin/collections",
            icon: <ImagesIcon />,
        },
        {
            title: "Lifecycle",
            url: "#",
            icon: <ListIcon />,
        },
        {
            title: "Analytics",
            url: "#",
            icon: <ChartBarIcon />,
        },
        {
            title: "Projects",
            url: "#",
            icon: <FolderIcon />,
        },
        {
            title: "Users",
            url: "/admin/users",
            icon: <UsersIcon />,
        },
    ],
    navClouds: [
        {
            title: "Capture",
            icon: <CameraIcon />,
            isActive: true,
            url: "#",
            items: [
                {
                    title: "Active Proposals",
                    url: "#",
                },
                {
                    title: "Archived",
                    url: "#",
                },
            ],
        },
        {
            title: "Proposal",
            icon: <FileTextIcon />,
            url: "#",
            items: [
                {
                    title: "Active Proposals",
                    url: "#",
                },
                {
                    title: "Archived",
                    url: "#",
                },
            ],
        },
        {
            title: "Prompts",
            icon: <FileTextIcon />,
            url: "#",
            items: [
                {
                    title: "Active Proposals",
                    url: "#",
                },
                {
                    title: "Archived",
                    url: "#",
                },
            ],
        },
    ],
    navSecondary: [
        {
            title: "Settings",
            url: "#",
            icon: <Settings2Icon />,
        },
        {
            title: "Get Help",
            url: "#",
            icon: <CircleHelpIcon />,
        },
        {
            title: "Search",
            url: "#",
            icon: <SearchIcon />,
        },
    ],
    documents: [
        {
            name: "Data Library",
            url: "#",
            icon: <DatabaseIcon />,
        },
        {
            name: "Reports",
            url: "#",
            icon: <FileChartColumnIcon />,
        },
        {
            name: "Word Assistant",
            url: "#",
            icon: <FileIcon />,
        },
    ],
};
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    return (
        <Sidebar collapsible="offcanvas" {...props}>
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            className="data-[slot=sidebar-menu-button]:p-1.5!"
                            render={<a href="#" />}
                        >
                            <CommandIcon className="size-5!" />
                            <span className="text-base font-semibold">
                                Wallora
                            </span>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent>
                <NavMain items={data.navMain} />
                <NavDocuments items={data.documents} />
                <NavSecondary items={data.navSecondary} className="mt-auto" />
            </SidebarContent>
            <SidebarFooter>
                <NavUser user={data.user} />
            </SidebarFooter>
        </Sidebar>
    );
}