/* eslint-disable @typescript-eslint/no-use-before-define */
import { CODE } from '@/constants/images.constants';
import { deleteTool, getToollList } from '@/services/imagePage';
import { SettingOutlined,PlusOutlined } from '@ant-design/icons';
import {
  Button,
  Checkbox,
  Input,
  message,
  Modal,
  Popconfirm,
  Popover,
  Space,
  Table,
  Tooltip,
} from 'antd';
import dayjs from 'dayjs';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import useTableParams from './hook/hook';
import './index.less';
import UploadFileModal from './uploadFileModal';

import { ReactComponent as RefreshIcon } from '@/assets/icons/refresh.svg';

// 列配置定义
type ColumnConfig = {
  key: string;
  title: string;
  dataIndex?: string;
  width: number;
  render?: (text: any, record: any, index: number) => React.ReactNode;
  fixed?: 'left' | 'right';
  align?: 'left' | 'center' | 'right';
  defaultVisible: boolean; // 默认是否显示
  alwaysVisible?: boolean; // 始终显示的列
  ellipsis?: boolean; // 是否启用省略号
  filters?: { text: string; value: string }[];
  filterMultiple?: boolean; // 是否多选过滤
  filterDropdown?: (props: any) => React.ReactNode;
  defaultFilteredValue?: string[]; // 默认过滤值
  onFilter?: (value: string, record: any) => boolean;
};

type TableColumn = {
  title: string;
  dataIndex?: string;
  key: string;
  width: number;
  render?: any;
  fixed?: 'left' | 'right';
  hidden?: boolean;
};

// 在组件顶部添加防抖函数（支持取消）

// 增强版防抖函数，使用泛型明确函数类型
const debounce = <T extends (...args: any[]) => any>(
  func: T,
  delay: number,
  immediate = false,
) => {
  let timer: NodeJS.Timeout | null = null;

  const debounced = (...args: Parameters<T>) => {
    if (timer) clearTimeout(timer);

    if (immediate && !timer) {
      func(...args);
    }

    timer = setTimeout(() => {
      if (!immediate) {
        func(...args);
      }
      timer = null;
    }, delay);
  };

  debounced.cancel = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };

  return debounced;
};

const Index: React.FC<DESK.ImagesProps> = (props) => {
  const { activeTabKey } = props;
  const [dataSource, setDataSource] = useState<TOOL.ToolItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedImage, setSelectedImage] = useState<any>(null);
  const [importModalVisible, setImportModalVisible] = useState(false);
  const [searchText, setSearchText] = useState<string>(''); // 添加本地搜索状态

  const { tableParams, getApiParams, updateParams, handleTableChange } =
    useTableParams({
      pagination: {
        current: 1,
        pageSize: 10,
      },
      search: {}, // 初始化搜索参数
    });

  // 在组件顶部添加一个 ref 来保存最新的 tableParams
  const tableParamsRef = useRef(tableParams);
  tableParamsRef.current = tableParams; // 每次渲染时更新 ref 的值

  const [columnSettingsVisible, setColumnSettingsVisible] = useState(false);

  // 表格参数变化 获取镜像列表
  useEffect(() => {
    if (activeTabKey === '4') {
      loadDataSource();
    }
  }, [
    activeTabKey,
    tableParams.pagination?.current,
    tableParams.pagination?.pageSize,
    tableParams?.sortOrder,
    tableParams?.sortField,
    JSON.stringify(tableParams.filters), // 表格搜索参数
    JSON.stringify(tableParams.search), // 搜索参数依赖
  ]);

  // 定义所有列的配置
  const columnConfigs: ColumnConfig[] = [
    {
      key: 'index',
      title: '序号',
      width: 60,
      render: (text: any, row: any, index: number) =>
        (tableParams.pagination?.current - 1) *
          tableParams.pagination?.pageSize +
        index +
        1,
      defaultVisible: true,
      alwaysVisible: true,
    },
    {
      key: 'tool_name',
      // title: '镜像名称',
      title: '文件名',
      dataIndex: 'tool_name',
      width: 150,
      defaultVisible: true,
      alwaysVisible: true,
      ellipsis: true,
      render: (text: string) =>
        text ? (
          <Tooltip title={text} placement="topLeft">
            {text}
          </Tooltip>
        ) : (
          '--'
        ),
    },
    {
      key: 'tool_type',
      title: '文件类型',
      dataIndex: 'tool_type',
      width: 100,
      defaultVisible: true,
      ellipsis: true,
      render: (text: string) =>
        text ? <Tooltip title={text}>{text}</Tooltip> : '--',
    },
    {
      key: 'file_size',
      // title: '镜像版本',
      title: '文件大小',
      dataIndex: 'file_size',
      width: 100,
      defaultVisible: true,
      ellipsis: true,
      render: (text: string) =>
        text ? <Tooltip title={text}>{text}</Tooltip> : '--',
    },
    {
      key: 'version',
      // title: '模板存放路径',
      title: '版本',
      dataIndex: 'version',
      width: 140,
      defaultVisible: true,
      ellipsis: true,
      render: (text: string) =>
        text ? (
          <Tooltip title={text} placement="topLeft">
            {text}
          </Tooltip>
        ) : (
          '--'
        ),
    },
    {
      key: 'create_time',
      title: '上传时间',
      dataIndex: 'create_time',
      width: 160,
      render: (text: string) =>
        text ? (
          <Tooltip title={dayjs(text).format('YYYY-MM-DD HH:mm:ss')}>
            {text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '--'}
          </Tooltip>
        ) : (
          '--'
        ),
      defaultVisible: true,
      ellipsis: true,
    },
    {
      key: 'description',
      title: '描述',
      dataIndex: 'description',
      width: 140,
      defaultVisible: true,
      ellipsis: true,
      render: (text: string) =>
        text ? (
          <Tooltip title={text} placement="topLeft">
            {text}
          </Tooltip>
        ) : (
          '--'
        ),
    },
    {
      key: 'action',
      title: '操作',
      width: 90,
      align: 'center',
      fixed: 'right' as 'right',
      render: (_: any, record: TOOL.ToolItem) => (
        <Space size="small">
          <Button
            size="small"
            type="link"
            title="编辑"
            onClick={() => handleViewDetail(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个镜像吗？"
            description="删除后无法恢复，请谨慎操作。"
            onConfirm={() => handleDelete(record)}
            okText="确定"
            cancelText="取消"
          >
            <Button size="small" type="link" title="删除">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
      defaultVisible: true,
    },
  ];

  // 初始化 visibleColumns 状态
  const initialVisibleColumns = columnConfigs.reduce<Record<string, boolean>>(
    (acc, column) => {
      if (!column.alwaysVisible) {
        acc[column.key] = column.defaultVisible;
      }
      return acc;
    },
    {},
  );

  const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>(
    initialVisibleColumns,
  );

  // 重置列设置
  const resetColumns = () => {
    setVisibleColumns(initialVisibleColumns);
  };

  const loadDataSource = async () => {
    setLoading(true);
    try {
      // 将搜索文本合并到API参数中
      const apiParams = {
        ...getApiParams(),
      };

      const imagesRes = await getToollList(apiParams);
      if (imagesRes.code === CODE) {
        setDataSource(imagesRes.data?.data || []);
        setLoading(false);

        // 正确处理后端返回的分页信息
        updateParams({
          pagination: {
            ...tableParams.pagination,
            current: imagesRes.data?.page_num || 1,
            total: imagesRes.data?.total || 0,
            pageSize: tableParams.pagination?.pageSize || 10,
          },
        });
      } else {
        message.error(imagesRes.message || '获取镜像列表失败');
        setLoading(false);
      }
    } catch (err) {
      message.error('获取镜像列表失败');
      setLoading(false);
    }
  };

  const handleViewDetail = (record: TOOL.ToolItem) => {
    setSelectedImage(record);
    setImportModalVisible(true);
  };

  const handleDelete = (record: TOOL.ToolItem) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除镜像 "${record.image_name}" 吗？`,
      onOk: () => {
        deleteTool({ id: record.id }).then((res) => {
          if (res.code === CODE) {
            message.success('删除成功');
            loadDataSource();
          } else {
            message.error(res.message || '删除失败');
          }
        });
      },
    });
  };

  // 列设置相关函数
  const handleColumnChange = (columnKey: string, checked: boolean) => {
    setVisibleColumns((prev) => ({
      ...prev,
      [columnKey]: checked,
    }));
  };

  // 列设置内容
  const columnSettingsContent = (
    <div style={{ padding: '8px 0' }}>
      {columnConfigs
        .filter((config) => !config.alwaysVisible) // 只显示可控制的列
        .map((config) => (
          <div key={config.key} style={{ padding: '4px 12px' }}>
            <Checkbox
              checked={visibleColumns[config.key]}
              onChange={(e) => handleColumnChange(config.key, e.target.checked)}
            >
              {config.title}
            </Checkbox>
          </div>
        ))}
      <div
        style={{
          padding: '8px 12px',
          borderTop: '1px solid #f0f0f0',
          marginTop: 8,
        }}
      >
        <Button type="link" onClick={resetColumns} style={{ padding: 0 }}>
          重置
        </Button>
      </div>
    </div>
  );

  // 根据visibleColumns过滤显示的列
  const filteredColumns = columnConfigs
    .map((config) => {
      // 对于始终显示的列
      if (config.alwaysVisible) {
        return {
          ...config,
          hidden: undefined,
        };
      }

      // 对于可控制显示/隐藏的列
      return {
        ...config,
        ...(visibleColumns[config.key] ? {} : { hidden: true }),
      };
    })
    .filter((column) => !column.hidden) as TableColumn[];

  const handleRefresh = () => {
    loadDataSource();
  };

  // 自定义分页配置
  const paginationConfig = {
    ...tableParams.pagination,
    showTotal: (total: number) => `共 ${total} 条记录`,
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: ['10', '20', '50', '100'],
  };

  const handleSearch = useCallback(
    (searchValue: string) => {
      const currentTableParams = tableParamsRef.current;
      updateParams({
        search: {
          image_name: searchValue,
        },
        pagination: {
          current: 1,
          pageSize: currentTableParams.pagination?.pageSize || 10,
        },
      });
    },
    [updateParams],
  );

  // 防抖版本（500ms延迟，不立即执行）
  const debouncedSearch = useRef(debounce(handleSearch, 500)).current;
  // 立即执行版本（用于清空时立即搜索）
  const immediateSearch = useRef(debounce(handleSearch, 0, true)).current;

  const handleSearchChange = (value: string) => {
    setSearchText(value);
    // 取消所有未执行的防抖请求
    debouncedSearch.cancel();
    immediateSearch.cancel();

    // 清空时立即触发搜索
    if (value === '') {
      immediateSearch('');
      return;
    }

    // 正常输入时使用防抖
    debouncedSearch(value);
  };

  // 修改回车搜索处理
  const handleEnterSearch = (value: string) => {
    // 回车搜索时取消未执行的防抖
    debouncedSearch.cancel();
    immediateSearch.cancel();

    // 直接执行搜索
    handleSearch(value);
  };

  const onSubmitBack = () => {
    setImportModalVisible(false);
    setSelectedImage(null);
    handleRefresh();
  };

  return (
    <div className="image-list">
      <div className="search-box">
        <Button type="primary"  icon={<PlusOutlined />} onClick={() => setImportModalVisible(true)}>上传</Button>
        <div className="search-input">
          <Input.Search
            placeholder="请输入名称"
            value={searchText}
            onChange={(e) => handleSearchChange(e.target.value)}
            style={{ width: 300 }}
            onSearch={handleEnterSearch}
          />
          <Button
            onClick={handleRefresh}
            loading={loading}
            icon={<RefreshIcon style={{ width: 13, height: 13 }} />}
          ></Button>
          <Popover
            content={columnSettingsContent}
            title="列设置"
            trigger="click"
            open={columnSettingsVisible}
            onOpenChange={setColumnSettingsVisible}
            placement="bottomRight"
          >
            <Button icon={<SettingOutlined />}></Button>
          </Popover>
        </div>
      </div>
      <div className="images-list-container">
        <div className="images-list-table">
          <Table
            columns={filteredColumns}
            dataSource={dataSource}
            rowKey="id"
            loading={loading}
            pagination={paginationConfig}
            onChange={handleTableChange}
            scroll={{
              y: 'max-content', // 关键：允许内容决定高度
            }}
            style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
            }}
          />
        </div>
      </div>
      {importModalVisible && (
        <UploadFileModal
          visible={importModalVisible}
          onCancel={() => {
            setImportModalVisible(false);
            setSelectedImage(null);
          }}
          onSubmit={onSubmitBack}
          isEditing={selectedImage ? true : false}
          initialValues={selectedImage}
        />
      )}
    </div>
  );
};

export default Index;