import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { Download, RotateCw, XCircle, CircleCheck, Paperclip } from "lucide-react";
import { cn } from "../../lib/utils.js";
import { Avatar } from "../Avatar/avatar.js";
import { Button } from "../Button/button.js";
import { ProgressBar } from "../ProgressBar/progress-bar.js";
import { ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
const STATUS_ICON = {
  completed: { icon: CircleCheck, color: "text-success" },
  error: { icon: XCircle, color: "text-error" }
};
const PROGRESS_STATUS_MAP = {
  uploading: "inProgress",
  completed: "success",
  error: "error"
};
const AVATAR_SIZE = 48;
const ICON_PX = 16;
const FileItem = React.forwardRef(
  ({
    name,
    mode = "compact",
    surface = "form",
    status,
    progress = 0,
    description,
    thumbnailSrc,
    actions,
    onClick,
    onDownload,
    onRetry,
    className,
    ...props
  }, ref) => {
    const isRich = mode === "rich";
    const hasStatus = !!status;
    const statusConfig = status && status !== "uploading" ? STATUS_ICON[status] : null;
    const progressWidth = status === "completed" ? 100 : progress;
    const showDesc = isRich ? !!description : status === "error" && !!description;
    const hoverClass = onClick ? "cursor-pointer" : "";
    const progressBar = hasStatus ? /* @__PURE__ */ jsx(
      ProgressBar,
      {
        value: progressWidth,
        status: PROGRESS_STATUS_MAP[status],
        height: isRich ? void 0 : 2,
        "aria-label": `${name} 上傳進度`
      }
    ) : null;
    const suffixAlign = "h-[1lh]";
    const slotHw = "var(--field-height-xs)";
    const hoverAction = status === "completed" && onDownload ? { icon: Download, onClick: onDownload, label: "下載" } : status === "error" && onRetry ? { icon: RotateCw, onClick: onRetry, label: "重試" } : null;
    const statusSlot = statusConfig ? /* @__PURE__ */ jsxs(
      "span",
      {
        "data-unbounded": "true",
        className: "relative inline-flex items-center justify-center shrink-0",
        style: { width: slotHw, height: slotHw },
        children: [
          /* @__PURE__ */ jsx(
            statusConfig.icon,
            {
              size: ICON_PX,
              className: cn(
                "shrink-0 transition-opacity",
                statusConfig.color,
                hoverAction && "group-hover/row:opacity-0"
              ),
              "aria-hidden": true
            }
          ),
          hoverAction && /* @__PURE__ */ jsx(
            Button,
            {
              variant: "text",
              size: "xs",
              iconOnly: true,
              startIcon: hoverAction.icon,
              "aria-label": hoverAction.label,
              onClick: (e) => {
                e.stopPropagation();
                hoverAction.onClick();
              },
              className: "absolute inset-0 opacity-0 group-hover/row:opacity-100 transition-opacity"
            }
          )
        ]
      }
    ) : null;
    const suffix = /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          "flex items-center gap-2 shrink-0",
          suffixAlign,
          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]
          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。
          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface
          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。
          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix
          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,
          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。
          "[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]"
        ),
        children: [
          status === "uploading" && isRich && /* @__PURE__ */ jsxs("span", { className: "text-fg-secondary tabular-nums", children: [
            progress,
            "%"
          ] }),
          statusSlot,
          actions
        ]
      }
    );
    const contentRow = /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
      /* @__PURE__ */ jsx(
        ItemContent,
        {
          label: name,
          description: showDesc ? description : void 0,
          mode: "scanning",
          descriptionTone: status === "error" ? "error" : "secondary"
        }
      ),
      suffix
    ] });
    const rowA11y = {};
    const compactStaticBg = !progressBar ? "bg-secondary" : "";
    if (isRich) {
      return /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          className: cn(
            "group/row flex items-start gap-2 w-full text-body leading-compact transition-colors",
            // surface=form → border card(自立輪廓);surface=upload-manager → 無邊框(box 自身是容器,
            // avatar 作 item 邊界)。2026-06-03 codify rich-borderless(原僅 spec 旁註,consumer 自己移除)。
            // 2026-06-03 圖五:upload-manager rich 拿掉 px+py(卡片移除後 py 多餘,列高靠 avatar 48 的 content minHeight;
            // 容器 + gap 控制間距)。form 保留 px-3 py-3 卡片內距。
            surface === "upload-manager" ? "rounded-md" : "px-3 py-3 border border-divider rounded-md bg-surface",
            hoverClass,
            className
          ),
          onClick,
          ...rowA11y,
          ...props,
          children: [
            /* @__PURE__ */ jsx(Avatar, { src: thumbnailSrc, alt: name, size: AVATAR_SIZE, shape: "square", className: "shrink-0" }),
            /* @__PURE__ */ jsxs(
              "div",
              {
                className: cn(
                  "flex flex-col flex-1 min-w-0 gap-2",
                  progressBar ? "justify-between" : "justify-center"
                ),
                style: { minHeight: AVATAR_SIZE },
                children: [
                  contentRow,
                  progressBar
                ]
              }
            )
          ]
        }
      );
    }
    const compactPadX = surface === "upload-manager" ? 0 : 12;
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn(
          "group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact transition-colors rounded-md",
          compactStaticBg,
          hoverClass,
          className
        ),
        style: { paddingInline: compactPadX },
        onClick,
        ...rowA11y,
        ...props,
        children: [
          /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(Paperclip, { size: ICON_PX, className: "shrink-0 text-fg-muted", "aria-hidden": true }) }),
          /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-w-0", children: contentRow }),
          progressBar && /* @__PURE__ */ jsx(
            "div",
            {
              className: "absolute bottom-0",
              style: { left: `calc(${compactPadX}px + ${ICON_PX}px + 0.5rem)`, right: compactPadX },
              children: progressBar
            }
          )
        ]
      }
    );
  }
);
FileItem.displayName = "FileItem";
const fileItemMeta = {
  component: "FileItem",
  family: 2,
  variants: {},
  sizes: {},
  states: ["default"],
  tokens: {
    bg: ["bg-secondary", "bg-surface"],
    fg: ["text-fg-muted", "text-fg-secondary"],
    ring: []
  }
};
export {
  FileItem,
  fileItemMeta
};
//# sourceMappingURL=file-item.js.map
