/* eslint-disable react/destructuring-assignment */
import React, {
  Dispatch,
  RefObject,
  SetStateAction,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import {
  Direction,
  EventTimeline,
  EventTimelineSet,
  EventTimelineSetHandlerMap,
  MatrixClient,
  MatrixEvent,
  Room,
  RoomEvent,
  RoomEventHandlerMap,
} from 'matrix-js-sdk';
import { HTMLReactParserOptions } from 'html-react-parser';
import classNames from 'classnames';
import { Editor } from 'slate';
import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc';
import to from 'await-to-js';
import { useAtomValue, useSetAtom } from 'jotai';
import {
  Box,
  Chip,
  Icon,
  Icons,
  Scroll,
  Text,
  as,
  config,
  toRem,
} from 'folds';
import { isKeyHotkey } from 'is-hotkey';
import { Opts as LinkifyOpts } from 'linkifyjs';
import { Trans, useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { getMxIdLocalPart } from '../../utils/matrix';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
import { useAlive } from '../../hooks/useAlive';
import { editableActiveElement, scrollToBottom } from '../../utils/dom';
import {
  DefaultPlaceholder,
  Reply,
  MessageBase,
  MessageUnsupportedContent,
  Time,
  MessageNotDecryptedContent,
  RedactedContent,
  MSticker,
  ImageContent,
  EventContent,
  STREAM_MESSAGE_SPACING,
  StreamDayDivider,
  CHANNEL_MESSAGE_SPACING,
  ChannelDayDivider,
} from '../../components/message';
import {
  factoryRenderLinkifyWithMention,
  getReactCustomHtmlParser,
  LINKIFY_OPTS,
  makeMentionCustomProps,
  renderMatrixMention,
} from '../../plugins/react-custom-html-parser';
import {
  canEditEvent,
  decryptAllTimelineEvent,
  getEditedEvent,
  getEventReactions,
  getLatestEditableEvt,
  getMemberDisplayName,
  isBridgedRoom,
  isMembershipChanged,
  reactionOrEditEvent,
} from '../../utils/room';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
import {
  Reactions,
  Message,
  Event,
  EncryptedContent,
  useMessageInteractionHandlers,
} from './message';
import { ThreadSummaryCard } from './ThreadSummaryCard';
import { useMemberEventParser } from '../../hooks/useMemberEventParser';
import * as customHtmlCss from '../../styles/CustomHtml.css';
import { RoomIntro } from '../../components/room-intro';
import {
  getIntersectionObserverEntry,
  useIntersectionObserver,
} from '../../hooks/useIntersectionObserver';
import { markAsRead } from '../../utils/notifications';
import { useDebounce } from '../../hooks/useDebounce';
import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
import * as css from './RoomTimeline.css';
import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
import { isEmptyEditor } from '../../components/editor';
import { draftKey, roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
import { useKeyDown } from '../../hooks/useKeyDown';
import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
import { RenderMessageContent } from '../../components/RenderMessageContent';
import { Image } from '../../components/media';
import { ImageViewer } from '../../components/image-viewer';
import { roomToParentsAtom } from '../../state/room/roomToParents';
import { useRoomUnread } from '../../state/hooks/unread';
import { roomToUnreadAtom } from '../../state/room/roomToUnread';
import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
import { useImagePackRooms } from '../../hooks/useImagePackRooms';
import { useIsOneOnOne } from '../../hooks/useRoom';
import { useChannelsMode, useThreadDrawerOpen } from '../../hooks/useChannelsMode';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
import { useTheme } from '../../hooks/useTheme';
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';

const TimelineFloat = as<'div', css.TimelineFloatVariants>(
  ({ position, className, ...props }, ref) => (
    <Box
      className={classNames(css.TimelineFloat({ position }), className)}
      justifyContent="Center"
      alignItems="Center"
      gap="200"
      {...props}
      ref={ref}
    />
  )
);

export const getLiveTimeline = (room: Room): EventTimeline =>
  room.getUnfilteredTimelineSet().getLiveTimeline();

export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
  const timelineSet = room.getUnfilteredTimelineSet();
  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
};

export const getFirstLinkedTimeline = (
  timeline: EventTimeline,
  direction: Direction
): EventTimeline => {
  const linkedTm = timeline.getNeighbouringTimeline(direction);
  if (!linkedTm) return timeline;
  return getFirstLinkedTimeline(linkedTm, direction);
};

export const getLinkedTimelines = (timeline: EventTimeline): EventTimeline[] => {
  const firstTimeline = getFirstLinkedTimeline(timeline, Direction.Backward);
  const timelines: EventTimeline[] = [];

  for (
    let nextTimeline: EventTimeline | null = firstTimeline;
    nextTimeline;
    nextTimeline = nextTimeline.getNeighbouringTimeline(Direction.Forward)
  ) {
    timelines.push(nextTimeline);
  }
  return timelines;
};

export const timelineToEventsCount = (t: EventTimeline) => t.getEvents().length;
export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => {
  const timelineEventCountReducer = (count: number, tm: EventTimeline) =>
    count + timelineToEventsCount(tm);
  return timelines.reduce(timelineEventCountReducer, 0);
};

export const getTimelineAndBaseIndex = (
  timelines: EventTimeline[],
  index: number
): [EventTimeline | undefined, number] => {
  let uptoTimelineLen = 0;
  const timeline = timelines.find((t) => {
    uptoTimelineLen += t.getEvents().length;
    if (index < uptoTimelineLen) return true;
    return false;
  });
  if (!timeline) return [undefined, 0];
  return [timeline, uptoTimelineLen - timeline.getEvents().length];
};

export const getTimelineRelativeIndex = (absoluteIndex: number, timelineBaseIndex: number) =>
  absoluteIndex - timelineBaseIndex;

export const getTimelineEvent = (timeline: EventTimeline, index: number): MatrixEvent | undefined =>
  timeline.getEvents()[index];

export const getEventIdAbsoluteIndex = (
  timelines: EventTimeline[],
  eventTimeline: EventTimeline,
  eventId: string
): number | undefined => {
  const timelineIndex = timelines.findIndex((t) => t === eventTimeline);
  if (timelineIndex === -1) return undefined;
  const eventIndex = eventTimeline.getEvents().findIndex((evt) => evt.getId() === eventId);
  if (eventIndex === -1) return undefined;
  const baseIndex = timelines
    .slice(0, timelineIndex)
    .reduce((accValue, timeline) => timeline.getEvents().length + accValue, 0);
  return baseIndex + eventIndex;
};

type RoomTimelineProps = {
  room: Room;
  eventId?: string;
  roomInputRef: RefObject<HTMLElement>;
  editor: Editor;
};

const PAGINATION_LIMIT = 80;

type Timeline = {
  linkedTimelines: EventTimeline[];
  range: ItemRange;
};

const useEventTimelineLoader = (
  mx: MatrixClient,
  room: Room,
  onLoad: (eventId: string, linkedTimelines: EventTimeline[], evtAbsIndex: number) => void,
  onError: (err: Error | null) => void
) => {
  const loadEventTimeline = useCallback(
    async (eventId: string) => {
      const [err, replyEvtTimeline] = await to(
        mx.getEventTimeline(room.getUnfilteredTimelineSet(), eventId)
      );
      if (!replyEvtTimeline) {
        onError(err ?? null);
        return;
      }
      const linkedTimelines = getLinkedTimelines(replyEvtTimeline);
      const absIndex = getEventIdAbsoluteIndex(linkedTimelines, replyEvtTimeline, eventId);

      if (absIndex === undefined) {
        onError(err ?? null);
        return;
      }

      onLoad(eventId, linkedTimelines, absIndex);
    },
    [mx, room, onLoad, onError]
  );

  return loadEventTimeline;
};

const useTimelinePagination = (
  mx: MatrixClient,
  timeline: Timeline,
  setTimeline: Dispatch<SetStateAction<Timeline>>,
  limit: number
) => {
  const timelineRef = useRef(timeline);
  timelineRef.current = timeline;
  const alive = useAlive();

  const handleTimelinePagination = useMemo(() => {
    let fetching = false;

    const recalibratePagination = (
      linkedTimelines: EventTimeline[],
      timelinesEventsCount: number[],
      backwards: boolean
    ) => {
      const topTimeline = linkedTimelines[0];
      const timelineMatch = (mt: EventTimeline) => (t: EventTimeline) => t === mt;

      const newLTimelines = getLinkedTimelines(topTimeline);
      const topTmIndex = newLTimelines.findIndex(timelineMatch(topTimeline));
      const topAddedTm = topTmIndex === -1 ? [] : newLTimelines.slice(0, topTmIndex);

      const topTmAddedEvt =
        timelineToEventsCount(newLTimelines[topTmIndex]) - timelinesEventsCount[0];
      const offsetRange = getTimelinesEventsCount(topAddedTm) + (backwards ? topTmAddedEvt : 0);

      setTimeline((currentTimeline) => ({
        linkedTimelines: newLTimelines,
        range:
          offsetRange > 0
            ? {
                start: currentTimeline.range.start + offsetRange,
                end: currentTimeline.range.end + offsetRange,
              }
            : { ...currentTimeline.range },
      }));
    };

    return async (backwards: boolean) => {
      if (fetching) return;
      const { linkedTimelines: lTimelines } = timelineRef.current;
      const timelinesEventsCount = lTimelines.map(timelineToEventsCount);

      const timelineToPaginate = backwards ? lTimelines[0] : lTimelines[lTimelines.length - 1];
      if (!timelineToPaginate) return;

      const paginationToken = timelineToPaginate.getPaginationToken(
        backwards ? Direction.Backward : Direction.Forward
      );
      if (
        !paginationToken &&
        getTimelinesEventsCount(lTimelines) !==
          getTimelinesEventsCount(getLinkedTimelines(timelineToPaginate))
      ) {
        recalibratePagination(lTimelines, timelinesEventsCount, backwards);
        return;
      }

      fetching = true;
      const [err] = await to(
        mx.paginateEventTimeline(timelineToPaginate, {
          backwards,
          limit,
        })
      );
      if (err) {
        // TODO: handle pagination error.
        return;
      }
      const fetchedTimeline =
        timelineToPaginate.getNeighbouringTimeline(
          backwards ? Direction.Backward : Direction.Forward
        ) ?? timelineToPaginate;
      // Decrypt all event ahead of render cycle
      const roomId = fetchedTimeline.getRoomId();
      const room = roomId ? mx.getRoom(roomId) : null;

      if (room?.hasEncryptionStateEvent()) {
        await to(decryptAllTimelineEvent(mx, fetchedTimeline));
      }

      fetching = false;
      if (alive()) {
        recalibratePagination(lTimelines, timelinesEventsCount, backwards);
      }
    };
  }, [mx, alive, setTimeline, limit]);
  return handleTimelinePagination;
};

const useLiveEventArrive = (room: Room, onArrive: (mEvent: MatrixEvent) => void) => {
  useEffect(() => {
    const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = (
      mEvent,
      eventRoom,
      toStartOfTimeline,
      removed,
      data
    ) => {
      if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
      onArrive(mEvent);
    };
    const handleRedaction: RoomEventHandlerMap[RoomEvent.Redaction] = (mEvent, eventRoom) => {
      if (eventRoom?.roomId !== room.roomId) return;
      onArrive(mEvent);
    };

    room.on(RoomEvent.Timeline, handleTimelineEvent);
    room.on(RoomEvent.Redaction, handleRedaction);
    return () => {
      room.removeListener(RoomEvent.Timeline, handleTimelineEvent);
      room.removeListener(RoomEvent.Redaction, handleRedaction);
    };
  }, [room, onArrive]);
};

const useLiveTimelineRefresh = (room: Room, onRefresh: () => void) => {
  useEffect(() => {
    const handleTimelineRefresh: RoomEventHandlerMap[RoomEvent.TimelineRefresh] = (r) => {
      if (r.roomId !== room.roomId) return;
      onRefresh();
    };

    room.on(RoomEvent.TimelineRefresh, handleTimelineRefresh);
    return () => {
      room.removeListener(RoomEvent.TimelineRefresh, handleTimelineRefresh);
    };
  }, [room, onRefresh]);
};

const getInitialTimeline = (room: Room) => {
  const linkedTimelines = getLinkedTimelines(getLiveTimeline(room));
  const evLength = getTimelinesEventsCount(linkedTimelines);
  return {
    linkedTimelines,
    range: {
      start: Math.max(evLength - PAGINATION_LIMIT, 0),
      end: evLength,
    },
  };
};

const getEmptyTimeline = () => ({
  range: { start: 0, end: 0 },
  linkedTimelines: [],
});

const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
  const readUptoEventId = room.getEventReadUpTo(room.client.getUserId() ?? '');
  if (!readUptoEventId) return undefined;
  const evtTimeline = getEventTimeline(room, readUptoEventId);
  const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
  return {
    readUptoEventId,
    inLiveTimeline: latestTimeline === room.getLiveTimeline(),
    scrollTo,
  };
};

// Channels-mode visibility filter. Single source of truth for the
// /channels/* surface — called from BOTH the rail-endpoint scan
// (`isRenderableTimelineEvent`) AND the renderer null-gate so the two never
// disagree on which events count as visible.
//
// Thread-relation hiding delegates to SDK's `room.eventShouldLiveIn`
// (matrix-js-sdk room.ts:891) — same predicate Element-web uses in
// `MessagePanel.filterEventsThatShouldLiveInThisTimeline`. Canonical
// because: (a) handles thread-root visible-in-both-timelines correctly;
// (b) handles orphan thread relations whose root never landed; (c)
// classifies redactions via target's thread; (d) classifies pending
// local-echoes the same way the SDK does — kills the «message flashes
// in main timeline before drawer» blink that hand-rolled relType check
// missed because the SDK adds the thread relation to the local-echo
// content asynchronously vs the predicate's `getRelation()` read.
//
// Bridged-room exception: SDK still partitions thread events into the
// thread, but on bridged rooms (Telegram puppets etc.) we want the
// thread events visible in main timeline because the bridge has no
// thread surface. Override returns false (don't hide).
//
// Service events (call.*, rtc.*, poll.*) stay hand-filtered — these
// are not thread-related and the SDK predicate has no opinion on them.
const isChannelsModeHidden = (room: Room, event: MatrixEvent, isBridged: boolean): boolean => {
  const partition = room.eventShouldLiveIn(event);
  if (!partition.shouldLiveInRoom) {
    if (isBridged) return false;
    return true;
  }
  const eventType = event.getType();
  if (eventType.startsWith('m.call.')) return true;
  if (eventType === 'm.rtc.notification') return true;
  if (eventType === 'm.rtc.member') return true;
  if (eventType === 'org.matrix.msc4143.rtc.member') return true;
  if (eventType === 'm.poll.start') return true;
  if (eventType === 'm.poll.response') return true;
  if (eventType === 'm.poll.end') return true;
  if (eventType === 'org.matrix.msc3381.poll.start') return true;
  if (eventType === 'org.matrix.msc3381.poll.response') return true;
  if (eventType === 'org.matrix.msc3381.poll.end') return true;
  // m.reference relations (e.g. polls' votes) — partition reports
  // shouldLiveInRoom: true for these but we never render them in the
  // channel center column. SDK has no special predicate; explicit drop.
  if (event.getRelation()?.rel_type === 'm.reference') return true;
  return false;
};

export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  // After P3c every room renders Stream. The DM-vs-group split that drove the
  // membership-sysline gate flips to a 1:1 vs N>2 check via `useIsOneOnOne`,
  // not the persisted `m.direct` flag — see plan §6.8.
  const isOneOnOne = useIsOneOnOne();
  const channelsMode = useChannelsMode();
  // bridged-room check is cheap and stable for a route lifetime; recompute on
  // each render is fine — `isBridgedRoom` walks the room state-event index,
  // not the timeline.
  const isBridged = channelsMode && isBridgedRoom(room);
  // M2: «Reply in Thread» affordance is channels-mode-only. Bridged
  // channels (Telegram puppets) get nothing because the bridge has no
  // thread semantic — clicking would create a draft the bridge drops
  // on send. Outside channels (DM/Bots/legacy /<space>/) the surface
  // has no drawer and no thread UI per plan §6.7, so the button has
  // nowhere to lead. Pre-M2 the button existed in those surfaces but
  // never produced a visible thread.
  const hideThreadReplyAffordance = !channelsMode || isBridged;
  // M3a: thread summary pill rides a tighter gate — non-bridged channels
  // are the only surface where threads are first-class. The card itself
  // returns null when the root has no replies, so mounting on every
  // visible row in channels-mode is safe (`useVirtualPaginator` keeps
  // the rendered window bounded; SDK Room maxListeners is 100).
  const showThreadSummary = channelsMode && !isBridged;
  // M3: channels timeline uses avatar-first ChannelLayout (no rail, no
  // bubble). DM/Bots stay on Stream rail. Bridged Telegram channels use
  // Channel layout too — visually consistent with native channels — only
  // the thread plus / cards differ (bridge has no thread semantic).
  const messageLayout: 'stream' | 'channel' = channelsMode ? 'channel' : 'stream';
  // M2: when the thread drawer is open, the channel composer is
  // unmounted by RoomView (single-Slate-at-a-time pattern). Clicking
  // the channel timeline's «Reply» menu would write a reply chip into
  // an atom no surface reads, then fire `ReactEditor.focus(editor)`
  // on a Slate editor that's no longer mounted (silent no-op) — dead
  // click from the user's perspective. Hide the regular Reply
  // affordance in this state. ThreadPlus stays gated separately by
  // `hideThreadReplyAffordance` and remains active for re-opening the
  // drawer to a different thread root.
  const threadDrawerOpen = useThreadDrawerOpen();
  const hideMainReplyAffordance = threadDrawerOpen;
  // Captured for the channels-mode «Reply in Thread» branch inside
  // useMessageInteractionHandlers — re-encoded via generatePath so
  // passing the raw (already URL-encoded) values from useParams is fine.
  const { spaceIdOrAlias, roomIdOrAlias } = useParams();
  const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
  const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
  const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');

  const ignoredUsersList = useIgnoredUsers();
  const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);

  // Reply-draft setter targets the MAIN composer of this room (channel
  // / DM / legacy timeline). Drawer composer manages its own per-thread
  // reply draft via DraftKey([roomId, rootId]) inside RoomInput.
  const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(draftKey(room.roomId)));
  const powerLevels = usePowerLevelsContext();
  const creators = useRoomCreators(room);

  const creatorsTag = useRoomCreatorsTag();
  const powerLevelTags = usePowerLevelTags(room, powerLevels);
  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);

  const theme = useTheme();
  const accessiblePowerTagColors = useAccessiblePowerTagColors(
    theme.kind,
    creatorsTag,
    powerLevelTags
  );

  const permissions = useRoomPermissions(creators, powerLevels);

  const canRedact = permissions.action('redact', mx.getSafeUserId());
  const canDeleteOwn = permissions.event(MessageEvent.RoomRedaction, mx.getSafeUserId());
  const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());

  const roomToParents = useAtomValue(roomToParentsAtom);
  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
  const { navigateRoom } = useRoomNavigate();
  const mentionClickHandler = useMentionClickHandler(room.roomId);
  const spoilerClickHandler = useSpoilerClickHandler();

  const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);

  const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
  const readUptoEventIdRef = useRef<string>();
  if (unreadInfo) {
    readUptoEventIdRef.current = unreadInfo.readUptoEventId;
  }

  const atBottomAnchorRef = useRef<HTMLElement>(null);
  const [atBottom, setAtBottom] = useState<boolean>(true);
  const atBottomRef = useRef(atBottom);
  atBottomRef.current = atBottom;

  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollToBottomRef = useRef({
    count: 0,
    smooth: true,
  });

  const [focusItem, setFocusItem] = useState<
    | {
        index: number;
        scrollTo: boolean;
        highlight: boolean;
      }
    | undefined
  >();
  const alive = useAlive();

  const linkifyOpts = useMemo<LinkifyOpts>(
    () => ({
      ...LINKIFY_OPTS,
      render: factoryRenderLinkifyWithMention((href) =>
        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
      ),
    }),
    [mx, room, mentionClickHandler]
  );
  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
    () =>
      getReactCustomHtmlParser(mx, room.roomId, {
        linkifyOpts,
        useAuthentication,
        handleSpoilerClick: spoilerClickHandler,
        handleMentionClick: mentionClickHandler,
      }),
    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication]
  );
  const parseMemberEvent = useMemberEventParser();

  const [timeline, setTimeline] = useState<Timeline>(() =>
    eventId ? getEmptyTimeline() : getInitialTimeline(room)
  );
  const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
  const liveTimelineLinked =
    timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
  const canPaginateBack =
    typeof timeline.linkedTimelines[0]?.getPaginationToken(Direction.Backward) === 'string';
  const rangeAtStart = timeline.range.start === 0;
  const rangeAtEnd = timeline.range.end === eventsLength;
  const atLiveEndRef = useRef(liveTimelineLinked && rangeAtEnd);
  atLiveEndRef.current = liveTimelineLinked && rangeAtEnd;

  const handleTimelinePagination = useTimelinePagination(
    mx,
    timeline,
    setTimeline,
    PAGINATION_LIMIT
  );

  const getScrollElement = useCallback(() => scrollRef.current, []);

  const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
    useVirtualPaginator({
      count: eventsLength,
      limit: PAGINATION_LIMIT,
      range: timeline.range,
      onRangeChange: useCallback((r) => setTimeline((cs) => ({ ...cs, range: r })), []),
      getScrollElement,
      getItemElement: useCallback(
        (index: number) =>
          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
          undefined,
        []
      ),
      onEnd: handleTimelinePagination,
    });

  const loadEventTimeline = useEventTimelineLoader(
    mx,
    room,
    useCallback(
      (evtId, lTimelines, evtAbsIndex) => {
        if (!alive()) return;
        const evLength = getTimelinesEventsCount(lTimelines);

        setFocusItem({
          index: evtAbsIndex,
          scrollTo: true,
          highlight: evtId !== readUptoEventIdRef.current,
        });
        setTimeline({
          linkedTimelines: lTimelines,
          range: {
            start: Math.max(evtAbsIndex - PAGINATION_LIMIT, 0),
            end: Math.min(evtAbsIndex + PAGINATION_LIMIT, evLength),
          },
        });
      },
      [alive]
    ),
    useCallback(() => {
      if (!alive()) return;
      setTimeline(getInitialTimeline(room));
      scrollToBottomRef.current.count += 1;
      scrollToBottomRef.current.smooth = false;
    }, [alive, room])
  );

  // M2 channels-mode: hidden events (thread replies, RTC, polls, etc.)
  // are appended to the SDK timelineSet and bump `getTimelinesEventsCount`,
  // but the live handler early-returns without mutating state. The
  // virtual `range` is indexed against the FULL SDK event-pool (see
  // `getInitialTimeline` — `range.end = evLength`), so a +1 advance on
  // the next visible event would lag behind by N hidden events and
  // miss the visible one in the rendered window. Track skipped count
  // here; the next visible event consumes `skipped + 1` as its delta.
  const skippedHiddenLiveEventsRef = useRef(0);
  // Counter is meaningful only against the CURRENT linkedTimelines —
  // after a full rebase (loadEventTimeline / refresh / jump-to-latest /
  // jump-to-unread), range is recomputed against the fresh evLength,
  // so any pre-rebase skipped count would over-shoot range on the next
  // visible event. Track `linkedTimelines` reference identity (replaced
  // on every rebase) and zero the counter alongside.
  useEffect(() => {
    skippedHiddenLiveEventsRef.current = 0;
  }, [timeline.linkedTimelines]);
  useLiveEventArrive(
    room,
    useCallback(
      (mEvt: MatrixEvent) => {
        // Hidden events: skip render-state mutation (no blink), but
        // record the count so the next visible event can advance the
        // range by the correct delta.
        if (channelsMode && isChannelsModeHidden(room, mEvt, isBridged)) {
          skippedHiddenLiveEventsRef.current += 1;
          return;
        }

        // Visible event arrival — snapshot + reset the skipped counter.
        // `liveDelta` covers all SDK-appended events since the last
        // visible one (skipped hidden + this one) so the virtual range
        // stays aligned with `getTimelinesEventsCount(linkedTimelines)`.
        const liveDelta = skippedHiddenLiveEventsRef.current + 1;
        skippedHiddenLiveEventsRef.current = 0;

        // «Sending while scrolled up jumps the timeline to live» — Telegram /
        // WhatsApp / Slack pattern. After P3c every room renders Stream, so
        // the own-message follow-to-bottom guard is universal.
        const isOwnLiveStreamMessage =
          mEvt.getSender() === mx.getUserId() &&
          !reactionOrEditEvent(mEvt) &&
          (mEvt.getType() === MessageEvent.RoomMessage ||
            mEvt.getType() === MessageEvent.RoomMessageEncrypted ||
            mEvt.getType() === MessageEvent.Sticker);

        // if user is at bottom of timeline
        // keep paginating timeline and conditionally mark as read
        // otherwise we update timeline without paginating
        // so timeline can be updated with evt like: edits, reactions etc
        if (atBottomRef.current || isOwnLiveStreamMessage) {
          if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
            // Check if the document is in focus (user is actively viewing the app),
            // and either there are no unread messages or the latest message is from the current user.
            // If either condition is met, trigger the markAsRead function to send a read receipt.
            requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!, hideActivity));
          }

          if (!document.hasFocus() && !unreadInfo) {
            setUnreadInfo(getRoomUnreadInfo(room));
          }

          scrollToBottomRef.current.count += 1;
          // Always instant — never smooth on incoming. Smooth animation
          // briefly takes the at-bottom anchor out of the
          // IntersectionObserver's intersection box during the
          // animation frame, which the 1s debounce sometimes turns
          // into a false-positive «user scrolled away» → atBottom flips
          // false → next message stops auto-following. Direct snap
          // matches Discord / Telegram and the drawer (M4 fix in
          // ThreadDrawer.tsx) — predictable, no animation surface for
          // the observer to misinterpret.
          scrollToBottomRef.current.smooth = false;
          if (isOwnLiveStreamMessage) {
            setAtBottom(true);
            if (!atLiveEndRef.current) {
              // Sending while viewing an older event intentionally jumps the DM back
              // to live; clear stale deep-link focus before replacing the timeline.
              setFocusItem(undefined);
            }
          }

          setTimeline((ct) => {
            if (!atLiveEndRef.current && isOwnLiveStreamMessage) {
              return getInitialTimeline(room);
            }
            return {
              ...ct,
              range: {
                start: ct.range.start + liveDelta,
                end: ct.range.end + liveDelta,
              },
            };
          });
          return;
        }
        setTimeline((ct) => ({ ...ct }));
        if (!unreadInfo) {
          setUnreadInfo(getRoomUnreadInfo(room));
        }
      },
      [mx, room, unreadInfo, hideActivity, channelsMode, isBridged]
    )
  );

  const handleOpenEvent = useCallback(
    async (
      evtId: string,
      highlight = true,
      onScroll: ((scrolled: boolean) => void) | undefined = undefined
    ) => {
      const evtTimeline = getEventTimeline(room, evtId);
      const absoluteIndex =
        evtTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, evtTimeline, evtId);

      if (typeof absoluteIndex === 'number') {
        const scrolled = scrollToItem(absoluteIndex, {
          behavior: 'smooth',
          align: 'center',
          stopInView: true,
        });
        if (onScroll) onScroll(scrolled);
        setFocusItem({
          index: absoluteIndex,
          scrollTo: false,
          highlight,
        });
      } else {
        setTimeline(getEmptyTimeline());
        loadEventTimeline(evtId);
      }
    },
    [room, timeline, scrollToItem, loadEventTimeline]
  );

  const {
    editId,
    handleEdit,
    handleOpenReply,
    handleUserClick,
    handleUsernameClick,
    handleReplyClick,
    handleReactionToggle,
  } = useMessageInteractionHandlers({
    room,
    editor,
    composerSuspended: threadDrawerOpen,
    setReplyDraft,
    onOpenEvent: handleOpenEvent,
    channelsMode,
    isBridged,
    spaceIdOrAlias,
    roomIdOrAlias,
  });

  useLiveTimelineRefresh(
    room,
    useCallback(() => {
      if (liveTimelineLinked) {
        setTimeline(getInitialTimeline(room));
      }
    }, [room, liveTimelineLinked])
  );

  // Stay at bottom when room editor resize
  useResizeObserver(
    useMemo(() => {
      let mounted = false;
      return (entries) => {
        if (!mounted) {
          // skip initial mounting call
          mounted = true;
          return;
        }
        if (!roomInputRef.current) return;
        const editorBaseEntry = getResizeObserverEntry(roomInputRef.current, entries);
        const scrollElement = getScrollElement();
        if (!editorBaseEntry || !scrollElement) return;

        if (atBottomRef.current) {
          scrollToBottom(scrollElement);
        }
      };
    }, [getScrollElement, roomInputRef]),
    useCallback(() => roomInputRef.current, [roomInputRef])
  );

  // Stay at bottom when scroll container resizes (e.g. Android keyboard open/close)
  useResizeObserver(
    useMemo(() => {
      let mounted = false;
      return (_entries: ResizeObserverEntry[]) => {
        if (!mounted) {
          mounted = true;
          return;
        }
        if (atBottomRef.current) {
          requestAnimationFrame(() => {
            const el = getScrollElement();
            if (el) scrollToBottom(el);
          });
        }
      };
    }, [getScrollElement]),
    getScrollElement
  );

  const tryAutoMarkAsRead = useCallback(() => {
    const readUptoEventId = readUptoEventIdRef.current;
    if (!readUptoEventId) {
      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
      return;
    }
    const evtTimeline = getEventTimeline(room, readUptoEventId);
    const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
    if (latestTimeline === room.getLiveTimeline()) {
      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
    }
  }, [mx, room, hideActivity]);

  const debounceSetAtBottom = useDebounce(
    useCallback((entry: IntersectionObserverEntry) => {
      if (!entry.isIntersecting) setAtBottom(false);
    }, []),
    { wait: 1000 }
  );
  useIntersectionObserver(
    useCallback(
      (entries) => {
        const target = atBottomAnchorRef.current;
        if (!target) return;
        const targetEntry = getIntersectionObserverEntry(target, entries);
        if (targetEntry) debounceSetAtBottom(targetEntry);
        if (targetEntry?.isIntersecting && atLiveEndRef.current) {
          setAtBottom(true);
          if (document.hasFocus()) {
            tryAutoMarkAsRead();
          }
        }
      },
      [debounceSetAtBottom, tryAutoMarkAsRead]
    ),
    useCallback(
      () => ({
        root: getScrollElement(),
        // Forgiving threshold: 100px was too tight — single tall
        // message + minor touch-scroll inertia easily took users out
        // of «at-bottom» state, after which incoming events stopped
        // auto-following. 400px gives roughly two-three Stream rows
        // of slack before treating the scroll as a deliberate detach,
        // matching Discord / Slack auto-follow generosity.
        rootMargin: '400px',
      }),
      [getScrollElement]
    ),
    useCallback(() => atBottomAnchorRef.current, [])
  );

  useDocumentFocusChange(
    useCallback(
      (inFocus) => {
        if (inFocus && atBottomRef.current) {
          if (unreadInfo?.inLiveTimeline) {
            handleOpenEvent(unreadInfo.readUptoEventId, false, (scrolled) => {
              // the unread event is already in view
              // so, try mark as read;
              if (!scrolled) {
                tryAutoMarkAsRead();
              }
            });
            return;
          }
          tryAutoMarkAsRead();
        }
      },
      [tryAutoMarkAsRead, unreadInfo, handleOpenEvent]
    )
  );

  // Handle up arrow edit
  useKeyDown(
    window,
    useCallback(
      (evt) => {
        // Drawer-active: the focused `<Editable>` may be the drawer
        // composer (also tagged `data-editable-name="RoomInput"`), so
        // this selector alone can't distinguish main vs thread. Without
        // this guard, ArrowUp in an empty drawer composer would put the
        // CHANNEL timeline's latest event into edit mode — visible on
        // desktop, where main timeline stays mounted next to the drawer.
        if (threadDrawerOpen) return;
        if (
          isKeyHotkey('arrowup', evt) &&
          editableActiveElement() &&
          document.activeElement?.getAttribute('data-editable-name') === 'RoomInput' &&
          isEmptyEditor(editor)
        ) {
          const editableEvt = getLatestEditableEvt(room.getLiveTimeline(), (mEvt) =>
            canEditEvent(mx, mEvt)
          );
          const editableEvtId = editableEvt?.getId();
          if (!editableEvtId) return;
          handleEdit(editableEvtId);
          evt.preventDefault();
        }
      },
      [mx, room, editor, threadDrawerOpen, handleEdit]
    )
  );

  useEffect(() => {
    if (eventId) {
      setTimeline(getEmptyTimeline());
      loadEventTimeline(eventId);
    }
  }, [eventId, loadEventTimeline]);

  // Scroll to bottom on initial timeline load
  useLayoutEffect(() => {
    const scrollEl = scrollRef.current;
    if (scrollEl) {
      scrollToBottom(scrollEl);
    }
  }, []);

  // if live timeline is linked and unreadInfo change
  // Scroll to last read message
  useLayoutEffect(() => {
    const { readUptoEventId, inLiveTimeline, scrollTo } = unreadInfo ?? {};
    if (readUptoEventId && inLiveTimeline && scrollTo) {
      const linkedTimelines = getLinkedTimelines(getLiveTimeline(room));
      const evtTimeline = getEventTimeline(room, readUptoEventId);
      const absoluteIndex =
        evtTimeline && getEventIdAbsoluteIndex(linkedTimelines, evtTimeline, readUptoEventId);
      if (absoluteIndex) {
        scrollToItem(absoluteIndex, {
          behavior: 'instant',
          align: 'start',
          stopInView: true,
        });
      }
    }
  }, [room, unreadInfo, scrollToItem]);

  // scroll to focused message
  useLayoutEffect(() => {
    if (focusItem && focusItem.scrollTo) {
      scrollToItem(focusItem.index, {
        behavior: 'instant',
        align: 'center',
        stopInView: true,
      });
    }

    setTimeout(() => {
      if (!alive()) return;
      setFocusItem((currentItem) => {
        if (currentItem === focusItem) return undefined;
        return currentItem;
      });
    }, 2000);
  }, [alive, focusItem, scrollToItem]);

  // scroll to bottom of timeline
  const scrollToBottomCount = scrollToBottomRef.current.count;
  useLayoutEffect(() => {
    if (scrollToBottomCount > 0) {
      const scrollEl = scrollRef.current;
      if (scrollEl)
        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
    }
  }, [scrollToBottomCount]);

  // Remove unreadInfo on mark as read
  useEffect(() => {
    if (!unread) {
      setUnreadInfo(undefined);
    }
  }, [unread]);

  // scroll out of view msg editor in view.
  useEffect(() => {
    if (editId) {
      const editMsgElement =
        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
        undefined;
      if (editMsgElement) {
        scrollToElement(editMsgElement, {
          align: 'center',
          behavior: 'smooth',
          stopInView: true,
        });
      }
    }
  }, [scrollToElement, editId]);

  const handleJumpToLatest = () => {
    if (eventId) {
      navigateRoom(room.roomId, undefined, { replace: true });
    }
    setTimeline(getInitialTimeline(room));
    scrollToBottomRef.current.count += 1;
    scrollToBottomRef.current.smooth = false;
  };

  const handleJumpToUnread = () => {
    if (unreadInfo?.readUptoEventId) {
      setTimeline(getEmptyTimeline());
      loadEventTimeline(unreadInfo.readUptoEventId);
    }
  };

  const handleMarkAsRead = () => {
    markAsRead(mx, room.roomId, hideActivity);
  };

  const { t } = useTranslation();

  const renderMatrixEvent = useMatrixEventRenderer<
    [string, MatrixEvent, number, EventTimelineSet, boolean, boolean, boolean]
  >(
    {
      // Suppress DM-call service events from the timeline. In encrypted
      // DMs this takes effect after per-event decryption re-render via
      // EncryptedContent; the first render shows the "not decrypted" placeholder.
      // Hardcoded strings — migrate to EventType.RTCNotification/RTCDecline
      // when MSC4075/MSC4310 stabilize.
      'org.matrix.msc4075.rtc.notification': () => null,
      'org.matrix.msc4310.rtc.decline': () => null,
      [MessageEvent.RoomMessage]: (
        mEventId,
        mEvent,
        item,
        timelineSet,
        collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const reactionRelations = getEventReactions(timelineSet, mEventId);
        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
        const hasReactions = reactions && reactions.length > 0;
        const { replyEventId, threadRootId } = mEvent;
        const highlighted = focusItem?.index === item && focusItem.highlight;

        const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
        const getContent = (() =>
          editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;

        const senderId = mEvent.getSender() ?? '';
        const senderDisplayName =
          getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;

        return (
          <Message
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            collapse={collapse}
            highlight={highlighted}
            edit={editId === mEventId}
            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
            canSendReaction={canSendReaction}
            canPinEvent={canPinEvent}
            imagePackRooms={imagePackRooms}
            relations={hasReactions ? reactionRelations : undefined}
            onUserClick={handleUserClick}
            onUsernameClick={handleUsernameClick}
            onReplyClick={handleReplyClick}
            onReactionToggle={handleReactionToggle}
            onEditId={handleEdit}
            reply={
              replyEventId && (
                <Reply
                  room={room}
                  timelineSet={timelineSet}
                  replyEventId={replyEventId}
                  threadRootId={threadRootId}
                  onClick={handleOpenReply}
                  getMemberPowerTag={getMemberPowerTag}
                  accessibleTagColors={accessiblePowerTagColors}
                  legacyUsernameColor={isOneOnOne}
                />
              )
            }
            reactions={
              reactionRelations && (
                <Reactions
                  style={{ marginTop: config.space.S200 }}
                  room={room}
                  relations={reactionRelations}
                  mEventId={mEventId}
                  canSendReaction={canSendReaction}
                  onReactionToggle={handleReactionToggle}
                />
              )
            }
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
            memberPowerTag={getMemberPowerTag(senderId)}
            accessibleTagColors={accessiblePowerTagColors}
            legacyUsernameColor={isOneOnOne}
            streamRailStart={streamRailStart}
            streamRailEnd={streamRailEnd}
            msgType={mEvent.getContent().msgtype ?? ''}
            hideThreadReplyAffordance={hideThreadReplyAffordance}
            hideMainReplyAffordance={hideMainReplyAffordance}
            threadSummary={
              showThreadSummary ? (
                <ThreadSummaryCard room={room} rootEvent={mEvent} />
              ) : undefined
            }
            layout={messageLayout}
          >
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
              <RenderMessageContent
                displayName={senderDisplayName}
                msgType={mEvent.getContent().msgtype ?? ''}
                ts={mEvent.getTs()}
                edited={!!editedEvent}
                getContent={getContent}
                mediaAutoLoad={mediaAutoLoad}
                urlPreview={showUrlPreview}
                htmlReactParserOptions={htmlReactParserOptions}
                linkifyOpts={linkifyOpts}
                outlineAttachment
              />
            )}
          </Message>
        );
      },
      [MessageEvent.RoomMessageEncrypted]: (
        mEventId,
        mEvent,
        item,
        timelineSet,
        collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const reactionRelations = getEventReactions(timelineSet, mEventId);
        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
        const hasReactions = reactions && reactions.length > 0;
        const { replyEventId, threadRootId } = mEvent;
        const highlighted = focusItem?.index === item && focusItem.highlight;

        return (
          <EncryptedContent mEvent={mEvent}>
            {() => {
              // After decrypt, DM-call service events still route through
              // this branch (outer typeToRenderer dispatched on the pre-decrypt
              // 'm.room.encrypted' type). Drop the whole row instead of falling
              // through to MessageUnsupportedContent. Keys mirror the hardcoded
              // literals in the outer filter — migrate together.
              const decryptedType = mEvent.getType();
              if (decryptedType === 'org.matrix.msc4075.rtc.notification') return null;
              if (decryptedType === 'org.matrix.msc4310.rtc.decline') return null;

              return (
                <Message
                  key={mEvent.getId()}
                  data-message-item={item}
                  data-message-id={mEventId}
                  room={room}
                  mEvent={mEvent}
                  collapse={collapse}
                  highlight={highlighted}
                  edit={editId === mEventId}
                  canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
                  canSendReaction={canSendReaction}
                  canPinEvent={canPinEvent}
                  imagePackRooms={imagePackRooms}
                  relations={hasReactions ? reactionRelations : undefined}
                  onUserClick={handleUserClick}
                  onUsernameClick={handleUsernameClick}
                  onReplyClick={handleReplyClick}
                  onReactionToggle={handleReactionToggle}
                  onEditId={handleEdit}
                  reply={
                    replyEventId && (
                      <Reply
                        room={room}
                        timelineSet={timelineSet}
                        replyEventId={replyEventId}
                        threadRootId={threadRootId}
                        onClick={handleOpenReply}
                        getMemberPowerTag={getMemberPowerTag}
                        accessibleTagColors={accessiblePowerTagColors}
                        legacyUsernameColor={isOneOnOne}
                      />
                    )
                  }
                  reactions={
                    reactionRelations && (
                      <Reactions
                        style={{ marginTop: config.space.S200 }}
                        room={room}
                        relations={reactionRelations}
                        mEventId={mEventId}
                        canSendReaction={canSendReaction}
                        onReactionToggle={handleReactionToggle}
                      />
                    )
                  }
                  hideReadReceipts={hideActivity}
                  showDeveloperTools={showDeveloperTools}
                  memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
                  accessibleTagColors={accessiblePowerTagColors}
                  legacyUsernameColor={isOneOnOne}
                  streamRailStart={streamRailStart}
                  streamRailEnd={streamRailEnd}
                  msgType={mEvent.getContent().msgtype ?? ''}
                  hideThreadReplyAffordance={hideThreadReplyAffordance}
                  hideMainReplyAffordance={hideMainReplyAffordance}
                  threadSummary={
                    showThreadSummary ? (
                      <ThreadSummaryCard room={room} rootEvent={mEvent} />
                    ) : undefined
                  }
                  layout={messageLayout}
                >
                  {(() => {
                    if (mEvent.isRedacted()) return <RedactedContent />;
                    if (decryptedType === MessageEvent.Sticker)
                      return (
                        <MSticker
                          content={mEvent.getContent()}
                          renderImageContent={(props) => (
                            <ImageContent
                              {...props}
                              autoPlay={mediaAutoLoad}
                              renderImage={(p) => <Image {...p} loading="lazy" />}
                              renderViewer={(p) => <ImageViewer {...p} />}
                            />
                          )}
                        />
                      );
                    if (decryptedType === MessageEvent.RoomMessage) {
                      const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
                      const getContent = (() =>
                        editedEvent?.getContent()['m.new_content'] ??
                        mEvent.getContent()) as GetContentCallback;

                      const senderId = mEvent.getSender() ?? '';
                      const senderDisplayName =
                        getMemberDisplayName(room, senderId) ??
                        getMxIdLocalPart(senderId) ??
                        senderId;
                      return (
                        <RenderMessageContent
                          displayName={senderDisplayName}
                          msgType={mEvent.getContent().msgtype ?? ''}
                          ts={mEvent.getTs()}
                          edited={!!editedEvent}
                          getContent={getContent}
                          mediaAutoLoad={mediaAutoLoad}
                          urlPreview={showUrlPreview}
                          htmlReactParserOptions={htmlReactParserOptions}
                          linkifyOpts={linkifyOpts}
                          outlineAttachment
                        />
                      );
                    }
                    if (decryptedType === MessageEvent.RoomMessageEncrypted)
                      return (
                        <Text>
                          <MessageNotDecryptedContent />
                        </Text>
                      );
                    return (
                      <Text>
                        <MessageUnsupportedContent />
                      </Text>
                    );
                  })()}
                </Message>
              );
            }}
          </EncryptedContent>
        );
      },
      [MessageEvent.Sticker]: (
        mEventId,
        mEvent,
        item,
        timelineSet,
        collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const reactionRelations = getEventReactions(timelineSet, mEventId);
        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
        const hasReactions = reactions && reactions.length > 0;
        const highlighted = focusItem?.index === item && focusItem.highlight;

        return (
          <Message
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            collapse={collapse}
            highlight={highlighted}
            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
            canSendReaction={canSendReaction}
            canPinEvent={canPinEvent}
            imagePackRooms={imagePackRooms}
            relations={hasReactions ? reactionRelations : undefined}
            onUserClick={handleUserClick}
            onUsernameClick={handleUsernameClick}
            onReplyClick={handleReplyClick}
            onReactionToggle={handleReactionToggle}
            reactions={
              reactionRelations && (
                <Reactions
                  style={{ marginTop: config.space.S200 }}
                  room={room}
                  relations={reactionRelations}
                  mEventId={mEventId}
                  canSendReaction={canSendReaction}
                  onReactionToggle={handleReactionToggle}
                />
              )
            }
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
            accessibleTagColors={accessiblePowerTagColors}
            legacyUsernameColor={isOneOnOne}
            streamRailStart={streamRailStart}
            streamRailEnd={streamRailEnd}
            hideThreadReplyAffordance={hideThreadReplyAffordance}
            hideMainReplyAffordance={hideMainReplyAffordance}
            threadSummary={
              showThreadSummary ? (
                <ThreadSummaryCard room={room} rootEvent={mEvent} />
              ) : undefined
            }
            layout={messageLayout}
          >
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
              <MSticker
                content={mEvent.getContent()}
                renderImageContent={(props) => (
                  <ImageContent
                    {...props}
                    autoPlay={mediaAutoLoad}
                    renderImage={(p) => <Image {...p} loading="lazy" />}
                    renderViewer={(p) => <ImageViewer {...p} />}
                  />
                )}
              />
            )}
          </Message>
        );
      },
      [StateEvent.RoomMember]: (
        mEventId,
        mEvent,
        item,
        _timelineSet,
        _collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        // 1:1 rooms always hide membership/nick/avatar syslines — they are
        // pure noise in DMs. Group rooms (3+) respect the per-user settings.
        if (isOneOnOne) return null;
        const membershipChanged = isMembershipChanged(mEvent);
        if (membershipChanged && hideMembershipEvents) return null;
        if (!membershipChanged && hideNickAvatarEvents) return null;

        const highlighted = focusItem?.index === item && focusItem.highlight;
        const parsed = parseMemberEvent(mEvent);
        const iconSrc =
          parsed.icon === Icons.ArrowGoRightPlus ? Icons.ArrowGoRight : parsed.icon;

        const timeJSX = (
          <Time
            ts={mEvent.getTs()}
            compact
          />
        );

        return (
          <Event
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            highlight={highlighted}
            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
          >
            <EventContent
              time={timeJSX}
              railStart={streamRailStart}
              railEnd={streamRailEnd}
              layout={messageLayout}
              iconSrc={iconSrc}
              content={
                <Box grow="Yes" direction="Column">
                  <Text size="T300" priority="300">
                    {parsed.body}
                  </Text>
                </Box>
              }
            />
          </Event>
        );
      },
      [StateEvent.RoomName]: (
        mEventId,
        mEvent,
        item,
        _timelineSet,
        _collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const highlighted = focusItem?.index === item && focusItem.highlight;
        const senderId = mEvent.getSender() ?? '';
        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

        const timeJSX = (
          <Time
            ts={mEvent.getTs()}
            compact
          />
        );

        return (
          <Event
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            highlight={highlighted}
            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
          >
            <EventContent
              time={timeJSX}
              railStart={streamRailStart}
              railEnd={streamRailEnd}
              layout={messageLayout}
              iconSrc={Icons.Hash}
              content={
                <Box grow="Yes" direction="Column">
                  <Text size="T300" priority="300">
                    <b>{senderName}</b>
                    {t('Organisms.RoomCommon.changed_room_name')}
                  </Text>
                </Box>
              }
            />
          </Event>
        );
      },
      [StateEvent.RoomTopic]: (
        mEventId,
        mEvent,
        item,
        _timelineSet,
        _collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const highlighted = focusItem?.index === item && focusItem.highlight;
        const senderId = mEvent.getSender() ?? '';
        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

        const timeJSX = (
          <Time
            ts={mEvent.getTs()}
            compact
          />
        );

        return (
          <Event
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            highlight={highlighted}
            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
          >
            <EventContent
              time={timeJSX}
              railStart={streamRailStart}
              railEnd={streamRailEnd}
              layout={messageLayout}
              iconSrc={Icons.Hash}
              content={
                <Box grow="Yes" direction="Column">
                  <Text size="T300" priority="300">
                    <b>{senderName}</b>
                    {' changed room topic'}
                  </Text>
                </Box>
              }
            />
          </Event>
        );
      },
      [StateEvent.RoomAvatar]: (
        mEventId,
        mEvent,
        item,
        _timelineSet,
        _collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const highlighted = focusItem?.index === item && focusItem.highlight;
        const senderId = mEvent.getSender() ?? '';
        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

        const timeJSX = (
          <Time
            ts={mEvent.getTs()}
            compact
          />
        );

        return (
          <Event
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            highlight={highlighted}
            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
          >
            <EventContent
              time={timeJSX}
              railStart={streamRailStart}
              railEnd={streamRailEnd}
              layout={messageLayout}
              iconSrc={Icons.Hash}
              content={
                <Box grow="Yes" direction="Column">
                  <Text size="T300" priority="300">
                    <b>{senderName}</b>
                    {' changed room avatar'}
                  </Text>
                </Box>
              }
            />
          </Event>
        );
      },
      [StateEvent.GroupCallMemberPrefix]: (
        mEventId,
        mEvent,
        item,
        _timelineSet,
        _collapse,
        streamRailStart,
        streamRailEnd
      ) => {
        const highlighted = focusItem?.index === item && focusItem.highlight;
        const senderId = mEvent.getSender() ?? '';
        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

        const content = mEvent.getContent<SessionMembershipData>();
        const prevContent = mEvent.getPrevContent();

        const callJoined = content.application;
        if (callJoined && 'application' in prevContent) {
          return null;
        }

        const timeJSX = (
          <Time
            ts={mEvent.getTs()}
            compact
          />
        );

        return (
          <Event
            key={mEvent.getId()}
            data-message-item={item}
            data-message-id={mEventId}
            room={room}
            mEvent={mEvent}
            highlight={highlighted}
            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
            hideReadReceipts={hideActivity}
            showDeveloperTools={showDeveloperTools}
          >
            <EventContent
              time={timeJSX}
              railStart={streamRailStart}
              railEnd={streamRailEnd}
              layout={messageLayout}
              iconSrc={callJoined ? Icons.Phone : Icons.PhoneDown}
              content={
                <Box grow="Yes" direction="Column">
                  <Text size="T300" priority="300">
                    <Trans
                      i18nKey={callJoined ? 'Room.member_joined_call' : 'Room.member_ended_call'}
                      values={{ user: senderName }}
                      components={{ bold: <b /> }}
                    />
                  </Text>
                </Box>
              }
            />
          </Event>
        );
      },
    },
    (mEventId, mEvent, item, _timelineSet, _collapse, streamRailStart, streamRailEnd) => {
      if (!showHiddenEvents) return null;
      const highlighted = focusItem?.index === item && focusItem.highlight;
      const senderId = mEvent.getSender() ?? '';
      const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

      const timeJSX = (
        <Time
          ts={mEvent.getTs()}
          compact
        />
      );

      return (
        <Event
          key={mEvent.getId()}
          data-message-item={item}
          data-message-id={mEventId}
          room={room}
          mEvent={mEvent}
          highlight={highlighted}
          canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
          hideReadReceipts={hideActivity}
          showDeveloperTools={showDeveloperTools}
        >
          <EventContent
            time={timeJSX}
            railStart={streamRailStart}
            railEnd={streamRailEnd}
            layout={messageLayout}
            iconSrc={Icons.Code}
            content={
              <Box grow="Yes" direction="Column">
                <Text size="T300" priority="300">
                  <b>{senderName}</b>
                  {' sent '}
                  <code className={customHtmlCss.Code}>{mEvent.getType()}</code>
                  {' state event'}
                </Text>
              </Box>
            }
          />
        </Event>
      );
    },
    (mEventId, mEvent, item, _timelineSet, _collapse, streamRailStart, streamRailEnd) => {
      if (!showHiddenEvents) return null;
      if (Object.keys(mEvent.getContent()).length === 0) return null;
      if (mEvent.getRelation()) return null;
      if (mEvent.isRedaction()) return null;

      const highlighted = focusItem?.index === item && focusItem.highlight;
      const senderId = mEvent.getSender() ?? '';
      const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

      const timeJSX = (
        <Time
          ts={mEvent.getTs()}
          compact
        />
      );

      return (
        <Event
          key={mEvent.getId()}
          data-message-item={item}
          data-message-id={mEventId}
          room={room}
          mEvent={mEvent}
          highlight={highlighted}
          canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
          hideReadReceipts={hideActivity}
          showDeveloperTools={showDeveloperTools}
        >
          <EventContent
            time={timeJSX}
            railStart={streamRailStart}
            railEnd={streamRailEnd}
            layout={messageLayout}
            iconSrc={Icons.Code}
            content={
              <Box grow="Yes" direction="Column">
                <Text size="T300" priority="300">
                  <b>{senderName}</b>
                  {' sent '}
                  <code className={customHtmlCss.Code}>{mEvent.getType()}</code>
                  {' event'}
                </Text>
              </Box>
            }
          />
        </Event>
      );
    }
  );

  let prevEvent: MatrixEvent | undefined;
  let isPrevRendered = false;
  let newDivider = false;
  let dayDivider = false;

  // Keep this in sync with renderMatrixEvent early `return null` branches above:
  // Stream rail endpoints (start/end) use this predicate to skip hidden
  // service / reaction / edit events when deciding whether a visible row is
  // the first or last timeline dot.
  const isRenderableTimelineEvent = (event: MatrixEvent): boolean => {
    const eventIdForRender = event.getId();
    if (!eventIdForRender) return false;

    const senderId = event.getSender();
    if (senderId && ignoredUsersSet.has(senderId)) return false;
    if (event.isRedacted() && !showHiddenEvents) return false;
    if (reactionOrEditEvent(event)) return false;

    // RTC service events (notifications / declines) — once decrypted, the
    // SDK's getType() returns the inner type, so this filter catches them.
    // While still encrypted+pending-decryption, the event passes the
    // RoomMessageEncrypted branch below as «renderable»; once decryption
    // completes, the timeline emits a fresh render that re-evaluates this
    // predicate with the inner type and falls through to false. The
    // transient one-frame mismatch on rail endpoint computation self-heals
    // on the very next pass — no code path needed.
    const eventType = event.getType();
    if (eventType === 'org.matrix.msc4075.rtc.notification') return false;
    if (eventType === 'org.matrix.msc4310.rtc.decline') return false;

    // Channels-mode filter — see `isChannelsModeHidden` above for the rule
    // set and rationale. Same helper used by the renderer null-gate so the
    // rail-endpoint scan and the actual render always agree on visibility.
    if (channelsMode && isChannelsModeHidden(room, event, isBridged)) return false;

    if (eventType === StateEvent.RoomMember) {
      // Mirror the membership-sysline gate from the renderer above so the
      // rail-endpoint scan and the actual render agree on visibility.
      if (isOneOnOne) return false;
      const membershipChanged = isMembershipChanged(event);
      if (membershipChanged && hideMembershipEvents) return false;
      if (!membershipChanged && hideNickAvatarEvents) return false;
      return true;
    }

    if (eventType === StateEvent.GroupCallMemberPrefix) {
      const content = event.getContent<SessionMembershipData>();
      const prevContent = event.getPrevContent();
      const callJoined = content.application;
      if (callJoined && 'application' in prevContent) return false;
      return true;
    }

    if (
      eventType === MessageEvent.RoomMessage ||
      eventType === MessageEvent.RoomMessageEncrypted ||
      eventType === MessageEvent.Sticker ||
      eventType === StateEvent.RoomName ||
      eventType === StateEvent.RoomTopic ||
      eventType === StateEvent.RoomAvatar
    ) {
      return true;
    }

    if (typeof event.getStateKey() === 'string') return showHiddenEvents;
    if (!showHiddenEvents) return false;
    if (Object.keys(event.getContent()).length === 0) return false;
    if (event.getRelation()) return false;
    // Note: redactions are intentionally NOT filtered here. The catch-all
    // renderer still renders them when showHiddenEvents=true (dev tools),
    // so the predicate must agree — otherwise rail endpoints would treat a
    // visible redaction event as invisible and miscount «is there a renderable
    // event before/after this row» on the dev-tools path.

    return true;
  };

  const getTimelineItemEvent = (item: number): MatrixEvent | undefined => {
    const [itemTimeline, itemBaseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
    if (!itemTimeline) return undefined;
    return getTimelineEvent(itemTimeline, getTimelineRelativeIndex(item, itemBaseIndex));
  };

  // Single forward + reverse pass that records, for each visible item, whether
  // there is any RENDERABLE event before / after it. Used to compute Stream
  // rail-start (no renderable before) and rail-end (no renderable after).
  // Crucially this looks at renderability, not at `isPrevRendered` — the
  // latter is mutated by reaction / edit / hidden service events and would
  // otherwise reset rail-start in the middle of a continuous DM thread.
  const { before: streamRenderableItemHasBefore, after: streamRenderableItemHasAfter } = (() => {
    const before = new Map<number, boolean>();
    const after = new Map<number, boolean>();

    const items = getItems();
    const renderableFlags = items.map((item) => {
      const ev = getTimelineItemEvent(item);
      return !!ev && isRenderableTimelineEvent(ev);
    });

    let seenBefore = false;
    for (let index = 0; index < items.length; index += 1) {
      before.set(items[index], seenBefore);
      if (renderableFlags[index]) seenBefore = true;
    }

    let seenAfter = false;
    for (let index = items.length - 1; index >= 0; index -= 1) {
      after.set(items[index], seenAfter);
      if (renderableFlags[index]) seenAfter = true;
    }

    return { before, after };
  })();

  const eventRenderer = (item: number) => {
    const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
    if (!eventTimeline) return null;
    const timelineSet = eventTimeline?.getTimelineSet();
    const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));
    const mEventId = mEvent?.getId();

    if (!mEvent || !mEventId) return null;

    const eventSender = mEvent.getSender();
    if (eventSender && ignoredUsersSet.has(eventSender)) {
      return null;
    }
    if (mEvent.isRedacted() && !showHiddenEvents) {
      return null;
    }

    if (!newDivider && readUptoEventIdRef.current) {
      newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
    }
    if (!dayDivider) {
      dayDivider = prevEvent ? !inSameDay(prevEvent.getTs(), mEvent.getTs()) : false;
    }

    const collapsed =
      isPrevRendered &&
      !dayDivider &&
      (!newDivider || eventSender === mx.getUserId()) &&
      prevEvent !== undefined &&
      prevEvent.getSender() === eventSender &&
      prevEvent.getType() === mEvent.getType() &&
      minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;

    // streamRailStart looks at the precomputed «is there a renderable event
    // before me in the visible window» — not at `isPrevRendered`, which is
    // false for the row right after a reaction / edit / hidden service event
    // and would otherwise restart the rail mid-conversation. Symmetric with
    // streamRailEnd: only declare a row to be the rail's first dot when the
    // visible window is sitting at the genuine timeline start AND no further
    // back-pagination is possible — otherwise the «origin» dot would be a
    // lie about an earlier untouched history.
    const streamRailStart =
      rangeAtStart && !canPaginateBack && streamRenderableItemHasBefore.get(item) === false;
    const streamRailEnd =
      liveTimelineLinked && rangeAtEnd && streamRenderableItemHasAfter.get(item) !== true;

    // Channels-mode renderer gate — same helper as the predicate above so
    // the rail-endpoint scan and the renderer never disagree on visibility.
    const channelsModeHidden = channelsMode && isChannelsModeHidden(room, mEvent, isBridged);

    const eventJSX = channelsModeHidden || reactionOrEditEvent(mEvent)
      ? null
      : renderMatrixEvent(
          mEvent.getType(),
          typeof mEvent.getStateKey() === 'string',
          mEventId,
          mEvent,
          item,
          timelineSet,
          collapsed,
          streamRailStart,
          streamRailEnd
        );
    prevEvent = mEvent;
    isPrevRendered = !!eventJSX;

    if (newDivider && eventJSX) {
      // TODO(P3c-followup): replace the legacy full-width unread divider with
      // a Stream-native first-unread affordance — dot ring/pulse/brightness on
      // the rail. The «Jump to unread» chip stays functional in the meantime.
      newDivider = false;
    }

    const dayLabel = (() => {
      if (today(mEvent.getTs())) return t('Room.today');
      if (yesterday(mEvent.getTs())) return t('Room.yesterday');
      return timeDayMonthYear(mEvent.getTs());
    })();

    const renderDayDivider = () => (
      <MessageBase
        space={messageLayout === 'channel' ? CHANNEL_MESSAGE_SPACING : STREAM_MESSAGE_SPACING}
      >
        {messageLayout === 'channel' ? (
          <ChannelDayDivider label={dayLabel} />
        ) : (
          <StreamDayDivider label={dayLabel} />
        )}
      </MessageBase>
    );

    const dayDividerJSX = dayDivider && eventJSX ? renderDayDivider() : null;

    if (eventJSX && dayDividerJSX) {
      dayDivider = false;
      return (
        <React.Fragment key={mEventId}>
          {dayDividerJSX}
          {eventJSX}
        </React.Fragment>
      );
    }

    return eventJSX;
  };

  return (
    <Box grow="Yes" style={{ position: 'relative' }}>
      {unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline && (
        <TimelineFloat position="Top">
          <Chip
            variant="Primary"
            radii="Pill"
            outlined
            before={<Icon size="50" src={Icons.MessageUnread} />}
            onClick={handleJumpToUnread}
          >
            <Text size="L400">{t('Room.jump_to_unread')}</Text>
          </Chip>

          <Chip
            variant="SurfaceVariant"
            radii="Pill"
            outlined
            before={<Icon size="50" src={Icons.CheckTwice} />}
            onClick={handleMarkAsRead}
          >
            <Text size="L400">{t('Room.mark_as_read')}</Text>
          </Chip>
        </TimelineFloat>
      )}
      <Scroll ref={scrollRef} visibility="Hover">
        <Box
          direction="Column"
          justifyContent="End"
          style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}
        >
          {!canPaginateBack && rangeAtStart && getItems().length > 0 && (
            <div
              style={{
                padding: `${config.space.S700} ${config.space.S400} ${config.space.S600} ${toRem(
                  64
                )}`,
              }}
            >
              <RoomIntro room={room} />
            </div>
          )}
          {(canPaginateBack || !rangeAtStart) && (
            <>
              <MessageBase>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
              <MessageBase>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
              <MessageBase ref={observeBackAnchor}>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
            </>
          )}

          {getItems().map(eventRenderer)}

          {(!liveTimelineLinked || !rangeAtEnd) && (
            <>
              <MessageBase ref={observeFrontAnchor}>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
              <MessageBase>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
              <MessageBase>
                <DefaultPlaceholder key={getItems().length} />
              </MessageBase>
            </>
          )}
          <span ref={atBottomAnchorRef} />
        </Box>
      </Scroll>
      {!atBottom && (
        <TimelineFloat position="Bottom">
          <Chip
            variant="SurfaceVariant"
            radii="Pill"
            outlined
            before={<Icon size="50" src={Icons.ArrowBottom} />}
            onClick={handleJumpToLatest}
          >
            <Text size="L400">{t('Room.jump_to_latest')}</Text>
          </Chip>
        </TimelineFloat>
      )}
    </Box>
  );
}