import { useEffect, useState, useRef, useMemo, type FC } from 'react';
import { Row, Col, Button, Dropdown, Modal, message, Tooltip } from 'antd'
import type { MenuProps } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import folderIcon from '@/assets/images/knowledgeBase/folder.png';
import generalIcon from '@/assets/images/knowledgeBase/datasets.png';
import webIcon from '@/assets/images/knowledgeBase/general.png';
import tpIcon from '@/assets/images/knowledgeBase/text.png';
import type { KnowledgeBaseListItem, CreateModalRef, KnowledgeBaseListResponse, ListQuery } from '@/views/KnowledgeBase/types'
import CreateModal from './components/CreateModal'
import RbCard from '@/components/RbCard'
import SearchInput from '@/components/SearchInput'
import Empty from '@/components/Empty'
import { getKnowledgeBaseList, getModelList, getModelTypeList, deleteKnowledgeBase, getKnowledgeBaseTypeList } from '@/api/knowledgeBase'
const { confirm } = Modal;
import InfiniteScroll from 'react-infinite-scroll-component';
import { useMenu } from '@/store/menu';

type ModelMenuInfo = {
  menu: NonNullable<MenuProps['items']>;
  summary: string[];
};

const KnowledgeBaseManagement: FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<KnowledgeBaseListItem[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [query, setQuery] = useState<ListQuery>({
    orderby:'created_at',
    desc:true,
  })
  const [modelTypes, setModelTypes] = useState<string[]>([]);
  const [modelMenus, setModelMenus] = useState<Record<string, ModelMenuInfo>>({});
  const [knowledgeBaseTypes, setKnowledgeBaseTypes] = useState<string[]>([]);
  const modelListCache = useRef<Record<string, string>>({});
  const modalRef = useRef<CreateModalRef>(null)
  const [messageApi, contextHolder] = message.useMessage();
  
  // 使用 menu store 管理面包屑
  const { allBreadcrumbs, setCustomBreadcrumbs } = useMenu();
  const [folderPath, setFolderPath] = useState<Array<{ id: string; name: string }>>([]);
  

  // 生成下拉菜单项（根据当前 item）
  const getOptMenuItems = (item: KnowledgeBaseListItem): MenuProps['items'] => {
    const items: NonNullable<MenuProps['items']> = [];

    // 当权限为 share 时，不显示编辑按钮
    if (item.permission_id !== 'share') {
      items.push({
        key: '1',
        label: t('knowledgeBase.edit'),
        onClick: () => {
          handleEdit(item);
        },
      });
    }

    items.push({
      key: '2',
      label: t('knowledgeBase.delete'),
      onClick: () => {
        handleDelete(item);
      },
    });

    return items;
  };
  // 根据类型获取图标
  const getTypeIcon = (type: string) => {
    const normalized = (type || '').toLowerCase();
    switch (normalized) {
      case 'general':
        return generalIcon;
      case 'folder':
        return folderIcon;
      case 'web':
        return webIcon;
      case 'third-party':
      case 'tp':
        return tpIcon;
      default:
        return generalIcon;
    }
  };

  // 根据类型获取翻译 key
  const getTypeLabelKey = (type: string) => {
    const normalized = (type || '').toLowerCase();
    switch (normalized) {
      case 'general':
        return 'knowledgeBase.general';
      case 'folder':
        return 'knowledgeBase.folder';
      case 'web':
        return 'knowledgeBase.web';
      case 'third-party':
      case 'tp':
        return 'knowledgeBase.tp';
      default:
        return `knowledgeBase.${normalized}`;
    }
  };

  // 处理创建
  const handleCreate = (type?: string) => {
    // 如果在文件夹内，使用 folderPath 的最后一项作为 parent_id
    // 这样更可靠，因为 folderPath 是直接管理的状态
    const currentParentId = folderPath.length > 0 
      ? folderPath[folderPath.length - 1].id 
      : query.parent_id; // 降级使用 query.parent_id
    
    const record = currentParentId ? {
      parent_id: currentParentId as string,
    } as KnowledgeBaseListItem : null;
    
    modalRef?.current?.handleOpen(record, type)
  }

  // 动态生成 createItems
  const createItems: MenuProps['items'] = useMemo(() => {
    return knowledgeBaseTypes.map((type, index) => ({
      key: String(index + 1),
      icon: <img src={getTypeIcon(type)} alt={type} style={{ width: 16, height: 16 }} />,
      label: t(getTypeLabelKey(type.toLocaleLowerCase())),
      onClick: () => {
        handleCreate(type);
      },
    }));
  }, [knowledgeBaseTypes, t, folderPath, query]);
  const typeToFieldKey = (type: string) => {
    const normalized = (type || '').toLowerCase();
    switch (normalized) {
      case 'embedding':
        return 'embedding_id';
      case 'llm':
        return 'llm_id';
      case 'image2text':
        return 'image2text_id';
      case 'rerank':
      case 'reranker':
        return 'reranker_id';
      case 'chat':
        return 'chat_id';
      default:
        return `${normalized}_id`;
    }
  };
  const formatData = (data: KnowledgeBaseListItem) => {
    const keys: (keyof KnowledgeBaseListItem)[] = ['type', 'permission_id']
    return keys.map(key => ({
      key,
      label: t(`knowledgeBase.${key}`),
      children: key === 'permission_id' 
        ? (data[key] === 'Private' || data[key] === 'private' ? t('knowledgeBase.private') : t('knowledgeBase.share'))
        : String(data[key] || '-'),
    }))
  }
  const fetchModelTypes = async () => {
    try {
      const response = await getModelTypeList();
      setModelTypes(Array.isArray(response) ? [...response.filter(type => type !== 'chat'),'image2text'] : []);
    } catch (error) {
      console.error('Failed to fetch model types:', error);
      setModelTypes([]);
    }
  };
  const fetchModelList = async () => { 
    try {
      const response = await getModelList(['llm', 'embedding', 'rerank', 'chat'], { page: 1, pagesize: 100 });
      // 缓存模型列表，建立 id -> name 的映射
      if (response?.items && Array.isArray(response.items)) {
        const cache: Record<string, string> = {};
        response.items.forEach((model: any) => {
          if (model.id && model.name) {
            cache[model.id] = model.name;
          }
        });
        modelListCache.current = cache;
      }
    } catch (error) {
      console.error('Failed to fetch model list:', error);
    }
  };
  const fetchKnowledgeBaseTypes = async () => {
    try {
      let types = await getKnowledgeBaseTypeList();
      types = types.filter(type => (type === 'General' || type === 'Folder' )); //
      //暂时未实现 ，过滤掉未实现
      setKnowledgeBaseTypes(types);
    } catch (error) {
      console.error('Failed to fetch knowledge base types:', error);
      setKnowledgeBaseTypes([]);
    }
  };
  const getModelNameById = (id?: string | null) => {
    if (!id) return '';
    // 从模型列表缓存中获取模型名称
    return modelListCache.current[id] || '';
  };
  const buildModelMenuForItem = (item: KnowledgeBaseListItem): ModelMenuInfo | null => {
    const entries: { menuItem: NonNullable<MenuProps['items']>[number]; summary: string }[] = [];
    const record = item as unknown as Record<string, unknown>;
    for (const type of modelTypes) {
      const curType = type === 'rerank' ? 'reranker' : type;
      const fieldKey = typeToFieldKey(curType);
      const modelId = record[fieldKey] as string | undefined;
      if (!modelId) continue;
      const modelName = getModelNameById(modelId);
      if (!modelName) continue;
      const typeLabel = t(`knowledgeBase.createForm.${fieldKey}`) || t(`knowledgeBase.${fieldKey}`) || type;
      entries.push({
        menuItem: {
          key: `${fieldKey}_${modelId}`,
          label: (
            <span className="rb:text-gray-500 rb:text-[12px]">
              {typeLabel}: {modelName}
            </span>
          ),
        },
        summary: `${typeLabel}: ${modelName}`,
      });
    }
    if (!entries.length) {
      return null;
    }
    const header: NonNullable<MenuProps['items']>[number] = {
      key: 'header',
      label: (<span className='rb:font-medium'>{t('knowledgeBase.allModels')}</span>),
      disabled: true,
    };
    const menuArray = [header, ...entries.map(({ menuItem }) => menuItem)] as NonNullable<MenuProps['items']>;
    return {
      menu: menuArray,
      summary: entries.map(({ summary }) => summary),
    };
  };
  const buildModelMenus = (items: KnowledgeBaseListItem[], isLoadMore: boolean = false) => {
    const nextMenus: Record<string, ModelMenuInfo> = {};
    items.forEach((item) => {
      const result = buildModelMenuForItem(item);
      if (result) {
        nextMenus[item.id] = result;
      }
    });
    if (isLoadMore) {
      // 加载更多时，合并之前的菜单
      setModelMenus(prev => ({ ...prev, ...nextMenus }));
    } else {
      // 首次加载或刷新时，替换所有菜单
      setModelMenus(nextMenus);
    }
  };

  const fetchData = async (pageNum: number = 1, isLoadMore: boolean = false) => {
    if (!modelTypes.length) return;
    if (loading) return;
    console.log('fetchData called, pageNum:', pageNum, 'isLoadMore:', isLoadMore);
    setLoading(true);
    try {
      const params = {
        ...query,
        page: pageNum,
        pagesize: 9,
        orderby:'created_at',
        desc:true,
      }
      const res = await getKnowledgeBaseList(undefined, params);
      const response = res as KnowledgeBaseListResponse & { items?: KnowledgeBaseListItem[] };
      console.log('API response:', response);
      const list = response.items || [];
      const curDatas = list.map((item: KnowledgeBaseListItem) => ({
        ...item,
        descriptionItems: formatData(item),
      }));
      
      if (isLoadMore) {
        setData(prev => [...prev, ...curDatas]);
      } else {
        setData(curDatas);
        // 重置分页状态，确保从第一页开始
        setPage(1);
      }

      // 更新是否有更多数据
      const hasNext = response.page?.has_next ?? false;
      console.log('hasNext:', hasNext, 'response.page:', response.page);
      setHasMore(hasNext);

      buildModelMenus(list, isLoadMore);
    } catch (error) {
      console.error('Failed to fetch knowledge base list:', error);
      if (!isLoadMore) {
        setData([]);
        setModelMenus({});
        setPage(1);
      }
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }

  const loadMore = () => {
    console.log('loadMore called, loading:', loading, 'hasMore:', hasMore, 'page:', page);
    if (loading || !hasMore) return;
    const nextPage = page + 1;
    setPage(nextPage);
    fetchData(nextPage, true);
  }
  
  // 创建一个稳定的刷新函数供子组件调用
  const handleRefresh = () => {
    fetchData(1, false);
  }

  
  const handleSearch = (value?: string) => {
    setQuery((prev) => ({
      ...prev,
      keywords: value,
    }))
  }
  // 处理编辑
  const handleEdit = (item: KnowledgeBaseListItem) => {
    modalRef?.current?.handleOpen(item, item.type);
  };

  // 处理删除
  const handleDelete = (item: KnowledgeBaseListItem) => {
    confirm({
      title: t('common.deleteWarning'),
      content: t('common.deleteWarningContent', { content: item.name }),
      onOk: () => {
        deleteKnowledgeBase(item.id).then((res) => {
          if (res) {
            messageApi.success(t('common.deleteSuccess'));
            fetchData(1, false);
          }
        });
      },
      onCancel: () => {
        console.log('取消删除');
      },
    });
  };
  // 处理跳转详情
  const handleToDetail = (knowledgeBase: KnowledgeBaseListItem) => {
    // 如果是 Folder 类型，刷新当前页面，显示该文件夹下的知识库列表
    if (knowledgeBase.type === 'Folder' || knowledgeBase.type === 'folder') {
      // 添加到文件夹路径
      const newFolderPath = [
        ...folderPath,
        {
          id: knowledgeBase.id,
          name: knowledgeBase.name,
        },
      ];
      setFolderPath(newFolderPath);
      
      setQuery((prev) => ({
        ...prev,
        parent_id: knowledgeBase.id,
      }));
      return;
    }
    
    // 根据权限类型跳转到不同的详情页
    if (knowledgeBase.permission_id === 'Private' || knowledgeBase.permission_id === 'private') {
      navigate(`/knowledge-base/${knowledgeBase.id}/private`)
    } else {
      navigate(`/knowledge-base/${knowledgeBase.id}/share`)
    }
  }
  // 更新面包屑的函数
  const updateBreadcrumbs = () => {
    const baseBreadcrumbs = allBreadcrumbs['space'] || [];
    // 只保留知识库菜单项之前的面包屑
    const knowledgeBaseMenuIndex = baseBreadcrumbs.findIndex(item => item.path === '/knowledge-base');
    const filteredBaseBreadcrumbs = knowledgeBaseMenuIndex >= 0 
      ? baseBreadcrumbs.slice(0, knowledgeBaseMenuIndex + 1)
      : baseBreadcrumbs;
    
    // 给"知识库管理"添加点击事件，返回根目录
    const breadcrumbsWithClick = filteredBaseBreadcrumbs.map((item) => {
      if (item.path === '/knowledge-base') {
        return {
          ...item,
          onClick: (e?: React.MouseEvent) => {
            e?.preventDefault();
            e?.stopPropagation();
            // 返回根目录
            setFolderPath([]);
            setQuery((prev) => ({
              ...prev,
              parent_id: undefined,
            }));
            return false;
          },
        };
      }
      return item;
    });
    
    const customBreadcrumbs = [
      ...breadcrumbsWithClick,
      ...folderPath.map((folder, index) => ({
        id: 0,
        parent: 0,
        code: null,
        label: folder.name,
        i18nKey: null,
        path: null,
        enable: true,
        display: true,
        level: 0,
        sort: 0,
        icon: null,
        iconActive: null,
        menuDesc: null,
        deleted: null,
        updateTime: 0,
        new_: null,
        keepAlive: false,
        master: null,
        disposable: false,
        appSystem: null,
        subs: [],
        onClick: (e?: React.MouseEvent) => {
          e?.preventDefault();
          e?.stopPropagation();
          // 点击文件夹，回到该文件夹层级
          const newFolderPath = folderPath.slice(0, index + 1);
          setFolderPath(newFolderPath);
          setQuery((prev) => ({
            ...prev,
            parent_id: folder.id,
          }));
          return false;
        },
      })),
    ];

    setCustomBreadcrumbs(customBreadcrumbs, 'space');
  };

  // 更新面包屑
  useEffect(() => {
    updateBreadcrumbs();
  }, [folderPath]);

  useEffect(() => {
    fetchModelTypes();
    fetchKnowledgeBaseTypes();
    fetchModelList();
  }, [])
  useEffect(() => {
    if (modelTypes.length) {
      fetchData(1, false);
    }
  }, [modelTypes, query])

  return (
    <>
      {contextHolder}
      <div className="rb:flex rb:justify-between rb:px-2 rb:mb-4">
        <SearchInput
          placeholder={t('knowledgeBase.searchPlaceholder')}
          onSearch={handleSearch}
          style={{ width: '32.666%' }}
        />
        
        <Dropdown menu={{ items: createItems }} trigger={['click']}>
          <Button type="primary">+ {t('knowledgeBase.createKnowledgeBase')}</Button>
        </Dropdown>
      </div>
      <div id="scrollableDiv" style={{ height: 'calc(100vh - 120px)', overflowY: 'auto', overflowX: 'hidden' }}>
      <InfiniteScroll
        dataLength={data.length}
        next={loadMore}
        hasMore={hasMore && !loading}
        loader={<div className="rb:text-center rb:py-4">{t('common.loading')}</div>}
        endMessage={
          data.length > 0 ? (
            <div className="rb:text-center rb:py-4 rb:text-gray-400">
              {t('common.noMoreData')}
            </div>
          ) : null
        }
        
        scrollThreshold={0.9}
        scrollableTarget="scrollableDiv"
        style={{ overflow: 'visible', width: '100%' }}
      >
        {data.length === 0 && !loading ? (
          <Empty size={200} />
        ) : (
          <Row gutter={[16, 16]} className="rb:mb-2" style={{ margin: 0 }}>
            {data.map((item) => {
            const modelInfo = modelMenus[item.id];
            const hasModelInfo = modelInfo && modelInfo.menu.length > 1;
            return (
              <Col xs={12} sm={12} md={12} lg={8} xl={8} key={item.id} >
                <RbCard
                  title={item.name}
                  className='rb:min-h-[198px]'
                  extra={
                    <div onClick={(e) => e.stopPropagation()}>
                      <Dropdown menu={{ items: getOptMenuItems(item) }} >
                        <EllipsisOutlined className="rb:cursor-pointer" />
                      </Dropdown>
                    </div>
                  }
                >
                  <div className='rb:min-h-[158px]' onClick={() => handleToDetail(item)}>
                    <div className='rb:min-h-[124px]'>
                    {item.descriptionItems?.map((description: Record<string, unknown>) => (
                        <div 
                        key={description.key as string}
                        className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px]"
                        >
                        <div className="rb:whitespace-nowrap rb:w-20">{(description.label as string)}</div>
                        <div className={clsx('rb:flex-inline rb:text-left rb:py-[1px] rb:rounded rb:font-medium',{
                            "rb:text-[#155eef] rb:bg-[rgba(21,94,239,0.06)] rb:px-2 rb:border rb:border-[rgba(21,94,239,0.25)] rb:font-medium": (description.key as string) === 'permission_id' && (description.children as string) === t('knowledgeBase.private'),
                            "rb:text-[#369F21] rb:bg-[rgba(54,159,33,0.06)] rb:px-2 rb:border rb:border-[rgba(54,159,33,0.25);] rb:font-medium": (description.key as string) === 'permission_id' && (description.children as string) === t('knowledgeBase.share'),
                        })}>{(description.children as string)}</div>
                        </div>
                    ))}
                    {item.description && (
                        <div className="rb:flex rb:text-[#5B6167] rb:h-10 rb:line-clamp-2 rb:text-sm rb:leading-5 rb:mb-3 rb:gap-4">
                        <div className="rb:font-medium rb:w-20">{t('knowledgeBase.description')} </div>
                        <Tooltip title={item.description}>
                          <div className='rb:flex-1 rb:text-left rb:leading-5 rb:text-gray-800 rb:break-words rb:line-clamp-2'>{item.description || t('knowledgeBase.noDescription')}</div>
                        </Tooltip>
                        </div>
                    )}
                    </div>
                    {hasModelInfo && (
                      <Dropdown menu={{ items: modelInfo.menu }}>
                        <div
                          className="rb:flex rb:text-gray-500 rb:px-3 rb:py-2 rb:text-[12px] rb:leading-4 rb:mb-2 rb:bg-[#F0F3F8] rb:rounded"
                          onClick={(e) => e.stopPropagation()}
                        >
                            <span>{t('knowledgeBase.models')}:</span>
                            <span className="rb:ml-1 rb:truncate rb:max-w-[200px]">
                              {modelInfo.summary.join('、')}
                            </span>
                        </div>
                      </Dropdown>
                    )}
                  </div>
                </RbCard>
              </Col>
            )})}
          </Row>
        )}
      </InfiniteScroll>

      <CreateModal
        ref={modalRef}
        refreshTable={handleRefresh}
      />
      </div>
    </>
  )
}

export default KnowledgeBaseManagement