"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import Image from "next/image";
import { useAuth } from "../../../hooks/useAuth.js";
import { ThemeToggle } from "../../app/misc/ThemeToggle.js";
import { NotificationsDropdown } from "../misc/NotificationsDropdown.js";
import { sel } from "../../../lib/test/index.js";
import { isTopbarFeatureEnabled } from "../../../lib/config/index.js";
import { useTranslations } from "next-intl";
function MobileTopBar() {
  const { user } = useAuth();
  const t = useTranslations();
  if (!user) return null;
  const getUserInitials = (user2) => {
    if (user2.firstName && user2.lastName) {
      return `${user2.firstName[0]}${user2.lastName[0]}`.toUpperCase();
    }
    if (user2.firstName) {
      return user2.firstName.slice(0, 2).toUpperCase();
    }
    if (user2.email) {
      return user2.email.slice(0, 2).toUpperCase();
    }
    return "U";
  };
  const getAvatarColor = (email) => {
    const colors = [
      "bg-red-500",
      "bg-blue-500",
      "bg-green-500",
      "bg-yellow-500",
      "bg-purple-500",
      "bg-pink-500",
      "bg-indigo-500",
      "bg-orange-500"
    ];
    const index = email.charCodeAt(0) % colors.length;
    return colors[index];
  };
  return /* @__PURE__ */ jsx(
    "header",
    {
      className: "lg:hidden fixed top-0 left-0 right-0 z-40 bg-background border-b border-border",
      role: "banner",
      "aria-label": "Barra de navegaci\xF3n m\xF3vil superior",
      "data-cy": sel("dashboard.mobile.topbar.container"),
      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 h-14", children: [
        /* @__PURE__ */ jsxs(
          Link,
          {
            href: "/dashboard/settings/profile",
            className: "flex items-center gap-3 hover:opacity-80 transition-opacity",
            "aria-label": `Ir al perfil de ${user.firstName || user.email}`,
            "data-cy": sel("dashboard.mobile.topbar.userProfile"),
            children: [
              user.image ? /* @__PURE__ */ jsx(
                Image,
                {
                  src: user.image,
                  alt: "",
                  width: 40,
                  height: 40,
                  className: "h-10 w-10 rounded-full object-cover border-2 border-border"
                }
              ) : /* @__PURE__ */ jsx(
                "div",
                {
                  className: `h-10 w-10 rounded-full flex items-center justify-center text-white text-sm font-semibold border-2 border-border ${getAvatarColor(user.email)}`,
                  role: "img",
                  "aria-label": `Avatar de ${user.firstName || user.email}`,
                  children: getUserInitials(user)
                }
              ),
              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: t("common.mobileNav.greeting", {
                name: user.firstName || user.email.split("@")[0]
              }) }) })
            ]
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          isTopbarFeatureEnabled("notifications") && /* @__PURE__ */ jsx("div", { "data-cy": sel("dashboard.mobile.topbar.notifications"), children: /* @__PURE__ */ jsx(NotificationsDropdown, {}) }),
          isTopbarFeatureEnabled("themeToggle") && /* @__PURE__ */ jsx("div", { "data-cy": sel("dashboard.mobile.topbar.themeToggle"), children: /* @__PURE__ */ jsx(ThemeToggle, {}) })
        ] })
      ] })
    }
  );
}
export {
  MobileTopBar
};
