import { useNavigate, usePage, useStringifySearch } from "../../lib/navigation";
import type { ArtifactCatalogItem } from "@opengeni/sdk";
import {
  CopyIcon,
  ImageIcon,
  LayoutGridIcon,
  LinkIcon,
  ListIcon,
  LockIcon,
  LockKeyholeIcon,
  MessageSquareIcon,
  MoreHorizontalIcon,
  PanelsTopLeftIcon,
  PinIcon,
  PinOffIcon,
  UsersIcon,
} from "lucide-react";
import {
  lazy,
  Suspense,
  useEffect,
  useId,
  useRef,
  useState,
  type MouseEvent,
  type ReactNode,
} from "react";
import { toast } from "../../lib/toast";

import { Button } from "../../../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../../ui/dropdown-menu";
import { EmptyState, EmptyStateLink } from "../../../ui/empty-state";
import { ListRow, ListRowSkeleton, RowList, type RowListColumn } from "../../../ui/list-row";
import { MetaChip } from "../../../ui/meta-chip";
import { Notice } from "../../../ui/notice";
import { RelativeTime } from "../../../ui/relative-time";
import { SegmentedControl } from "../../../ui/segmented-control";
import { Skeleton } from "../../../ui/skeleton";
import { StatusBadge } from "../../../ui/status-badge";
import {
  Toolbar,
  ToolbarFilterChips,
  ToolbarFilterMenu,
  ToolbarGroup,
  ToolbarSearch,
  type ToolbarFilterGroup,
  type ToolbarFilterValue,
} from "../../../ui/toolbar";
import { useAppContext } from "../../app-context";
import { isPersonalWorkspace } from "../../lib/managed-self-context";
import { hasWorkspacePermission } from "../../lib/permissions";
import { invalidateArtifactCatalog } from "../../lib/use-artifact-catalog";
import { useDuplicateSite } from "../../lib/use-duplicate-site";
import { FILE_AUDIENCE_COPY, useArtifactAudience } from "./site-audience";
import { apiErrorAdvice, isPermissionDenied, userErrorText } from "../../../ui/api-error";
import { ARTIFACT_ACCESS_REQUIRED } from "../../lib/artifact-access";
import {
  artifactKey,
  artifactKindLabel,
  artifactKinds,
  artifactPath,
  artifactRoute,
  isEditableArtifactKind,
  type ArtifactCatalogFilters,
  type ArtifactKind,
} from "../../lib/artifact-catalog";
import {
  artifactExtension,
  readArtifactView,
  rememberArtifactView,
  type ArtifactView,
} from "../../lib/artifact-library-view";
import { cn } from "../../lib/utils";
import type { ArtifactReturnSearch } from "../../lib/routes";
import { ArtifactKindTile, ArtifactTypeIcon } from "./artifact-page-chrome";

const InlineChatImage = lazy(() =>
  import("./inline-chat-image").then((module) => ({
    default: module.InlineChatImage,
  })),
);

const IMAGE_GLYPH = <ImageIcon className="size-4 text-fg-subtle" aria-hidden />;

export type ArtifactPinAction = (item: ArtifactCatalogItem, pinned: boolean) => Promise<void>;

function PinnedMarker() {
  return (
    <span title="Pinned" className="inline-flex shrink-0 items-center text-fg-muted">
      <PinIcon aria-hidden className="size-3.5 fill-current" />
      <span className="sr-only">Pinned</span>
    </span>
  );
}

/** A Site or file only its owner (the viewer) can open, marked like an Only me schedule. */
function OnlyMeMarker({ bare = false }: { bare?: boolean | undefined }) {
  return (
    <MetaChip icon={<LockIcon />} {...(bare ? { variant: "text" as const } : {})}>
      Only me
    </MetaChip>
  );
}

function onlyMe(item: ArtifactCatalogItem): boolean {
  return (
    (item.kind === "site" || item.kind === "file" || item.kind === "image") &&
    item.visibility === "private"
  );
}

/**
 * Share or limit a file from its row, with the same confirmation as its
 * page. Only its owner sees the choice, and never in a Personal workspace.
 */
function useLibraryFileAudience(workspaceId: string, item: ArtifactCatalogItem) {
  const context = useAppContext();
  const workspace = context.workspaces.find((candidate) => candidate.id === workspaceId) ?? null;
  const owned = Boolean(
    (item.kind === "file" || item.kind === "image") &&
    item.ownedByViewer &&
    item.visibility &&
    item.status === "active" &&
    !isPersonalWorkspace(workspace, context.managedSelfContext) &&
    hasWorkspacePermission(context.accessContext, workspaceId, "files:upload"),
  );
  const audience = useArtifactAudience({
    client: context.client,
    workspaceId,
    workspaceName: workspace?.name ?? "this workspace",
    title: item.title,
    visibility: item.visibility === "private" ? "private" : "workspace",
    ownedByCurrentUser: owned,
    copy: FILE_AUDIENCE_COPY,
    canLimitToMe: true,
    update: async (visibility) => {
      await context.client.updateFileVisibility(workspaceId, item.id, { visibility });
      invalidateArtifactCatalog(context.client, workspaceId);
    },
  });
  const menuItem = !owned ? null : audience.share ? (
    <DropdownMenuItem onSelect={audience.share}>
      <UsersIcon />
      Share with workspace…
    </DropdownMenuItem>
  ) : audience.limit ? (
    <DropdownMenuItem onSelect={audience.limit}>
      <LockKeyholeIcon />
      Limit to me…
    </DropdownMenuItem>
  ) : null;
  return { menuItem, dialog: owned ? audience.dialog : null };
}

/** Mount retained-image loaders only near the viewport, not merely their img elements. */
export function ArtifactThumbnail({
  children,
  placeholder = IMAGE_GLYPH,
}: {
  children: ReactNode;
  placeholder?: ReactNode | undefined;
}) {
  const host = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const element = host.current;
    if (!element) return;
    if (typeof IntersectionObserver === "undefined") {
      setVisible(true);
      return;
    }
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries.some((entry) => entry.isIntersecting)) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: "200px 0px" },
    );
    observer.observe(element);
    return () => observer.disconnect();
  }, []);
  return (
    <div ref={host} className="flex h-full w-full items-center justify-center">
      {visible ? children : placeholder}
    </div>
  );
}

/** An image's own pixels in the 32px row tile, loaded only near the viewport. */
function ImageTile({ workspaceId, item }: { workspaceId: string; item: ArtifactCatalogItem }) {
  return (
    // The image's own pixels; while it loads or when it can't, the image glyph
    // (the words stay for screen readers, never squeezed into 32px).
    <span className="relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-[10px] bg-surface-2 [&_[role=status]]:sr-only [&_img]:relative [&_img]:size-full [&_img]:bg-surface-2 [&_img]:object-cover">
      <ImageIcon aria-hidden className="absolute size-4 text-fg-subtle" />
      <ArtifactThumbnail placeholder={null}>
        <Suspense fallback={<ImageIcon className="size-4 text-fg-subtle" aria-hidden />}>
          <InlineChatImage
            workspaceId={workspaceId}
            artifactId={item.id}
            alt={item.title}
            thumbnail
          />
        </Suspense>
      </ArtifactThumbnail>
    </span>
  );
}

const TYPE_GROUP: ToolbarFilterGroup = {
  id: "type",
  label: "Type",
  options: artifactKinds
    .filter(([kind]) => kind !== "all")
    .map(([kind, label]) => ({ id: kind, label })),
};
const STATUS_GROUP: ToolbarFilterGroup = {
  id: "status",
  label: "Status",
  options: [{ id: "archived", label: "Archived" }],
};
const SORT_GROUP: ToolbarFilterGroup = {
  id: "sort",
  label: "Sort",
  options: [
    { id: "newest", label: "Newest first" },
    { id: "title", label: "Title" },
  ],
};

/** The toolbar's filter value for the catalog filters (defaults are no filter). */
function filterValueFor(filters: ArtifactCatalogFilters, withType: boolean): ToolbarFilterValue {
  return {
    ...(withType && filters.kind !== "all" ? { type: [filters.kind] } : {}),
    ...(filters.status === "archived" ? { status: ["archived"] } : {}),
    ...(filters.sort !== "updated" ? { sort: [filters.sort] } : {}),
  };
}

/** Every group is one value: keep the option picked last. */
function lastPicked(previous: ToolbarFilterValue, next: ToolbarFilterValue, group: string) {
  const ids = next[group] ?? [];
  if (ids.length <= 1) return ids[0];
  const before = previous[group] ?? [];
  return ids.filter((id) => !before.includes(id)).at(-1);
}

function isPlainClick(event: MouseEvent<HTMLElement>) {
  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
}

/** Opening an artifact: its own page in the router, or the caller's handler. */
function useArtifactOpen(
  workspaceId: string,
  item: ArtifactCatalogItem,
  sessionId?: string,
  onSelect?: (item: ArtifactCatalogItem) => void,
  onPin?: ArtifactPinAction,
  loading = false,
  browseSearch?: ArtifactReturnSearch,
) {
  const page = usePage();
  const navigate = useNavigate();
  const stringifySearch = useStringifySearch();
  const audience = useLibraryFileAudience(workspaceId, item);
  const { accessContext } = useAppContext();
  const copies = useDuplicateSite(workspaceId);
  const canDuplicate =
    item.kind === "site" &&
    Boolean(item.versionId) &&
    hasWorkspacePermission(accessContext, workspaceId, "artifacts:publish");
  const [pinning, setPinning] = useState(false);
  const pinInFlight = useRef(false);
  const togglePin = async () => {
    if (!onPin || pinInFlight.current || loading) return;
    pinInFlight.current = true;
    setPinning(true);
    const pinned = !item.pinned;
    try {
      await onPin(item, pinned);
      toast(pinned ? "Artifact pinned" : "Artifact unpinned");
    } catch (error) {
      toast.error(pinned ? "Couldn't pin artifact" : "Couldn't unpin artifact", {
        description: userErrorText(error),
      });
    } finally {
      pinInFlight.current = false;
      setPinning(false);
    }
  };
  const open = () =>
    onSelect
      ? onSelect(item)
      : void navigate({
          to: artifactRoute(item.kind),
          params: { workspaceId, artifactId: item.id },
          search: browseSearch ?? (sessionId ? { fromSession: sessionId } : {}),
        });
  const menu = (
    <>
      <DropdownMenuItem onSelect={open}>
        <PanelsTopLeftIcon />
        Open
      </DropdownMenuItem>
      {onPin ? (
        <DropdownMenuItem disabled={pinning || loading} onSelect={() => void togglePin()}>
          {item.pinned ? <PinOffIcon /> : <PinIcon />}
          {pinning ? "Saving…" : item.pinned ? "Unpin" : "Pin"}
        </DropdownMenuItem>
      ) : null}
      {audience.menuItem}
      {canDuplicate ? (
        <DropdownMenuItem
          disabled={copies.busy}
          // In the session workbench the copy is offered, not opened.
          onSelect={() => void copies.duplicate(item, { open: !onSelect })}
        >
          <CopyIcon />
          {copies.busy ? "Duplicating…" : "Duplicate"}
        </DropdownMenuItem>
      ) : null}
      {item.sourceSessionId && item.sourceSessionId !== sessionId ? (
        <DropdownMenuItem
          onSelect={() =>
            void navigate({
              to: "/workspaces/$workspaceId/sessions/$sessionId",
              params: { workspaceId, sessionId: item.sourceSessionId! },
            })
          }
        >
          <MessageSquareIcon />
          Open source session
        </DropdownMenuItem>
      ) : null}
      <DropdownMenuSeparator />
      <DropdownMenuItem
        onSelect={() => {
          void navigator.clipboard
            ?.writeText(new URL(artifactPath(workspaceId, item), page.origin()).href)
            .then(() => toast("Copied a link to this artifact"))
            .catch(() => toast.error("Couldn't copy the link"));
        }}
      >
        <LinkIcon />
        Copy link
      </DropdownMenuItem>
    </>
  );
  return {
    open,
    menu,
    dialog: audience.dialog,
    // Links keep a real href (new tab, copy); a plain click stays in the router.
    link: onSelect
      ? null
      : {
          href: browseSearch
            ? `${artifactPath(workspaceId, item)}${stringifySearch(browseSearch)}`
            : artifactPath(workspaceId, item, sessionId),
          onClick: (event: MouseEvent<HTMLElement>) => {
            if (!isPlainClick(event)) return;
            event.preventDefault();
            open();
          },
        },
  };
}

/** "updated 3 days ago", the one fact after the type in every meta line. */
function updatedMeta(item: ArtifactCatalogItem) {
  return (
    <span key="updated">
      updated <RelativeTime date={item.updatedAt} inSentence focusable={false} />
    </span>
  );
}

/** The date column every artifact list ends with, before the ⋯ menu. */
const ARTIFACT_COLUMNS: RowListColumn[] = [
  {
    id: "updated",
    label: "Updated",
    width: 112,
    align: "end",
    hideLabel: true,
  },
];

export function ArtifactRow({
  workspaceId,
  item,
  sessionId,
  onSelect,
  onPin,
  loading,
  browseSearch,
}: {
  workspaceId: string;
  item: ArtifactCatalogItem;
  sessionId?: string | undefined;
  onSelect?: ((item: ArtifactCatalogItem) => void) | undefined;
  onPin?: ArtifactPinAction | undefined;
  loading?: boolean | undefined;
  browseSearch?: ArtifactReturnSearch | undefined;
}) {
  const { open, menu, link, dialog } = useArtifactOpen(
    workspaceId,
    item,
    sessionId,
    onSelect,
    onPin,
    loading,
    browseSearch,
  );
  const archived = item.status === "archived";
  return (
    <>
      <ListRow
        // A tile for the kind of artifact; an image shows its own pixels.
        leading={
          item.kind === "image" ? (
            <ImageTile workspaceId={workspaceId} item={item} />
          ) : (
            <ArtifactKindTile kind={item.kind} />
          )
        }
        title={item.title}
        titleAddon={
          item.pinned || onlyMe(item) ? (
            <span className="inline-flex items-center gap-2">
              {item.pinned ? <PinnedMarker /> : null}
              {onlyMe(item) ? <OnlyMeMarker /> : null}
            </span>
          ) : undefined
        }
        meta={[
          artifactKindLabel[item.kind],
          item.kind === "file" && item.filename && item.filename !== item.title
            ? item.filename
            : null,
        ].filter((part): part is string => Boolean(part))}
        status={
          archived ? (
            <StatusBadge variant="dot" tone="neutral">
              Archived
            </StatusBadge>
          ) : undefined
        }
        cells={{ updated: <RelativeTime date={item.updatedAt} /> }}
        {...(link ? { href: link.href, onOpen: link.onClick } : { onOpen: open })}
        menu={menu}
        menuLabel={`More actions for ${item.title}`}
      />
      {dialog}
    </>
  );
}

// ---------------------------------------------------------------------------
// Gallery
// ---------------------------------------------------------------------------

/*
 * A Site's card shows its published HTML as a still: a srcdoc frame with an
 * empty sandbox (no scripts, forms, popups or same-origin) and a policy that
 * blocks every network request, so a card never runs Site code or phones
 * home. The first element of the document is the policy, so it always lands
 * in <head> whatever the Site's own markup.
 *
 * The frame also requires the same policy from outside (the `csp` attribute,
 * CSP Embedded Enforcement), so browsers that support it enforce the policy
 * on the srcdoc document before any of its markup is parsed or speculatively
 * preloaded. The in-document policy keeps other browsers covered.
 */
const SITE_STILL_POLICY =
  "default-src 'none'; img-src data: blob:; media-src data: blob:; font-src data:; style-src 'unsafe-inline'";
// `csp` is a standard iframe attribute React passes through but doesn't type.
const SITE_STILL_FRAME_POLICY = { csp: SITE_STILL_POLICY };
export function siteStillDocument(html: string) {
  return `<!doctype html><meta http-equiv="Content-Security-Policy" content="${SITE_STILL_POLICY}"><meta name="color-scheme" content="light">${html}`;
}

// Display HTML per published version, shared across remounts (tabs, search).
const siteHtmlCache = new Map<string, Promise<string>>();
const SITE_HTML_CACHE_LIMIT = 48;

function useSiteHtml(workspaceId: string, item: ArtifactCatalogItem) {
  const { client, accessKeyVersion } = useAppContext();
  const versionId = item.versionId;
  const [state, setState] = useState<{
    key: string;
    html: string | null;
  } | null>(null);
  const key = `${accessKeyVersion}:${workspaceId}:${item.id}:${versionId}`;
  useEffect(() => {
    if (!versionId) return;
    let active = true;
    let request = siteHtmlCache.get(key);
    if (!request) {
      request = client.getWorkspaceArtifactHtml(workspaceId, item.id, {
        versionId,
      });
      siteHtmlCache.set(key, request);
      if (siteHtmlCache.size > SITE_HTML_CACHE_LIMIT)
        siteHtmlCache.delete(siteHtmlCache.keys().next().value!);
      request.catch(() => siteHtmlCache.delete(key));
    }
    request.then(
      (html) => active && setState({ key, html }),
      () => active && setState({ key, html: null }),
    );
    return () => {
      active = false;
    };
  }, [client, item.id, key, versionId, workspaceId]);
  return state?.key === key ? state.html : undefined;
}

function SiteStill({
  workspaceId,
  item,
  placeholder,
}: {
  workspaceId: string;
  item: ArtifactCatalogItem;
  placeholder: ReactNode;
}) {
  const html = useSiteHtml(workspaceId, item);
  if (!html) return placeholder;
  return (
    // Drawn at three times the card's width and scaled down, like a screenshot;
    // a touch dimmer in dark so a white page doesn't glare.
    <div
      className="pointer-events-none absolute inset-0 overflow-hidden bg-white dark:brightness-[0.88]"
      inert
    >
      <iframe
        title={`Preview of ${item.title}`}
        sandbox=""
        {...SITE_STILL_FRAME_POLICY}
        srcDoc={siteStillDocument(html)}
        loading="lazy"
        tabIndex={-1}
        aria-hidden
        className="absolute top-0 left-0 h-[300%] w-[300%] origin-top-left scale-[0.3333] border-0 bg-white"
      />
    </div>
  );
}

/** Types without a still: the type glyph on a quiet tile, and a file's extension. */
function PreviewPlaceholder({ item }: { item: ArtifactCatalogItem }) {
  const extension = item.kind === "file" ? artifactExtension(item) : null;
  return (
    <span className="flex flex-col items-center gap-2 text-fg-subtle">
      <span className="grid size-10 place-items-center rounded-[10px] border border-border bg-surface text-fg-muted">
        <ArtifactTypeIcon kind={item.kind} className="size-5" />
      </span>
      {extension ? (
        <span className="text-2xs leading-4 font-medium text-fg-subtle">.{extension}</span>
      ) : null}
    </span>
  );
}

function ArtifactPreview({
  workspaceId,
  item,
}: {
  workspaceId: string;
  item: ArtifactCatalogItem;
}) {
  const placeholder = <PreviewPlaceholder item={item} />;
  if (item.kind === "image")
    return (
      <div className="absolute inset-0 [&_img]:size-full [&_img]:object-cover">
        <ArtifactThumbnail placeholder={placeholder}>
          <Suspense fallback={placeholder}>
            <InlineChatImage
              workspaceId={workspaceId}
              artifactId={item.id}
              alt={item.title}
              thumbnail
            />
          </Suspense>
        </ArtifactThumbnail>
      </div>
    );
  if (item.kind === "site" && item.versionId)
    return (
      <div className="absolute inset-0">
        <ArtifactThumbnail placeholder={placeholder}>
          <SiteStill workspaceId={workspaceId} item={item} placeholder={placeholder} />
        </ArtifactThumbnail>
      </div>
    );
  return <div className="absolute inset-0 grid place-items-center">{placeholder}</div>;
}

export function ArtifactCard({
  workspaceId,
  item,
  sessionId,
  onSelect,
  onPin,
  loading,
  browseSearch,
}: {
  workspaceId: string;
  item: ArtifactCatalogItem;
  sessionId?: string | undefined;
  onSelect?: ((item: ArtifactCatalogItem) => void) | undefined;
  onPin?: ArtifactPinAction | undefined;
  loading?: boolean | undefined;
  browseSearch?: ArtifactReturnSearch | undefined;
}) {
  const { open, menu, link, dialog } = useArtifactOpen(
    workspaceId,
    item,
    sessionId,
    onSelect,
    onPin,
    loading,
    browseSearch,
  );
  const titleId = useId();
  const archived = item.status === "archived";
  // The title is the card's action, stretched over the whole card; the menu sits above it.
  const actionProps = {
    "aria-labelledby": titleId,
    style: { outline: "none" },
    className:
      "block min-w-0 truncate text-sm leading-5 font-medium text-fg after:absolute after:inset-0 after:z-0 after:rounded-[14px] after:content-['']",
  };
  return (
    <li
      className={cn(
        "group relative flex min-w-0 flex-col overflow-hidden rounded-[14px] border border-border bg-surface",
        "transition-colors duration-[120ms] hover:border-border-strong",
        "has-[[data-card-action]:focus-visible]:outline-2 has-[[data-card-action]:focus-visible]:outline-offset-2 has-[[data-card-action]:focus-visible]:outline-brand/55",
      )}
    >
      <div
        className={cn(
          "relative aspect-[16/10] w-full overflow-hidden border-b border-border bg-surface-2",
          archived && "opacity-70 grayscale",
        )}
      >
        <ArtifactPreview workspaceId={workspaceId} item={item} />
      </div>
      {archived || item.pinned || onlyMe(item) ? (
        // On the preview, so the meta line keeps its one fact whole.
        <span className="absolute top-2.5 left-2.5 flex items-center gap-2 rounded-full bg-surface px-2 py-1">
          {item.pinned ? <PinnedMarker /> : null}
          {onlyMe(item) ? <OnlyMeMarker bare /> : null}
          {archived ? (
            <StatusBadge tone="neutral" icon="auto">
              Archived
            </StatusBadge>
          ) : null}
        </span>
      ) : null}
      <div className="flex min-w-0 items-start gap-2 px-3.5 pt-3 pb-3.5">
        <div className="min-w-0 flex-1">
          {link ? (
            <a {...actionProps} data-card-action="" href={link.href} onClick={link.onClick}>
              <span id={titleId}>{item.title}</span>
            </a>
          ) : (
            <button
              {...actionProps}
              data-card-action=""
              type="button"
              onClick={open}
              className={cn(actionProps.className, "w-full cursor-pointer text-left")}
            >
              <span id={titleId}>{item.title}</span>
            </button>
          )}
          <p className="mt-0.5 truncate text-xs leading-4.5 text-fg-subtle">
            {artifactKindLabel[item.kind]} · {updatedMeta(item)}
          </p>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              aria-label={`More actions for ${item.title}`}
              className={cn(
                "relative z-10 -mt-1 -mr-1.5 grid size-8 shrink-0 place-items-center rounded-[10px] text-fg-subtle transition-[color,background-color,opacity] duration-[120ms] hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg pointer-coarse:size-11",
                // Quiet until the card is hovered or focused; always there for touch.
                "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 pointer-coarse:opacity-100",
              )}
            >
              <MoreHorizontalIcon aria-hidden="true" className="size-4" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-44">
            {menu}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      {dialog}
    </li>
  );
}

const GALLERY_GRID =
  "grid min-w-0 grid-cols-1 gap-4 @[560px]:grid-cols-2 @[820px]:grid-cols-3 @[1060px]:grid-cols-4";

function GallerySkeleton() {
  return (
    <ul aria-hidden className={GALLERY_GRID}>
      {[0, 1, 2, 3].map((index) => (
        <li key={index} className="overflow-hidden rounded-[14px] border border-border bg-surface">
          <Skeleton className="aspect-[16/10] w-full rounded-none" />
          <div className="space-y-2 px-3.5 pt-3 pb-3.5">
            <Skeleton className="h-4 w-2/3" />
            <Skeleton className="h-3 w-1/2" />
          </div>
        </li>
      ))}
    </ul>
  );
}

const VIEW_OPTIONS = [
  {
    value: "gallery",
    label: "Gallery",
    icon: <LayoutGridIcon />,
    iconOnly: true,
  },
  { value: "list", label: "List", icon: <ListIcon />, iconOnly: true },
] as const;

export function ArtifactLibrary({
  workspaceId,
  sessionId,
  items,
  filters,
  onFiltersChange,
  loading,
  error,
  onRetry,
  nextCursor,
  onLoadMore,
  onSelect,
  onPin,
  compact = false,
  emptyAction,
  onEmptyChange,
  artifactKindsHidden = false,
  browseSearch,
}: {
  workspaceId: string;
  sessionId?: string | undefined;
  items: readonly ArtifactCatalogItem[];
  filters: ArtifactCatalogFilters;
  onFiltersChange: (filters: ArtifactCatalogFilters) => void;
  loading: boolean;
  error?: Error | null | undefined;
  onRetry: () => void;
  nextCursor?: string | null | undefined;
  onLoadMore?: (() => void) | undefined;
  onSelect?: ((item: ArtifactCatalogItem) => void) | undefined;
  /** Omitted for viewers without permission to change workspace pins. */
  onPin?: ArtifactPinAction | undefined;
  /**
   * The session's artifact panel: no page tabs, so the type filter joins the
   * Filter menu.
   */
  compact?: boolean | undefined;
  /** The one action of the first-run empty state ("New artifact"). */
  emptyAction?: ReactNode | undefined;
  /** Nothing at all yet: the page hides its header action, the empty state has it. */
  onEmptyChange?: ((empty: boolean) => void) | undefined;
  /**
   * The viewer can't read Sites and editable artifacts here (no
   * `artifacts:read`), so the catalog omits them: say so instead of "none yet".
   */
  artifactKindsHidden?: boolean | undefined;
  /** Workspace library query carried into the full-page viewer, not embedded panels. */
  browseSearch?: ArtifactReturnSearch | undefined;
}) {
  const [view, setView] = useState<ArtifactView>(readArtifactView);
  const changeView = (next: ArtifactView) => {
    setView(next);
    rememberArtifactView(next);
  };
  const groups = compact ? [TYPE_GROUP, STATUS_GROUP, SORT_GROUP] : [STATUS_GROUP, SORT_GROUP];
  const filterValue = filterValueFor(filters, compact);
  const setFilterValue = (next: ToolbarFilterValue) => {
    const kind = compact ? lastPicked(filterValue, next, "type") : undefined;
    const status = lastPicked(filterValue, next, "status");
    const sort = lastPicked(filterValue, next, "sort");
    onFiltersChange({
      ...filters,
      ...(compact ? { kind: (kind as ArtifactKind | undefined) ?? "all" } : {}),
      status: status === "archived" ? "archived" : "active",
      sort: (sort as ArtifactCatalogFilters["sort"] | undefined) ?? "updated",
    });
  };
  const searching = filters.q.trim().length > 0;
  const narrowed =
    searching ||
    filters.kind !== "all" ||
    filters.status !== "active" ||
    filters.sort !== "updated";
  const nothingAtAll = !loading && !error && items.length === 0 && !narrowed;
  useEffect(() => onEmptyChange?.(nothingAtAll), [nothingAtAll, onEmptyChange]);
  const kindLabel =
    filters.kind === "all"
      ? "artifacts"
      : (artifactKinds.find(([kind]) => kind === filters.kind)?.[1] ?? "").toLocaleLowerCase();

  // The flag comes from the viewer's loaded grant, which can be stale: once
  // the catalog returns a Site or editable artifact, the server has decided.
  const readsArtifactKinds = (kind: ArtifactKind) =>
    kind === "site" || isEditableArtifactKind(kind);
  const hiddenKindSelected =
    artifactKindsHidden &&
    filters.kind !== "all" &&
    readsArtifactKinds(filters.kind) &&
    !loading &&
    items.length === 0;
  const hiddenKindsNotice =
    artifactKindsHidden &&
    filters.kind === "all" &&
    !(error && isPermissionDenied(error)) &&
    !items.some((item) => readsArtifactKinds(item.kind));

  let body: ReactNode;
  if (hiddenKindSelected) {
    body = <Notice title={`You can't see ${kindLabel} here.`}>{ARTIFACT_ACCESS_REQUIRED}</Notice>;
  } else if (error && items.length === 0 && isPermissionDenied(error)) {
    body = <Notice title="You can't see artifacts here.">Ask a workspace admin for access.</Notice>;
  } else if (error && items.length === 0) {
    body = (
      <Notice
        tone="failed"
        title="Couldn't load artifacts"
        action={
          <Button type="button" size="sm" variant="outline" onClick={onRetry}>
            Try again
          </Button>
        }
        actionLayout="responsive"
      >
        {apiErrorAdvice(error)}
      </Notice>
    );
  } else if (loading && items.length === 0) {
    body = (
      <div role="status" aria-label="Loading artifacts">
        {view === "gallery" ? (
          <GallerySkeleton />
        ) : (
          <RowList label="Artifacts" columns={ARTIFACT_COLUMNS} flush={!compact} busy>
            <ListRowSkeleton count={4} />
          </RowList>
        )}
      </div>
    );
  } else if (nothingAtAll) {
    body = (
      <EmptyState
        variant={compact ? "inline" : "page"}
        icon={<PanelsTopLeftIcon />}
        title="No artifacts yet"
        description="Sites, images, documents, spreadsheets and presentations Opengeni makes show up here."
        action={emptyAction}
      />
    );
  } else if (items.length === 0) {
    body = (
      <EmptyState
        variant="inline"
        title={
          searching
            ? `No ${kindLabel} match "${filters.q.trim()}".`
            : filters.status === "archived"
              ? `No archived ${kindLabel}. Archived Sites keep their versions and can be restored.`
              : `No ${kindLabel} yet.`
        }
        action={
          searching || filters.status !== "active" || (compact && filters.kind !== "all") ? (
            <EmptyStateLink
              onClick={() =>
                onFiltersChange(
                  searching
                    ? { ...filters, q: "" }
                    : {
                        ...filters,
                        q: "",
                        status: "active",
                        ...(compact ? { kind: "all" as const } : {}),
                      },
                )
              }
            >
              {searching ? "Clear search" : "Clear filters"}
            </EmptyStateLink>
          ) : undefined
        }
      />
    );
  } else {
    body = (
      <div className="flex min-w-0 flex-col gap-4">
        {view === "gallery" ? (
          <ul
            aria-label={searching ? "Search results" : "Artifacts"}
            aria-busy={loading || undefined}
            className={GALLERY_GRID}
          >
            {items.map((item) => (
              <ArtifactCard
                key={artifactKey(item)}
                workspaceId={workspaceId}
                item={item}
                sessionId={sessionId}
                onSelect={onSelect}
                onPin={onPin}
                loading={loading}
                browseSearch={browseSearch}
              />
            ))}
          </ul>
        ) : (
          <RowList
            label={searching ? "Search results" : "Artifacts"}
            columns={ARTIFACT_COLUMNS}
            flush={!compact}
            busy={loading}
          >
            {items.map((item) => (
              <ArtifactRow
                key={artifactKey(item)}
                workspaceId={workspaceId}
                item={item}
                sessionId={sessionId}
                onSelect={onSelect}
                onPin={onPin}
                loading={loading}
                browseSearch={browseSearch}
              />
            ))}
          </RowList>
        )}
        {error ? (
          <p role="alert" className="text-sm text-danger">
            Couldn't load the latest artifacts. {userErrorText(error)}
          </p>
        ) : null}
        {nextCursor && onLoadMore ? (
          <Button
            type="button"
            variant="outline"
            className="self-start pointer-coarse:h-11"
            disabled={loading}
            onClick={onLoadMore}
          >
            {loading ? "Loading…" : "Load more"}
          </Button>
        ) : null}
      </div>
    );
  }

  return (
    <section
      className="@container flex min-w-0 flex-col gap-4"
      aria-label={sessionId ? "Session artifact library" : "Artifact library"}
    >
      <div className={nothingAtAll ? "hidden" : "flex min-w-0 flex-col gap-3"}>
        <Toolbar>
          <ToolbarSearch
            value={filters.q}
            onValueChange={(q) => onFiltersChange({ ...filters, q })}
            placeholder="Search artifacts"
            aria-label="Search artifacts by title"
            maxLength={200}
          />
          <ToolbarGroup align="end">
            <ToolbarFilterMenu groups={groups} value={filterValue} onValueChange={setFilterValue} />
            <SegmentedControl<ArtifactView>
              aria-label="Show"
              options={VIEW_OPTIONS}
              value={view}
              onValueChange={changeView}
            />
          </ToolbarGroup>
        </Toolbar>
        {Object.keys(filterValue).length > 0 ? (
          <div className="flex min-w-0 flex-wrap items-center gap-1.5">
            <ToolbarFilterChips
              groups={groups}
              value={filterValue}
              onValueChange={setFilterValue}
            />
          </div>
        ) : null}
      </div>
      {hiddenKindsNotice ? (
        <Notice title="Sites and documents are hidden">{ARTIFACT_ACCESS_REQUIRED}</Notice>
      ) : null}
      <div className="min-w-0">{body}</div>
    </section>
  );
}