import React, { useMemo } from 'react';
import classNames from 'classnames';
import { GenderFemale, GenderMale } from '@carbon/react/icons';
import { age, ExtensionSlot, formatDate, getPatientName, parseDate } from '@openmrs/esm-framework';
import styles from './patient-banner.scss';
import { InlineLoading, Tag } from '@carbon/react';
import { EligibilityResponse } from '../type';
import { getEligibilityTags, maskName } from '../helper';
import { useTranslation } from 'react-i18next';

interface EnhancedPatientBannerPatientInfoProps {
  patient: fhir.Patient;
  hiePatient?: fhir.Patient;
  renderedFrom?: string;
  showSyncButton?: boolean;
  onSyncSuccess?: (patientUuid: string) => void;
  eligibilityData?: EligibilityResponse;
  isEligibilityLoading?: boolean;
  crNumber?: string;
}

type Gender = 'female' | 'male';

const GENDER_ICONS = {
  Female: <GenderFemale />,
  Male: <GenderMale />,
} as const;

const GENDER_MAP: Record<string, 'Male' | 'Female'> = {
  male: 'Male',
  female: 'Female',
  m: 'Male',
  f: 'Female',
};

const getGender = (gender: string) => {
  const normalizedGender = gender.toLowerCase();
  const iconKey = GENDER_MAP[normalizedGender] ?? 'Unknown';

  return {
    displayText: iconKey,
    iconKey,
  };
};

export const EnhancedPatientBannerPatientInfo: React.FC<EnhancedPatientBannerPatientInfoProps> = ({
  patient,
  renderedFrom,
  eligibilityData,
  isEligibilityLoading = false,
  crNumber,
}) => {
  const { t } = useTranslation();
  const name = getPatientName(patient);
  const genderInfo = patient?.gender && getGender(patient.gender);

  const extensionState = useMemo(() => ({ patientUuid: patient.id, patient, renderedFrom }), [patient, renderedFrom]);

  const eligibilityTags = useMemo(() => {
    if (isEligibilityLoading) {
      return [];
    }
    if (!eligibilityData) {
      return [];
    }
    return getEligibilityTags(patient, eligibilityData);
  }, [patient, eligibilityData, isEligibilityLoading]);

  const shouldShowEligibilitySection = isEligibilityLoading || eligibilityTags.length > 0;

  return (
    <div className={styles.patientInfo}>
      <div className={classNames(styles.row, styles.patientNameRow)}>
        <div className={styles.flexRow}>
          <span className={styles.patientName}>{maskName(name)}</span>

          {genderInfo && (
            <div className={styles.gender}>
              {GENDER_ICONS[genderInfo.iconKey as keyof typeof GENDER_ICONS]}
              <span>{genderInfo.displayText}</span>
            </div>
          )}

          <ExtensionSlot className={styles.tagsSlot} name="patient-banner-tags-slot" state={extensionState} />
        </div>
      </div>
      <div className={styles.demographics}>
        {patient.birthDate && (
          <>
            <span>{age(patient.birthDate)}</span>
            <span className={styles.separator}>&middot;</span>
            <span>{formatDate(parseDate(patient.birthDate))}</span>
            <span className={styles.separator}>&middot;</span>
          </>
        )}

        <div className={styles.identifiers}>
          <span>
            {t('CRNumber', 'CR Number')}: {crNumber || '--'}
          </span>
        </div>

        {((crNumber && crNumber !== '--') || shouldShowEligibilitySection) && (
          <span className={styles.separator}>&middot;</span>
        )}

        {shouldShowEligibilitySection && (
          <div className={styles.eligibilityTags}>
            {isEligibilityLoading ? (
              <InlineLoading description={t('checkingEligibility', 'Checking eligibility...')} />
            ) : (
              eligibilityTags.map((tag, index) => (
                <Tag key={index} type={tag.type} size="md" title={tag.text} className={styles.eligibilityTag}>
                  {tag.text}
                </Tag>
              ))
            )}
          </div>
        )}

        <ExtensionSlot className={styles.extensionSlot} name="patient-banner-bottom-slot" state={extensionState} />
      </div>
    </div>
  );
};