import React from 'react';
import { ItemGroup } from "../components/ui/item-group";
import { Dosage } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from './fhirCodeableConcept';
import { FhirQuantityDisplay } from './fhirQuantity';
import { FhirRangeDisplay } from './fhirRange';
import { FhirRatioDisplay } from './fhirRatio';
import { Card, CardHeader, CardBody } from '../components/ui/wp-card';
import { Heading } from '../components/ui/heading';
import { renderField } from './renderField';

interface FhirDosageDisplayProps {
    dosage: Dosage | Dosage[] | undefined | null;
    className?: string;
    emptyText?: string;
    multiple?: boolean;
}

export const formatFhirDosage = (dosage: Dosage | undefined | null): string => {
    if (!dosage) {
        return '';
    }
    return dosage.text || '';
};

export const FhirDosageDisplay: React.FC<FhirDosageDisplayProps> = ({
                                                                        dosage,
                                                                        className,
                                                                        emptyText = '',
                                                                        multiple = false
                                                                    }) => {
    const renderDoseValue = (singleDosage: Dosage) => {
        if (singleDosage.doseAndRate && singleDosage.doseAndRate.length > 0) {
            const doseAndRate = singleDosage.doseAndRate[0];
            if (doseAndRate.doseQuantity) {
                return <FhirQuantityDisplay quantity={doseAndRate.doseQuantity} />;
            }
            if (doseAndRate.doseRange) {
                return <FhirRangeDisplay range={doseAndRate.doseRange} />;
            }
        }
        return '-';
    };

    const renderRateValue = (singleDosage: Dosage) => {
        if (singleDosage.doseAndRate && singleDosage.doseAndRate.length > 0) {
            const doseAndRate = singleDosage.doseAndRate[0];
            if (doseAndRate.rateRatio) {
                return <FhirRatioDisplay ratio={doseAndRate.rateRatio} />;
            }
            if (doseAndRate.rateRange) {
                return <FhirRangeDisplay range={doseAndRate.rateRange} />;
            }
            if (doseAndRate.rateQuantity) {
                return <FhirQuantityDisplay quantity={doseAndRate.rateQuantity} />;
            }
        }
        return '-';
    };

    const renderAsNeededValue = (singleDosage: Dosage) => {
        if (singleDosage.asNeededBoolean === true) {
            return 'Yes';
        }
        if (singleDosage.asNeededCodeableConcept) {
            return <FhirCodeableConceptDisplay code={singleDosage.asNeededCodeableConcept} />;
        }
        return '-';
    };

    const renderSingleDosage = (singleDosage: Dosage, index?: number) => {
        // - `variant="secondary"` dropped, and it was ALREADY dead before this edit. The
        // ui/wp-card adapter reproduces WordPress's Card as `size` / `isRounded` / `isBorderless`;
        // it has no `variant`, and `.wp-card--secondary` does not exist in index.css. The prop was
        // being spread onto the underlying <div>, where React emits it as an unknown DOM attribute
        // and no styling is applied - so removing it changes nothing on screen.
        // tsc found this ONE call site. A grep for `variant=` across files importing wp-card
        // returns 16, all Badge/Button/Alert variants - the compiler is the precise instrument, not
        // the search.
        // This comment sits ABOVE the `return`, not inside it: a `{/*... */}` as the first thing
        // inside `return (` parses as an object literal. recorded that trap five times and
        // I still walked into it while writing this very note.
        return (
            <Card key={index}
                  style={{ marginBottom: multiple && index !== undefined ? '16px' : '0' }}>
                {multiple && index !== undefined && (
                    <CardHeader>
                        <Heading level={5}>Dosage {index + 1}</Heading>
                    </CardHeader>
                )}
                <CardBody>
                    <ItemGroup isSeparated
                               isRounded
                               isBordered
                               size="large"
                               style={{ background: 'var(--surface)' }}>
                        {renderField('Instructions', singleDosage.text || '')}
                        {renderField('Additional Instructions', <FhirCodeableConceptDisplay code={singleDosage.additionalInstruction} multiple={true} />)}
                        {renderField('Patient Instructions', singleDosage.patientInstruction)}
                        {renderField('Timing', <FhirCodeableConceptDisplay code={singleDosage.timing?.code} />)}
                        {renderField('As Needed', renderAsNeededValue(singleDosage))}
                        {renderField('Site', <FhirCodeableConceptDisplay code={singleDosage.site} />)}
                        {renderField('Route', <FhirCodeableConceptDisplay code={singleDosage.route} />)}
                        {renderField('Method', <FhirCodeableConceptDisplay code={singleDosage.method} />)}
                        {renderField('Dose Amount', renderDoseValue(singleDosage))}
                        {renderField('Rate', renderRateValue(singleDosage))}
                        {renderField('Max Dose Per Period', <FhirRatioDisplay ratio={singleDosage.maxDosePerPeriod} />)}
                        {renderField('Max Dose Per Administration', <FhirQuantityDisplay quantity={singleDosage.maxDosePerAdministration} />)}
                        {renderField('Max Dose Per Lifetime', <FhirQuantityDisplay quantity={singleDosage.maxDosePerLifetime} />)}
                    </ItemGroup>
                </CardBody>
            </Card>
        );
    };

    if (!dosage || (Array.isArray(dosage) && dosage.length === 0)) {
        return <span className={className}>{emptyText || '-'}</span>;
    }

    if (multiple && Array.isArray(dosage)) {
        return (
            <div className={className}>
                {dosage.map((singleDosage, index) => renderSingleDosage(singleDosage, index))}
            </div>
        );
    }

    const singleDosage = Array.isArray(dosage) ? dosage[0] : dosage;
    return (
        <div className={className}>
            {renderSingleDosage(singleDosage)}
        </div>
    );
};