/* eslint-disable spellcheck/spell-checker */
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';
import React from 'react';
import {
  Form, Row, Col, Select, Alert, Button, Card, Tag, Space, Switch, Typography,
} from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import type { FormInstance } from 'antd';
import type { EmployeeOption, VacancyResolution, PendingNewLaunch } from '../types';
import type { ValidatePromotionResponse } from '../service';
import NestedFsToTlPanel from '../components/NestedFsToTlPanel';

const { Option } = Select;
const { Text, Title } = Typography;

interface Props {
  isBulkEligiblePromotion: boolean;
  bulkAssignMode: boolean;
  onBulkAssignToggle: (checked: boolean) => void;
  vacancyResolutions: VacancyResolution[];
  vacancyGroupKeys: number[];
  groupModes: Record<number, 'existing' | 'promote' | undefined>;
  groupCandidates: Record<number, EmployeeOption[]>;
  groupCandidatesLoading: Record<number, boolean>;
  groupSelectedUserId: Record<number, number | undefined>;
  groupSelectedDesignationId: Record<number, number | undefined>;
  showAllLaunchesByGroup: Record<number, boolean>;
  setShowAllLaunchesByGroup: React.Dispatch<React.SetStateAction<Record<number, boolean>>>;
  subEmployees: Record<string, EmployeeOption[]>;
  empLoading: boolean;
  subValidations: Record<number, ValidatePromotionResponse>;
  subTeamMemberCandidates: Record<number, EmployeeOption[]>;
  subTeamMemberCandidatesLoading: Record<number, boolean>;
  subSelectedTeamMemberIds: Record<number, number[]>;
  designationsByRole: Record<number, { id: number; name: string }[]>;
  designationsLoadingRoleIds: Record<number, boolean>;
  fieldSalesRoleId: number | undefined;
  teamLeadRoleId: number | undefined;
  selectedEmployee: EmployeeOption | null;
  selectedLaunchIds: number[];
  newLaunchForm: FormInstance;
  newLaunchFormOwnerId: number | null;
  setNewLaunchFormOwnerId: React.Dispatch<React.SetStateAction<number | null>>;
  pendingNewLaunches: PendingNewLaunch[];
  setPendingNewLaunches: React.Dispatch<React.SetStateAction<PendingNewLaunch[]>>;
  selectedCityId: number | null;
  isLeafRole: (roleId: number) => boolean;
  onGroupModeChange: (groupKey: number, mode: 'existing' | 'promote') => Promise<void>;
  onGroupEmployeeSelect: (groupKey: number, empId: number) => void;
  onGroupDesignationSelect: (groupKey: number, designationId: number) => Promise<void>;
  onVacancyModeChange: (vacancyIndex: number, mode: 'existing' | 'promote') => Promise<void>;
  onVacancyUserSelect: (vacancyIndex: number, userId: number) => void;
  onVacancyPromoteEmployeeSelect: (vacancyIndex: number, empId: number) => void;
  onVacancyPromoteDesignationSelect: (vacancyIndex: number, designationId: number) => Promise<void>;
  onSubTeamMembersChange: (empId: number, ids: number[]) => void;
  onCreateNewLaunch: (forUserId: number, forUserName: string) => Promise<void>;
  groupKeyOf: (r: VacancyResolution) => number;
}

const Step3FillVacancies: React.FC<Props> = ({
  isBulkEligiblePromotion, bulkAssignMode, onBulkAssignToggle,
  vacancyResolutions, vacancyGroupKeys,
  groupModes, groupCandidates, groupCandidatesLoading,
  groupSelectedUserId, groupSelectedDesignationId,
  showAllLaunchesByGroup, setShowAllLaunchesByGroup,
  subEmployees, empLoading, subValidations,
  subTeamMemberCandidates, subTeamMemberCandidatesLoading, subSelectedTeamMemberIds,
  designationsByRole, designationsLoadingRoleIds,
  fieldSalesRoleId, teamLeadRoleId,
  selectedEmployee, selectedLaunchIds,
  newLaunchForm, newLaunchFormOwnerId, setNewLaunchFormOwnerId,
  pendingNewLaunches, setPendingNewLaunches, selectedCityId,
  isLeafRole,
  onGroupModeChange, onGroupEmployeeSelect, onGroupDesignationSelect,
  onVacancyModeChange, onVacancyUserSelect,
  onVacancyPromoteEmployeeSelect, onVacancyPromoteDesignationSelect,
  onSubTeamMembersChange, onCreateNewLaunch, groupKeyOf,
}) => (
  <div>
    <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
      <Col>
        <Title level={5} style={{ margin: 0 }}>Fill Vacancies Left by Promotion</Title>
      </Col>
      {isBulkEligiblePromotion && (
        <Col>
          <Space>
            <Text type="secondary">Bulk assignment</Text>
            <Switch checked={bulkAssignMode} onChange={onBulkAssignToggle} />
          </Space>
        </Col>
      )}
    </Row>

    <Alert type="info" message="Each vacancy must be filled before the promotion can proceed." style={{ marginBottom: 16 }} />

    {bulkAssignMode && vacancyGroupKeys.map((groupKey) => {
      const groupRows = vacancyResolutions.filter((r) => groupKeyOf(r) === groupKey);
      if (groupRows.length === 0) return null;
      const roleId = groupRows[0].vacancy.roleId;
      const roleName = groupRows[0].vacancy.roleName;
      const mode = groupModes[groupKey];
      const candidates = groupCandidates[groupKey] ?? [];
      const candidatesLoading = !!groupCandidatesLoading[groupKey];
      const selectedUserId = groupSelectedUserId[groupKey];
      const selectedDesignationId = groupSelectedDesignationId[groupKey];
      const showAllLaunches = !!showAllLaunchesByGroup[groupKey];
      const isNestedFsToTl = mode === 'promote' && roleId === teamLeadRoleId && selectedUserId != null;

      return (
        <Card key={groupKey} size="small" style={{ marginBottom: 16 }} title={<Tag color="purple">{roleName} Vacancy</Tag>}>
          <Alert
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
            message={
              <div>
                <Text strong>
                  This assignment will be applied to all {groupRows.length}{' '}
                  affected launch{groupRows.length !== 1 ? 'es' : ''}
                  {roleName === 'field_sales' && ' where the Promoted Field Sales employee has a Pre Sales pair'}
                </Text>
                <div style={{ marginTop: 8 }}>
                  {(showAllLaunches ? groupRows : groupRows.slice(0, 3)).map((r) => (
                    <Tag key={r.vacancy.launchId} color="blue" style={{ marginBottom: 4 }}>
                      ({r.vacancy.launchName})
                    </Tag>
                  ))}
                  {groupRows.length > 3 && (
                    <Button
                      type="link"
                      size="small"
                      style={{ padding: 0 }}
                      onClick={() => setShowAllLaunchesByGroup((prev) => ({ ...prev, [groupKey]: !showAllLaunches }))}
                    >
                      {showAllLaunches ? 'Show Less' : `+${groupRows.length - 3} More`}
                    </Button>
                  )}
                </div>
              </div>
            }
          />

          <Row gutter={16}>
            <Col xs={24} md={10}>
              <Form.Item label="How to Fill Vacancy" required={roleId !== fieldSalesRoleId}>
                <Select
                  placeholder="Choose method..."
                  value={mode}
                  onChange={(v) => onGroupModeChange(groupKey, v)}
                >
                  <Option value="existing">Assign existing employee</Option>
                  {!isLeafRole(roleId) && <Option value="promote">Promote from team</Option>}
                </Select>
              </Form.Item>
            </Col>

            {mode && (
              <Col xs={24} md={14}>
                <Form.Item label="Select Employee" required={roleId !== fieldSalesRoleId}>
                  <Select
                    showSearch
                    placeholder={
                      candidatesLoading ? 'Loading...'
                        : candidates.length === 0 ? 'No eligible employees found'
                        : 'Select employee...'
                    }
                    value={selectedUserId}
                    optionFilterProp="children"
                    loading={candidatesLoading}
                    disabled={!candidatesLoading && candidates.length === 0}
                    onChange={(empId) => onGroupEmployeeSelect(groupKey, empId)}
                  >
                    {candidates.map((e) => (
                      <Option key={e.id} value={e.id}>
                        {e.name}
                        {e.roleName && <Text type="secondary"> · {e.roleName}</Text>}
                        {!!e.isUnassigned && <Tag color="orange" style={{ marginLeft: 6 }}>Unassigned</Tag>}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>

                {!candidatesLoading && candidates.length === 0 && (
                  <Alert type="warning" showIcon message="No eligible employees were found for this assignment mode." style={{ marginTop: 8 }} />
                )}

                {!candidatesLoading && candidates.some((c) => c.isUnassigned) && (
                  <Alert
                    type="info"
                    showIcon
                    message={
                      <span>
                        Candidates tagged <Tag color="orange" style={{ margin: '0 4px' }}>Unassigned</Tag>
                        are placeholder hires with no manager yet — selecting one here assigns this vacated seat as their reporting manager.
                      </span>
                    }
                    style={{ marginTop: 8 }}
                  />
                )}

                {mode === 'promote' && selectedUserId && (
                  <Form.Item label="Promote to Designation" required={roleId !== fieldSalesRoleId} style={{ marginTop: 8 }}>
                    <Select
                      showSearch
                      placeholder={designationsLoadingRoleIds[roleId] ? 'Loading...' : 'Select designation...'}
                      loading={!!designationsLoadingRoleIds[roleId]}
                      value={selectedDesignationId}
                      optionFilterProp="children"
                      onChange={(designationId) => onGroupDesignationSelect(groupKey, designationId)}
                    >
                      {(designationsByRole[roleId] ?? []).map((d) => (
                        <Option key={d.id} value={d.id}>{d.name}</Option>
                      ))}
                    </Select>
                  </Form.Item>
                )}

                {mode === 'promote' && selectedUserId && subValidations[selectedUserId] && (
                  <Alert
                    type="info"
                    showIcon
                    message={`This will also promote ${subValidations[selectedUserId].userName} from ${subValidations[selectedUserId].currentRoleName} to ${subValidations[selectedUserId].toRoleName}.`}
                    style={{ marginTop: 8 }}
                  />
                )}

                {isNestedFsToTl && selectedUserId != null && (
                  <NestedFsToTlPanel
                    nestedEmpId={selectedUserId}
                    subTeamMemberCandidates={subTeamMemberCandidates}
                    subTeamMemberCandidatesLoading={subTeamMemberCandidatesLoading}
                    subSelectedTeamMemberIds={subSelectedTeamMemberIds}
                    onSubTeamMembersChange={onSubTeamMembersChange}
                    newLaunchFormOwnerId={newLaunchFormOwnerId}
                    setNewLaunchFormOwnerId={setNewLaunchFormOwnerId}
                    selectedCityId={selectedCityId}
                    newLaunchForm={newLaunchForm}
                    onCreateNewLaunch={onCreateNewLaunch}
                    pendingNewLaunches={pendingNewLaunches}
                    setPendingNewLaunches={setPendingNewLaunches}
                    subValidations={subValidations}
                    teamMembersLabel="Active Field Sales employees currently on this group's launches."
                  />
                )}
              </Col>
            )}
          </Row>
        </Card>
      );
    })}

    {vacancyResolutions.map((res, idx) => {
      if (bulkAssignMode) return null;
      // Composite key scopes the employee list to this specific launch, preventing bleed across vacancies of the same role.
      const cacheKey = `${res.vacancy.roleId}-${res.vacancy.launchId}-${res.mode}`;
      const vacancyEmployees = subEmployees[cacheKey];
      const fromOtherLaunch =
        (vacancyEmployees ?? []).length > 0 &&
        vacancyEmployees!.every((e) => e.launchId && e.launchId !== res.vacancy.launchId);
      const tlFillingIn =
        (vacancyEmployees ?? []).length > 0 &&
        !fromOtherLaunch &&
        vacancyEmployees!.every((e) => e.roleName && e.roleName !== res.vacancy.roleName);
      const nestedEmpId = res.chainMemberId;
      const isNestedFsToTl = res.mode === 'promote' && res.vacancy.roleId === teamLeadRoleId && nestedEmpId != null;

      return (
        <Card
          key={`${res.vacancy.launchId}-${res.vacancy.roleId}`}
          size="small"
          style={{ marginBottom: 16 }}
          title={
            <Space>
              <Tag color="blue">{res.vacancy.launchName}</Tag>
              <ArrowRightOutlined />
              <Tag color="purple">{res.vacancy.roleName}</Tag>
            </Space>
          }
        >
          <Row gutter={16}>
            <Col xs={24} md={10}>
              <Form.Item label="How to fill this vacancy" required={res.vacancy.roleId !== fieldSalesRoleId}>
                <Select
                  placeholder="Choose method..."
                  value={res.mode}
                  onChange={(v) => onVacancyModeChange(idx, v)}
                >
                  <Option value="existing">Assign existing employee</Option>
                  {!isLeafRole(selectedEmployee?.roleId ?? 0) && (
                    <Option value="promote">Promote from team</Option>
                  )}
                </Select>
              </Form.Item>
            </Col>

            {res.mode && (
              <Col xs={24} md={14}>
                <Form.Item label="Select Employee" required={res.vacancy.roleId !== fieldSalesRoleId}>
                  <Select
                    showSearch
                    placeholder={
                      empLoading && !vacancyEmployees ? 'Loading...'
                        : vacancyEmployees?.length === 0 ? 'No eligible employees in this launch'
                        : 'Select employee...'
                    }
                    value={res.userId}
                    optionFilterProp="children"
                    loading={empLoading && !vacancyEmployees}
                    disabled={vacancyEmployees?.length === 0}
                    onChange={(userId) => {
                      if (res.mode === 'promote') {
                        onVacancyPromoteEmployeeSelect(idx, userId);
                      } else {
                        onVacancyUserSelect(idx, userId);
                      }
                    }}
                  >
                    {(vacancyEmployees ?? []).map((e) => (
                      <Option key={e.id} value={e.id}>
                        {e.name}
                        {e.roleName && <Text type="secondary"> · {e.roleName}</Text>}
                        {fromOtherLaunch && e.launchName && (
                          <Text type="secondary"> (currently in {e.launchName})</Text>
                        )}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>

                {res.mode === 'promote' && res.userId && (
                  <Form.Item label="Promote to Designation" required={res.vacancy.roleId !== fieldSalesRoleId}>
                    <Select
                      showSearch
                      placeholder={designationsLoadingRoleIds[res.vacancy.roleId] ? 'Loading...' : 'Select designation...'}
                      loading={!!designationsLoadingRoleIds[res.vacancy.roleId]}
                      value={res.designationId}
                      optionFilterProp="children"
                      onChange={(designationId) => onVacancyPromoteDesignationSelect(idx, designationId)}
                    >
                      {(designationsByRole[res.vacancy.roleId] ?? []).map((d) => (
                        <Option key={d.id} value={d.id}>{d.name}</Option>
                      ))}
                    </Select>
                  </Form.Item>
                )}

                {fromOtherLaunch && (
                  <Alert
                    type="info"
                    showIcon
                    message={`No ${res.vacancy.roleName} employees are assigned directly to ${res.vacancy.launchName}, so eligible ${res.vacancy.roleName} employees from other launches managed by the same team lead are shown. Selecting one will also assign them to ${res.vacancy.launchName}.`}
                    style={{ marginTop: 8 }}
                  />
                )}

                {tlFillingIn && (
                  <Alert
                    type="info"
                    showIcon
                    message={`No ${res.vacancy.roleName} employees are assigned to ${res.vacancy.launchName}. Since a team lead can also work as ${res.vacancy.roleName}, the team lead(s) managing this launch are shown as candidates to fill this vacancy.`}
                    style={{ marginTop: 8 }}
                  />
                )}

                {vacancyEmployees?.length === 0 && (
                  <Alert
                    type="warning"
                    showIcon
                    message={`No other ${res.vacancy.roleName} employees are assigned to ${res.vacancy.launchName}, and no team lead managing this launch has eligible ${res.vacancy.roleName} employees in their other launches. You may need to assign someone from another launch or promote from within.`}
                    style={{ marginTop: 8 }}
                  />
                )}

                {res.mode === 'promote' && res.userId && subValidations[res.userId] && (
                  <Alert
                    type="info"
                    showIcon
                    message={`This will also promote ${subValidations[res.userId].userName} from ${subValidations[res.userId].currentRoleName} to ${subValidations[res.userId].toRoleName}.`}
                    style={{ marginTop: 8 }}
                  />
                )}

                {isNestedFsToTl && nestedEmpId != null && (
                  <NestedFsToTlPanel
                    nestedEmpId={nestedEmpId}
                    subTeamMemberCandidates={subTeamMemberCandidates}
                    subTeamMemberCandidatesLoading={subTeamMemberCandidatesLoading}
                    subSelectedTeamMemberIds={subSelectedTeamMemberIds}
                    onSubTeamMembersChange={onSubTeamMembersChange}
                    newLaunchFormOwnerId={newLaunchFormOwnerId}
                    setNewLaunchFormOwnerId={setNewLaunchFormOwnerId}
                    selectedCityId={selectedCityId}
                    newLaunchForm={newLaunchForm}
                    onCreateNewLaunch={onCreateNewLaunch}
                    pendingNewLaunches={pendingNewLaunches}
                    setPendingNewLaunches={setPendingNewLaunches}
                    subValidations={subValidations}
                    teamMembersLabel="Active Field Sales employees currently on this launch."
                  />
                )}
              </Col>
            )}
          </Row>
        </Card>
      );
    })}
  </div>
);

export default Step3FillVacancies;