import React, { forwardRef, useState } from 'react';
import { Icons, Menu, Spinner } from 'folds';
import type { Room } from 'matrix-js-sdk';
import { useTranslation } from 'react-i18next';
import {
  getRoomNotificationMode,
  useRoomsNotificationPreferencesContext,
} from '../../hooks/useRoomsNotificationPreferences';
import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
// Reuse the EXACT row vocabulary + popout chrome of the 1:1 chat's ⋮ menu (RoomActionsMenu) so the
// AI surface's overflow menu is the same popup, styled identically — only the action set differs.
import { ActionRow, ActionSectionLine, RowChevron } from '../room/room-actions/RoomActions';
import * as css from '../room/room-actions/RoomActions.css';

type AiChatMenuProps = {
  room: Room;
  requestClose: () => void;
  onNewChat: () => void;
  onOpenHistory: () => void;
  onOpenPrivacy: () => void;
};

// The native AI conversation surface's ⋮ menu. Same popup as the 1:1 chat overflow menu
// (RoomActionsMenu: `Menu variant="Surface"` + ActionRow rows + ActionSectionLine), carrying the
// AI conversation actions (New chat / Chats / Privacy & data) plus the generic room actions
// (notifications / leave). No "Mark as read" — useless here — and no widget "Show chat".
export const AiChatMenu = forwardRef<HTMLDivElement, AiChatMenuProps>(
  ({ room, requestClose, onNewChat, onOpenHistory, onOpenPrivacy }, ref) => {
    const { t } = useTranslation();
    const notificationPreferences = useRoomsNotificationPreferencesContext();
    const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);

    const [promptLeave, setPromptLeave] = useState(false);

    return (
      <Menu ref={ref} variant="Surface" className={css.PopoutMenu}>
        {promptLeave && (
          <LeaveRoomPrompt
            roomId={room.roomId}
            onDone={requestClose}
            onCancel={() => setPromptLeave(false)}
          />
        )}

        <div className={css.PopoutGroup}>
          <ActionRow
            icon={Icons.Plus}
            label={t('Bots.conversations.new_chat')}
            onClick={() => {
              onNewChat();
              requestClose();
            }}
          />
          <ActionRow
            icon={Icons.RecentClock}
            label={t('Bots.conversations.title')}
            onClick={() => {
              onOpenHistory();
              requestClose();
            }}
            ariaHasPopup
            trailing={<RowChevron />}
          />
          <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
            {(handleOpen, opened, changing) => (
              <ActionRow
                icon={Icons.Bell}
                label={t('Room.notifications')}
                onClick={handleOpen}
                ariaPressed={opened}
                ariaHasPopup
                trailing={changing ? <Spinner size="100" variant="Secondary" /> : <RowChevron />}
              />
            )}
          </RoomNotificationModeSwitcher>
          <ActionRow
            icon={Icons.ShieldLock}
            label={t('Bots.privacy.menu')}
            onClick={() => {
              onOpenPrivacy();
              requestClose();
            }}
            ariaHasPopup
            trailing={<RowChevron />}
          />
        </div>

        <ActionSectionLine />
        <div className={css.PopoutGroup}>
          <ActionRow
            icon={Icons.ArrowGoLeft}
            label={t('Room.leave_room')}
            onClick={() => setPromptLeave(true)}
            accent="critical"
            ariaPressed={promptLeave}
          />
        </div>
      </Menu>
    );
  }
);
