"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { cn } from "../../../lib/utils/index.js";
import { sel } from "../../../lib/test/index.js";
import { useTranslations } from "next-intl";
import { MobileMoreSheet } from "./MobileMoreSheet.js";
import { QuickCreateSheet } from "./QuickCreateSheet.js";
import { MOBILE_NAV_CONFIG } from "../../../lib/config/config-sync.js";
import { getIcon } from "../../../lib/config/icon-map.js";
function MobileBottomNav() {
  const pathname = usePathname();
  const t = useTranslations();
  const [isMoreSheetOpen, setIsMoreSheetOpen] = useState(false);
  const [isQuickCreateOpen, setIsQuickCreateOpen] = useState(false);
  const navItems = MOBILE_NAV_CONFIG.items.filter((item) => item.enabled).map((configItem) => {
    const IconComponent = getIcon(configItem.icon);
    let isActive = false;
    if (configItem.href) {
      isActive = configItem.href === "/dashboard" ? pathname === "/dashboard" : pathname.startsWith(configItem.href);
    }
    let onClick;
    if (configItem.action === "quickCreate") {
      onClick = () => setIsQuickCreateOpen(true);
    } else if (configItem.action === "moreSheet") {
      onClick = () => setIsMoreSheetOpen(true);
    }
    return {
      id: configItem.id,
      name: t(configItem.labelKey),
      href: configItem.href || "#",
      icon: IconComponent,
      isActive,
      isCentral: configItem.isCentral || false,
      onClick
    };
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "nav",
      {
        className: "lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-background border-t border-border safe-area-bottom",
        role: "navigation",
        "aria-label": "Navegaci\xF3n m\xF3vil principal",
        "data-cy": sel("dashboard.mobile.bottomNav.container"),
        children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-around px-2 pb-2 pt-1", children: navItems.map((item) => {
          const Icon = item.icon;
          const isActive = item.isActive;
          if (item.isCentral) {
            return /* @__PURE__ */ jsxs(
              "button",
              {
                onClick: item.onClick,
                className: cn(
                  "flex flex-col items-center justify-center gap-0.5 min-w-0 flex-1 relative",
                  "transition-all duration-200"
                ),
                "aria-label": item.name,
                "aria-current": isActive ? "page" : void 0,
                "data-cy": sel("dashboard.mobile.bottomNav.item", { id: item.id }),
                children: [
                  /* @__PURE__ */ jsx("div", { className: "absolute -top-6 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-primary rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow", children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-primary-foreground", "aria-hidden": "true" }) }) }),
                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground mt-8", children: item.name })
                ]
              },
              item.id
            );
          }
          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              Icon,
              {
                className: cn(
                  "h-6 w-6 transition-colors",
                  isActive ? "text-primary" : "text-muted-foreground"
                ),
                "aria-hidden": "true"
              }
            ),
            /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  "text-xs font-medium transition-colors",
                  isActive ? "text-primary" : "text-muted-foreground"
                ),
                children: item.name
              }
            )
          ] });
          if (item.onClick) {
            return /* @__PURE__ */ jsx(
              "button",
              {
                onClick: item.onClick,
                className: cn(
                  "flex flex-col items-center justify-center gap-0.5 py-2 px-1 min-w-0 flex-1",
                  "transition-all duration-200 hover:bg-accent/50 rounded-lg"
                ),
                "aria-label": item.name,
                "data-cy": sel("dashboard.mobile.bottomNav.item", { id: item.id }),
                children: content
              },
              item.id
            );
          }
          return /* @__PURE__ */ jsx(
            Link,
            {
              href: item.href,
              className: cn(
                "flex flex-col items-center justify-center gap-0.5 py-2 px-1 min-w-0 flex-1",
                "transition-all duration-200 hover:bg-accent/50 rounded-lg"
              ),
              "aria-label": item.name,
              "aria-current": isActive ? "page" : void 0,
              "data-cy": sel("dashboard.mobile.bottomNav.item", { id: item.id }),
              children: content
            },
            item.id
          );
        }) })
      }
    ),
    /* @__PURE__ */ jsx(
      MobileMoreSheet,
      {
        isOpen: isMoreSheetOpen,
        onOpenChange: setIsMoreSheetOpen
      }
    ),
    /* @__PURE__ */ jsx(
      QuickCreateSheet,
      {
        isOpen: isQuickCreateOpen,
        onOpenChange: setIsQuickCreateOpen
      }
    )
  ] });
}
export {
  MobileBottomNav
};
