import React, { useEffect } from 'react';
import { useUIKit, IconChevronRight } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { ContactStore, GroupStore } from 'tuikit-atomicx-react/chat';
import {
  ContactItemType,
} from '../../types/contact';
import styles from './ContactList.module.scss';
import { ContactListItem } from './ContactListItem';
import { ContactSearch } from './ContactSearch';
import { useContactList } from './hooks/useContactList';
import { buildFriendSections } from './utils/buildFriendSections';
import type {
  ContactGroupItem,
  FriendApplicationInfo,
  GroupApplicationInfo,
  ContactListProps,
  ContactGroup,
  CustomGroupConfig,
  ContactLetterSection,
  ContactItem } from '../../types/contact';

export const ContactList: React.FC<ContactListProps> = (props) => {
  const { t, language, i18n, direction } = useUIKit();
  const { activeContact, setActiveContact, setContactGroupTitles } = useContactList();

  const { friendList, blackList, friendApplicationList, friendApplicationUnreadCount, loadFriends, loadBlackList, loadFriendApplications, acceptFriendApplication, refuseFriendApplication, clearFriendApplicationUnreadCount } = ContactStore();
  const { joinedGroupList, applicationList, unreadApplicationCount: groupApplicationUnreadCount, loadJoinedGroups, loadApplications, acceptApplication, refuseApplication, clearApplicationUnreadCount } = GroupStore();

  useEffect(() => {
    loadFriends();
    loadBlackList();
    loadFriendApplications();
    loadJoinedGroups();
    loadApplications();
  }, []);

  const defaultGroupTitles: Partial<Record<ContactItemType, string>> = React.useMemo(() => {
    const translate = i18n.getFixedT(language);

    return {
      [ContactItemType.FRIEND_REQUEST]: translate('ContactList.new_contacts'),
      [ContactItemType.GROUP_REQUEST]: translate('ContactList.group_applications'),
      [ContactItemType.FRIEND]: translate('ContactList.my_friends'),
      [ContactItemType.GROUP]: translate('ContactList.my_groups'),
      [ContactItemType.BLACK]: translate('ContactList.blacklist'),
    };
  }, [i18n, language]);

  useEffect(() => {
    setContactGroupTitles(defaultGroupTitles);
  }, [defaultGroupTitles, setContactGroupTitles]);

  const {
    activeContactItem,
    enableSearch = true,
    groupConfig = {},

    className,
    style,

    searchPlaceholder = t('ContactList.search_contacts'),
    searchInputPlaceholder,
    emptyText = t('ContactList.no_contacts'),

    ContactItem: CustomContactItem,
    ContactSearchComponent: CustomSearchComponent,
    GroupHeader,
    PlaceholderEmptyList,

    onContactItemClick,
    onFriendApplicationAction,
    onGroupApplicationAction,
  } = props;

  useEffect(() => {
    if (activeContactItem) {
      setActiveContact(activeContactItem);
    }
  }, [activeContactItem, setActiveContact]);

  const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(
    new Set(),
  );

  const toggleGroupExpanded = (groupKey: string) => {
    const newExpanded = new Set(expandedGroups);
    const wasExpanded = newExpanded.has(groupKey);

    if (wasExpanded) {
      newExpanded.delete(groupKey);
    } else {
      newExpanded.add(groupKey);
      // Clear unread count when expanding
      if (groupKey === ContactItemType.FRIEND_REQUEST && friendApplicationUnreadCount > 0) {
        clearFriendApplicationUnreadCount();
      }
      if (groupKey === ContactItemType.GROUP_REQUEST && groupApplicationUnreadCount > 0) {
        clearApplicationUnreadCount();
      }
    }
    setExpandedGroups(newExpanded);
  };

  const contactGroups: ContactGroup[] = React.useMemo(() => {
    const friendSections = buildFriendSections(friendList);

    const groupConfigs = [
      {
        type: ContactItemType.FRIEND_REQUEST,
        title: defaultGroupTitles[ContactItemType.FRIEND_REQUEST],
        items: friendApplicationList,
        unreadCount: friendApplicationUnreadCount,
        showTotalCount: false,
        order: 1,
      },
      {
        type: ContactItemType.GROUP_REQUEST,
        title: defaultGroupTitles[ContactItemType.GROUP_REQUEST],
        items: applicationList,
        unreadCount: groupApplicationUnreadCount,
        showTotalCount: false,
        order: 2,
      },
      {
        type: ContactItemType.FRIEND,
        title: defaultGroupTitles[ContactItemType.FRIEND],
        items: friendList,
        count: friendList.length,
        sections: friendSections,
        showTotalCount: true,
        order: 3,
      },
      {
        type: ContactItemType.GROUP,
        title: defaultGroupTitles[ContactItemType.GROUP],
        items: joinedGroupList,
        count: joinedGroupList.length,
        showTotalCount: true,
        order: 4,
      },
      {
        type: ContactItemType.BLACK,
        title: defaultGroupTitles[ContactItemType.BLACK],
        items: blackList,
        count: blackList.length,
        showTotalCount: true,
        order: 5,
      },
    ];

    const customGroupConfig = groupConfig as Record<ContactItemType, CustomGroupConfig>;

    const groups = groupConfigs
      .filter(config => !customGroupConfig[config.type]?.hidden)
      .map(config => ({
        key: config.type,
        type: config.type,
        title: customGroupConfig[config.type]?.title
          ?? config.title
          ?? '',
        items: config.items,
        ...(config.count !== undefined && { count: config.count }),
        ...(config.sections !== undefined && { sections: config.sections }),
        ...(config.unreadCount !== undefined && { unreadCount: config.unreadCount }),
        ...(config.showTotalCount !== undefined && { showTotalCount: config.showTotalCount }),
        isExpanded: expandedGroups.has(config.type),
        order: customGroupConfig[config.type]?.order ?? config.order,
      }))
      .sort((a, b) => a.order - b.order);

    return groups;
  }, [
    defaultGroupTitles,
    friendApplicationList,
    friendApplicationUnreadCount,
    applicationList,
    friendList,
    joinedGroupList,
    blackList,
    groupConfig,
    expandedGroups,
  ]);

  const getItemId = (item: ContactItem): string => {
    if ('userID' in item) {
      return item.userID;
    }
    if ('groupID' in item) {
      return item.groupID;
    }
    return '';
  };

  const handleContactClick = (type: ContactItemType, item: ContactItem) => {
    const contactGroupItem: ContactGroupItem = { type, data: item };
    onContactItemClick?.(contactGroupItem);
    setActiveContact(contactGroupItem);
  };

  const handleFriendApplicationAction = async (action: 'accept' | 'refuse', application: FriendApplicationInfo) => {
    try {
      if (action === 'accept') {
        await acceptFriendApplication(application);
      } else {
        await refuseFriendApplication(application);
      }
      onFriendApplicationAction?.(action, application);
    } catch (error) {
      console.error(`Failed to ${action} friend application:`, error);
    }
  };

  const handleGroupApplicationAction = async (action: 'accept' | 'refuse', application: GroupApplicationInfo) => {
    try {
      if (action === 'accept') {
        await acceptApplication(application);
      } else {
        await refuseApplication(application);
      }
      onGroupApplicationAction?.(action, application);
    } catch (error) {
      console.error(`Failed to ${action} group application:`, error);
    }
  };

  const renderGroupHeader = (group: ContactGroup) => {
    if (GroupHeader) {
      return <GroupHeader data={group} onClick={() => toggleGroupExpanded(group.key)} />;
    }

    return (
      <div
        className={styles.contactList__groupHeader}
        onClick={() => toggleGroupExpanded(group.key)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            toggleGroupExpanded(group.key);
          }
        }}
      >
        <div className={styles.contactList__groupTitle}>
          <span
            className={cs(
              styles.contactList__groupIcon,
              group.isExpanded && styles['contactList__groupIcon--expanded'],
            )}
          >
            <IconChevronRight />
          </span>
          <span className={styles.contactList__groupName}>{group.title}</span>
        </div>
        {group.showTotalCount && (
          <div className={styles.contactList__groupCount}>{group.count ?? 0}</div>
        )}
        {!group.showTotalCount && group.unreadCount !== undefined && group.unreadCount > 0 && (
          <div className={styles.contactList__unreadBadge}>
            {group.unreadCount > 99 ? '99+' : group.unreadCount}
          </div>
        )}
      </div>
    );
  };

  const ContactItemComponent = CustomContactItem || ContactListItem;

  const renderContactItem = (item: ContactItem, type: ContactItemType, index: number) => (
    <ContactItemComponent
      key={`${type}_${getItemId(item)}_${index}`}
      contactItem={{
        data: item,
        type,
      }}
      activeContactItem={activeContact}
      onClick={handleContactClick}
      onFriendApplicationAction={handleFriendApplicationAction}
      onGroupApplicationAction={handleGroupApplicationAction}
    />
  );

  const renderFriendSections = (sections: ContactLetterSection[]) => (
    <div className={styles.contactList__groupContent}>
      {sections.map(section => (
        <section key={section.key} className={styles.contactList__section}>
          <div className={styles.contactList__sectionHeader}>
            <span className={styles.contactList__sectionTitle}>{section.title}</span>
            <span className={styles.contactList__sectionCount}>
              (
              {section.count}
              )
            </span>
          </div>
          {section.items.map((friend, index) => renderContactItem(friend, ContactItemType.FRIEND, index))}
        </section>
      ))}
    </div>
  );

  const renderGroupContent = (group: ContactGroup) => {
    if (!group.isExpanded) {
      return null;
    }

    if (group.type === ContactItemType.FRIEND && group.sections?.length) {
      return renderFriendSections(group.sections);
    }

    return (
      <div className={styles.contactList__groupContent}>
        {group.items.map((contactItem: ContactItem, index: number) => renderContactItem(contactItem, group.type, index))}
      </div>
    );
  };

  const renderContactGroup = (group: ContactGroup) => (
    <div key={group.key} className={styles.contactList__group}>
      {renderGroupHeader(group)}
      {renderGroupContent(group)}
    </div>
  );

  const renderPlaceholderEmpty = () => {
    if (PlaceholderEmptyList) {
      return PlaceholderEmptyList;
    }

    return (
      <div className={styles.contactList__empty}>
        <div className={styles.contactList__emptyText}>
          {emptyText}
        </div>
      </div>
    );
  };

  const renderSearch = () => {
    if (!enableSearch) {
      return null;
    }

    const SearchComponent = CustomSearchComponent || ContactSearch;

    return (
      <div className={styles.contactList__search}>
        <SearchComponent
          onResultClick={(item: ContactGroupItem) => {
            handleContactClick?.(item.type, item.data);
          }}
          placeholder={searchPlaceholder}
          {...(searchInputPlaceholder !== undefined && { searchInputPlaceholder })}
        />
      </div>
    );
  };

  return (
    <div
      className={cs(
        styles.contactList,
        className,
      )}
      style={style}
      dir={direction}
    >
      <div className={styles.contactList__container}>
        <div className={styles.contactList__main}>
          {renderSearch()}
          <div className={styles.contactList__content}>
            {contactGroups.length > 0
              ? (
                contactGroups.map(renderContactGroup)
              )
              : (
                renderPlaceholderEmpty()
              )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactList;