import React from 'react';
import { Schedule } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirIdentifierDisplay } from '../../utils/fhirIdentifier';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { renderField } from '../../utils/renderField';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { Card, CardHeader } 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 FhirScheduleDisplayProps {
    schedule: Schedule;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirScheduleDisplay: React.FC<FhirScheduleDisplayProps> = ({
                                                                            schedule,
                                                                            isOpen,
                                                                            onClose,
                                                                            title = "Schedule Details"
                                                                        }) => {
    const renderActiveValue = () => {
        if (schedule?.active === true) {
            return 'Yes';
        }
        if (schedule?.active === false) {
            return 'No';
        }
        return '-';
    };

    const renderCommentValue = () => {
        if (!schedule?.comment) {
            return '-';
        }
        return (
            <div className="whitespace-pre-wrap break-words max-h-[120px] overflow-y-auto p-2 bg-muted/50 rounded text-sm">
                {schedule.comment}
            </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="Schedule" id={schedule.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={schedule} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        <Card>
                            <CardHeader>
                                <h4 className="text-lg font-semibold">
                                    {schedule?.actor?.[0]?.display || 'Schedule'}
                                </h4>
                                <p className="text-sm text-muted-foreground">{schedule?.resourceType}</p>
                            </CardHeader>
                        </Card>

                        <FieldGroup>
                            {renderField('Practitioner Role', <FhirReferenceDisplay references={schedule?.actor} />)}
                            {renderField('Schedule is in active use', renderActiveValue(), 'active')}
                            {renderField('Comment', renderCommentValue(), 'comment')}
                            {renderField('Identifiers', <FhirIdentifierDisplay identifier={schedule?.identifier}/>)}
                        </FieldGroup>

                        <Section title="Planning Horizon">
                            <FieldGroup>
                                {renderField('Period of time covered by schedule', <FhirPeriodDisplay period={schedule?.planningHorizon} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Services">
                            <FieldGroup>
                                {renderField('Service category', <FhirCodeableConceptDisplay code={schedule?.serviceCategory} multiple={true} />)}
                                {renderField('Service type', <FhirCodeableConceptDisplay code={schedule?.serviceType} multiple={true} />)}
                                {renderField('Type of specialty needed', <FhirCodeableConceptDisplay code={schedule?.specialty} multiple={true} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirScheduleDisplay;