import React from 'react';
import { DetectedIssue } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { formatDateTime } from '../../utils/dateUtils';
import { renderField } from '../../utils/renderField';
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 { PrintRecord } from '../ui/print-record';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirDetectedIssueDisplayProps {
    detectedIssue: DetectedIssue;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirDetectedIssueDisplay: React.FC<FhirDetectedIssueDisplayProps> = ({
                                                                                      detectedIssue,
                                                                                      isOpen,
                                                                                      onClose,
                                                                                      title = "Detected Issue Details"
                                                                                  }) => {
    const renderIdentifiedValue = () => {
        if (detectedIssue.identifiedDateTime) {
            return formatDateTime(detectedIssue.identifiedDateTime);
        }
        if (detectedIssue.identifiedPeriod) {
            return <FhirPeriodDisplay period={detectedIssue.identifiedPeriod} />;
        }
        return '-';
    };

    const renderEvidence = () => {
        if (!detectedIssue.evidence || detectedIssue.evidence.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No evidence recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {detectedIssue.evidence.map((evidence, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Evidence {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Manifestation', <FhirCodeableConceptDisplay code={evidence.code} multiple={true} />)}
                                    {renderField('Supporting Information', <FhirReferenceDisplay references={evidence.detail} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderMitigation = () => {
        if (!detectedIssue.mitigation || detectedIssue.mitigation.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No mitigation actions recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {detectedIssue.mitigation.map((mitigation, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Mitigation {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('What mitigation?', <FhirCodeableConceptDisplay code={mitigation.action} />)}
                                    {renderField('Date', formatDateTime(mitigation.date))}
                                    {renderField('Author', <FhirReferenceDisplay references={mitigation.author} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    // `detectedIssue` is frequently a forced cast over a union of resource types (several callers
    // keep one `selectedItem`/`selected.resource` and multiplex it across many `Fhir*Display`
    // modals, gating only via `isOpen`) -- it can be the wrong resource shape, or undefined,
    // whenever `isOpen` is false. This guard must run before anything below touches
    // `detectedIssue.*` so a non-DetectedIssue/absent value while closed never throws (mirrors the
    // original `if (!isOpen) return null;` that ran before WP's `<Modal>` was ever constructed).
    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" data-print-region="true">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="DetectedIssue" id={detectedIssue.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={detectedIssue} />
                            </div>
                            <ShowFieldHistoryToggle />
            <PrintRecord/>
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Issue Category', <FhirCodeableConceptDisplay code={detectedIssue.code} />, 'code.coding[0].display')}
                            {renderField('Status', <FhirCodeDisplay code={detectedIssue.status} />, 'status')}
                            {renderField('Severity', <FhirCodeDisplay code={detectedIssue.severity} />, 'severity')}
                            {renderField('Description and Context', detectedIssue.detail, 'detail')}
                            {renderField('When Identified', renderIdentifiedValue(), detectedIssue.identifiedDateTime ? 'identifiedDateTime' : undefined)}
                            {renderField('Patient', <FhirReferenceDisplay references={detectedIssue.patient} />)}
                            {renderField('Author', <FhirReferenceDisplay references={detectedIssue.author} />)}
                        </FieldGroup>

                        <Section title="Implicated Resources">
                            <FieldGroup>
                                {renderField('Problem resource', <FhirReferenceDisplay references={detectedIssue.implicated} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Evidence">
                            {renderEvidence()}
                        </Section>

                        <Section title="Mitigation Actions">
                            {renderMitigation()}
                        </Section>

                        <Section title="References">
                            <FieldGroup>
                                {renderField('URI to more information', detectedIssue.reference ? (
                                    <a href={detectedIssue.reference} target="_blank" rel="noopener noreferrer"
                                       className="text-sky-700 underline">
                                        {detectedIssue.reference}
                                    </a>
                                ) : '-', 'reference')}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirDetectedIssueDisplay;