"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { ImageIcon, XIcon } from "lucide-react";
import { Button } from "../ui/button.js";
import { Card, CardContent } from "../ui/card.js";
import { MediaLibrary } from "./MediaLibrary.js";
import { useMediaItem } from "../../hooks/useMedia.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
function MediaSelector({
  value,
  onChange,
  mode = "single",
  allowedTypes,
  className,
  disabled = false
}) {
  const t = useTranslations("media");
  const [isLibraryOpen, setIsLibraryOpen] = useState(false);
  const mediaId = value ? typeof value === "string" ? value : value.mediaId : null;
  const { data: selectedMedia, isLoading, isError } = useMediaItem(mediaId);
  const handleSelect = (media) => {
    if (Array.isArray(media)) {
      return;
    }
    onChange == null ? void 0 : onChange({ mediaId: media.id, url: media.url });
    setIsLibraryOpen(false);
  };
  const handleRemove = () => {
    onChange == null ? void 0 : onChange(null);
  };
  const handleOpenLibrary = () => {
    if (!disabled) {
      setIsLibraryOpen(true);
    }
  };
  const isImage = selectedMedia == null ? void 0 : selectedMedia.mimeType.startsWith("image/");
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        "data-cy": sel("media.selector.container"),
        className: cn("space-y-2", className),
        children: !value || !selectedMedia || isError ? (
          // Empty state
          /* @__PURE__ */ jsx(
            Card,
            {
              className: cn(
                "border-2 border-dashed cursor-pointer hover:border-primary/50 transition-colors",
                disabled && "opacity-50 cursor-not-allowed"
              ),
              onClick: handleOpenLibrary,
              children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col items-center justify-center py-8", children: [
                /* @__PURE__ */ jsx(ImageIcon, { className: "h-12 w-12 text-muted-foreground mb-2" }),
                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: t("selector.noSelection") }),
                /* @__PURE__ */ jsx(
                  Button,
                  {
                    "data-cy": sel("media.selector.selectBtn"),
                    type: "button",
                    variant: "outline",
                    disabled,
                    onClick: (e) => {
                      e.stopPropagation();
                      handleOpenLibrary();
                    },
                    children: t("selector.selectMedia")
                  }
                )
              ] })
            }
          )
        ) : (
          // Selected state
          /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                "data-cy": sel("media.selector.preview"),
                className: "shrink-0 w-20 h-20 rounded bg-muted overflow-hidden flex items-center justify-center",
                children: isImage ? /* @__PURE__ */ jsx(
                  "img",
                  {
                    src: selectedMedia.url,
                    alt: selectedMedia.alt || selectedMedia.filename,
                    className: "w-full h-full object-cover"
                  }
                ) : /* @__PURE__ */ jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })
              }
            ),
            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ jsx("p", { className: "font-medium truncate", title: selectedMedia.filename, children: selectedMedia.filename }),
              selectedMedia.width && selectedMedia.height && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("grid.dimensions", {
                width: selectedMedia.width,
                height: selectedMedia.height
              }) })
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
              /* @__PURE__ */ jsx(
                Button,
                {
                  "data-cy": sel("media.selector.changeBtn"),
                  type: "button",
                  variant: "outline",
                  size: "sm",
                  disabled,
                  onClick: handleOpenLibrary,
                  children: t("selector.change")
                }
              ),
              /* @__PURE__ */ jsx(
                Button,
                {
                  "data-cy": sel("media.selector.removeBtn"),
                  type: "button",
                  variant: "outline",
                  size: "icon",
                  disabled,
                  onClick: handleRemove,
                  "aria-label": t("selector.remove"),
                  children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
                }
              )
            ] })
          ] }) }) })
        )
      }
    ),
    /* @__PURE__ */ jsx(
      MediaLibrary,
      {
        isOpen: isLibraryOpen,
        onClose: () => setIsLibraryOpen(false),
        onSelect: handleSelect,
        mode,
        allowedTypes
      }
    )
  ] });
}
export {
  MediaSelector
};
