import React, { useCallback, useEffect } from '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 { 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 getVersionBody(evt: MatrixEvent): string {
  const content = evt.getContent();
  const newContent = content['m.new_content'] as Record<string, unknown> | undefined;
  const source = newContent ?? content;

  const formattedBody = source.formatted_body;
  if (typeof formattedBody === 'string') {
    return formattedBody.replace(/<[^>]+>/g, '').trim() || '(no text)';
  }
  const body = source.body;
  return typeof body === 'string' ? body : '(no text)';
}

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 = rawEvents
        .filter(isRawEditEvent)
        .sort((a, b) => a.origin_server_ts - b.origin_server_ts)
        .map((raw) => {
          const existing = room.findEventById(raw.event_id);
          if (existing) return existing;
          return 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() ?? '',
          });
        });

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

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

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

  const originalBody = (() => {
    const content = mEvent.getContent();
    const body = content.body;
    return typeof body === 'string' ? body : '(no text)';
  })();

  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' }}>
                        {originalBody}
                      </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' }}
                        >
                          {getVersionBody(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>
  );
}