import React, { MouseEventHandler, forwardRef, useMemo, useState } from 'react';
import { useAtom, useAtomValue } from 'jotai';
import { Avatar, Box, Button, IconButton, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
import { Icon, Icons } from '../icons';
import { useVirtualizer } from '@tanstack/react-virtual';
import FocusTrap from 'focus-trap-react';
import { useNavigate } from 'react-router-dom';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { factoryRoomIdByActivity } from '../../utils/sort';
import {
  NavButton,
  NavCategory,
  NavCategoryHeader,
  NavEmptyCenter,
  NavEmptyLayout,
  NavItem,
  NavItemContent,
} from '../nav';
import { getDirectCreatePath, getDirectRoomPath } from '../../pages/pathUtils';
import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
import { VirtualTile } from '../virtualizer';
import { RoomNavCategoryButton, RoomNavItem } from '../../features/room-nav';
import { makeNavCategoryId } from '../../state/closedNavCategories';
import { roomToUnreadAtom } from '../../state/room/roomToUnread';
import { useCategoryHandler } from '../../hooks/useCategoryHandler';
import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
import { useClosedNavCategoriesAtom } from '../../state/hooks/closedNavCategories';
import { useRoomsUnread } from '../../state/hooks/unread';
import { useMarkRoomsAsRead } from '../../hooks/useMarkAsRead';
import { stopPropagation } from '../../utils/keyboard';
import { PluginButtonSlot } from '../../features/settings/plugins/PluginButtonSlot';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import {
  getRoomNotificationMode,
  useRoomsNotificationPreferencesContext,
} from '../../hooks/useRoomsNotificationPreferences';
import { useDirectCreateSelected } from '../../hooks/router/useDirectSelected';
import { useRoomListReorder, useListReorderAnimation } from '../../hooks/useRoomListReorder';

/**
 * Props for the DirectMenu component
 */
type DirectMenuProps = {
  requestClose: () => void;
};

/**
 * Menu component for Direct Messages category actions
 */
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
  const mx = useMatrixClient();
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const orphanRooms = useDirectRooms();
  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
  const markRoomsAsRead = useMarkRoomsAsRead(mx);

  const handleMarkAsRead = () => {
    if (!unread) return;
    markRoomsAsRead(orphanRooms, hideActivity);
    requestClose();
  };

  return (
    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
          after={<Icon size="100" src={Icons.CheckTwice} />}
          radii="300"
          aria-disabled={!unread}
        >
          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
            Mark as Read
          </Text>
        </MenuItem>
      </Box>
    </Menu>
  );
});

/**
 * Props for the DirectListHeader component
 */
type DirectListHeaderProps = {
  title?: string;
};

/**
 * Header component for the Direct Messages list with menu
 */
export function DirectListHeader({ title = 'Direct Messages' }: DirectListHeaderProps) {
  const [menuAnchor, setMenuAnchor] = useState<RectCords>();

  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    const cords = evt.currentTarget.getBoundingClientRect();
    setMenuAnchor((currentState) => {
      if (currentState) return undefined;
      return cords;
    });
  };

  return (
    <>
      <Box alignItems="Center" grow="Yes" gap="300">
        <Box grow="Yes">
          <Text size="H4" truncate>
            {title}
          </Text>
        </Box>
        <Box gap="100" alignItems="Center">
          <PluginButtonSlot location="direct-messages" />
          <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
            <Icon src={Icons.VerticalDots} size="200" />
          </IconButton>
        </Box>
      </Box>
      <PopOut
        anchor={menuAnchor}
        position="Bottom"
        align="End"
        offset={6}
        content={
          <FocusTrap
            focusTrapOptions={{
              initialFocus: false,
              returnFocusOnDeactivate: false,
              onDeactivate: () => setMenuAnchor(undefined),
              clickOutsideDeactivates: true,
              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
              escapeDeactivates: stopPropagation,
            }}
          >
            <DirectMenu requestClose={() => setMenuAnchor(undefined)} />
          </FocusTrap>
        }
      />
    </>
  );
}

/**
 * Empty state component when there are no direct messages
 */
export function DirectListEmpty() {
  const navigate = useNavigate();

  return (
    <NavEmptyCenter>
      <NavEmptyLayout
        icon={<Icon size="600" src={Icons.Mention} />}
        title={
          <Text size="H5" align="Center">
            No Direct Messages
          </Text>
        }
        content={
          <Text size="T300" align="Center">
            You do not have any direct messages yet.
          </Text>
        }
        options={
          <Button variant="Secondary" size="300" onClick={() => navigate(getDirectCreatePath())}>
            <Text size="B300" truncate>
              Direct Message
            </Text>
          </Button>
        }
      />
    </NavEmptyCenter>
  );
}

const DEFAULT_CATEGORY_ID = makeNavCategoryId('direct', 'direct');

/**
 * Props for the DirectList component
 */
export type DirectListProps = {
  scrollRef: React.RefObject<HTMLDivElement>;
  showCreateButton?: boolean;
  showCategoryHeader?: boolean;
};

/**
 * Reusable component that renders the virtualized list of direct message rooms.
 * Can be embedded in any PageNavContent context.
 */
export function DirectList({
  scrollRef,
  showCreateButton = true,
  showCategoryHeader = true,
}: DirectListProps) {
  const mx = useMatrixClient();
  const directs = useDirectRooms();
  const notificationPreferences = useRoomsNotificationPreferencesContext();
  const roomToUnread = useAtomValue(roomToUnreadAtom);
  const navigate = useNavigate();
  const createDirectSelected = useDirectCreateSelected();
  const selectedRoomId = useSelectedRoom();
  const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
  
  const reorderTrigger = useRoomListReorder(mx, directs);

  const sortedDirects = useMemo(() => {
    const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
    if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
    }
    return items;
  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId, reorderTrigger]);

  const animationRef = useListReorderAnimation(sortedDirects);

  const virtualizer = useVirtualizer({
    count: sortedDirects.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => 38,
    overscan: 10,
  });

  const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
    closedCategories.has(categoryId)
  );

  const noRoomToDisplay = directs.length === 0;

  if (noRoomToDisplay) {
    return <DirectListEmpty />;
  }

  return (
    <Box direction="Column" gap="300">
      {showCreateButton && (
        <NavCategory>
          <NavItem variant="Background" radii="400" aria-selected={createDirectSelected}>
            <NavButton onClick={() => navigate(getDirectCreatePath())}>
              <NavItemContent>
                <Box as="span" grow="Yes" alignItems="Center" gap="200">
                  <Avatar size="200" radii="400">
                    <Icon src={Icons.Plus} size="100" />
                  </Avatar>
                  <Box as="span" grow="Yes">
                    <Text as="span" size="Inherit" truncate>
                      Create Chat
                    </Text>
                  </Box>
                </Box>
              </NavItemContent>
            </NavButton>
          </NavItem>
        </NavCategory>
      )}
      <NavCategory>
        {showCategoryHeader && (
          <NavCategoryHeader>
            <RoomNavCategoryButton
              closed={closedCategories.has(DEFAULT_CATEGORY_ID)}
              data-category-id={DEFAULT_CATEGORY_ID}
              onClick={handleCategoryClick}
            >
              Chats
            </RoomNavCategoryButton>
          </NavCategoryHeader>
        )}
        <div
          ref={animationRef}
          style={{
            position: 'relative',
            height: virtualizer.getTotalSize(),
          }}
        >
          {virtualizer.getVirtualItems().map((vItem) => {
            const roomId = sortedDirects[vItem.index];
            const room = mx.getRoom(roomId);
            if (!room) return null;
            const selected = selectedRoomId === roomId;

            return (
              <VirtualTile 
                virtualItem={vItem} 
                key={roomId} 
                ref={virtualizer.measureElement}
                data-room-id={roomId}
              >
                <RoomNavItem
                  room={room}
                  selected={selected}
                  showAvatar
                  direct
                  linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
                  notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
                />
              </VirtualTile>
            );
          })}
        </div>
      </NavCategory>
    </Box>
  );
}