/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react';
import { Collapse, Typography } from 'antd';
import InputSelect from '@/components/form/InputSelect';

const { Panel } = Collapse;

interface TransferValidationItem {
  launch_id: number;
  launch_name: string;
  show_for_pair_resolve: boolean;
  show_for_self_transfer: boolean;
  launch_sales_id?: number;
  partner_name?: string;
}

interface IEmployeeResolvePairProps {
  transferValidationData: TransferValidationItem[];
  substitutes: Record<number, any[]>;
  setSelectedSubstitutes: React.Dispatch<React.SetStateAction<any>>;
  invalidLaunchIds?: number[];
  selectedSubstitutes?: Record<number, any>;
}

const EmployeeResolvePair: React.FC<IEmployeeResolvePairProps> = ({
  transferValidationData,
  substitutes,
  setSelectedSubstitutes,
  invalidLaunchIds = [],
  selectedSubstitutes = {},
}) => {
  const pairsToResolve = transferValidationData.filter((l) => l.show_for_pair_resolve);

  if (pairsToResolve.length === 0) return null;

  // When there are invalid pairs, expand all of them so inline errors are visible.
  const innerDefaultKeys = invalidLaunchIds.length > 0
    ? pairsToResolve.map(l => `launch_${l.launch_id}`)
    : pairsToResolve.length > 0 ? [`launch_${pairsToResolve[0].launch_id}`] : [];

  return (
    <Collapse
      ghost
      expandIconPosition="end"
      style={{ background: 'transparent' }}
      key={invalidLaunchIds.length > 0 ? `err-${invalidLaunchIds.join(',')}` : 'default'}
      defaultActiveKey={innerDefaultKeys}
    >
      {pairsToResolve.map((launchData) => {
        const isInvalid = invalidLaunchIds.includes(launchData.launch_id) && !selectedSubstitutes[launchData.launch_sales_id!];
        return (
          <Panel
            header={<Typography.Text strong>{launchData.launch_name}</Typography.Text>}
            key={`launch_${launchData.launch_id}`}
            style={isInvalid ? { border: '1px solid #ff4d4f', borderRadius: 6 } : undefined}
          >
            <div style={{ padding: '4px 0' }}>
              <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 4 }}>
                Partner: {launchData.partner_name || 'None'}
              </Typography.Text>
              <div style={{ display: 'flex', alignItems: 'left' }}>
                <div style={{ width: 260 }}>
                  <InputSelect
                    name={`substitute_${launchData.launch_sales_id}`}
                    placeholder="Select Substitute Sales Person"
                    status={isInvalid ? 'error' : undefined}
                    options={substitutes[launchData.launch_id]?.map((s: any) => ({
                      label: `${s.first_name} ${s.last_name} (${s.role_label})`,
                      value: s.id,
                    }))}
                    onChange={(val) => {
                      if (launchData.launch_sales_id) {
                        setSelectedSubstitutes((prev: any) => ({
                          ...prev,
                          [launchData.launch_sales_id!]: val,
                        }));
                      }
                    }}
                  />
                  {isInvalid && (
                    <Typography.Text strong type="danger" style={{ fontSize: 12 }}>
                      Please select a substitute for this launch
                    </Typography.Text>
                  )}
                </div>
              </div>
            </div>
          </Panel>
        );
      })}
    </Collapse>
  );
};

export default EmployeeResolvePair;