"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useTranslations } from "next-intl";
import { MoreVerticalIcon, Edit2Icon, EyeIcon, Trash2Icon, ImageIcon } from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "../ui/table.js";
import { Button } from "../ui/button.js";
import { Checkbox } from "../ui/checkbox.js";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "../ui/dropdown-menu.js";
import { Skeleton } from "../ui/skeleton.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
function formatFileSize(bytes) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
function formatDate(dateString) {
  return new Date(dateString).toLocaleDateString(void 0, {
    year: "numeric",
    month: "short",
    day: "numeric"
  });
}
function MediaList({
  items,
  isLoading,
  selectedIds,
  onSelect,
  onEdit,
  onDelete,
  mode = "single",
  readOnly = false,
  className
}) {
  const t = useTranslations("media");
  if (isLoading) {
    return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs(Table, { children: [
      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
        mode === "multiple" && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
        /* @__PURE__ */ jsx(TableHead, { className: "w-16" }),
        /* @__PURE__ */ jsx(TableHead, { children: t("list.filename") }),
        /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: t("list.type") }),
        /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: t("list.size") }),
        /* @__PURE__ */ jsx(TableHead, { className: "hidden lg:table-cell", children: t("list.dimensions") }),
        /* @__PURE__ */ jsx(TableHead, { className: "hidden lg:table-cell", children: t("list.uploaded") }),
        (onEdit || onDelete) && /* @__PURE__ */ jsx(TableHead, { className: "w-12" })
      ] }) }),
      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
        mode === "multiple" && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }) }),
        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10" }) }),
        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }) }),
        /* @__PURE__ */ jsx(TableCell, { className: "hidden md:table-cell", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) }),
        /* @__PURE__ */ jsx(TableCell, { className: "hidden md:table-cell", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) }),
        /* @__PURE__ */ jsx(TableCell, { className: "hidden lg:table-cell", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) }),
        /* @__PURE__ */ jsx(TableCell, { className: "hidden lg:table-cell", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }),
        (onEdit || onDelete) && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8" }) })
      ] }, i)) })
    ] }) });
  }
  if (items.length === 0) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        "data-cy": sel("media.empty.container"),
        className: "flex flex-col items-center justify-center py-12 text-center",
        children: [
          /* @__PURE__ */ jsx(ImageIcon, { className: "h-16 w-16 text-muted-foreground mb-4" }),
          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: t("empty.title") }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("grid.noResults") })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-cy": sel("media.list.container"),
      className: cn("rounded-md border", className),
      children: /* @__PURE__ */ jsxs(Table, { children: [
        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
          mode === "multiple" && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
          /* @__PURE__ */ jsx(TableHead, { className: "w-16" }),
          /* @__PURE__ */ jsx(TableHead, { children: t("list.filename") }),
          /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: t("list.type") }),
          /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: t("list.size") }),
          /* @__PURE__ */ jsx(TableHead, { className: "hidden lg:table-cell", children: t("list.dimensions") }),
          /* @__PURE__ */ jsx(TableHead, { className: "hidden lg:table-cell", children: t("list.uploaded") }),
          (onEdit || onDelete) && /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: t("list.actions") })
        ] }) }),
        /* @__PURE__ */ jsx(TableBody, { children: items.map((media) => {
          const isSelected = selectedIds.has(media.id);
          const isImage = media.mimeType.startsWith("image/");
          return /* @__PURE__ */ jsxs(
            TableRow,
            {
              "data-cy": sel("media.list.row", { id: media.id }),
              className: cn(
                "cursor-pointer transition-colors hover:bg-muted/50",
                isSelected && "bg-muted"
              ),
              onClick: () => onEdit ? onEdit(media) : onSelect == null ? void 0 : onSelect(media),
              children: [
                mode === "multiple" && onSelect && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => {
                  e.stopPropagation();
                  onSelect(media, { shiftKey: e.shiftKey });
                }, children: /* @__PURE__ */ jsx(
                  Checkbox,
                  {
                    "data-cy": sel("media.list.checkbox", { id: media.id }),
                    checked: isSelected,
                    "aria-label": `${t("actions.select")} ${media.filename}`,
                    className: "pointer-events-none"
                  }
                ) }),
                /* @__PURE__ */ jsx(TableCell, { children: isImage ? /* @__PURE__ */ jsx(
                  "img",
                  {
                    src: media.url,
                    alt: media.alt || media.filename,
                    className: "h-10 w-10 rounded object-cover",
                    loading: "lazy",
                    decoding: "async"
                  }
                ) : /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-5 w-5 text-muted-foreground" }) }) }),
                /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: media.title || media.filename }),
                /* @__PURE__ */ jsx(TableCell, { className: "hidden md:table-cell text-muted-foreground", children: media.mimeType }),
                /* @__PURE__ */ jsx(TableCell, { className: "hidden md:table-cell text-muted-foreground", children: formatFileSize(media.fileSize) }),
                /* @__PURE__ */ jsx(TableCell, { className: "hidden lg:table-cell text-muted-foreground", children: media.width && media.height ? `${media.width} \xD7 ${media.height}` : "\u2014" }),
                /* @__PURE__ */ jsx(TableCell, { className: "hidden lg:table-cell text-muted-foreground", children: formatDate(media.createdAt) }),
                (onEdit || onDelete) && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
                  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                    Button,
                    {
                      variant: "ghost",
                      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, { onClick: () => onEdit(media), 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,
                      {
                        onClick: () => onDelete(media),
                        className: "text-destructive focus:text-destructive",
                        children: [
                          /* @__PURE__ */ jsx(Trash2Icon, { className: "mr-2 h-4 w-4" }),
                          t("actions.delete")
                        ]
                      }
                    )
                  ] })
                ] }) })
              ]
            },
            media.id
          );
        }) })
      ] })
    }
  );
}
export {
  MediaList
};
