import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import * as React from "react";
import { MessageCircle, ChevronDown, Phone } from "lucide-react";
import { cn } from "../../lib/utils.js";
import { Avatar } from "../Avatar/avatar.js";
import { Button } from "../Button/button.js";
import { DescriptionList, DescriptionItem } from "../DescriptionList/description-list.js";
import { ScrollArea } from "../ScrollArea/scroll-area.js";
import { ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
const ProfileCardDefaultActions = () => /* @__PURE__ */ jsxs(Fragment, { children: [
  /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", startIcon: MessageCircle, children: "Chat" }),
  /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", startIcon: Phone, endIcon: ChevronDown, children: "Audio call" })
] });
const AVATAR_SIZE = 64;
const STATUS_DOT_COLOR = {
  online: "var(--status-online)",
  away: "var(--status-away)",
  busy: "var(--status-busy)",
  offline: "var(--status-offline)"
};
const STATUS_LABEL = {
  online: "Online",
  away: "Away",
  busy: "Busy",
  offline: "Offline"
};
const NAMECARD_DEFAULT_FIELD_KEYS = ["id", "employeeNumber"];
const DEFAULT_FIELD_LABEL = {
  id: "ID",
  employeeNumber: "Employee number"
};
const FIELD_PLACEHOLDER = "—";
const ProfileCard = React.forwardRef(
  ({
    name,
    avatar,
    subtitle,
    status,
    statusMessage,
    actions,
    fields,
    defaultFieldValues,
    onViewMore,
    viewMoreLabel = "View more",
    className,
    ...props
  }, ref) => {
    const allFields = React.useMemo(() => {
      const consumerLabels = new Set((fields ?? []).map((f) => f.label));
      const defaults = NAMECARD_DEFAULT_FIELD_KEYS.map((key) => ({
        label: DEFAULT_FIELD_LABEL[key],
        value: (defaultFieldValues == null ? void 0 : defaultFieldValues[key]) ?? FIELD_PLACEHOLDER
      })).filter((d) => !consumerLabels.has(d.label));
      return fields && fields.length > 0 ? [...defaults, ...fields] : defaults;
    }, [defaultFieldValues, fields]);
    if (process.env.NODE_ENV !== "production" && fields) {
      const legacyEntry = fields.find(
        (f) => Object.values(DEFAULT_FIELD_LABEL).includes(f.label)
      );
      if (legacyEntry) {
        console.warn(
          `[ProfileCard] "${name}":legacy pattern — fields[].label="${legacyEntry.label}" is a default field. Migrate to defaultFieldValues={{ id, employeeNumber }} prop to align with NAMECARD_DEFAULT_FIELD_KEYS canonical.`
        );
      }
    }
    if (process.env.NODE_ENV !== "production" && !defaultFieldValues) {
      console.warn(
        `[ProfileCard] "${name}":no defaultFieldValues passed — sections will render placeholders. Pass at least { id, employeeNumber } via defaultFieldValues prop. For other description items (email/phone/department/location etc),use \`fields\` prop array.`
      );
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "w-[320px] flex flex-col overflow-hidden",
          "max-h-[var(--radix-hover-card-content-available-height,var(--radix-popover-content-available-height,100vh))]",
          className
        ),
        ...props,
        children: [
          /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex flex-col", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 px-4 py-3", children: [
              /* @__PURE__ */ jsx(
                Avatar,
                {
                  src: avatar == null ? void 0 : avatar.src,
                  alt: (avatar == null ? void 0 : avatar.alt) ?? name,
                  color: avatar == null ? void 0 : avatar.color,
                  size: AVATAR_SIZE,
                  status,
                  className: "shrink-0"
                }
              ),
              /* @__PURE__ */ jsx(
                ItemContent,
                {
                  label: name,
                  description: subtitle,
                  mode: "reading",
                  size: "lg",
                  labelTruncate: false,
                  labelClassName: "text-body-lg font-medium text-foreground",
                  className: "justify-center",
                  style: { minHeight: AVATAR_SIZE }
                }
              )
            ] }),
            actions && /* @__PURE__ */ jsx("div", { className: "grid grid-flow-col auto-cols-fr gap-2 px-4 pb-3 [&>*]:w-full", children: actions })
          ] }),
          /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1 min-h-0 border-t border-divider", children: [
            status && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex flex-col gap-3", children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted rounded-md", children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: "w-2.5 h-2.5 rounded-full shrink-0",
                    style: { backgroundColor: STATUS_DOT_COLOR[status] }
                  }
                ),
                /* @__PURE__ */ jsx("span", { className: "text-body", children: STATUS_LABEL[status] })
              ] }),
              /* @__PURE__ */ jsx(DescriptionList, { children: /* @__PURE__ */ jsx(DescriptionItem, { label: "Status message", children: statusMessage ?? /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: FIELD_PLACEHOLDER }) }) })
            ] }),
            /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3", status && "border-t border-divider"), children: /* @__PURE__ */ jsx(DescriptionList, { cols: 2, children: allFields.map((f) => /* @__PURE__ */ jsx(DescriptionItem, { label: f.label, children: f.value === FIELD_PLACEHOLDER ? /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: FIELD_PLACEHOLDER }) : f.value }, f.label)) }) })
          ] }),
          onViewMore && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-divider px-4 py-3", children: /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: onViewMore, className: "w-full", children: viewMoreLabel }) })
        ]
      }
    );
  }
);
ProfileCard.displayName = "ProfileCard";
const nameCardMeta = {
  component: "ProfileCard",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-muted"],
    fg: ["text-foreground"],
    ring: []
  }
};
export {
  NAMECARD_DEFAULT_FIELD_KEYS,
  ProfileCard,
  ProfileCardDefaultActions,
  nameCardMeta
};
//# sourceMappingURL=profile-card.js.map
