import {
  Button,
  Tree,
  Card,
  Form,
  Input,
  Space,
  Table,
  Tooltip,
  Popover,
  Dropdown,
  type TableProps,
  type TableColumnType,
  type TreeProps, ConfigProvider, Flex, Divider,
} from "antd";
import type {XinTableProps, XinTableInstance, RequestParams, FormMode} from "./typings";
import SearchForm from "./SearchForm";
import XinForm, {type XinFormRef} from "@/components/XinForm";
import {type ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from "react";
import type {FormColumn} from "@/components/XinFormField/FieldRender/typings";
import {Delete, List, Create, Update} from "@/api/common/table.ts";
import {isArray, isEmpty, omit} from "lodash";
import type {SearchProps} from "antd/es/input";
import {
  BorderlessTableOutlined,
  BorderOutlined,
  ColumnHeightOutlined,
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
  SettingOutlined
} from "@ant-design/icons";
import {useTranslation} from "react-i18next";
import type {DataNode} from "antd/es/tree";
import AuthButton from "@/components/AuthButton";

// 默认分页大小
const DEFAULT_PAGE_SIZE: number = 10;
// 默认页数
const DEFAULT_PAGE: number = 1;

export default function XinTable<T extends Record<string, any> = any>(props: XinTableProps<T>) {
  const {
    api,
    accessName,
    rowKey,
    columns,
    tableRef,

    formProps,
    modalProps,
    cardProps,
    searchProps,
    operateProps = {},
    pagination: customPagination = {},

    addShow = true,
    editShow = true,
    deleteShow = true,
    searchShow = true,
    operateShow = true,
    paginationShow = true,
    keywordSearchShow = true,

    toolBarRender: customToolBalRender,
    actionBarRender: customActionBarRender,
    operateRender: customOperateRender,

    handleRequest: customHandleRequest,
    requestParams: customRequestParams,
    handleFinish: customHandleFinish,
  } = props;

  const {t} = useTranslation();
  const formRef = useRef<XinFormRef<T>>(null);

  // 内部状态
  const [loading, setLoading] = useState<boolean>(true);
  const [dataSource, setDataSource] = useState<T[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [requestParams, setRequestParams] = useState<RequestParams>({
    page: DEFAULT_PAGE,
    pageSize: DEFAULT_PAGE_SIZE,
  });
  const [density, setDensity] = useState<TableProps['size']>();
  const [bordered, setBordered] = useState<boolean>();

  const [searchRef] = Form.useForm<T>();
  const [columnsChecked, setColumnsChecked] = useState<any[]>([]);
  const [searchRender, setSearchRender] = useState<boolean>(false);

  // 表单模式状态
  const [formMode, setFormMode] = useState<FormMode>('create');
  const [formDefaultValues, setFormDefaultValues] = useState<T | undefined>(undefined);

  /** 表格请求 */
  const handleRequest = useCallback(async (params?: RequestParams) => {
    try {
      setLoading(true);
      const defaultParams: RequestParams = Object.assign({
        page: DEFAULT_PAGE,
        pageSize: DEFAULT_PAGE_SIZE,
      }, params);
      // 自定义参数处理
      const finalParams: RequestParams = customRequestParams ? customRequestParams(defaultParams) : defaultParams;
      // 自定义请求
      let listData: { data: T[]; total: number };
      if (customHandleRequest) {
        listData = await customHandleRequest(finalParams);
      } else {
        const { data } = await List<T>(api, finalParams);
        listData = data.data!;
      }
      setDataSource(listData.data);
      setTotal(listData.total);
    } finally {
      setLoading(false);
    }
  }, [api, customHandleRequest, customRequestParams]);

  /** 新增按钮点击 */
  const handleCreate = useCallback(() => {
    setFormMode('create');
    setFormDefaultValues(undefined);
    formRef.current?.resetFields();
    formRef.current?.open();
  }, []);

  /** 修改按钮点击 */
  const handleUpdate = useCallback((record: T) => {
    setFormMode('update');
    setFormDefaultValues(record);
    formRef.current?.setFieldsValue(record);
    formRef.current?.open();
  }, []);

  // 暴露方法到 tableRef
  useImperativeHandle(tableRef, (): XinTableInstance<T> => ({
    reload: async () => { await handleRequest(); },
    reset: async () => {
      searchRef.resetFields();
      setRequestParams({ page: 1, pageSize: 10 });
      await handleRequest({ page: 1, pageSize: 10 });
    },
    getDataSource: () => dataSource,
    setDataSource,
    getTotal: () => total,
    getLoading: () => loading,
    setLoading,
    setPageInfo: (page?, pageSize?) => {
      setRequestParams(prev => ({
        ...prev,
        ...(page !== undefined && { page }),
        ...(pageSize !== undefined && { pageSize }),
      }));
    },
    getForm: () => formRef.current,
    getSearchForm: () => searchRef,
  }));

  /** 初始化 */
  useEffect(() => { void handleRequest(); }, []);

  /** 处理表格变化 */
  const handleTableChange: TableProps<T>['onChange'] = async (newPagination, newFilters, newSorter) => {
    const params: RequestParams = {
      ...requestParams,
      page: newPagination.current ?? requestParams.page,
      pageSize: newPagination.pageSize ?? requestParams.pageSize,
    };
    // 处理筛选
    if (!isEmpty(newFilters)) {
      params.filterValues = newFilters;
    }
    // 处理排序
    if (newSorter && !isArray(newSorter) && !isEmpty(newSorter) && newSorter.field) {
      params.sorterValue = {
        field: String(newSorter.field),
        order: newSorter.order === 'ascend' ? 'asc' : 'desc',
      };
    } else {
      delete params.sorterValue;
    }
    setRequestParams(params);
    await handleRequest(params);
  };

  /** 快速搜索 */
  const handleKeywordSearch: SearchProps['onSearch'] = async (value: string) => {
    if( !value ) {
      window.$message?.warning(t('xin.table.keywordEmpty'));
      return;
    }
    const params: RequestParams = {
      ...requestParams,
      page: 1,
      keywordSearch: value,
    }
    setRequestParams(params);
    await handleRequest(params);
  };

  /** 快速搜索 Change */
  const keywordSearchChange: SearchProps['onChange'] = (e) => {
    if( !e.target.value ) {
      const params = { ...requestParams };
      delete params.keywordSearch;
      setRequestParams(params);
    } else {
      setRequestParams({
        ...requestParams,
        keywordSearch: e.target.value,
      });
    }
  };

  /** 搜索表单提交 */
  const handleSearch = async () => {
    const searchValues: T = searchRef.getFieldsValue();
    // 移除 空值
    Object.keys(searchValues).forEach((key) => {
      if (searchValues[key] === '' || searchValues[key] === undefined) {
        delete searchValues[key];
      }
    });
    await handleRequest({
      page: 1,
      ...requestParams,
      ...searchValues,
    });
  };

  /** 搜索列 */
  const searchColumn: FormColumn<T>[] = useMemo(() => {
    if(!searchShow) return [];
    return columns.filter((column) => column.hideInSearch !== true);
  }, [columns, searchShow]);

  /** 表单列 */
  const formColumn: FormColumn<T>[] = useMemo(() => {
    return columns.filter((column) => {
      if(formMode === 'update') {
        return column.hideInForm !== true && column.hideInUpdate !== true;
      } else {
        return column.hideInForm !== true && column.hideInCreate !== true;
      }
    });
  }, [columns, formMode]);

  /** 默认表格列 */
  const defaultTableColumns = useMemo(() => {
    return columns
      .filter((column) => column.hideInTable !== true && column.dataIndex)
      .map(column => omit(column, ['hideInTable', 'hideInForm', 'hideInSearch', 'search']));
  }, [columns]);

  /** 初始化列设置树数据 */
  useEffect(() => {
    const dataIndexList = defaultTableColumns.map(item => item.dataIndex!);
    setColumnsChecked(dataIndexList);
  }, [defaultTableColumns]);

  /** 表格操作列渲染 */
  const operateRender = (record: T): ReactNode[] => {
    // 编辑按钮渲染
    const editRender = (): ReactNode => {
      const show = typeof editShow === 'function' ? editShow(record) : editShow;
      return show ? (
        <AuthButton auth={props.accessName + '.update'} key={'update'}>
          <Tooltip title={t('xin.table.edit')}>
            <Button
              type="primary"
              icon={<EditOutlined />}
              size={'small'}
              onClick={() => handleUpdate(record)}
            />
          </Tooltip>
        </AuthButton>
      ) : null;
    }
    // 删除按钮渲染
    const deleteRender = (): ReactNode => {
      const show = typeof deleteShow === 'function' ? deleteShow(record) : deleteShow;
      return show ? (
        <AuthButton auth={props.accessName + '.delete'} key={'delete'}>
          <Tooltip title={t('xin.table.delete')}>
            <Button
              danger
              type="primary"
              icon={<DeleteOutlined />}
              size={'small'}
              onClick={() => handleDelete(record)}
            />
          </Tooltip>
        </AuthButton>
      ) : null;
    }

    if (customOperateRender) {
      return customOperateRender(record, {
        del: deleteRender(),
        edit: editRender()
      });
    }
    return [deleteRender(), editRender()];
  };

  /** 删除记录 */
  const handleDelete = async (record: T) => {
    window.$modal?.confirm({
      title: t('xin.table.deleteConfirm', { id: record[rowKey] }),
      okText: t('xin.table.deleteOk'),
      cancelText: t('xin.table.deleteCancel'),
      onOk: async () => {
        await Delete(api + `/${record[rowKey]}`);
        window.$message?.success(t('xin.table.deleteSuccess'));
        await handleRequest(requestParams);
      }
    })
  };

  /** 表单提交处理 */
  const handleFinish = async (values: T) => {
    try {
      formRef.current?.setLoading(true);
      // 如果有自定义 onFinish，优先调用
      if (customHandleFinish) {
          const result = await customHandleFinish(values, formMode, formRef, formDefaultValues);
        if (result) {
          await handleRequest(requestParams);
          formRef.current?.close();
        }
        return;
      }
      if (formMode === 'create') {
        await Create(api, values);
        window.$message?.success(t('xin.table.form.createSuccess'));
      } else {
        if (formDefaultValues && rowKey) {
          await Update(api + `/${formDefaultValues[rowKey]}`, values);
          window.$message?.success(t('xin.table.form.updateSuccess'));
        } else {
          window.$message?.error(t('xin.table.form.updateKeyUndefined'));
          return;
        }
      }
      await handleRequest(requestParams);
      formRef.current?.close();
    } finally {
      formRef.current?.setLoading(false);
    }
  };

  /** 密度设置菜单 */
  const densityMenu = {
    items: [
      {
        key: 'large',
        label: t('xin.table.density.default'),
        onClick: () => setDensity('large'),
      },
      {
        key: 'middle',
        label: t('xin.table.density.middle'),
        onClick: () => setDensity('middle'),
      },
      {
        key: 'small',
        label: t('xin.table.density.compact'),
        onClick: () => setDensity('small'),
      },
    ],
    selectedKeys: [density || 'large'],
  };

  /** 列设置树数据  */
  const columnTreeData: DataNode[] = useMemo(() => {
    const filteredColumns = columns.filter(item => item.hideInTable !== true && item.dataIndex);
    return filteredColumns
      .map((item) => ({
        key: String(item.dataIndex),
        title: item.title,
      }));
  }, [columns]);

  /** 列设置选中改变 */
  const columnSettingCheck: TreeProps['onCheck'] = (keys) => {
    if(isArray(keys)) {
      setColumnsChecked(keys);
    }
  }

  /** 最终表格列，计算排序以及显示状态 */
  const tableColumns: TableColumnType<T>[] = useMemo(() => {
    // 过滤出选中的列
    const filteredColumns = defaultTableColumns.filter(column =>
      columnsChecked.includes(column.dataIndex as any)
    );
    if(! operateShow) {
      return filteredColumns;
    }
    return [
      ...filteredColumns,
      {
        title: t('xin.table.operate'),
        key: 'operate',
        align: 'center',
        ...operateProps,
        render: (_, record: T) => (
          <Space>{...operateRender(record)}</Space>
        ),
      }
    ];
  }, [defaultTableColumns, columnsChecked, operateShow]);

  /** 分页配置 */
  const paginationProps: TableProps['pagination'] = {
    showQuickJumper: true,
    showSizeChanger: true,
    showTotal: (total) => t('xin.table.total', { total }),
    pageSize: requestParams.pageSize,
    ...customPagination,
    current: requestParams.page,
    total,
  }

  /** 顶部操作栏渲染 */
  const actionBarRender = (): ReactNode[] => {
    // 新增按钮渲染
    const addButtonRender = addShow ? (
      <AuthButton auth={accessName + '.create'}>
        <Button type="primary" onClick={handleCreate} icon={<PlusOutlined />}>{t('xin.table.add')}</Button>
      </AuthButton>
    ) : null;
    // 搜索按钮渲染
    const searchButtonRender = searchShow ? (
      <Button type="primary" icon={<SearchOutlined/>} onClick={() => setSearchRender(!searchRender)}>
        搜索
      </Button>
    ) : null;
    // 关键字搜索按钮渲染
    const keywordSearchRender = keywordSearchShow ? (
      <Input.Search
        onChange={keywordSearchChange}
        placeholder={t('xin.table.keywordPlaceholder')}
        style={{ width: 200 }}
        value={requestParams.keywordSearch}
        onSearch={handleKeywordSearch}
      />
    ) : null;
    // 自定义顶部操作栏渲染
    if (customActionBarRender) {
      return customActionBarRender({
        add: addButtonRender,
        search: searchButtonRender,
        keywordSearch: keywordSearchRender
      }).filter(Boolean);
    } else {
      return [addButtonRender, searchButtonRender, keywordSearchRender].filter(Boolean);
    }
  }

  /** 顶部工具栏渲染 */
  const toolBarRender = (): ReactNode[] => {
    // 刷新
    const reload = (
      <Tooltip title={'刷新表格'}>
        <Button
          type="text"
          icon={<ReloadOutlined />}
          onClick={() => handleRequest()}
        />
      </Tooltip>
    );
    // 密度设置
    const columnHeight = (
      <Dropdown menu={densityMenu} trigger={['click']}>
        <Button type="text" icon={<ColumnHeightOutlined />} />
      </Dropdown>
    );
    // 边框设置
    const hideBorder = (
      <Tooltip title={bordered ? t('xin.table.hideBorder') : t('xin.table.showBorder')}>
        <Button
          type="text"
          icon={bordered ? <BorderOutlined /> : <BorderlessTableOutlined />}
          onClick={() => setBordered(!bordered)}
        />
      </Tooltip>
    );
    // 列设置
    const columnSetting = (
      <Popover
        content={(
          <ConfigProvider
            theme={{
              components: { Tree: { switcherSize: 12 } },
            }}
          >
            <Tree
              icon={false}
              blockNode
              checkable={true}
              treeData={columnTreeData}
              selectable={false}
              checkedKeys={columnsChecked}
              onCheck={columnSettingCheck}
            />
          </ConfigProvider>

        )}
        trigger="click"
        placement="bottomRight"
        title={t('xin.table.columnSettings')}
      >
        <Tooltip title={t('xin.table.columnSettings')}>
          <Button type="text" icon={<SettingOutlined />} />
        </Tooltip>
      </Popover>
    );
    // 自定义顶部操作栏渲染
    if (customToolBalRender) {
      return customToolBalRender({reload, columnHeight, hideBorder, columnSetting}).filter(Boolean);
    } else {
      return [reload, columnHeight, hideBorder, columnSetting];
    }
  }

  return (
    <>
      <Card {...cardProps}>
        {/* 搜索表单 */}
        { searchRender && (
          <>
            <SearchForm<T>
              form={searchRef}
              columns={searchColumn}
              handleSearch={handleSearch}
              {...searchProps}
            />
            <Divider />
          </>
        )}
        {/* 操作栏 */}
        <Flex justify={'space-between'} align={'center'} style={{ marginBottom: 20 }}>
          <Space>{ ...actionBarRender() }</Space>
          <Space size={1}>{...toolBarRender()}</Space>
        </Flex>
        {/* 表格 */}
        <Table
          loading={loading}
          dataSource={dataSource}
          size={density}
          bordered={bordered}
          {...props}
          columns={tableColumns}
          rowKey={rowKey}
          onChange={handleTableChange}
          pagination={paginationShow ? paginationProps : false}
        />
      </Card>

      {/* 新增编辑表单 */}
      <XinForm
        {...formProps}
        columns={formColumn}
        formRef={formRef}
        layoutType="ModalForm"
        modalProps={{
          title: formMode === 'update' ? t('xin.table.form.editTitle') : t('xin.table.form.createTitle'),
          styles: { header: { marginBottom: 16 } },
          ...modalProps,
        }}
        onFinish={handleFinish}
      />
    </>
  );
}