/* eslint-disable spellcheck/spell-checker */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react';
import { Modal, Typography, Divider, Space, Button, Spin } from 'antd';

const { Title, Text } = Typography;

interface PairResolution {
  launchName: string;
  substituteName: string;
}

interface TransferDetail {
  launchName: string;
  transferringLeads: number;
  dieingLeads: number;
  excludedLeads?: number;
}

interface IConfirmTransferModalProps {
  open: boolean;
  loading: boolean;
  pairResolvingActive: boolean;
  leadTransferringActive: boolean;
  onCancel: () => void;
  onConfirm: () => void;
  pairResolutions: PairResolution[];
  transferDetails: TransferDetail[];
}

const ConfirmTransferModal: React.FC<IConfirmTransferModalProps> = ({
  open,
  loading,
  pairResolvingActive,
  leadTransferringActive,
  onCancel,
  onConfirm,
  pairResolutions,
  transferDetails,
}) => {
  const isProcessing = pairResolvingActive || leadTransferringActive;

  const loaderLabel = pairResolvingActive ? 'Pair Resolving' : leadTransferringActive ? 'Transferring Leads' : '';

  return (
    <Modal
      title="Employee Transfer Preview"
      open={open}
      onCancel={onCancel}
      closable={!isProcessing}
      footer={isProcessing ? null : [
        <Button key="cancel" onClick={onCancel} disabled={loading}>
          Cancel
        </Button>,
        <Button key="proceed" type="primary" loading={loading} onClick={onConfirm}>
          Proceed
        </Button>,
      ]}
      width={700}
      maskClosable={false}
      className="custom-new-modal"
    >
      {isProcessing ? (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
          <Spin size="large" />
          <Text style={{ marginTop: 16, fontSize: 15, color: '#595959' }}>{loaderLabel}</Text>
        </div>
      ) : (
        <div className="custom-scrollbar">
          {pairResolutions.length > 0 && (
            <div style={{ marginBottom: 24 }}>
              <Title level={5} style={{ marginBottom: 12 }}>Pair Resolutions</Title>
              <Space direction="vertical" style={{ width: '100%' }}>
                {pairResolutions.map((pair, index) => (
                  <div key={index} style={{ padding: '8px 12px', background: '#f5f5f5', borderRadius: 4 }}>
                    <Text strong style={{ color: '#000' }}>{pair.launchName}</Text>
                    <br />
                    <Text>Respective Employee will be substituted by <Text strong>{pair.substituteName}</Text></Text>
                  </div>
                ))}
              </Space>
            </div>
          )}

          {pairResolutions.length > 0 && transferDetails.length > 0 && <Divider />}

          {transferDetails.length > 0 && (
            <div>
              <Title level={5} style={{ marginBottom: 12 }}>Lead Transfers</Title>
              <Space direction="vertical" style={{ width: '100%', gap: 12 }}>
                {transferDetails.map((transfer, index) => (
                  <div key={index} style={{ padding: '8px 12px', border: '1px solid #f0f0f0', borderRadius: 4 }}>
                    <Text strong style={{ fontSize: 16, display: 'block', marginBottom: 4, color: '#000' }}>
                      {transfer.launchName}
                    </Text>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                      <Text>
                        Transferring:{' '}
                        <Text strong style={{ color: '#1677ff' }}>
                          {transfer.transferringLeads}
                        </Text>
                      </Text>
                      <Text>
                        To be Dead:{' '}
                        <Text strong style={{ color: '#ff4d4f' }}>
                          {transfer.dieingLeads}
                        </Text>
                      </Text>
                      {!!transfer.excludedLeads && transfer.excludedLeads > 0 && (
                        <Text type="secondary" style={{ fontSize: 12 }}>
                          Won&apos;t transfer (protected status): <Text strong>{transfer.excludedLeads}</Text>
                        </Text>
                      )}
                    </div>
                  </div>
                ))}
              </Space>
            </div>
          )}

          {pairResolutions.length === 0 && transferDetails.length === 0 && (
            <Text>Are you sure you want to update this employee&apos;s details?</Text>
          )}
        </div>
      )}
    </Modal>
  );
};

export default ConfirmTransferModal;