import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Table, Card, Space, Button, Col, Row, Popconfirm, notification } from 'antd';
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { useSession } from 'next-auth/react';
import { hasPermission } from '@/utills/helper';
import { PERMISSIONS } from '@/utills/constant';

import type { RootState, AppDispatch } from '@/store/store';
import { deleteLaunchTeam } from '../slice';

import type { LaunchTeamI } from '../interface';
import EmployeeStatusName from '@/components/EmployeeStatusName';

import TeamAddModal from './TeamAddModal';
import { deleteLaunchSales } from '../service';
import type { ColumnsType } from 'antd/es/table';

const TeamInformation = ({ id }: { id: string }) => {
  const dispatch: AppDispatch = useDispatch();
  const { launch_sales, launchesId } = useSelector((state: RootState) => ({
    launch_sales: state?.launches?.launchesId?.launch_sales || [],
    launchesId: state?.launches?.launchesId,
  }));
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [EditValue, setEditValue] = useState<LaunchTeamI | null>(null);
  const [storeData, setStoreData] = useState<any | null>(null);

  const { data: session } = useSession();
  const user = session?.user;
  const isEditable = hasPermission(user, PERMISSIONS.LAUNCH_CREATE.name) && (launchesId?.lead_count === 0 || !launchesId?.id);

  // Derive manager ids from the new managers array (role_name keyed),
  // falling back to the flat cluster_manager_id / team_lead_id fields the API returns.
  const managersMap: Record<string, number> = (launchesId?.managers ?? []).reduce(
    (acc: Record<string, number>, m: { role_name: string; user_id: number }) => {
      acc[`${m.role_name}_id`] = Number(m.user_id);
      return acc;
    },
    {}
  );

  const clusterManagerId = managersMap.cluster_manager_id || launchesId?.cluster_manager_id || '';
  const teamHeadId = managersMap.team_lead_id || launchesId?.team_lead_id || '';

  const launchSalesString = JSON.stringify(launch_sales);
  useEffect(() => {}, [launchSalesString]);

  const handleDeleteLaunchTeam = (record: LaunchTeamI): void => {
    deleteLaunchSales(record.id as number)
      .then((response) => {
        notification.success({
          message: 'Success',
          description: response?.data?.message,
        });
        dispatch(deleteLaunchTeam({ id: record?.id }));
      })
      .catch((error) => {
        notification.error({
          message: 'Error',
          description: error?.response?.data?.message,
        });
      });
  };

  const showModal = () => {
    setIsModalOpen(true);
    setEditValue(null);
  };

  const handleOk = (): void => {
    setIsModalOpen(false);
  };

  const handleEdit = (record: LaunchTeamI): void => {
    setEditValue(record);
    setIsModalOpen(true);
  };

  const handleCloseModal = (): void => {
    setIsModalOpen(false);
    setEditValue(null);
  };

  const shouldShowDeleteButton = launch_sales.length > 1;

  const tableColumns: ColumnsType<LaunchTeamI> = [
    {
      title: 'Pre-Sales',
      dataIndex: 'pre_sales_name',
      key: 'pre_sales_name',
      width: 100,
      render: (text, record) => (
        <EmployeeStatusName name={text} status={record?.pre_sales_status} isBlocked={record?.pre_sales_is_blocked} />
      ),
    },
    {
      title: 'Leads (Pre-Sales)',
      dataIndex: 'pre_sales_leads',
      key: 'pre_sales_leads',
      width: 130,
      className: 'text-center nowrap',
      render: (text, record) => {
        if (record?.pre_sales_id === 0 || record?.pre_sales_id === null) {
          return null;
        }
        return text;
      },
    },
    {
      title: 'Field Sales',
      dataIndex: 'field_sales_name',
      key: 'field_sales_name',
      width: 100,
      render: (text, record) => (
        <EmployeeStatusName name={text} status={record?.field_sales_status} isBlocked={record?.field_sales_is_blocked} />
      ),
    },
    {
      title: 'Leads (Field Sales)',
      dataIndex: 'field_sales_leads',
      key: 'field_sales_leads',
      width: 130,
      className: 'text-center nowrap',
      render: (text, record) => {
        if (record?.field_sales_id === 0 || record?.field_sales_id === null) {
          return null;
        }
        return text;
      },
    },
  ];
  if (isEditable) {
    tableColumns.push({
      title: 'Action',
      key: 'action',
      width: 100,
      className: 'nowrap ',

      render: (text: string, record: LaunchTeamI) => (
        <Space size="small" className="team-info-action">
          {isEditable && (
            <>
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                size="middle"
                title="Edit"
                onClick={() => {
                  handleEdit(record);
                }}
              />
              {shouldShowDeleteButton && (
                <Popconfirm
                  title="Are you sure you want to delete this pair?"
                  okText="Yes"
                  cancelText="No"
                  onConfirm={() => {
                    handleDeleteLaunchTeam(record);
                  }}
                  placement="topRight"
                >
                  <Button
                    type="primary"
                    shape="circle"
                    icon={<DeleteOutlined />}
                    size="middle"
                    title="Delete"
                    danger
                  />
                </Popconfirm>
              )}
            </>
          )}
        </Space>
      ),
    });
  }

  return (
    <Card
      title="Team Information"
      className="h-100"
      bodyStyle={{ padding: 0 }}
      extra={
        isEditable && (
          <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
                        Add Pair
          </Button>
        )
      }>
      <Row gutter={15}>
        <Col span={24}>
          <Table
            dataSource={launch_sales}
            rowKey="id"
            pagination={false}
            bordered
            tableLayout="fixed"
            scroll={{ x: true }}
            className="table-layout-fixed"
            columns={tableColumns}
          />
        </Col>
      </Row>
      <TeamAddModal
        key={EditValue ? String(EditValue.id) : 'new'}
        isModalOpen={isModalOpen}
        data={EditValue}
        handleOk={handleOk}
        handleClose={handleCloseModal}
        id={id}
        storeData={storeData}
        reporting_manager_id={
          [clusterManagerId, teamHeadId].filter((id) => id && id !== 0).join(', ') || undefined
        }
        check= {'view'}
        setStoreData={setStoreData}
        teamHeadId={String(teamHeadId || '')}
        clusterManagerId={String(clusterManagerId || '')}
      />
    </Card>
  );
};

export default TeamInformation;