'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useDispatch, useSelector } from 'react-redux';
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
import { Card, Space, Spin, Button, Col, Switch, Row, notification, Drawer, Modal } from 'antd';
import { useSession } from 'next-auth/react';
import { displayDate, getRoleIdMap, hasPermission } from '@/utills/helper';
import { PERMISSIONS } from '@/utills/constant';
import PageHeader from '@/components/pageHeader';
import LeadRequestsPage from '../../components/LeadRequestsPage';
import ProjectInformationPage from '../project-information';
import type { RootState, AppDispatch } from '@/store/store';
import { fetchLaunch, launchStatusUpdate } from '../../slice';
import SelectDropdown from '@/components/form/SelectDropdown';
import MarketingChannel from '../../components/MarketingChannels';
import type { launchProjectI, tablePreFieldTypesI } from '../../interface';
import TeamInformation from '../../components/TeamInformation';
import AddEditLeads from '../../../enquiries/components/AddLead';
import { fetchRoles } from '@/app/role/slice';
import { useRoles } from '@/hooks/useRoles';
import EmployeeStatusName from '@/components/EmployeeStatusName';
function LaunchDetails({ params }: { params: { launch_id: string } }) {
  const router = useRouter();
  const dispatch: AppDispatch = useDispatch();
  const { data: session } = useSession();
  const user = session?.user;
  const [showEditData, setShowEditData] = useState<boolean>(false);
  const [selectedId, setSelectedId] = useState<{ value: number; label: string }>();
  const id: string = params.launch_id;
  const isLaunchEditable = hasPermission(user, PERMISSIONS.LAUNCH_CREATE.name);
  const isProjectEditable = hasPermission(user, PERMISSIONS.PROJECT_CREATE.name);
  const isCreatable = hasPermission(user, PERMISSIONS.LEAD_CREATE.name);
  const isLeadRequestable  = hasPermission(user, PERMISSIONS.LEAD_REQUEST_CREATE.name);
  const [addLeadPage, setAddLeadPage] = useState<boolean>(false);

  const loading = useSelector((state: RootState) => state?.launches?.launchLoading);
  const launchDetailsre = useSelector((state: RootState) => state?.launches?.launchesId);
  const [loadingStatus, setLoadingStatus] = useState(false);
  const [roleFilters, setRoleFilters] = useState<any>({
      page: 1,
      sortColumn: 'sort_order',
    });
  const { roles } = useSelector((state: RootState) => state.roles);
  useEffect(() => {
    if(roles?.length === 0) {
      dispatch(fetchRoles(roleFilters));
    }
  }, [roles]);
  let allRoles = getRoleIdMap(roles);
  const { getRoleByName } = useRoles();

  useEffect(() => {
    getLaunch(id);
  }, [id]);

  const tabList = [
    {
      key: 'tab1',
      tab: 'Project Information',
    },
  ];

  const contentList: Record<string, React.ReactNode> = {
    tab1: (
      <ProjectInformationPage
        selectedId={selectedId?.value}
        showEditData={showEditData}
        setShowEditData={setShowEditData}
      />
    ),
    tab2: (
      <MarketingChannel
        projectID={selectedId?.value}
        isCard={false}
        hideCancelButton={true}
        onSaveSuccess={() => {
          router.push('');
        }}
      />
    ),
    tab3: <LeadRequestsPage launchId={id} />,
  };
  if (isProjectEditable) {
    tabList.push({
      key: 'tab2',
      tab: 'Marketing Channel',
    });
  }
  if (![getRoleByName('pre_sales')?.id, getRoleByName('field_sales')?.id].includes(user?.role?.id || 0)) {
    tabList.push({
      key: 'tab3',
      tab: 'Received Lead Request',
    });
  }

  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
  const onTab1Change = (key: string) => {
    setActiveTabKey1(key);
  };

  const getLaunch = (pid: string): void => {
    dispatch(fetchLaunch({ id: pid, params: { includeProjects: true } }))
      .then((res) => {
        const data = res?.payload?.data;
        if (data?.launch_projects && data?.launch_projects?.length > 0) {
          setSelectedId({
            value: data.launch_projects[0].id,
            label: data.launch_projects[0].name,
          });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const onChange = (checked: boolean, launchId: number) => {
    const newStatus = checked ? 'On' : 'Off';
    Modal.confirm({
      title: 'Confirm Status Change',
      content: `Are you sure you want to ${checked ? 'enable' : 'disable'} this launch?`,
      okText: 'Yes',
      cancelText: 'No',
      onOk() {
        setLoadingStatus(true);
        dispatch(launchStatusUpdate({ launchId, launchData: { status: newStatus } }))
          .then((res) => {
            notification.success({
              message: 'Success',
              description: res?.payload?.message,
            });
          })
          .catch((error) => {
            console.error('error: ', error);
          }).finally(() => {
            setLoadingStatus(false);
          });
      },
    });
  };

  const salesPairData: tablePreFieldTypesI[] | undefined = [];

  launchDetailsre?.launch_sales?.map((sale: tablePreFieldTypesI) => {
    if (sale.pre_sales_id) {
      salesPairData.push(sale);
    }
    return null;
  });

  const launchProjects = launchDetailsre?.launch_projects?.map((project: launchProjectI) => ({
    value: project?.id,
    label: project?.name,
  }));

  const gmSalesManager = launchDetailsre?.managers?.find(
    (manager: { role_id: number }) => manager.role_id === getRoleByName('gm_sales')?.id
  );

  const showAddLeadDrawer = () => {
    setAddLeadPage(true);
  };

  const onAddLeadClose = () => {
    setAddLeadPage(false);
  };

  const tabExtraRightContent = () => {
    return (
      <div className="launch-edit-tab-extra-content">
        <SelectDropdown
          options={launchProjects}
          onChange={(value, item: any): void => {
            setSelectedId({ value: item?.value, label: item?.children });
          }}
          allowClear={false}
          value={selectedId?.value as number}
        />

        {/* {activeTabKey1 === 'tab1' && isProjectEditable ? (
          <Button
            type="primary"
            ghost
            onClick={() => {
              setShowEditData(true);
            }}>
                        Edit Project Details
          </Button>
        ) : (
          ''
        )} */}
        {(user?.role?.id !== getRoleByName('super_admin')?.id && launchDetailsre.status === 'On' && isLeadRequestable) && (
          <Button
            type="primary"
            onClick={() => {
              router.push(
                `/lead-requests/add-leadRequest/${selectedId?.value}?launch_name=${launchDetailsre?.name}&launch_id=${launchDetailsre?.id}`
              );
            }}>
                        Create Lead Request
          </Button>
        )}
      </div>
    );
  };

  return (
    <div>
      {loading ? (
        <Spin
          size="large"
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
          }}
        />
      ) : (
        <PageHeader
          title="Launch Details"
          extra={
            <Space align="center" size={'large'} className="p-t-10">
              {isLaunchEditable && (
                <Space align="center">
                                    Status
                  <Spin spinning={loadingStatus}>
                    <Switch
                      checked={launchDetailsre.status === 'On'}
                      onChange={(checked) => {
                        onChange(checked, launchDetailsre?.id);
                      }}
                    />
                  </Spin>
                </Space>
              )}
              {launchDetailsre.status === 'On' && isCreatable ? (
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={showAddLeadDrawer}>
                                    Add Lead
                </Button>
              ) : null}

              {isLaunchEditable && launchDetailsre.lead_count === 0 && (
                <Button
                  type="primary"
                  icon={<EditOutlined />}
                  onClick={() => {
                    router.push(`/launches/add-launch?id=${id}`);
                  }}>
                                    Edit Launch
                </Button>
              )}
            </Space>
          }
        />
      )}
      <Row gutter={[15, 15]} className="mb-5">
        <Col span={24} xl={10}>
          <Card title="Launch Information" className="h-100">
            <div className="label-value label-width">
              <span className="label-text">Launch Name:</span>
              <span className="value-text">{launchDetailsre?.name}</span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Project Count:</span>
              <span className="value-text">
                {launchDetailsre?.launch_projects?.length}
              </span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Location:</span>
              <span className="value-text">{launchDetailsre?.location}</span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Created On:</span>
              <span className="value-text">
                {displayDate(launchDetailsre?.created_at)}
              </span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Created By:</span>
              <span className="value-text">{launchDetailsre?.created_by_name}</span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Status:</span>
              <span className="value-text">{launchDetailsre?.status}</span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">City:</span>
              <span className="value-text">{launchDetailsre?.city_name}</span>
            </div>
            {gmSalesManager && (
              <div className="label-value label-width">
                <span className="label-text">Gm Sales:</span>
                <span className="value-text">
                  <EmployeeStatusName
                    name={gmSalesManager.user_name}
                    status={gmSalesManager.status}
                    isBlocked={gmSalesManager.is_blocked}
                  />
                </span>
              </div>
            )}
            <div className="label-value label-width">
              <span className="label-text">Cluster Manager:</span>
              <span className="value-text">
                <EmployeeStatusName
                  name={launchDetailsre?.cluster_manager_name}
                  status={launchDetailsre?.cluster_manager_status}
                  isBlocked={launchDetailsre?.cluster_manager_is_blocked}
                />
              </span>
            </div>
            <div className="label-value label-width">
              <span className="label-text">Team Lead:</span>
              <span className="value-text">
                <EmployeeStatusName
                  name={launchDetailsre?.team_head_name}
                  status={launchDetailsre?.team_head_status}
                  isBlocked={launchDetailsre?.team_head_is_blocked}
                />
              </span>
            </div>
          </Card>
        </Col>
        <Col span={24} xl={14}>
          <TeamInformation id={id} />
        </Col>
      </Row>
      <div>
        <Card
          style={{ width: '100%' }}
          className="middle-size-card-tab"
          tabBarExtraContent={<div className="m-hide">{tabExtraRightContent()}</div>}
          tabList={tabList}
          activeTabKey={activeTabKey1}
          onTabChange={onTab1Change}
          tabProps={{
            size: 'middle',
          }}
        >
          <div className="d-hide">{tabExtraRightContent()}</div>
          {contentList[activeTabKey1]}
        </Card>
      </div>
      <Drawer
        title="Create New Lead"
        width={'calc(100vw - 235px)'}
        onClose={onAddLeadClose}
        open={addLeadPage === true}>
        {addLeadPage && <AddEditLeads launchId={Number(id)} onClose={onAddLeadClose} />}
      </Drawer>
    </div>
  );
}

export default LaunchDetails;