"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Palette,
  FileText,
  Settings,
  Shield,
  ArrowLeft,
  ChevronLeft,
  ChevronRight,
  Code,
  Layers,
  GitBranch,
  LayoutGrid,
  Tag,
  Clock,
  Puzzle,
  Star,
  Bell,
  Globe
} from "lucide-react";
import { cn } from "../../lib/utils/index.js";
import { Button } from "../ui/button.js";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { getPluginNavItems } from "@nextsparkjs/registries/plugin-registry.client";
const PLUGIN_ICON_MAP = {
  Puzzle,
  Settings,
  Star,
  Code,
  LayoutGrid,
  Bell,
  Globe,
  Layers,
  GitBranch,
  Tag
};
function DevtoolsSidebar({ pluginItems: pluginItemsProp } = {}) {
  const pathname = usePathname();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const t = useTranslations("devtools");
  const tCommon = useTranslations("common");
  const pluginItems = pluginItemsProp ?? getPluginNavItems("devtools");
  const sidebarItems = [
    {
      titleKey: "nav.home",
      href: "/devtools",
      icon: LayoutDashboard,
      descriptionKey: "nav.homeDescription"
    },
    {
      titleKey: "nav.styleGallery",
      href: "/devtools/style",
      icon: Palette,
      descriptionKey: "nav.styleGalleryDescription"
    },
    {
      titleKey: "nav.testCases",
      href: "/devtools/tests",
      icon: FileText,
      descriptionKey: "nav.testCasesDescription"
    },
    {
      titleKey: "nav.features",
      href: "/devtools/features",
      icon: Layers,
      descriptionKey: "nav.featuresDescription"
    },
    {
      titleKey: "nav.flows",
      href: "/devtools/flows",
      icon: GitBranch,
      descriptionKey: "nav.flowsDescription"
    },
    {
      titleKey: "nav.blocks",
      href: "/devtools/blocks",
      icon: LayoutGrid,
      descriptionKey: "nav.blocksDescription"
    },
    {
      titleKey: "nav.tags",
      href: "/devtools/tags",
      icon: Tag,
      descriptionKey: "nav.tagsDescription"
    },
    {
      titleKey: "nav.config",
      href: "/devtools/config",
      icon: Settings,
      descriptionKey: "nav.configDescription"
    },
    {
      titleKey: "nav.api",
      href: "/devtools/api",
      icon: Layers,
      descriptionKey: "nav.apiDescription"
    },
    {
      titleKey: "nav.scheduledActions",
      href: "/devtools/scheduled-actions",
      icon: Clock,
      descriptionKey: "nav.scheduledActionsDescription"
    }
  ];
  const renderPluginItem = (item) => {
    const IconComponent = PLUGIN_ICON_MAP[item.icon ?? ""] ?? Puzzle;
    const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
    return /* @__PURE__ */ jsxs(
      Link,
      {
        href: item.href,
        "data-cy": `devtools-plugin-nav-${item.href.split("/").pop()}`,
        className: cn(
          "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
          "hover:bg-accent hover:text-accent-foreground",
          isActive ? "bg-violet-600 text-white dark:bg-violet-700" : "text-foreground",
          isCollapsed && "justify-center"
        ),
        title: isCollapsed ? item.label : item.description,
        children: [
          /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5 flex-shrink-0" }),
          !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
            item.description && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80", children: item.description })
          ] })
        ]
      },
      item.href
    );
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
        isCollapsed ? "w-16" : "w-64"
      ),
      "data-cy": "devtools-sidebar",
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border", children: [
          !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-8 h-8 bg-violet-100 dark:bg-violet-950 rounded-lg", children: /* @__PURE__ */ jsx(Code, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }) }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-violet-600 dark:text-violet-400", children: t("title") }),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: tCommon("userRoles.developer") })
            ] })
          ] }),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              onClick: () => setIsCollapsed(!isCollapsed),
              "aria-label": isCollapsed ? t("nav.expandSidebar") : t("nav.collapseSidebar"),
              className: "ml-auto",
              "data-cy": "devtools-sidebar-collapse-toggle",
              children: isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-1", children: [
          sidebarItems.map((item) => {
            var _a;
            const IconComponent = item.icon;
            const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
            const title = t(item.titleKey);
            const description = item.descriptionKey ? t(item.descriptionKey) : void 0;
            if (item.disabled) {
              return /* @__PURE__ */ jsxs(
                "div",
                {
                  className: cn(
                    "flex items-center gap-3 px-3 py-2 rounded-lg text-muted-foreground cursor-not-allowed opacity-60",
                    isCollapsed && "justify-center"
                  ),
                  title: isCollapsed ? `${title} (${tCommon("comingSoon")})` : description,
                  children: [
                    /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5 flex-shrink-0" }),
                    !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: title }),
                        /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded", children: tCommon("soon") })
                      ] }),
                      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
                    ] })
                  ]
                },
                item.titleKey
              );
            }
            return /* @__PURE__ */ jsxs(
              Link,
              {
                href: item.href,
                "data-cy": `devtools-nav-${(_a = item.titleKey.split(".").pop()) == null ? void 0 : _a.toLowerCase().replace(/\s+/g, "-")}`,
                className: cn(
                  "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
                  "hover:bg-accent hover:text-accent-foreground",
                  isActive ? "bg-violet-600 text-white dark:bg-violet-700" : "text-foreground",
                  isCollapsed && "justify-center"
                ),
                title: isCollapsed ? title : description,
                children: [
                  /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5 flex-shrink-0" }),
                  !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: title }),
                    description && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80", children: description })
                  ] })
                ]
              },
              item.titleKey
            );
          }),
          pluginItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-1", children: [
            !isCollapsed && /* @__PURE__ */ jsx(
              "p",
              {
                className: "px-3 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
                "data-cy": "devtools-plugins-section-label",
                children: "Plugins"
              }
            ),
            isCollapsed && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
            pluginItems.map(renderPluginItem)
          ] })
        ] }) }),
        /* @__PURE__ */ jsxs("div", { className: "p-3 border-t border-border space-y-1", children: [
          /* @__PURE__ */ jsxs(
            Link,
            {
              href: "/dashboard",
              className: cn(
                "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
                "hover:bg-accent hover:text-accent-foreground text-muted-foreground",
                isCollapsed && "justify-center"
              ),
              title: isCollapsed ? t("exitToDashboard") : t("exitToDashboardDescription"),
              "aria-label": t("exitToDashboard"),
              "data-cy": "devtools-sidebar-exit-to-dashboard",
              children: [
                /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5 flex-shrink-0" }),
                !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: t("exitToDashboard") }),
                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("returnToDashboard") })
                ] })
              ]
            }
          ),
          /* @__PURE__ */ jsxs(
            Link,
            {
              href: "/superadmin",
              className: cn(
                "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors",
                "hover:bg-accent hover:text-accent-foreground text-muted-foreground",
                isCollapsed && "justify-center"
              ),
              title: isCollapsed ? t("goToSuperadmin") : t("goToSuperadminDescription"),
              "aria-label": t("goToSuperadmin"),
              "data-cy": "devtools-sidebar-go-to-superadmin",
              children: [
                /* @__PURE__ */ jsx(Shield, { className: "h-5 w-5 flex-shrink-0" }),
                !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: t("goToSuperadmin") }),
                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("superAdminArea") })
                ] })
              ]
            }
          ),
          !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-violet-50 dark:bg-violet-950 border border-violet-200 dark:border-violet-800 rounded-lg", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-violet-700 dark:text-violet-300", children: [
              /* @__PURE__ */ jsx(Code, { className: "h-3 w-3" }),
              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: t("restrictedArea") })
            ] }),
            /* @__PURE__ */ jsx("p", { className: "text-xs text-violet-600 dark:text-violet-400 mt-1", children: t("developerAccessOnly") })
          ] })
        ] })
      ]
    }
  );
}
export {
  DevtoolsSidebar
};
