"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  ShoppingBag,
  LayoutList,
  Users,
  Settings,
  Store,
  ChevronDown,
  MessageSquare,
  ClipboardList,
  UserCheck,
  Tag,
  Factory,
  Truck,
  ShieldCheck,
  BarChart3,
  Box,
  UserCog,
  ShieldAlert,
  Globe,
  ReceiptEuro,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

interface NavItem {
  title: string;
  href?: string;
  icon: React.ElementType;
  items?: { title: string; href: string; icon?: React.ElementType }[];
}

const navigation: { section: string; items: NavItem[] }[] = [
  {
    section: "Übersicht",
    items: [
      {
        title: "Dashboard",
        href: "/dashboard",
        icon: LayoutDashboard,
      },
      {
        title: "Business Intelligence",
        href: "/dashboard/analytics",
        icon: BarChart3,
      },
    ],
  },
  {
    section: "Katalog & Inventar",
    items: [
      {
        title: "Produkte",
        icon: Tag,
        items: [
          { title: "Alle Produkte", href: "/dashboard/products/overview" },
          { title: "Kategorien", href: "/dashboard/categories/overview" },
          { title: "Marken", href: "/dashboard/brands/overview" },
          { title: "Attribute", href: "/dashboard/attributes/overview" },
        ],
      },
    ],
  },
  {
    section: "Verkauf & Kunden",
    items: [
      {
        title: "Bestellungen",
        href: "/dashboard/orders/overview",
        icon: ShoppingBag,
      },
      {
        title: "Kundenstamm",
        href: "/dashboard/customers/overview",
        icon: Users,
      },
    ],
  },
  {
    section: "Logistik & Partner",
    items: [
      {
        title: "Lieferanten",
        href: "/dashboard/suppliers/overview",
        icon: Truck,
      },
      {
        title: "Hersteller",
        href: "/dashboard/manufacturers/overview",
        icon: Factory,
      },
      {
        title: "Versand-Tracking",
        href: "/dashboard/shipment-tracking/overview",
        icon: Globe,
      },
    ],
  },
  {
    section: "Team Hub",
    items: [
      {
        title: "Kollaboration",
        icon: MessageSquare,
        items: [
          { title: "Team Chat", href: "/dashboard/team/chat" },
          { title: "Blackboard", href: "/dashboard/team/blackboard" },
          { title: "Präsenz", href: "/dashboard/team/presence" },
        ],
      },
      {
        title: "Team verwalten",
        href: "/dashboard/users/overview",
        icon: UserCog,
      },
    ],
  },
  {
    section: "System",
    items: [
      {
        title: "Einstellungen",
        href: "/dashboard/settings",
        icon: Settings,
      },
      {
        title: "Steuern & Recht",
        icon: ShieldAlert,
        items: [
          { title: "Steuerklassen", href: "/dashboard/tax-classes/overview" },
          {
            title: "EU Verantwortliche",
            href: "/dashboard/eu-responsible-persons/overview",
          },
        ],
      },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const [mounted, setMounted] = React.useState(false);

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

  if (!mounted) {
    return (
      <div className="flex h-full w-[240px] flex-col border-r bg-background">
        <div className="flex h-16 items-center border-b px-6">
          <div className="flex items-center gap-2 font-bold tracking-tight">
            <Store className="size-5" />
            <span>Jomblo</span>
          </div>
        </div>
        <div className="flex-1 overflow-y-auto py-4 scrollbar-hide" />
      </div>
    );
  }

  return (
    <div className="flex h-full w-[240px] flex-col border-r bg-background">
      <div className="flex h-16 items-center border-b px-6">
        <Link
          href="/dashboard"
          className="flex items-center gap-2 font-bold tracking-tight"
        >
          <Store className="size-5" />
          <span>Jomblo</span>
        </Link>
      </div>
      <div className="flex-1 overflow-y-auto py-4 scrollbar-hide">
        <nav className="space-y-6 px-3">
          {navigation.map((section) => (
            <div key={section.section} className="space-y-1">
              <h4 className="px-3 text-xs font-semibold text-muted-foreground/60">
                {section.section}
              </h4>
              <div className="space-y-1">
                {section.items.map((item) => {
                  const hasItems = item.items && item.items.length > 0;
                  const isActive = item.href
                    ? pathname === item.href
                    : item.items?.some((sub) =>
                        pathname.startsWith(sub.href),
                      ) || false;

                  if (!hasItems) {
                    return (
                      <Link
                        key={item.title}
                        href={item.href!}
                        className={cn(
                          "group flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors",
                          isActive
                            ? "bg-secondary text-secondary-foreground"
                            : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
                        )}
                      >
                        <item.icon
                          className={cn(
                            "mr-3 size-4 shrink-0 transition-colors",
                            isActive
                              ? "text-primary"
                              : "text-muted-foreground group-hover:text-foreground",
                          )}
                        />
                        {item.title}
                      </Link>
                    );
                  }

                  return (
                    <Collapsible
                      key={item.title}
                      defaultOpen={isActive}
                      className="group/collapsible"
                    >
                      <CollapsibleTrigger asChild>
                        <button
                          className={cn(
                            "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-secondary/50 hover:text-foreground",
                            isActive
                              ? "text-foreground"
                              : "text-muted-foreground",
                          )}
                        >
                          <div className="flex items-center">
                            <item.icon
                              className={cn(
                                "mr-3 size-4 shrink-0 transition-colors",
                                isActive
                                  ? "text-primary"
                                  : "text-muted-foreground group-hover:text-foreground",
                              )}
                            />
                            {item.title}
                          </div>
                          <ChevronDown
                            className={cn(
                              "size-3.5 transition-transform duration-200 group-data-[state=closed]/collapsible:-rotate-90",
                              isActive
                                ? "text-primary"
                                : "text-muted-foreground",
                            )}
                          />
                        </button>
                      </CollapsibleTrigger>
                      <CollapsibleContent className="mt-1 space-y-1 px-2 border-l ml-5 border-border/50">
                        {item.items!.map((subItem) => {
                          const isSubActive =
                            pathname === subItem.href ||
                            pathname.startsWith(
                              subItem.href.replace("/overview", ""),
                            );
                          return (
                            <Link
                              key={subItem.href}
                              href={subItem.href}
                              className={cn(
                                "flex items-center rounded-md py-1.5 px-3 text-xs font-medium transition-colors",
                                isSubActive
                                  ? "text-primary bg-primary/5"
                                  : "text-muted-foreground hover:bg-secondary/30 hover:text-foreground",
                              )}
                            >
                              {subItem.title}
                            </Link>
                          );
                        })}
                      </CollapsibleContent>
                    </Collapsible>
                  );
                })}
              </div>
            </div>
          ))}
        </nav>
      </div>
      <div className="border-t p-4">
        <p className="text-xs text-muted-foreground px-2">
          Admin Portal v1.0
        </p>
      </div>
    </div>
  );
}