import React from 'react';
import { Appointment, AppointmentParticipant } from 'fhir/r4';
import { Check } from 'lucide-react';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept.tsx';
import { FhirCodeDisplay } from '../../utils/fhirCode.tsx';
import { renderField } from '../../utils/renderField.tsx';
import { FhirReferenceDisplay } from '../../utils/fhirReference.tsx';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { Card, 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 FhirAppointmentDisplayProps {
    appointment: Appointment;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirAppointmentDisplay: React.FC<FhirAppointmentDisplayProps> = ({
                                                                                  appointment,
                                                                                  isOpen,
                                                                                  onClose,
                                                                                  title = 'Appointment Details'
                                                                              }) => {
    const startTime = new Date(new Date(appointment.start).getTime() - new Date(appointment.start).getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    const endTime = new Date(new Date(appointment.end).getTime() - new Date(appointment.end).getTimezoneOffset() * 60000).toISOString().slice(0, 16);

    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="Appointment" id={appointment.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={appointment} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Start', startTime, 'start')}
                            {renderField('End', endTime, 'end')}
                            {renderField('Appointment Status', <FhirCodeDisplay code={appointment.status}/>, 'status')}
                            {renderField('Appointment Type', <FhirCodeableConceptDisplay code={appointment.appointmentType}/>, 'appointmentType.coding[0].display')}
                            {renderField('Description', appointment.description ? appointment.description : '-', 'description')}
                            {renderField('Patient Instructions', appointment.patientInstruction ? appointment.patientInstruction : '-', 'patientInstruction')}
                            {renderField('Comment', appointment.comment ? appointment.comment : '-', 'comment')}
                        </FieldGroup>

                        <Section title="Participants">
                            <Card>
                                <CardContent>
                                    <div className="space-y-4">
                                        {appointment && appointment.participant.map((participant: AppointmentParticipant, index: number) => (
                                            <div key={index} className="flex w-full items-center gap-2 rounded border border-[var(--success)] bg-[var(--green-soft)] px-3 py-2 text-[var(--success)]">
                                                <Check className="h-4 w-4 shrink-0" />
                                                <span>{participant.actor?.display} - <FhirCodeableConceptDisplay code={participant.type}/></span>
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        </Section>

                        <Section title="Reason for Appointment">
                            <FieldGroup>
                                {renderField('Reason Code', <FhirCodeableConceptDisplay code={appointment.reasonCode} multiple={true}/>)}
                                {renderField('Reason Reference', <FhirReferenceDisplay references={appointment.reasonReference}/>)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};