"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { memo, useCallback } from "react";
import { useTranslations } from "next-intl";
import { VideoIcon, FileIcon, MoreVerticalIcon, Edit2Icon, EyeIcon, Trash2Icon } from "lucide-react";
import { Card, CardContent } from "../ui/card.js";
import { Button } from "../ui/button.js";
import { Checkbox } from "../ui/checkbox.js";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "../ui/dropdown-menu.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
const MediaCard = memo(function MediaCard2({
  media,
  isSelected,
  onSelect,
  onEdit,
  onDelete,
  mode = "single",
  readOnly = false
}) {
  const t = useTranslations("media");
  const isImage = media.mimeType.startsWith("image/");
  const isVideo = media.mimeType.startsWith("video/");
  const handleCardClick = useCallback((e) => {
    if (e.shiftKey && mode === "multiple" && onSelect) {
      onSelect(media, { shiftKey: true });
    } else if (onEdit) {
      onEdit(media);
    } else {
      onSelect == null ? void 0 : onSelect(media);
    }
  }, [media, onSelect, onEdit, mode]);
  const handleCheckboxClick = useCallback((e) => {
    e.stopPropagation();
    onSelect == null ? void 0 : onSelect(media, { shiftKey: e.shiftKey });
  }, [media, onSelect]);
  const handleMenuClick = useCallback((e) => {
    e.stopPropagation();
  }, []);
  const handleEditClick = useCallback((e) => {
    e.stopPropagation();
    onEdit == null ? void 0 : onEdit(media);
  }, [media, onEdit]);
  const handleDeleteClick = useCallback((e) => {
    e.stopPropagation();
    onDelete == null ? void 0 : onDelete(media);
  }, [media, onDelete]);
  return /* @__PURE__ */ jsx(
    Card,
    {
      "data-cy": sel("media.grid.item", { id: media.id }),
      className: cn(
        "group relative overflow-hidden transition-shadow cursor-pointer hover:shadow-md select-none",
        "[content-visibility:auto] [contain-intrinsic-size:auto_200px]",
        isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background"
      ),
      onClick: handleCardClick,
      children: /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
        /* @__PURE__ */ jsxs("div", { className: "aspect-square relative bg-muted flex items-center justify-center overflow-hidden", children: [
          isImage ? /* @__PURE__ */ jsx(
            "img",
            {
              "data-cy": sel("media.grid.thumbnail", { id: media.id }),
              src: media.url,
              alt: media.alt || media.filename,
              className: "w-full h-full object-cover",
              loading: "lazy",
              decoding: "async"
            }
          ) : isVideo ? /* @__PURE__ */ jsx(VideoIcon, { className: "w-12 h-12 text-muted-foreground" }) : /* @__PURE__ */ jsx(FileIcon, { className: "w-12 h-12 text-muted-foreground" }),
          isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-primary/10 z-[1] pointer-events-none" }),
          mode === "multiple" && /* @__PURE__ */ jsx(
            "div",
            {
              className: cn(
                "absolute top-2 left-2 z-10 transition-all duration-150",
                isSelected ? "opacity-100 scale-100" : "opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100"
              ),
              onClick: handleCheckboxClick,
              children: /* @__PURE__ */ jsx(
                Checkbox,
                {
                  "data-cy": sel("media.grid.checkbox", { id: media.id }),
                  checked: isSelected,
                  "aria-label": `${t("actions.select")} ${media.filename}`,
                  className: cn(
                    "h-5 w-5 rounded-md shadow-md border-2 transition-colors pointer-events-none",
                    isSelected ? "bg-primary border-primary text-primary-foreground" : "bg-white/90 border-white/60 backdrop-blur-sm"
                  )
                }
              )
            }
          ),
          (onEdit || onDelete) && /* @__PURE__ */ jsx(
            "div",
            {
              className: "absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity",
              onClick: handleMenuClick,
              children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    "data-cy": sel("media.grid.menuBtn", { id: media.id }),
                    variant: "secondary",
                    size: "icon",
                    className: "h-8 w-8",
                    "aria-label": t("list.actions"),
                    children: /* @__PURE__ */ jsx(MoreVerticalIcon, { className: "h-4 w-4" })
                  }
                ) }),
                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
                  onEdit && /* @__PURE__ */ jsx(
                    DropdownMenuItem,
                    {
                      "data-cy": sel("media.grid.menuEdit", { id: media.id }),
                      onClick: handleEditClick,
                      children: readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
                        /* @__PURE__ */ jsx(EyeIcon, { className: "mr-2 h-4 w-4" }),
                        t("actions.viewDetails")
                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                        /* @__PURE__ */ jsx(Edit2Icon, { className: "mr-2 h-4 w-4" }),
                        t("actions.edit")
                      ] })
                    }
                  ),
                  onDelete && /* @__PURE__ */ jsxs(
                    DropdownMenuItem,
                    {
                      "data-cy": sel("media.grid.menuDelete", { id: media.id }),
                      onClick: handleDeleteClick,
                      className: "text-destructive focus:text-destructive",
                      children: [
                        /* @__PURE__ */ jsx(Trash2Icon, { className: "mr-2 h-4 w-4" }),
                        t("actions.delete")
                      ]
                    }
                  )
                ] })
              ] })
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
          /* @__PURE__ */ jsx("p", { className: "text-sm truncate", title: media.title || media.filename, children: media.title || media.filename }),
          media.width && media.height && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("grid.dimensions", { width: media.width, height: media.height }) })
        ] })
      ] })
    }
  );
});
export {
  MediaCard
};
