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

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, tapping a row locates the message. On H5 the whole row
   * is the tap target (no hover locate button).
   */
  onLocateMessage?: ((message: MessageInfo) => void) | 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,
  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}
            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>
              </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;