import { observer, useStore } from '@/stores/utils';
import { Button, Dropdown, MenuProps, Skeleton, Modal } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import './index.scss';
import { isApp } from '@/utils/tools';

interface IProps {
  closeSideBarDrawer?: () => void;
}

const items: MenuProps['items'] = [
  {
    label: (
      <div className='flex_left dangerColor'>
        <i className='iconfont icon-shanchu1'></i>
        <span className='ml-8'>删除</span>
      </div>
    ),
    key: '0',
  },
];

const Nav = (props: IProps) => {
  const { closeSideBarDrawer } = props;
  const { ChatStore } = useStore();
  const [modal, ctx] = Modal.useModal();
  const {
    siderNavCollapsed,
    setCollapsed,
    conversationList,
    hasMore,
    onAddConversation,
    onDeleteConversation,
    onClickConversation,
    getGroupConversationList,
    conversationID,
    getConversationList,
  } = ChatStore;

  const onDeleteClick = (conversationId: string) => {
    modal.confirm({
      title: '删除会话',
      content: '对话记录删除后无法恢复，确认删除吗？',
      onOk: () => {
        onDeleteConversation(conversationId);
      },
    });
  };

  const list = getGroupConversationList(conversationList);

  return (
    <div className='nav_content'>
      <div className='px-12 py-20'>
        <div className='flex_sb'>
          <div className='logo_wrap'>
            <h2 className='logo_text'>AI搭子</h2>
          </div>
          <div
            className='nav_btn flex_c'
            onClick={() => {
              if (isApp) {
                closeSideBarDrawer && closeSideBarDrawer();
              } else {
                setCollapsed(!siderNavCollapsed);
              }
            }}
          >
            <svg
              viewBox='0 0 1024 1024'
              xmlns='http://www.w3.org/2000/svg'
              width='16'
              height='16'
            >
              <path
                d='M448.881 517.589l-0.083 0.083 44.691 44.691 0.083-0.083 268.062 268.062 44.691-44.691-268.062-268.062 268.062-268.062-44.691-44.691-312.754 312.754zM196.070 517.589l-0.083 0.083 44.691 44.691 0.083-0.083 268.062 268.062 44.691-44.691-268.062-268.062 268.062-268.062-44.691-44.691-312.754 312.754z'
                fill='currentColor'
              ></path>
            </svg>
          </div>
        </div>
        <Button
          className='new_chat_btn'
          icon={
            <svg
              viewBox='0 0 1024 1024'
              xmlns='http://www.w3.org/2000/svg'
              width='16'
              height='16'
            >
              <path
                d='M853.333333 554.666667 554.666667 554.666667l0 298.666667c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667L469.333333 554.666667 170.666667 554.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667 0-23.466667 19.2-42.666667 42.666667-42.666667l298.666667 0L469.333333 170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667l0 298.666667 298.666667 0c23.466667 0 42.666667 19.2 42.666667 42.666667C896 535.466667 876.8 554.666667 853.333333 554.666667z'
                fill='currentColor'
              ></path>
            </svg>
          }
          onClick={() => {
            closeSideBarDrawer && closeSideBarDrawer();
            onAddConversation();
          }}
        >
          开启新对话
        </Button>
      </div>
      <div
        className='conversation_history'
        id='scrollableDiv'
      >
        <InfiniteScroll
          dataLength={conversationList.length}
          hasMore={hasMore}
          loader={
            <Skeleton
              title={false}
              active
            />
          }
          next={getConversationList}
          scrollableTarget='scrollableDiv'
        >
          {list.map((item) => {
            return (
              <div
                className='time_section'
                key={item.label}
              >
                <div className='time_header'>{item.label}</div>
                {item.list.map((child) => {
                  return (
                    <div
                      className={`list_item ${
                        child.id === conversationID ? 'active' : ''
                      }`}
                      key={child.id}
                      onClick={() => {
                        closeSideBarDrawer && closeSideBarDrawer();
                        onClickConversation(child.id);
                      }}
                    >
                      <div className='item_text'>{child.content}</div>
                      <Dropdown
                        menu={{
                          items,
                          onClick: (e) => {
                            e.domEvent.stopPropagation(); // ✅ 阻止事件冒泡
                            onDeleteClick(child.id);
                          },
                        }}
                        trigger={['click']}
                      >
                        <div
                          className='more_btn'
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        >
                          <i className='iconfont icon-gengduo1'></i>
                        </div>
                      </Dropdown>
                      <div className='item_mask'></div>
                      <div className='hover_mask'></div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </InfiniteScroll>
      </div>
      {ctx}
    </div>
  );
};

export default observer(Nav);
