import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Avatar } from 'tuikit-atomicx-react/chat';
import { SearchMessageItem } from '../SearchMessageItem';
import { renderSearchResultItem } from '../renderSearchResultItem';
import styles from './SearchMessageList.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';
import type { SearchResultItemComponent } from '../renderSearchResultItem';
import { SearchType as UISearchType } from '../../../../types/search';

interface SearchMessageListProps {
  /** Flattened messages to render. */
  messages: MessageInfo[];
  /** Keyword used for highlight within text content. */
  keyword: string;
  isLoading?: boolean;
  isLoadingMore?: boolean;
  error?: string | null;
  /** True when a search has been performed (distinguishes "no query" from "no hits"). */
  hasSearched?: boolean;
  hasMore?: boolean;
  onLoadMore?: (() => void) | undefined;
  /**
   * When provided, each row shows a hover "locate to chat" button.
   * Omit to hide the button entirely.
   */
  onLocateMessage?: ((message: MessageInfo) => void) | undefined;
  SearchResultItem?: SearchResultItemComponent | undefined;
  className?: string;
}

/**
 * Shared in-conversation message result list.
 *
 * Consumed by both EmbeddedSearch (sidebar, whole list) and StandardSearch
 * (right-hand detail pane), so "search messages within one conversation" has
 * exactly one rendering implementation.
 */
export function SearchMessageList({
  messages,
  keyword,
  isLoading = false,
  isLoadingMore = false,
  error = null,
  hasSearched = false,
  hasMore = false,
  onLoadMore,
  onLocateMessage,
  SearchResultItem,
  className,
}: SearchMessageListProps) {
  const { t } = useUIKit();

  const isEmpty = hasSearched && !isLoading && !error && messages.length === 0;

  if (isLoading) {
    return <div className={styles.SearchMessageList__status}>{t('Search.loading')}</div>;
  }
  if (error) {
    return (
      <div className={cs(styles.SearchMessageList__status, styles['SearchMessageList__status--error'])}>
        {error}
      </div>
    );
  }
  if (isEmpty) {
    return (
      <>
        <div className={styles.SearchMessageList__status}>{t('Search.no_result')}</div>
        <div className={cs(styles['SearchMessageList__status--special-reason'])}>{t('Search.no_chat_message_result')}</div>
      </>
    );
  }
  if (messages.length === 0) {
    return null;
  }

  return (
    <div className={cs(styles.SearchMessageList, className)}>
      {messages.map((message, i) => {
        const senderName = message.from?.nameCard
          || message.from?.nickname
          || message.from?.userID
          || '';
        return (
          <div key={message.msgID || i} className={styles.SearchMessageList__row}>
            {renderSearchResultItem(
              SearchResultItem,
              {
                keyword,
                data: message,
                type: UISearchType.CHAT_MESSAGE,
                onClick: () => onLocateMessage?.(message),
              },
              <>
                <div className={styles.SearchMessageList__avatarWrapper}>
                  <Avatar {...(message.from?.avatarURL && { src: message.from.avatarURL })} alt={senderName} />
                </div>
                <div className={styles.SearchMessageList__content}>
                  <div className={styles.SearchMessageList__header}>
                    <span className={styles.SearchMessageList__name}>{senderName}</span>
                    {message.timestamp && (
                      <span className={styles.SearchMessageList__time}>
                        {message.timestamp.toLocaleString()}
                      </span>
                    )}
                  </div>
                  <div className={styles.SearchMessageList__body}>
                    <div className={styles.SearchMessageList__messageContent}>
                      <SearchMessageItem message={message} keyword={keyword} />
                    </div>
                    {onLocateMessage && (
                      <button
                        type="button"
                        className={styles.SearchMessageList__locateBtn}
                        onClick={() => onLocateMessage(message)}
                      >
                        {t('Search.locate_to_chat')}
                      </button>
                    )}
                  </div>
                </div>
              </>,
            )}
          </div>
        );
      })}

      {hasMore && onLoadMore && (
        <div className={styles.SearchMessageList__loadMore}>
          <button
            type="button"
            className={styles.SearchMessageList__loadMoreBtn}
            onClick={onLoadMore}
            disabled={isLoadingMore}
          >
            {isLoadingMore ? t('Search.loading') : t('Search.load_more_messages')}
          </button>
        </div>
      )}
      {!hasMore && messages.length > 0 && (
        <div className={styles.SearchMessageList__noMore}>
          {t('Search.no_more_messages')}
        </div>
      )}
    </div>
  );
}

export default SearchMessageList;