import { useCallback, useMemo, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { createCustomerColumns } from './columns';
import CustomerDetailDrawer from './components/CustomerDetailDrawer';
import FollowUpRecordsDrawer from './components/FollowUpRecordsDrawer';
import { getCustomerList } from './server';
import type { CustomerListQuery, CustomerVO } from './types';

const CustomerList = () => {
  const [detailId, setDetailId] = useState<number | null>(null);
  const [followUpCustomer, setFollowUpCustomer] = useState<{ id: number; name: string } | null>(
    null,
  );

  const openDetail = useCallback((record: CustomerVO) => {
    setDetailId(record.id);
  }, []);

  const openFollowUps = useCallback((record: CustomerVO) => {
    setFollowUpCustomer({ id: record.id, name: record.name });
  }, []);

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

  const closeFollowUps = useCallback(() => {
    setFollowUpCustomer(null);
  }, []);

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

  return (
    <div className="customer-list-page">
      <ProTable<CustomerVO, CustomerListQuery>
        rowKey="id"
        columns={columns}
        cardProps={{ bodyStyle: { padding: 20 } }}
        search={{ labelWidth: 'auto', defaultCollapsed: false }}
        scroll={{ x: 1660 }}
        options={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          hideOnSinglePage: false,
          showTotal: (total) => `共 ${total} 条`,
        }}
        request={async (params) => {
          const result = await getCustomerList({
            page: params.current,
            size: params.pageSize,
            ownerId: params.ownerId,
          });

          return {
            data: result.records ?? [],
            total: result.total ?? 0,
            success: true,
          };
        }}
      />

      <CustomerDetailDrawer open={detailId !== null} customerId={detailId} onClose={closeDetail} />

      <FollowUpRecordsDrawer
        open={followUpCustomer !== null}
        customer={followUpCustomer}
        onClose={closeFollowUps}
      />
    </div>
  );
};

export default CustomerList;