import { useCallback, useMemo, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { createAuditLogColumns } from './columns';
import AuditLogDetailDrawer from './components/AuditLogDetailDrawer';
import { getAuditLogList } from './service';
import type { AuditLogListQuery, AuditLogVO } from './types';

const AuditLogs = () => {
  const [detail, setDetail] = useState<AuditLogVO | null>(null);

  const openDetail = useCallback((record: AuditLogVO) => {
    setDetail(record);
  }, []);

  const closeDetail = useCallback(() => {
    setDetail(null);
  }, []);

  const columns = useMemo(() => createAuditLogColumns({ onDetail: openDetail }), [openDetail]);

  const fetchList = useCallback(
    (params: AuditLogListQuery) =>
      getAuditLogList({
        page: params.current,
        size: params.pageSize,
        module: params.module,
        action: params.action,
        entityType: params.entityType,
        resultStatus: params.resultStatus,
        operatorId: params.operatorId,
        start: params.start,
        end: params.end,
      }).then((result) => ({
        data: result.records ?? [],
        total: result.total ?? 0,
        success: true,
      })),
    [],
  );

  return (
    <div className="audit-log-page">
      <ProTable<AuditLogVO, AuditLogListQuery>
        rowKey="logId"
        columns={columns}
        cardProps={{ bodyStyle: { padding: 20 } }}
        search={{ labelWidth: 'auto', defaultCollapsed: false }}
        scroll={{ x: 1430 }}
        options={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          hideOnSinglePage: false,
          showTotal: (total) => `共 ${total} 条`,
        }}
        request={fetchList}
      />

      <AuditLogDetailDrawer open={detail !== null} record={detail} onClose={closeDetail} />
    </div>
  );
};

export default AuditLogs;