import React from 'react';
import { PractitionerRole } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FHIRContactPointDisplay } from '../../utils/fhirContactPoint';
import { FhirIdentifierDisplay } from '../../utils/fhirIdentifier';
import { FhirOperationalHoursDisplay } from '../../utils/fhirOperationalHours';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { renderField } from '../../utils/renderField';
import { useAuthServiceContext } from '../../services/AuthService.tsx';
import {
    LEADERSHIP_DESIGNATION_EXTENSION_URL,
    PRIMARY_ORGANIZATION_ROLE_EXTENSION_URL,
    TRAINING_LEVEL_EXTENSION_URL,
} from '../../config/staffRoles.ts';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { Card, CardHeader, CardContent } from '../ui/card';
import { FieldHistoryProvider, FieldHistoryScope } from '../FieldHistory/FieldHistoryProvider';
import { ShowFieldHistoryToggle } from '../FieldHistory/ShowFieldHistoryToggle';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirPractitionerRoleDisplayProps {
    practitionerRole: PractitionerRole;
    isOpen?: boolean;
    onClose?: () => void;
    title?: string;
    asModal?: boolean;
}

export const FhirPractitionerRoleDisplay: React.FC<FhirPractitionerRoleDisplayProps> = ({
                                                                                            practitionerRole,
                                                                                            isOpen = true,
                                                                                            onClose,
                                                                                            title = "Practitioner Role Details",
                                                                                            asModal = true
                                                                                        }) => {
    const { getCognitoGroup } = useAuthServiceContext();
    const workspaceGroup = getCognitoGroup(practitionerRole);
    const workspace = workspaceGroup
        ? workspaceGroup
            .replace(/s$/, '')
            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
        : '';
    const getExtensionConcepts = (url: string) =>
        (practitionerRole.extension ?? [])
            .filter((extension) => extension.url === url && extension.valueCodeableConcept)
            .map((extension) => extension.valueCodeableConcept!);
    const primaryOrganizationRole =
        getExtensionConcepts(PRIMARY_ORGANIZATION_ROLE_EXTENSION_URL)[0] ||
        practitionerRole.code?.[0];
    const leadershipDesignations = getExtensionConcepts(
        LEADERSHIP_DESIGNATION_EXTENSION_URL,
    );
    const trainingLevel = getExtensionConcepts(TRAINING_LEVEL_EXTENSION_URL)[0];
    const renderActiveValue = () => {
        if (practitionerRole?.active === true) {
            return 'Yes';
        }
        if (practitionerRole?.active === false) {
            return 'No';
        }
        return '-';
    };

    const renderNotAvailable = () => {
        if (!practitionerRole.notAvailable || practitionerRole.notAvailable.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No unavailable periods recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {practitionerRole.notAvailable.map((notAvailable, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h6 className="text-sm font-semibold">Unavailable Period {index + 1}</h6>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Description', notAvailable.description)}
                                    {renderField('Period', <FhirPeriodDisplay period={notAvailable.during} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderContent = () => (
        <>
            <div className="bg-surface">
                <FieldGroup>
                    {renderField('Practitioner', <FhirReferenceDisplay references={practitionerRole?.practitioner} />)}
                    {renderField('Organization', <FhirReferenceDisplay references={practitionerRole?.organization} />)}
                    {renderField('Workspace', workspace || '-')}
                    {renderField('Primary organization role', <FhirCodeableConceptDisplay code={primaryOrganizationRole} emptyText="-" />)}
                    {renderField('Organization roles', <FhirCodeableConceptDisplay code={practitionerRole?.code} multiple={true} emptyText="-" />)}
                    {renderField('Leadership designations', <FhirCodeableConceptDisplay code={leadershipDesignations} multiple={true} emptyText="-" />)}
                    {renderField('Training level', <FhirCodeableConceptDisplay code={trainingLevel} emptyText="-" />)}
                    {renderField('Specific specialty of the practitioner', <FhirCodeableConceptDisplay code={practitionerRole?.specialty} multiple={true} />)}
                    {renderField('Active', renderActiveValue(), 'active')}
                    {renderField('Period', <FhirPeriodDisplay period={practitionerRole?.period} />)}
                    {renderField('Contact', <FHIRContactPointDisplay contact={practitionerRole?.telecom}/>)}
                    {renderField('Identifiers', <FhirIdentifierDisplay identifier={practitionerRole?.identifier}/>)}
                </FieldGroup>
            </div>

            <Section title="Locations & Services">
                <div className="bg-surface">
                    <FieldGroup>
                        {renderField('The location(s) at which this practitioner provides care', <FhirReferenceDisplay references={practitionerRole?.location} />)}
                        {renderField('The list of healthcare services that this worker provides for this role\'s Organization/Location(s)', <FhirReferenceDisplay references={practitionerRole?.healthcareService} />)}
                    </FieldGroup>
                </div>
            </Section>

            <Section title="Availability">
                <FhirOperationalHoursDisplay hours={practitionerRole.availableTime} />
            </Section>

            <Section title="Not Available">
                {renderNotAvailable()}
            </Section>
        </>
    );

    if (!asModal) {
        return (
            <div className="max-w-[1000px]">
                {renderContent()}
            </div>
        );
    }

    if (!isOpen) return null;

    return (
        <Dialog
            open={isOpen}
            onOpenChange={(next) => {
                if (!next) onClose?.();
            }}
        >
            <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="PractitionerRole" id={practitionerRole.id}>
                        <DialogHeader className="flex-row items-center justify-between gap-4 text-left sm:text-left">
                            <div className="flex items-center gap-2">
                                <DialogTitle>{title}</DialogTitle>
                                <RecordEditedMarker resource={practitionerRole} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        {renderContent()}
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirPractitionerRoleDisplay;