'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { getSession, useSession } from 'next-auth/react';
import type { ColumnsType } from 'antd/es/table';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Button, Space, Tag, Popconfirm, notification } from 'antd';
import { EyeOutlined, EditOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
import { fetchEmployees } from './slice';
import type { AppDispatch, RootState } from '@/store/store';
import FilterPopup from './components/FilterPopup';
import { LIST_META, PERMISSIONS } from '@/utills/constant';
import type { Employee, EmployeeFilter } from './interface';
import { displayDate, hasPermission } from '@/utills/helper';
import ChangePasswordPage from './components/ChangePasswordPage';
import PageHeader from '@/components/pageHeader';
import { changePassword } from './service';

const EmployeePage: React.FC = () => {
  const router = useRouter();
  const dispatch: AppDispatch = useDispatch();
  const { data: session } = useSession();
  const user = session?.user;
  const userCities = session?.user?.cities;
  const { employees, employeesMeta, listLoading } = useSelector(
    (state: RootState) => state.employees
  );
  const [isChangePasswordModalVisible, setChangePasswordModalVisible] = useState<boolean>(false);
  const [selectedEmployeeId, setSelectedEmployeeId] = useState<number | null>(null);
  const [filters, setFilters] = useState<EmployeeFilter>({
    search: '',
    city_id: '',
    designation_id: null,
    role_id: null,
    status: '',
    is_blocked: null,
    page: 1,
    pageSize: LIST_META.per_page,
    pagination: true,
    sortColumn: '',
    sortOrder: '',
  });

  const handleCancelChangePassword = (): void => {
    setChangePasswordModalVisible(false);
    setSelectedEmployeeId(null);
  };

  const handleOkChangePassword = (): void => {
    setChangePasswordModalVisible(false);
    setSelectedEmployeeId(null);
  };

  useEffect(() => {}, []);
  //Fetch employees based on the provided filter.
  const getEmployees = async(filter: EmployeeFilter, firstTime = false): Promise<void> => {
    const newFilter = filter;
    if (firstTime) {
      let city_id: string | undefined = '';
      const session = await getSession();
      city_id = session?.user?.cities?.map((city) => city.city_id).join(',');
      newFilter.city_id = city_id;
      setFilters(newFilter);
    }
    dispatch(fetchEmployees(newFilter));
  };

  const handleTableChange = (pagination: { current: number; pageSize: number }, filters: EmployeeFilter, sorter: { field: string; order: 'ascend' | 'descend' }): void => {
    const newFilters = {
      ...filters,
      page: pagination?.current,
      pageSize: pagination?.pageSize,
      city_id: filters?.city_id,
      role_id: filters?.role_id,
      designation_id: filters?.designation_id,
    };

    if (sorter?.order === 'ascend') {
      newFilters.sortOrder = 'asc';
      newFilters.sortColumn = sorter?.field ?? '';
    } else if (sorter?.order === 'descend') {
      newFilters.sortOrder = 'desc';
      newFilters.sortColumn = sorter?.field ?? '';
    } else {
      newFilters.sortOrder = '';
      newFilters.sortColumn = '';
    }
    setFilters(newFilters);
    getEmployees(newFilters);
  };

  //Show change password modal for the selected employee.
  const showChangePasswordModal = async(employeeId: number | null) => {
    setSelectedEmployeeId(employeeId);
    await changePassword({ employeeId })
      .then((response) => {
        if (response?.status === 200) {
          notification.success({
            message: 'Success',
            description: response?.data?.message,
          });
        } else {
          notification.error({
            message: 'Error',
            description: 'Failed to Change Password',
          });
        }
      })
      .catch((error) => {
        const { message } = error?.response?.data || {};
        notification.error({
          message: 'Error',
          description: message,
        });
      });
    setSelectedEmployeeId(null);
  };

  // Define table columns
  const columns: ColumnsType<Employee> = [
    {
      title: 'Name',
      dataIndex: 'first_name',
      className: 'word-break',
      width: 380,
      key: 'first_name',
      sorter: (a, b) => a.first_name?.localeCompare(b.first_name),
      sortDirections: ['ascend', 'descend'],
      render: (test, record) => `${record.first_name} ${record.last_name}`,
    },
    {
      title: 'Designation',
      dataIndex: 'designation_name',
      key: 'designation_name',
      width: 200,
      sorter: (a, b) => a.designation_name?.localeCompare(b.designation_name),
      sortDirections: ['ascend', 'descend'],
    },
    {
      title: 'Role',
      dataIndex: 'role_label',
      key: 'role_label',
      width: 160,
      sorter: (a, b) => a.role?.localeCompare(b.role),

      sortDirections: ['ascend', 'descend'],
    },
    {
      title: 'City',
      dataIndex: 'user_cities',
      key: 'user_cities',
      width: 150,
      render: (text, record) => record.user_cities?.map((city) => city.city_name).join(', '),
    },
    {
      title: 'Created on',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 150,
      className: 'nowrap',
      align: 'center',
      sorter: (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
      sortDirections: ['ascend', 'descend'],
      render: (text, record) => displayDate(record.created_at),
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      width: 150,
      className: 'nowrap',
      align: 'center',
      sorter: (a, b) => a.status.localeCompare(b.status),
      render: (status: string, record) => (
        record.is_blocked
          ? <Tag color="red" className="capitalize">Blocked</Tag>
          : (
            <Tag color={status === 'active' ? 'green' : 'red'} className="capitalize">
              {status}
            </Tag>
          )
      ),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 290,
      align: 'center',
      render: (record) => (
        <Space size="small">
          <Button
            type="primary"
            shape="circle"
            icon={<EyeOutlined />}
            size="middle"
            onClick={() => {
              router.push(`/employees/view-employee?id=${record.id}`);
            }}
            title="View"
          />
          <Button
            type="primary"
            shape="circle"
            icon={<EditOutlined />}
            size="middle"
            onClick={() => {
              router.push(`/employees/edit-employee?id=${record.id}`);
            }}
            title="Edit"
          />
          {user !== null &&
                        hasPermission(user, PERMISSIONS.EMPLOYEE_CHANGE_PASSWORD.name) && (
            <Popconfirm
              title="Are you sure you want to change the employee password?"
              onConfirm={() => {
                showChangePasswordModal(record.id);
              }}
              okText="Yes"
              cancelText="No"
              placement="topRight">
              <Button
                type="primary"
                size="middle"
                icon={<LockOutlined />}
                loading={selectedEmployeeId == record.id}>
                                    Change Password
              </Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <PageHeader
        title="All Employees"
        isBack={false}
        extra={
          <Space size="middle">
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                router.push('/employees/add-employee');
              }}>
                            Create New Account
            </Button>
          </Space>
        }
      />
      <FilterPopup
        onSearch={(filter) => {
          setFilters(filter);
          getEmployees({ ...filter });
        }}
        defaultFilter={{
          cities: userCities,
        }}
      />

      <Table
        dataSource={employees}
        columns={columns}
        rowKey="id"
        loading={listLoading}
        bordered
        tableLayout="fixed"
        scroll={{ x: true }}
        className="table-layout-fixed"
        pagination={{
          current: employeesMeta?.current_page,
          pageSize: employeesMeta?.per_page,
          total: employeesMeta?.total,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
          defaultPageSize: 5,
          showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} entries`,
        }}
        onChange={(pagination: any, tableFilters: any, sorter: any) => {
          const myTableFilter = {
            ...tableFilters,
            ...filters,
          };

          handleTableChange(pagination, myTableFilter, sorter);
        }}
      />
      {isChangePasswordModalVisible && (
        <ChangePasswordPage
          employeeId={selectedEmployeeId}
          visible={isChangePasswordModalVisible}
          onCancel={handleCancelChangePassword}
          onOk={handleOkChangePassword}
        />
      )}
    </div>
  );
};

export default EmployeePage;