'use client';

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchBuilder } from './slice';
import { Button, Table, Space, Popconfirm, notification } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import ModalBox from './component/modal';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import type { AppDispatch, RootState } from '@/store/store';
import { deleteBuilder } from './service';
import type { Builder, Filters } from './interface';
import InputSearch from '@/components/form/InputSearch';
import { displayDate } from '@/utills/helper';
import PageHeader from '@/components/pageHeader';
import { TablePaginationConfig } from 'antd/lib';

const BuilderList: React.FC = () => {
  const { builder, status, meta } = useSelector((state: RootState) => state.builder);

  const dispatch: AppDispatch = useDispatch();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [EditValue, setEditValue] = useState<Builder  | null>(null);

  const [filters, setFilters] = useState<any>({
    page: 1,
  });

  // Fetch builder data on component mount
  useEffect(() => {
    handleGetBuilder(filters);
  }, []);

  // Fetch builder data based on filters
  const handleGetBuilder = (filter: Filters): void => {
    dispatch(fetchBuilder(filter));
  };

  // Close modal handler
  const handleCloseModal = (): void => {
    setIsModalOpen(false);
    setEditValue(null);
  };

  // Define columns for the table
  const columns: ColumnsType<any> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 280,
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      key: 'phone',
      width: 180,
    },

    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
      width: 200,
    },

    {
      title: 'Contact Person',
      dataIndex: 'contact_person_name',
      key: 'contact_person_name',
      width: 200,
    },

    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'createdOn',
      width: 150,
      align: 'center',
      render: (text, record) => displayDate(record.created_at),
    },
    {
      title: 'Updated At',
      dataIndex: 'updated_at',
      key: 'createdOn',
      width: 150,
      align: 'center',
      render: (text, record) => displayDate(record.updated_at),
    },
    {
      title: 'Action',
      key: 'action',
      width: 100,
      className: 'w-1 nowrap',
      align: 'center',
      render: (text, record) => (
        <Space size="small">
          <Button
            type="primary"
            shape="circle"
            icon={<EditOutlined />}
            size="middle"
            title="Edit"
            onClick={() => {
              handleEdit(record);
            }}
          />
          <Popconfirm
            title="Are you sure you want to delete this builder?"
            onConfirm={() => {
              handleDelete(record.id);
            }}
            okText="Yes"
            cancelText="No"
            placement="topRight">
            <Button
              type="primary"
              shape="circle"
              icon={<DeleteOutlined />}
              size="middle"
              title="Delete"
              danger
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // Edit builder handler
  const handleEdit = (record: Builder): void => {
    setEditValue(record);
    setIsModalOpen(true);
  };

  // Delete builder handler
  const handleDelete = (record: number): void => {
    deleteBuilder(record)
      .then((response) => {
        notification.success({
          message: 'Success',
          description: response?.data?.message,
        });
        handleGetBuilder(filters);
      })
      .catch((error) => {
        notification.error({
          message: 'Error',
          description: error?.response?.data?.message,
        });
      });
  };

  const handleAddBuilder = (): void => {
    setIsModalOpen(true);
    setEditValue(null);
  };

  // Modal submit handler
  const handleOk = (): void => {
    handleGetBuilder(filters);
    setIsModalOpen(false);
  };

  // Table change handler
  const onChange = (pagination: TablePaginationConfig, filters: any, _sorter: any): void => {
    const newFilters = {
      ...filters,
      page: pagination.current,
      pageSize: pagination.pageSize,
    };

    setFilters(newFilters);
    handleGetBuilder(newFilters);
  };

  return (
    <div>
      <PageHeader
        title="Builders"
        isBack={false}
        extra={
          <Space size="middle" align="start">
            <InputSearch
              onSearch={(search) => {
                handleGetBuilder({ ...filters, page: 1, search });
              }}
            />
            {/* <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                handleAddBuilder();
              }}>
                            Add New Builder
            </Button> */}
          </Space>
        }
      />
      <div>
        <Table
          loading={status === 'loading'}
          columns={columns}
          rowKey="id"
          bordered
          dataSource={builder}
          onChange={onChange}
          tableLayout="fixed"
          scroll={{ x: true }}
          className="table-layout-fixed"
          pagination={{
            pageSize: filters.pageSize,
            current: filters.page,
            total: meta?.total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50', '100'],
            defaultPageSize: 10,
            showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} entries`,
          }}
        />
      </div>

      <ModalBox
        isModalOpen={isModalOpen}
        data={EditValue}
        handleOk={handleOk}
        handleClose={handleCloseModal}
      />
    </div>
  );
};

export default BuilderList;