import React from 'react';
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Text } from '../ui/text';
import { Spacer } from '../ui/spacer';
import { useFormContext } from 'react-hook-form';
import { Check, PlusCircle, Trash2 } from 'lucide-react';
import { Badge } from '../ui/badge';
import { FhirResource } from 'fhir/r4';
import { TypeSelector, FhirReference, PatientSearch } from '../index';
import {
    useAuthServiceContext,
    usePatientServiceContext,
    useFhirServiceContext,
    usePractitionerRoleServiceContext
} from '../../services';
import { formatFhirHumanName } from '../../utils/fhirHumanName.tsx';

interface ReferenceTypeOption {
    name: string;
    key: string;
}

interface FhirReferenceCollectionProps {
    references: any;
    label: string;
    context: string;
    referenceTypes: ReferenceTypeOption[];
    getReferenceList: (referenceType: string) => FhirResource[];
    disabled?: boolean;
    required?: boolean;
    readonly?: boolean;
    multiple?: boolean;
    enableInlineActions?: boolean;
}

const FhirReferenceCollection: React.FC<FhirReferenceCollectionProps> = ({
                                                                             references,
                                                                             label,
                                                                             context,
                                                                             referenceTypes,
                                                                             getReferenceList,
                                                                             disabled = false,
                                                                             required = false,
                                                                             readonly = false,
                                                                             multiple = true,
                                                                             enableInlineActions = true
                                                                         }) => {
    const { setValue, watch } = useFormContext();
    const { selectedPractitionerRole } = useAuthServiceContext();
    const { patientState } = usePatientServiceContext();
    const { createReferenceObject } = useFhirServiceContext();
    const { getPractitionerRoleDisplay } = usePractitionerRoleServiceContext();

    const spacerMargin = '24px';

    const handleReferenceTypeChange = (index: number, referenceType: string) => {
        setValue(`${context}.${index}.reference`, '', { shouldDirty: true });

        if (referenceType === 'PractitionerRole' && selectedPractitionerRole) {
            const reference = createReferenceObject('PractitionerRole', selectedPractitionerRole.id as string, getPractitionerRoleDisplay(selectedPractitionerRole));
            setValue(`${context}.${index}.reference`, reference, { shouldDirty: true });
        } else if (referenceType === 'Patient' && patientState) {
            const reference = createReferenceObject('Patient', patientState.id as string, formatFhirHumanName(patientState.name));
            setValue(`${context}.${index}.reference`, reference, { shouldDirty: true });
        }
    };

    const addReference = () => {
        if (multiple || references.fields.length === 0) {
            references.append({
                referenceType: '',
                reference: null
            });
        }
    };

    const removeReference = (index: number) => {
        references.remove(index);
    };

    const isAutoSelectedType = (referenceType: string): boolean => {
        if (referenceType === 'PractitionerRole') {
            return !!selectedPractitionerRole;
        }
        if (referenceType === 'Patient') {
            return !!patientState;
        }
        return false;
    };

    const shouldShowPatientSearch = (referenceType: string): boolean => {
        return referenceType === 'Patient' && !patientState;
    };

    const getAutoSelectedDisplayName = (referenceType: string): string => {
        if (referenceType === 'PractitionerRole' && selectedPractitionerRole) {
            return getPractitionerRoleDisplay(selectedPractitionerRole);
        }
        if (referenceType === 'Patient' && patientState) {
            return formatFhirHumanName(patientState.name) || `Patient ${patientState.id}`;
        }

        return '';
    };

    const getCurrentReferenceType = (index: number): string => {
        return watch(`${context}.${index}.referenceType`) || '';
    };

    const canAddReference = (): boolean => {
        return multiple || references.fields.length === 0;
    };

    const handlePatientSelected = (index: number, patient: any) => {
        if (patient) {
            const reference = createReferenceObject('Patient', patient.id as string, formatFhirHumanName(patient.name));
            setValue(`${context}.${index}.reference`, reference, { shouldDirty: true });
        } else {
            setValue(`${context}.${index}.reference`, null, { shouldDirty: true });
        }
    };

    return (
        <>
            {references.fields.length === 0 && (
                <>
                    <Spacer margin="8"/>
                    {/* A long label on a phone would push the button past the card edge. */}
                    <Flex wrap>
                        <FlexItem>
                            <Heading level={4}>{label}</Heading>
                        </FlexItem>
                        <FlexItem>
                            {!readonly && (
                                <button
                                    type="button"
                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                    title={`Add ${label.toLowerCase()}`}
                                    onClick={addReference}
                                    disabled={!canAddReference() || disabled}
                                >
                                    <PlusCircle />
                                    Add Reference
                                </button>
                            )}
                        </FlexItem>
                    </Flex>
                    <Divider margin="2"/>
                    <Spacer margin="8"/>

                    <DismissibleAlert status="info">
                        No {label.toLowerCase()} added yet.
                    </DismissibleAlert>
                </>
            )}

            {references.fields.map((field: any, index: number) => {
                const currentReferenceType = getCurrentReferenceType(index);
                const isAutoSelected = isAutoSelectedType(currentReferenceType);
                const showPatientSearch = shouldShowPatientSearch(currentReferenceType);

                return (
                    <React.Fragment key={`${context}-${field.id}-${index}`}>
                        <Card>
                            <CardHeader>
                                <Flex align="center" justify="space-between">
                                    <FlexItem>
                                        <h4>
                                            {multiple ? `${label} ${index + 1}` : label}
                                        </h4>
                                    </FlexItem>
                                    <FlexItem>
                                        {!readonly && (
                                            <button
                                                type="button"
                                                className="btn btn-red-ghost"
                                                title={`Remove ${label.toLowerCase()}`}
                                                aria-label={`Remove ${label.toLowerCase()}`}
                                                onClick={() => removeReference(index)}
                                                disabled={disabled}
                                            >
                                                <Trash2 />
                                            </button>
                                        )}
                                    </FlexItem>
                                </Flex>
                            </CardHeader>

                            <CardBody>
                                <TypeSelector key={`${context}.${index}.referenceType`}
                                              context={`${context}.${index}.referenceType`}
                                              label="Reference Type"
                                              options={referenceTypes}
                                              required={required}
                                              disabled={disabled}
                                              onChange={(referenceType: string) => {
                                                  handleReferenceTypeChange(index, referenceType);
                                              }}/>

                                <Spacer margin={spacerMargin}/>

                                {currentReferenceType && (
                                    <>
                                        {isAutoSelected ? (
                                            <Flex align="center" gap={2}>
                                                <FlexItem>
                                                    {/* This was never a button: `disabled` + hardcoded
                                                        green pill styling, displaying a name. It is a
                                                        status BADGE, the same shape Spencer ruled on
                                                        for QuestionnairesPage — squared, font-normal,
                                                        colours preserved. Converting it to a disabled
                                                        <button> would freeze a focusable, button-
                                                        announced status label in place. */}
                                                    <Badge variant="outline"
                                                           className="rounded-md font-normal"
                                                           style={{
                                                               backgroundColor: '#e8f5e8',
                                                               borderColor: '#00a32a',
                                                               color: '#00a32a'
                                                           }}>
                                                        <Check />
                                                        {getAutoSelectedDisplayName(currentReferenceType)}
                                                    </Badge>
                                                </FlexItem>
                                                <FlexItem>
                                                    <Text variant="muted" size="12px">
                                                        (Auto-selected)
                                                    </Text>
                                                </FlexItem>
                                            </Flex>
                                        ) : showPatientSearch ? (
                                            <PatientSearch label={`Select ${currentReferenceType}`}
                                                           context={`patient`}
                                                           required={required}
                                                           disabled={disabled}
                                                           onPatientSelected={(patient) => handlePatientSelected(index, patient)}
                                                           showSelectedPatient={true}
                                                           selectedPatientStyle="button"
                                                           allowClear={true}/>
                                        ) : (
                                            <Flex align="end" gap={2}>
                                                <FlexItem style={{ flex: 1 }}>
                                                    <FhirReference key={`${context}.${index}.reference`}
                                                                   context={`${context}.${index}.reference`}
                                                                   label={`Select ${currentReferenceType}`}
                                                                   referenceType={currentReferenceType}
                                                                   referenceList={getReferenceList(currentReferenceType)}
                                                                   enableInlineActions={enableInlineActions}
                                                                   required={required}
                                                                   disabled={disabled}/>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                        <Spacer margin={spacerMargin}/>
                                    </>
                                )}
                            </CardBody>
                        </Card>

                        <Divider margin="8"/>

                        {multiple && index === references.fields.length - 1 && !readonly && (
                            <Flex align="center" justify="center">
                                <FlexItem>
                                    <button
                                        type="button"
                                        className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                        title={`Add ${label.toLowerCase()}`}
                                        onClick={addReference}
                                        disabled={!canAddReference() || disabled}
                                    >
                                        <PlusCircle />
                                        Add Reference
                                    </button>
                                </FlexItem>
                            </Flex>
                        )}
                    </React.Fragment>
                );
            })}
        </>
    );
};

export default FhirReferenceCollection;