import React, { useCallback, useEffect, useState } from 'react';
import { IconChevronRight, useUIKit } from '@tencentcloud/uikit-base-component-react';
import { VariantType, SearchType } from '../../../types/search';
import { EmptyResult } from './EmptyResult';
import { Loading } from './Loading';
import styles from './SearchResults.module.scss';
import DefaultSearchResultsItem from './SearchResultsItem';
import type {
  SearchResultsProps,
  SearchResultItemType,
} from '../../../types/search';
import type {
  MessageInfo,
  MessageSearchResultItem,
} from 'tuikit-atomicx-react/chat';

export function SearchResults({
  results,
  isLoading,
  error,
  keyword,
  typeLabels,
  onLoadMore,
  onResultItemClick,
  SearchResultsLoading = Loading,
  SearchResultsPresearch,
  SearchResultsEmpty = EmptyResult,
  SearchResultItem = DefaultSearchResultsItem,
  variant = VariantType.STANDARD,
  searchType = 'all',
}: SearchResultsProps) {
  const defaultMiniInitLimits = new Map([
    [SearchType.MESSAGE, 3],
    [SearchType.USER, 3],
    [SearchType.GROUP, 3],
  ]);
  const { t } = useUIKit();
  const [
    miniInitLimits,
    setMiniInitLimits,
  ] = useState<Map<SearchType, number>>(defaultMiniInitLimits);
  const [loadingType, setLoadingType] = useState<SearchType | ''>('');
  // Active conversation ID is derived from CHAT_MESSAGE result; tracked here so the
  // right-hand chat-message detail panel can render alongside the main list.
  const [activeConversationID, setActiveConversationID] = useState<string | undefined>(undefined);

  useEffect(() => {
    const chatMessageData = (
      results?.get(SearchType.CHAT_MESSAGE)?.resultList[0]
      || {}) as MessageSearchResultItem;
    const chatConversationID = chatMessageData?.conversationID;
    const { resultList = [] } = results?.get(SearchType.MESSAGE) || {};
    const existConversation = resultList.find((item: MessageSearchResultItem) => item.conversationID === chatConversationID);
    const showStandardMessageList = variant === VariantType.STANDARD
      && (searchType === SearchType.MESSAGE);
    const isEmbedded = variant === VariantType.EMBEDDED;
    const shouldSetConversation = showStandardMessageList && existConversation;
    const currentConversationID = (shouldSetConversation || isEmbedded) ? chatConversationID : undefined;
    setActiveConversationID(currentConversationID);
  }, [searchType, variant, results]);

  useEffect(() => {
    if (variant === VariantType.MINI) {
      setMiniInitLimits(defaultMiniInitLimits);
    }
  }, [keyword]);

  useEffect(() => {
    if (isLoading === false) {
      setLoadingType('');
    }
  }, [isLoading]);

  const handleLoadMore = useCallback((type: SearchType) => {
    if (variant === VariantType.MINI) {
      setMiniInitLimits(prev => new Map(prev).set(type, 0));
    }
    setLoadingType(type);
    onLoadMore?.(type);
  }, [onLoadMore]);

  const handleClickItem = useCallback((data: SearchResultItemType, type: SearchType) => {
    if (type === SearchType.MESSAGE) {
      setLoadingType(SearchType.CHAT_MESSAGE);
    }
    onResultItemClick?.(data, type);
  }, [onResultItemClick]);

  const filteredResults = useCallback(() => {
    if (!results || variant === VariantType.EMBEDDED) {
      return new Map();
    }
    if (variant === VariantType.MINI) {
      const limitedResults = new Map();
      results.forEach((value, key) => {
        const limitedNum: number = miniInitLimits.get(key) || 0;
        if (key !== SearchType.CHAT_MESSAGE) {
          limitedResults.set(key, {
            ...value,
            resultList: limitedNum !== 0 ? value.resultList.slice(0, limitedNum) : value.resultList,
            hasMore: limitedNum !== 0 ? value.resultList.length > limitedNum : value.hasMore,
          });
        }
      });
      return limitedResults;
    }
    const filtered = new Map();
    if (searchType === 'all') {
      results.forEach((value, key) => {
        if (key !== SearchType.CHAT_MESSAGE) {
          filtered.set(key, value);
        }
      });
    } else if (results.has(searchType)) {
      filtered.set(searchType, results.get(searchType));
    } else if (searchType === SearchType.MESSAGE && results.has(SearchType.CHAT_MESSAGE)) {
      filtered.set(searchType, results.get(SearchType.CHAT_MESSAGE));
    }
    return filtered;
  }, [results, variant, searchType, miniInitLimits]);

  const getLoadMoreText = useCallback((type: SearchType) => {
    if (type === SearchType.CHAT_MESSAGE) {
      return t('Search.Load More Messages');
    }
    if (type === SearchType.MESSAGE) {
      return t('Search.Load More Messages');
    }
    if (type === SearchType.USER) {
      return t('Search.Load More Users');
    }
    if (type === SearchType.GROUP) {
      return t('Search.Load More Groups');
    }
    return t('Search.Load More');
  }, [t]);

  const currentResults = filteredResults();
  const chatMessageResult = results?.get(SearchType.CHAT_MESSAGE)
    ?.resultList[0] as unknown as MessageSearchResultItem | undefined;

  const generateActiveItemClassName = (type: SearchType, item: SearchResultItemType) => {
    if (type !== SearchType.MESSAGE || !chatMessageResult) {
      return '';
    }
    const itemConvID = (item as MessageSearchResultItem).conversationID;
    const currentConvID = chatMessageResult.conversationID;
    return itemConvID === currentConvID ? styles['SearchResults__item--active'] : '';
  };

  if (!keyword) {
    return SearchResultsPresearch ? <SearchResultsPresearch /> : <EmptyResult text={t('Search.Enter Keywords to Search')} />;
  }

  if (keyword && error) {
    return <div className={styles.SearchResults__error}>{error.message}</div>;
  }

  if (keyword && isLoading) {
    return <SearchResultsLoading />;
  }

  if (keyword && !results?.size && !isLoading) {
    return <SearchResultsEmpty />;
  }

  if (results && results.size > 0) {
    const allZero = Array.from(results.values()).every(value => value.totalCount === 0);
    if (allZero) {
      return <SearchResultsEmpty />;
    }
  }

  if (keyword && searchType !== 'all') {
    const searchTypeResult = results?.get(searchType);
    const chatMessageResult = searchType === SearchType.MESSAGE
      ? results?.get(SearchType.CHAT_MESSAGE)
      : undefined;
    const searchTypeTotalCount = searchTypeResult?.totalCount
      ?? chatMessageResult?.totalCount
      ?? 0;
    if (searchTypeTotalCount === 0) {
      return <SearchResultsEmpty />;
    }
  }

  let renderOrder = [SearchType.USER, SearchType.GROUP];

  if (variant !== VariantType.EXACT) {
    renderOrder = [SearchType.MESSAGE, SearchType.USER, SearchType.GROUP];
  }

  return (
    <div className={styles.SearchResults}>
      {currentResults?.size > 0
      && (
        <div className={styles.SearchResults__list}>
          {renderOrder.map((type) => {
            const result = currentResults.get(type);
            if (!result || result.totalCount === 0) {
              return null;
            }
            return (
              <div key={type} className={styles['SearchResults__result-section']}>
                {searchType === 'all' && (
                  <div className={styles['SearchResults__section-header']}>
                    <h3>{t(typeLabels[type])}</h3>
                  </div>
                )}
                <div className={styles['SearchResults__result-items']}>
                  {result.resultList.map((item: SearchResultItemType, index: number) => (
                    <div className={generateActiveItemClassName(type, item)} key={`${type}-${index}`}>
                      <SearchResultItem
                        data={item}
                        type={type}
                        keyword={keyword}
                        className={styles['SearchResults__item-border']}
                        onClick={handleClickItem}
                      />
                    </div>
                  ))}
                </div>
                {result.hasMore && (
                  <div className={styles['SearchResults__section-footer']}>
                    <button
                      className={styles['SearchResults__load-more-button']}
                      onClick={() => handleLoadMore(type)}
                      disabled={loadingType === type}
                    >
                      {loadingType === type ? t('Search.Loading') : getLoadMoreText(type)}
                    </button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
      {activeConversationID && (
        <div className={styles.SearchResults__list}>
          { loadingType === SearchType.CHAT_MESSAGE
            ? <SearchResultsLoading />
            : (
              <>
                {variant === VariantType.STANDARD && (
                  <div className={styles['SearchResults__section-header']}>
                    <span className={styles['SearchResults__section-header-title']}>
                      {t('Search.Texts Related to', {
                        count: results?.get(SearchType.CHAT_MESSAGE)?.totalCount || 0,
                      })}
                      <span className={styles.SearchResults__highlight}>
&nbsp;
                        {keyword}
&nbsp;
                      </span>
                      {t('Search.Texts Related to Suffix')}
                    </span>
                    <button
                      className={styles['SearchResults__section-header-action']}
                      onClick={() => handleClickItem(chatMessageResult as any, SearchType.CHAT_MESSAGE)}
                    >
                      {t('Search.Enter Chat')}
                      <IconChevronRight className={styles.SearchResults__highlight} />
                    </button>
                  </div>
                )}
                <div className={styles['SearchResults__result-items']}>
                  {chatMessageResult?.messageList.map((item: MessageInfo, index: number) => (
                    <div key={`${SearchType.CHAT_MESSAGE}-${(item as any).id || item.msgID}-${index}`}>
                      <SearchResultItem
                        data={item}
                        type={SearchType.CHAT_MESSAGE}
                        keyword={keyword}
                        onClick={handleClickItem}
                      />
                    </div>
                  ))}
                </div>
                {results?.get(SearchType.CHAT_MESSAGE)?.hasMore && (
                  <div className={styles['SearchResults__section-footer']}>
                    <button
                      className={styles['SearchResults__load-more-button']}
                      onClick={() => onLoadMore?.(SearchType.CHAT_MESSAGE)}
                      disabled={isLoading}
                    >
                      {isLoading ? t('Search.Loading') : getLoadMoreText(SearchType.CHAT_MESSAGE)}
                    </button>
                  </div>
                )}
              </>
            )}
        </div>
      )}
    </div>
  );
}

export default React.memo(SearchResults);