import type React from 'react';
import { useCallback, useState } from 'react';
import {
  IconSearch,
  useUIKit,
} from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Avatar, useContactStore, useGroupStore } from 'tuikit-atomicx-react/chat';
import { Input } from '../../../baseComp/Input';
import { HighlightText } from '../shared/HighlightText';
import { handleSearchError } from '../shared/utils/handleSearchError';
import { renderSearchResultItem } from '../shared/renderSearchResultItem';
import styles from './ExactSearch.module.scss';
import type { ContactInfo, GroupInfo, UserProfile, GroupSearchInfo } from 'tuikit-atomicx-react/chat';
import type { SearchResultItemComponent } from '../shared/renderSearchResultItem';
import { SearchType as UISearchType } from '../../../types/search';

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

/**
 * Discriminated union returned by onResultItemClick.
 * data types are the raw SDK types — no intermediate mapping.
 * Consumers narrow with `result.type === 'user'` for full type inference.
 */
export type ExactSearchResult =
  | { type: 'user'; data: ContactInfo }
  | { type: 'group'; data: GroupInfo };

export interface ExactSearchProps {
  /** Called when a result row is clicked. */
  onResultItemClick?: (result: ExactSearchResult) => void;
  /** Called on every keyword change. */
  onKeywordChange?: (keyword: string) => void;
  /**
   * When provided, a cancel button is rendered next to the search input.
   * Clicking it calls this callback (e.g. to hide the search UI).
   */
  onCancel?: () => void;
  /** Label for the cancel button. Only shown when onCancel is provided. */
  cancelText?: string;
  /**
   * Placeholder for the search input. Defaults to the i18n key
   * `Search.exact_search_placeholder` ("Search by User ID or Group ID").
   */
  searchInputPlaceholder?: string;
  SearchResultItem?: SearchResultItemComponent | undefined;
  className?: string;
  style?: React.CSSProperties;
  autoFocus?: boolean;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function ExactSearch({
  onResultItemClick,
  onKeywordChange,
  onCancel,
  cancelText,
  searchInputPlaceholder,
  SearchResultItem,
  className,
  style,
  autoFocus = false,
}: ExactSearchProps) {
  const { t } = useUIKit();
  const { getContactInfo } = useContactStore();
  const { getGroupInfo } = useGroupStore();

  const [keyword, setKeyword] = useState('');
  const [userResults, setUserResults] = useState<ContactInfo[]>([]);
  const [groupResults, setGroupResults] = useState<GroupInfo[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  // Distinguishes "not searched yet" (show nothing) from "searched, got zero results" (show empty).
  const [hasSearched, setHasSearched] = useState(false);

  const resetResults = useCallback(() => {
    setUserResults([]);
    setGroupResults([]);
    setHasSearched(false);
    setError(null);
  }, []);

  const doSearch = useCallback(async (kw: string) => {
    const trimmed = kw.trim();
    if (!trimmed) {
      return;
    }

    setIsLoading(true);
    setError(null);
    setUserResults([]);
    setGroupResults([]);
    setHasSearched(true);

    try {
      const [usersResult, groupResult] = await Promise.allSettled([
        getContactInfo([trimmed]),
        getGroupInfo(trimmed),
      ]);

      if (usersResult.status === 'fulfilled') {
        setUserResults(usersResult.value.filter(u => !!u.userID));
      }
      if (groupResult.status === 'fulfilled' && groupResult.value?.groupID) {
        setGroupResults([groupResult.value]);
      }
    } catch (err) {
      setError(handleSearchError(t, err));
    } finally {
      setIsLoading(false);
    }
  }, [getContactInfo, getGroupInfo, t]);

  // Input expects ChangeEvent<HTMLInputElement | HTMLTextAreaElement>.
  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const val = e.target.value;
    setKeyword(val);
    resetResults();
    onKeywordChange?.(val);
  }, [onKeywordChange, resetResults]);

  // Input expects KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>.
  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    if (e.key === 'Enter') {
      doSearch(keyword);
    }
  }, [doSearch, keyword]);

  const handleClear = useCallback(() => {
    setKeyword('');
    resetResults();
    onKeywordChange?.('');
  }, [onKeywordChange, resetResults]);

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

  return (
    <div className={cs(styles.ExactSearch, className)} style={style}>

      {/* Search bar row: [input] [cancel button?] */}
      <div className={styles.ExactSearch__bar}>
        <Input
          className={styles.ExactSearch__input}
          prefix={<IconSearch />}
          clearable
          value={keyword}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          onClear={handleClear}
          placeholder={searchInputPlaceholder ?? t('Search.exact_search_placeholder')}
          autoFocus={autoFocus}
          enterKeyHint="search"
        />
        {onCancel && (
          <span className={styles.ExactSearch__cancel} onClick={onCancel}>
            {cancelText}
          </span>
        )}
      </div>

      {/* State views */}
      {isLoading && (
        <div className={styles.ExactSearch__status}>{t('Search.loading')}</div>
      )}
      {error && (
        <div className={cs(styles.ExactSearch__status, styles['ExactSearch__status--error'])}>
          {error}
        </div>
      )}
      {isEmpty && (
        <div className={styles.ExactSearch__status}>{t('Search.no_result')}</div>
      )}

      {/* Results */}
      {!isLoading && !error && (userResults.length > 0 || groupResults.length > 0) && (
        <div className={styles.ExactSearch__results}>
          {userResults.length > 0 && (
            <div className={styles.ExactSearch__section}>
              <div className={styles.ExactSearch__sectionHeader}>
                <h3>{t('Search.Users')}</h3>
              </div>
              {userResults.map((user: ContactInfo) => renderSearchResultItem(
                SearchResultItem,
                {
                  keyword,
                  data: { profile: user as unknown as UserProfile },
                  type: UISearchType.USER,
                  onClick: () => onResultItemClick?.({ type: 'user', data: user }),
                },
                <div
                  key={user.userID}
                  className={styles.ExactSearch__row}
                  onClick={() => onResultItemClick?.({ type: 'user', data: user })}
                >
                  <Avatar src={user.avatarURL || ''} alt={user.nickname || ''} />
                  <div
                    className={`${styles.ExactSearch__info} ${user.aboutMe ? styles['ExactSearch__info--withSub'] : ''}`}
                  >
                    <div className={styles.ExactSearch__name}>
                      <HighlightText text={user.nickname || user.userID} keyword={keyword} />
                    </div>
                    {user.aboutMe && (
                      <div className={styles.ExactSearch__sub}>
                        <HighlightText text={user.aboutMe} keyword={keyword} />
                      </div>
                    )}
                  </div>
                </div>,
              ))}
            </div>
          )}
          {groupResults.length > 0 && (
            <div className={styles.ExactSearch__section}>
              <div className={styles.ExactSearch__sectionHeader}>
                <h3>{t('Search.Groups')}</h3>
              </div>
              {groupResults.map(group => renderSearchResultItem(
                SearchResultItem,
                {
                  keyword,
                  data: { groupInfo: group as unknown as GroupSearchInfo },
                  type: UISearchType.GROUP,
                  onClick: () => onResultItemClick?.({ type: 'group', data: group }),
                },
                <div
                  key={group.groupID}
                  className={styles.ExactSearch__row}
                  onClick={() => onResultItemClick?.({ type: 'group', data: group })}
                >
                  <Avatar src={group.avatarURL || ''} alt={group.groupName || ''} />
                  <div
                    className={`${styles.ExactSearch__info} ${group.notification ? styles['ExactSearch__info--withSub'] : ''}`}
                  >
                    <div className={styles.ExactSearch__name}>
                      <HighlightText text={group.groupName || group.groupID} keyword={keyword} />
                    </div>
                    {group.notification && (
                      <div className={styles.ExactSearch__sub}>
                        <HighlightText text={group.notification} keyword={keyword} />
                      </div>
                    )}
                  </div>
                </div>,
              ))}
            </div>
          )}
        </div>
      )}

    </div>
  );
}

export default ExactSearch;