cinny/src/app/features/room/message/EditHistoryModal.tsx

import React, { ReactNode, useCallback, useEffect } from 'react';
import parse from 'html-react-parser';
import Linkify from 'linkify-react';
import FocusTrap from 'focus-trap-react';
import {
  Box,
  Header,
  Icon,
  IconButton,
  Icons,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Scroll,
  Spinner,
  Text,
  config,
} from 'folds';
import { MatrixEvent, Room } from 'matrix-js-sdk';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { stopPropagation } from '../../../utils/keyboard';
import { sanitizeCustomHtml } from '../../../utils/sanitize';
import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { timeDayMonYear, timeHourMinute } from '../../../utils/time';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';

type RawEditEvent = {
  type: string;
  content: Record<string, unknown>;
  origin_server_ts: number;
  event_id: string;
};

type EditHistoryResponse = {
  chunk: Array<Record<string, unknown>>;
  next_batch?: string;
};

type EditHistoryData = {
  events: MatrixEvent[];
  hasMore: boolean;
};

type EditHistoryModalProps = {
  room: Room;
  mEvent: MatrixEvent;
  onClose: () => void;
};

function isRawEditEvent(raw: unknown): raw is RawEditEvent {
  if (typeof raw !== 'object' || raw === null) return false;
  const r = raw as Record<string, unknown>;
  return typeof r.event_id === 'string' && typeof r.origin_server_ts === 'number';
}

function renderContent(source: Record<string, unknown>): ReactNode {
  const format = source.format;
  const formattedBody = source.formatted_body;
  if (
    format === 'org.matrix.custom.html' &&
    typeof formattedBody === 'string' &&
    formattedBody.trim()
  ) {
    return parse(sanitizeCustomHtml(formattedBody));
  }
  const body = source.body;
  const text = typeof body === 'string' ? body : '(no text)';
  return <Linkify options={LINKIFY_OPTS}>{text}</Linkify>;
}

function getOriginalContent(evt: MatrixEvent): ReactNode {
  // For E2EE events, evt.event.content is the ciphertext (no body field) — "(no text)" bug.
  // getClearContent() returns the decrypted original content, bypassing _replacingEvent,
  // so it gives us the pre-edit body even when the SDK has an edit applied.
  // For unencrypted events, getClearContent() returns null, so we fall back to event.content.
  const raw =
    (evt.getClearContent() as Record<string, unknown> | null) ??
    (evt.event as { content?: Record<string, unknown> }).content ??
    {};
  return renderContent(raw);
}

function getVersionContent(evt: MatrixEvent): ReactNode {
  // Edit events carry the new text in m.new_content per Matrix spec.
  const content = evt.getContent();
  const newContent = content['m.new_content'] as Record<string, unknown> | undefined;
  return renderContent(newContent ?? content);
}

export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProps) {
  const mx = useMatrixClient();
  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');

  const eventId = mEvent.getId();
  const roomId = room.roomId;

  const [historyState, fetchHistory] = useAsyncCallback<EditHistoryData, unknown, []>(
    useCallback(async () => {
      if (!eventId) return { events: [], hasMore: false };

      // Relations API lives at /_matrix/client/v1/ (not v3); use raw fetch to avoid SDK prefix
      const token = mx.getAccessToken();
      const baseUrl = mx.getHomeserverUrl();
      const url = `${baseUrl}/_matrix/client/v1/rooms/${encodeURIComponent(roomId)}/relations/${encodeURIComponent(eventId)}/m.replace?limit=50`;
      const fetchRes = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
      if (!fetchRes.ok) throw new Error(`HTTP ${fetchRes.status}`);
      const res = (await fetchRes.json()) as EditHistoryResponse;
      const rawEvents = res.chunk ?? [];
      const events = await Promise.all(
        rawEvents
          .filter(isRawEditEvent)
          .sort((a, b) => a.origin_server_ts - b.origin_server_ts)
          .map(async (raw) => {
            const existing = room.findEventById(raw.event_id);
            if (existing) return existing;
            const evt = new MatrixEvent({
              type: raw.type,
              content: raw.content,
              origin_server_ts: raw.origin_server_ts,
              event_id: raw.event_id,
              room_id: roomId,
              sender: mEvent.getSender() ?? '',
            });
            if (evt.isEncrypted()) {
              await mx.decryptEventIfNeeded(evt);
            }
            return evt;
          }),
      );

      return { events, hasMore: !!res.next_batch };
    }, [mx, roomId, eventId, room, mEvent]),
  );

  useEffect(() => {
    fetchHistory().catch(() => undefined);
  }, [fetchHistory]);

  const formatTs = (ts: number): string => {
    const time = timeHourMinute(ts, hour24Clock);
    const date = timeDayMonYear(ts, dateFormatString);
    return `${date} at ${time}`;
  };

  const originalContent = getOriginalContent(mEvent);

  const originalTs = mEvent.getTs();

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            clickOutsideDeactivates: true,
            onDeactivate: onClose,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            variant="Surface"
            size="500"
            role="dialog"
            aria-modal="true"
            aria-labelledby="edit-history-title"
          >
            <Header
              variant="Surface"
              size="500"
              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
            >
              <Box grow="Yes">
                <Text as="h2" id="edit-history-title" size="H4" truncate>
                  Edit History
                </Text>
              </Box>
              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>

            <Scroll size="300" hideTrack style={{ maxHeight: '60vh' }}>
              <Box
                direction="Column"
                gap="200"
                style={{
                  padding: config.space.S400,
                  paddingBottom: config.space.S700,
                }}
              >
                {historyState.status === AsyncStatus.Loading && (
                  <Box
                    justifyContent="Center"
                    alignItems="Center"
                    style={{ padding: config.space.S400 }}
                  >
                    <Spinner size="200" />
                  </Box>
                )}
                {historyState.status === AsyncStatus.Error && (
                  <Text size="T300" priority="300">
                    Failed to load edit history.
                  </Text>
                )}
                {historyState.status === AsyncStatus.Success && (
                  <Box direction="Column" gap="300">
                    <Box direction="Column" gap="100">
                      <Box gap="200" alignItems="Center">
                        <Text size="L400">Original</Text>
                        <Text size="T200" priority="300">
                          {formatTs(originalTs)}
                        </Text>
                      </Box>
                      <Text size="T300" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                        {originalContent}
                      </Text>
                    </Box>

                    {historyState.data.events.map((editEvt, index) => (
                      <Box key={editEvt.getId() ?? index} direction="Column" gap="100">
                        <Box gap="200" alignItems="Center">
                          <Text size="L400">
                            {index === historyState.data.events.length - 1
                              ? `Edit ${index + 1} (current)`
                              : `Edit ${index + 1}`}
                          </Text>
                          <Text size="T200" priority="300">
                            {formatTs(editEvt.getTs())}
                          </Text>
                        </Box>
                        <Text
                          size="T300"
                          style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}
                        >
                          {getVersionContent(editEvt)}
                        </Text>
                      </Box>
                    ))}

                    {historyState.data.events.length === 0 && (
                      <Text size="T300" priority="300">
                        No edit history found.
                      </Text>
                    )}

                    {historyState.data.hasMore && (
                      <Box justifyContent="Center" style={{ padding: config.space.S200 }}>
                        <Text size="T200" priority="300">
                          Showing the 50 most recent edits
                        </Text>
                      </Box>
                    )}
                  </Box>
                )}
              </Box>
            </Scroll>
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}