'use client';
import type { ColumnsType } from 'antd/es/table';
import React, { useState, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, EditOutlined } from '@ant-design/icons';
import type { Project, ProjectFilter, ProjectMeta } from '../interface';
import { LIST_META } from '@/utills/constant';
import { useRouter } from 'next/navigation';
import { fetchProjects } from '../slice';
import type { AppDispatch, RootState } from '@/store/store';
import FilterProject from './FilterProject';
import { displayDate } from '@/utills/helper';
import { useSession } from 'next-auth/react';

interface ProjectPageI {
    isEditable: boolean
}

const ProjectPage: React.FC<ProjectPageI> = ({ isEditable }: { isEditable?: boolean }) => {
  const router = useRouter();
  const dispatch: AppDispatch = useDispatch();
  const { data: session } = useSession();
  const userCities = session?.user.cities;
  const isSuperAdmin = session?.user?.role?.name === 'super_admin';

  const cityIdsKey = useMemo(() => userCities?.map((city) => city?.city_id).join(','), [userCities]);

  const { projectMeta, listLoading, status } = useSelector((state: RootState) => state.launches);
  const projectsData = useSelector((state: any) => state?.launches?.projects);
  const projects = Array.isArray(projectsData) ? projectsData : projectsData?.data;
  const [filters, setFilters] = useState<ProjectFilter>(() => ({
    search: '',
    created_by: '',
    region_id: '',
    builder_id: '',
    status: '',
    page: 1,
    location: '',
    pageSize: LIST_META.per_page,
    pagination: true,
    city_id: undefined,
    sortColumn: '',
    sortOrder: '',
  }));

  useEffect(() => {
    const defaultCityId = cityIdsKey;

    if (defaultCityId) {
      setFilters((prevFilters) => {
        if (prevFilters.city_id === defaultCityId) {
          return prevFilters;
        }

        const nextFilters = {
          ...prevFilters,
          city_id: defaultCityId,
          page: 1,
        };
        getProjects(nextFilters);
        return nextFilters;
      });
      return;
    }

    getProjects({
      search: '',
      created_by: '',
      region_id: '',
      builder_id: '',
      status: '',
      page: 1,
      location: '',
      pageSize: LIST_META.per_page,
      pagination: true,
      sortColumn: '',
      sortOrder: '',
    });
  }, [cityIdsKey]);

  const getProjects = (filter: ProjectFilter): void => {
    dispatch(fetchProjects(filter));
  };

  const handleTableChange = (
    pagination: ProjectMeta,
    filters: ProjectFilter,
    sorter: { field: string; order: 'ascend' | 'descend' }
  ): void => {
    const newFilters = {
      ...filters,
      page: pagination.current,
      pageSize: pagination.pageSize,
      region_id: filters?.region_id,
      builder_id: filters?.builder_id,
      status: filters?.status,
    };
    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);
    getProjects(newFilters);
  };

  const columns: ColumnsType<Project> = [
    {
      title: 'Project Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true,
      width: 280,
    },
    {
      title: 'Launch Name',
      dataIndex: 'launch_name',
      key: 'launch_name',
      sorter: true,
      width: 200,
    },
    {
      title: 'Region',
      dataIndex: 'region_name',
      key: 'region_name',
      width: 200,
    },
    {
      title: 'Location',
      dataIndex: 'location',
      key: 'location',
      width: 200,
    },
    // {
    //   title: 'Created By',
    //   dataIndex: 'created_by_name',
    //   key: 'created_by',
    //   width: 150,
    // },
    {
      title: 'Created On',
      dataIndex: 'created_at',
      key: 'created_on',
      sorter: true,
      width: 150,
      align: 'center',
      render: (text, record) => displayDate(record.created_at),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 100,
      className: 'nowrap',
      align: 'center',
      render: (record) => (
        <Space size="small">
          <Button
            type="primary"
            shape="circle"
            icon={<EyeOutlined />}
            size="middle"
            onClick={() => {
              router.push(`/launches/view-project?id=${record.id}`);
            }}
            title="View"
          />
          {/* {isEditable && (
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              size="middle"
              onClick={() => {
                router.push(`/launches/edit-project?id=${record.id}`);
              }}
              title="View"
            />
          )} */}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <>
        <FilterProject
          onSearch={(filter) => {
          const newFilters = { ...filters, ...filter, page: 1 };
          setFilters(newFilters);
          getProjects(newFilters);
        }}
          defaultFilter={{
            cities: userCities,
          }}
          status= {status}
          isSuperAdmin={isSuperAdmin}
        />

        <div className="page-header"></div>
        <Table
          dataSource={projects}
          columns={columns}
          rowKey="id"
          bordered
          loading={listLoading}
          tableLayout="fixed"
          scroll={{ x: true }}
          className="table-layout-fixed"
          pagination={{
          current: projectMeta?.current_page, // current_page comes from backend meta response
          pageSize: projectMeta?.per_page,
          total: projectMeta?.total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50', '100'],
            defaultPageSize: 10,
            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);
          }}
        />
      </>
    </div>
  );
};

export default ProjectPage;