"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { ChevronUp, Users, Check, Settings } from "lucide-react";
import { useTranslations } from "next-intl";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from "../ui/dropdown-menu.js";
import { Button } from "../ui/button.js";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
import { useTeamContext } from "../../contexts/TeamContext.js";
import { useTeamsConfig } from "../../hooks/useTeamsConfig.js";
import { cn } from "../../lib/utils/index.js";
import { Skeleton } from "../ui/skeleton.js";
function TeamSwitcherCompact({ className }) {
  const t = useTranslations("teams");
  const { currentTeam, userTeams, switchTeam, isLoading } = useTeamContext();
  const { canSwitch } = useTeamsConfig();
  if (!canSwitch) {
    return null;
  }
  if (isLoading) {
    return /* @__PURE__ */ jsx("div", { className: cn("p-2", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full" }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16 mt-1" })
      ] })
    ] }) });
  }
  if (!currentTeam) {
    return null;
  }
  const getTeamInitials = (name) => {
    return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
  };
  return /* @__PURE__ */ jsx("div", { className: cn("border-t border-border p-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "ghost",
        className: "w-full justify-between h-auto p-2 hover:bg-accent",
        "data-cy": "team-switcher-compact",
        "aria-label": t("switcher.switchTeam"),
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 shrink-0", children: [
              /* @__PURE__ */ jsx(AvatarImage, { src: currentTeam.avatarUrl || void 0, alt: currentTeam.name }),
              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getTeamInitials(currentTeam.name) })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate max-w-[140px]", children: currentTeam.name }),
              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
                /* @__PURE__ */ jsx(Users, { className: "h-3 w-3", "aria-hidden": "true" }),
                t("switcher.team")
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground shrink-0", "aria-hidden": "true" })
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs(
      DropdownMenuContent,
      {
        align: "start",
        side: "top",
        className: "w-[240px]",
        "data-cy": "team-switcher-dropdown",
        children: [
          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: t("switcher.switchTeam") }),
          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
          userTeams.map((membership) => {
            const isActive = currentTeam.id === membership.team.id;
            return /* @__PURE__ */ jsxs(
              DropdownMenuItem,
              {
                onClick: () => switchTeam(membership.team.id),
                className: "cursor-pointer",
                "data-cy": `team-option-${membership.team.slug}`,
                children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
                    /* @__PURE__ */ jsxs(Avatar, { className: "h-6 w-6", children: [
                      /* @__PURE__ */ jsx(AvatarImage, { src: membership.team.avatarUrl || void 0, alt: membership.team.name }),
                      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: /* @__PURE__ */ jsx(Users, { className: "h-3 w-3", "aria-hidden": "true" }) })
                    ] }),
                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
                      /* @__PURE__ */ jsx("span", { className: "truncate", children: membership.team.name }),
                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground capitalize", children: t(`roles.${membership.role}`) })
                    ] })
                  ] }),
                  isActive && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary shrink-0", "aria-label": t("switcher.active") })
                ]
              },
              membership.team.id
            );
          }),
          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
          /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
            Link,
            {
              href: "/dashboard/settings/teams",
              className: "flex items-center gap-2",
              "data-cy": "manage-teams-link",
              children: [
                /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4", "aria-hidden": "true" }),
                /* @__PURE__ */ jsx("span", { children: t("switcher.manageTeams") })
              ]
            }
          ) })
        ]
      }
    )
  ] }) });
}
export {
  TeamSwitcherCompact
};
