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

import React, { ChangeEvent, useCallback, useMemo, useRef, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Avatar,
  Box,
  color,
  config,
  Header,
  Icon,
  IconButton,
  Icons,
  Input,
  Line,
  MenuItem,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Scroll,
  Spinner,
  Text,
} from 'folds';
import { MatrixEvent, Room } from 'matrix-js-sdk';
import { useAtomValue } from 'jotai';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { stopPropagation } from '../../../utils/keyboard';
import { useModalStyle } from '../../../hooks/useModalStyle';
import { mDirectAtom } from '../../../state/mDirectList';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { mxcUrlToHttp } from '../../../utils/matrix';
import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
import { getEditedEvent, trimReplyFromBody, trimReplyFromFormattedBody } from '../../../utils/room';

type RoomRowProps = {
  room: Room;
  dm: boolean;
  useAuthentication: boolean;
  onClick: () => void;
  sending: boolean;
};
function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps) {
  const mx = useMatrixClient();
  const avatarMxc = room.getMxcAvatarUrl();
  const avatarUrl = avatarMxc
    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined)
    : undefined;

  return (
    <MenuItem
      size="300"
      radii="300"
      onClick={onClick}
      disabled={sending}
      before={
        <Avatar size="200" radii="300">
          <RoomAvatar
            roomId={room.roomId}
            src={avatarUrl}
            alt={room.name}
            renderFallback={() => (
              <RoomIcon roomType={room.getType()} size="100" joinRule={room.getJoinRule()} filled />
            )}
          />
        </Avatar>
      }
    >
      <Box direction="Column">
        <Text size="T300" truncate>
          {room.name}
        </Text>
        {dm && (
          <Text size="T200" priority="300" truncate>
            Direct Message
          </Text>
        )}
      </Box>
    </MenuItem>
  );
}

type Props = {
  mEvent: MatrixEvent;
  onClose: () => void;
};

export function ForwardMessageDialog({ mEvent, onClose }: Props) {
  const mx = useMatrixClient();
  const modalStyle = useModalStyle(400);
  const directs = useAtomValue(mDirectAtom);
  const useAuthentication = useMediaAuthentication();
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [query, setQuery] = useState('');
  const [sending, setSending] = useState(false);
  const [sentTo, setSentTo] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const allRooms = useMemo(
    () =>
      mx
        .getRooms()
        .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
        .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0)),
    [mx],
  );

  const filtered = useMemo(() => {
    if (!query) return allRooms;
    const q = query.toLowerCase();
    return allRooms.filter((r) => r.name.toLowerCase().includes(q));
  }, [allRooms, query]);

  /**
   * Build the content to forward:
   * - undecryptable events are refused (would forward `m.bad.encrypted` junk)
   * - edited messages forward the LATEST edit (`m.new_content`), not the
   *   original pre-edit body
   * - reply fallbacks (`> <@user> …` quote + `<mx-reply>` block) are stripped
   *   along with the `m.relates_to` reply/thread relation, so the forwarded
   *   message stands alone in the target room
   */
  const buildForwardContent = useCallback((): Record<string, unknown> | undefined => {
    if (mEvent.isDecryptionFailure()) return undefined;

    let content = { ...mEvent.getContent() };

    const eventId = mEvent.getId();
    const room = mx.getRoom(mEvent.getRoomId());
    if (eventId && room) {
      const editedEvent = getEditedEvent(eventId, mEvent, room.getUnfilteredTimelineSet());
      const newContent = editedEvent?.getContent()['m.new_content'];
      if (newContent && typeof newContent === 'object') {
        content = { ...(newContent as Record<string, unknown>) };
      }
    }

    delete content['m.relates_to'];
    if (typeof content.body === 'string') {
      content.body = trimReplyFromBody(content.body);
    }
    if (typeof content.formatted_body === 'string') {
      content.formatted_body = trimReplyFromFormattedBody(content.formatted_body);
    }
    return content;
  }, [mx, mEvent]);

  const forward = useCallback(
    async (room: Room) => {
      if (sending) return;
      const fwdContent = buildForwardContent();
      if (!fwdContent) {
        setError('This message could not be decrypted, so it cannot be forwarded.');
        return;
      }
      setSending(true);
      setError(null);
      try {
        // threadId-aware overload (P3-8): explicit null = send to the main timeline.
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await mx.sendEvent(room.roomId, null, mEvent.getType() as any, fwdContent);
        setSentTo(room.name);
        setTimeout(onClose, 1400);
      } catch {
        setSending(false);
        setError(`Failed to forward to ${room.name}. Try again.`);
      }
    },
    [mx, mEvent, onClose, sending, buildForwardContent],
  );

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: () => searchInputRef.current ?? false,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            size="400"
            style={{
              maxHeight: '480px',
              borderRadius: config.radii.R500,
              display: 'flex',
              flexDirection: 'column',
              ...modalStyle,
            }}
          >
            <Header
              variant="Surface"
              size="500"
              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
            >
              <Box grow="Yes">
                <Text as="h2" size="H4" truncate>
                  Forward message
                </Text>
              </Box>
              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
            {!sentTo && (
              <Box
                shrink="No"
                direction="Column"
                style={{ padding: `${config.space.S200} ${config.space.S400}` }}
              >
                <Input
                  ref={searchInputRef}
                  variant="Background"
                  size="400"
                  radii="400"
                  outlined
                  placeholder="Search rooms…"
                  value={query}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
                />
                {error && (
                  <Text
                    size="T200"
                    style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
                  >
                    {error}
                  </Text>
                )}
              </Box>
            )}
            <Line size="300" />
            {sentTo ? (
              <Box
                grow="Yes"
                alignItems="Center"
                justifyContent="Center"
                gap="300"
                style={{ padding: config.space.S400 }}
              >
                <Text size="T300">✓ Forwarded to {sentTo}</Text>
              </Box>
            ) : (
              <Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
                <Scroll size="300" hideTrack visibility="Hover">
                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                    {filtered.slice(0, 60).map((room) => (
                      <RoomRow
                        key={room.roomId}
                        room={room}
                        dm={directs.has(room.roomId)}
                        useAuthentication={useAuthentication}
                        onClick={() => forward(room)}
                        sending={sending}
                      />
                    ))}
                    {filtered.length === 0 && (
                      <Box
                        alignItems="Center"
                        justifyContent="Center"
                        style={{ padding: config.space.S400 }}
                      >
                        <Text size="T300" priority="300">
                          No rooms found
                        </Text>
                      </Box>
                    )}
                  </Box>
                </Scroll>
                {sending && (
                  <Box
                    alignItems="Center"
                    justifyContent="Center"
                    style={{
                      position: 'absolute',
                      inset: 0,
                      background: 'rgba(0,0,0,0.35)',
                      borderRadius: config.radii.R500,
                    }}
                  >
                    <Spinner variant="Secondary" size="400" />
                  </Box>
                )}
              </Box>
            )}
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}