"use client";

import * as React from "react";
import {
  ChevronRight,
  ShoppingBag,
  LayoutList,
  Users,
  Settings,
  Store,
} from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import Link from "next/link";
import { usePathname } from "next/navigation";

const data = {
  navMain: [
    {
      title: "Verkauf",
      url: "#",
      icon: <ShoppingBag />,
      items: [
        {
          title: "Bestellungen",
          url: "/dashboard/orders/overview",
        },
        {
          title: "Sendungen",
          url: "/dashboard/shipment-tracking/overview",
        },
      ],
    },
    {
      title: "Katalog",
      url: "#",
      icon: <LayoutList />,
      items: [
        {
          title: "Produkte",
          url: "/dashboard/products/overview",
        },
        {
          title: "Kategorien",
          url: "/dashboard/categories/overview",
        },
        {
          title: "Marken",
          url: "/dashboard/brands/overview",
        },
        {
          title: "Attribute",
          url: "/dashboard/attributes/overview",
        },
      ],
    },
    {
      title: "Kunden",
      url: "#",
      icon: <Users />,
      items: [
        {
          title: "Übersicht",
          url: "/dashboard/customers/overview",
        },
        {
          title: "Benutzer",
          url: "/dashboard/users/overview",
        },
      ],
    },
    {
      title: "Team Collaboration",
      url: "#",
      icon: <Users />,
      items: [
        {
          title: "Live Chat",
          url: "/dashboard/team/chat",
        },
        {
          title: "Blackboard",
          url: "/dashboard/team/blackboard",
        },
        {
          title: "Presence",
          url: "/dashboard/team/presence",
        },
      ],
    },
    {
      title: "Einstellungen",
      url: "#",
      icon: <Settings />,
      items: [
        {
          title: "Lieferanten",
          url: "/dashboard/suppliers/overview",
        },
        {
          title: "Hersteller",
          url: "/dashboard/manufacturers/overview",
        },
        {
          title: "Steuerklassen",
          url: "/dashboard/tax-classes/overview",
        },
        {
          title: "Verantwortliche Personen",
          url: "/dashboard/eu-responsible-persons/overview",
        },
        {
          title: "Medien",
          url: "/dashboard/images/overview",
        },
      ],
    },
  ],
};

export function DashboardSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname();
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <Sidebar {...props} />;
  }

  return (
    <Sidebar {...props}>
      <SidebarHeader className="border-b border-border-light dark:border-border-dark p-4 h-16">
        <div className="flex items-center gap-3 px-2">
          <div className="bg-primary/10 p-2 rounded-lg">
            <Store className="h-6 w-6 text-primary" />
          </div>
          <div className="flex flex-col">
            <h1 className="text-sm font-bold leading-none tracking-tight text-foreground">
              Jomblo
            </h1>
            <p className="text-xs text-muted-foreground mt-1">Store Admin</p>
          </div>
        </div>
      </SidebarHeader>
      <SidebarContent className="gap-0 p-1">
        {data.navMain.map((item) => {
          const isGroupActive = item.items.some(
            (subItem) => pathname === subItem.url
          );

          return (
            <Collapsible
              key={item.title}
              title={item.title}
              defaultOpen
              className="group/collapsible"
            >
              <SidebarGroup>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <CollapsibleTrigger asChild>
                      <SidebarMenuButton
                        tooltip={item.title}
                        isActive={isGroupActive}
                      >
                        {item.icon}
                        <span className="text-base font-medium">
                          {item.title}
                        </span>
                        <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                      </SidebarMenuButton>
                    </CollapsibleTrigger>
                    <CollapsibleContent>
                      <SidebarMenuSub>
                        {item.items.map((subItem) => {
                          const isActive = pathname === subItem.url;
                          return (
                            <SidebarMenuSubItem key={subItem.title}>
                              <SidebarMenuButton asChild isActive={isActive}>
                                <Link
                                  href={subItem.url}
                                  prefetch={false}
                                  aria-current={isActive ? "page" : undefined}
                                >
                                  <span className="text-sm">
                                    {subItem.title}
                                  </span>
                                </Link>
                              </SidebarMenuButton>
                            </SidebarMenuSubItem>
                          );
                        })}
                      </SidebarMenuSub>
                    </CollapsibleContent>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroup>
            </Collapsible>
          );
        })}
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  );
}