import React, { useEffect, useState } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
import type { FhirResource } from 'fhir/r4';
import clsx from 'clsx';
import { Plus, Trash2 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import {
    IValueSet,
    useAllergyIntoleranceServiceContext,
    useAuthServiceContext,
    useConditionServiceContext,
    useObservationServiceContext,
    useQuestionnaireResponseServiceContext,
    useValueSetServiceContext,
} from '../../services';
import {
    useFhirAllergyIntolerances,
    useFhirConditions,
    useFhirFamilyMemberHistories,
    useFhirFamilyMemberHistoryBroadcast,
    useFhirObservations,
    useFhirQuestionnaireResponses,
} from '../../hooks';
import {
    AgeFields,
    CheckField,
    Choice,
    CodeSearch,
    CodedChoice,
    NotesField,
    PeriodFields,
    RangeFields,
    ReferencesField,
    TextField,
} from './familyHistoryFields';
import './FhirFamilyMemberHistory.css';

interface FhirFamilyMemberHistoryProps {
    elevated?: boolean;
    disabled?: boolean;
    ignoreBroadcast?: boolean;
    /** Off inside a modal, so a linked record never opens a window over a window. */
    enableInlineActions?: boolean;
}

// Patient words for FHIR codes whose value-set displays are jargon (08-26 ruling).
const STATUS_WORDS: Record<string, string> = {
    completed: 'All of it',
    partial: 'Some of it',
    'health-unknown': 'None of it',
    'entered-in-error': 'Added by mistake',
};

const ABSENT_REASON_WORDS: Record<string, string> = {
    'subject-unknown': 'Who they are is not known',
    withheld: 'Kept private',
    'unable-to-obtain': 'Could not find out',
    deferred: 'To be added later',
};

const COMMON_RELATIVES = [
    'MTH', 'FTH', 'SIS', 'BRO', 'DAU', 'SON',
    'MGRMTH', 'MGRFTH', 'PGRMTH', 'PGRFTH',
    'MAUNT', 'PAUNT', 'MUNCLE', 'PUNCLE', 'COUSN', 'HSIS', 'HBRO',
];

const BIRTH_CHOICES = [
    { value: 'bornDate', label: 'Date of birth' },
    { value: 'bornPeriod', label: 'Roughly when they were born' },
    { value: 'ageAge', label: 'Their age' },
    { value: 'ageRange', label: 'An age range' },
];

const DEATH_CHOICES = [
    { value: 'age', label: 'At an age' },
    { value: 'range', label: 'Within an age range' },
    { value: 'date', label: 'On a date' },
];

const ONSET_CHOICES = [
    { value: 'age', label: 'At an age' },
    { value: 'range', label: 'Within an age range' },
    { value: 'period', label: 'Between dates' },
];

const REFERENCE_KINDS = [
    { key: 'Condition', label: 'A condition' },
    { key: 'Observation', label: 'A test result or reading' },
    { key: 'AllergyIntolerance', label: 'An allergy' },
    { key: 'QuestionnaireResponse', label: 'A form you filled in' },
];

export const FhirFamilyMemberHistory: React.FC<FhirFamilyMemberHistoryProps> = ({ elevated = true, disabled = false, ignoreBroadcast = false, enableInlineActions = true }) => {
    const { watch, control, setValue, getValues } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    // Staff only: the patient's approved form has no view/create beside a link.
    const staff = !!userRole && ![USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole);
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const { getConditionDisplay } = useConditionServiceContext();
    const { getObservationDisplay } = useObservationServiceContext();
    const { getAllergyIntoleranceDisplay } = useAllergyIntoleranceServiceContext();
    const { getQuestionnaireResponseDisplay } = useQuestionnaireResponseServiceContext();

    const [historyStatus, setHistoryStatus] = useState<IValueSet[]>([]);
    const [historyAbsentReason, setHistoryAbsentReason] = useState<IValueSet[]>([]);
    const [familyMember, setFamilyMember] = useState<IValueSet[]>([]);
    const [administrativeGender, setAdministrativeGender] = useState<IValueSet[]>([]);

    useFhirFamilyMemberHistories();
    useFhirFamilyMemberHistoryBroadcast({ ignore: ignoreBroadcast });
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { allergyIntolerancesList } = useFhirAllergyIntolerances();
    const { questionnaireResponsesList } = useFhirQuestionnaireResponses();

    const conditionFieldArray = useFieldArray({ control, name: 'condition' });

    const status = watch('status');
    const bornType = watch('bornType');
    const ageType = watch('ageType');
    const deceasedBoolean = watch('deceasedBoolean');
    const deceasedType = watch('deceasedType');
    const recorded = watch('date');

    const birthMode = bornType === 'date' ? 'bornDate'
        : bornType === 'period' ? 'bornPeriod'
            : ageType === 'age' ? 'ageAge'
                : ageType === 'range' ? 'ageRange'
                    : '';

    useEffect(() => {
        if (ageType === 'age' && !getValues('ageAge.unit')) {
            setValue('ageAge.unit', 'years');
        }
    }, [ageType, getValues, setValue]);

    useEffect(() => {
        const load = async () => {
            try {
                const [statuses, absentReasons, relatives, genders] = await Promise.all([
                    fetchValueSet(valueSetUrls.historyStatus),
                    fetchValueSet(valueSetUrls.historyAbsentReason),
                    fetchValueSet(valueSetUrls.familyMember),
                    fetchValueSet(valueSetUrls.administrativeGender),
                ]);
                setHistoryStatus(statuses);
                setHistoryAbsentReason(absentReasons);
                setFamilyMember(relatives);
                setAdministrativeGender(genders);
            } catch (err) {
                console.error('Error loading value sets:', err);
            }
        };
        load();
    }, [fetchValueSet, valueSetUrls]);

    const chooseBirthMode = (mode: string) => {
        setValue('bornType', mode === 'bornDate' ? 'date' : mode === 'bornPeriod' ? 'period' : '', { shouldDirty: true });
        setValue('ageType', mode === 'ageAge' ? 'age' : mode === 'ageRange' ? 'range' : '', { shouldDirty: true });
    };

    const addCondition = () => conditionFieldArray.append({
        code: null,
        outcome: null,
        onsetType: '',
        onsetRange: { low: { value: 0 }, high: { value: 100 } },
        note: [],
    });

    const listFor = (kind: string): FhirResource[] => {
        switch (kind) {
            case 'Condition': return conditionsList;
            case 'Observation': return observationsList;
            case 'AllergyIntolerance': return allergyIntolerancesList;
            case 'QuestionnaireResponse': return questionnaireResponsesList;
            default: return [];
        }
    };

    const describe = (resource: FhirResource): string => {
        switch (resource.resourceType) {
            case 'Condition': return getConditionDisplay(resource);
            case 'Observation': return getObservationDisplay(resource);
            case 'AllergyIntolerance': return getAllergyIntoleranceDisplay(resource);
            case 'QuestionnaireResponse': return getQuestionnaireResponseDisplay(resource);
            default: return resource.id ?? resource.resourceType;
        }
    };

    return (
        <Card className={clsx('ahr-fmh', !elevated && 'ahr-fmh--flat')}>
            <CardHeader>
                <CardTitle>Details</CardTitle>
            </CardHeader>
            <CardContent className="ahr-fmh-body">
                <TextField label="Name" context="name" placeholder="Their name, if you want to add it" disabled={disabled}/>

                <CodedChoice label="Relationship"
                             context="relationship"
                             options={familyMember}
                             common={COMMON_RELATIVES}
                             required={true}
                             disabled={disabled}/>

                <CodedChoice label="How much of their health history is known?"
                             context="status"
                             options={historyStatus}
                             words={STATUS_WORDS}
                             asCode={true}
                             required={true}
                             disabled={disabled}/>

                {status && status !== 'completed' && (
                    <CodedChoice label="Why some details are missing"
                                 context="dataAbsentReason"
                                 options={historyAbsentReason}
                                 words={ABSENT_REASON_WORDS}
                                 disabled={disabled}/>
                )}

                <CodedChoice label="Gender" context="sex" options={administrativeGender} disabled={disabled}/>

                <Choice label="Date of birth or age"
                        value={birthMode}
                        onChange={chooseBirthMode}
                        groups={[{ options: BIRTH_CHOICES }]}
                        disabled={disabled}/>

                {birthMode === 'bornDate' && (
                    <TextField label="Date of birth" context="bornDate" type="date" disabled={disabled}/>
                )}
                {birthMode === 'bornPeriod' && (
                    <PeriodFields label="Born between" context="bornPeriod" disabled={disabled}/>
                )}
                {birthMode === 'ageAge' && (
                    <AgeFields label="Age" context="ageAge" disabled={disabled}/>
                )}
                {birthMode === 'ageRange' && (
                    <RangeFields label="Age range" context="ageRange" disabled={disabled}/>
                )}
                {ageType && (
                    <CheckField label="Age is an estimate" context="estimatedAge" disabled={disabled}/>
                )}

                <CheckField label="Has died" context="deceasedBoolean" disabled={disabled}/>

                {deceasedBoolean && (
                    <>
                        <Choice label="When they died"
                                value={deceasedType ?? ''}
                                onChange={(value) => setValue('deceasedType', value, { shouldDirty: true })}
                                groups={[{ options: DEATH_CHOICES }]}
                                disabled={disabled}/>
                        {deceasedType === 'age' && <AgeFields label="Age when they died" context="deceasedAge" disabled={disabled}/>}
                        {deceasedType === 'range' && <RangeFields label="Age range when they died" context="deceasedRange" disabled={disabled}/>}
                        {deceasedType === 'date' && <TextField label="Date they died" context="deceasedDate" type="date" disabled={disabled}/>}
                    </>
                )}

                {recorded && (
                    <p className="ahr-fmh-hint">Last updated {new Date(recorded).toLocaleString()}</p>
                )}

                <Tabs defaultValue="conditions" className="ahr-fmh-tabs">
                    <TabsList>
                        <TabsTrigger value="conditions">Conditions</TabsTrigger>
                        <TabsTrigger value="reason">Why this is on file</TabsTrigger>
                        <TabsTrigger value="notes">Notes</TabsTrigger>
                    </TabsList>

                    <TabsContent value="conditions" className="ahr-fmh-panel">
                        <p className="ahr-fmh-subhead">Their conditions</p>
                        {conditionFieldArray.fields.length === 0 && (
                            <p className="ahr-fmh-hint">No conditions added yet.</p>
                        )}

                        {conditionFieldArray.fields.map((condition, index) => {
                            const onsetType = watch(`condition.${index}.onsetType`);
                            return (
                                <section key={condition.id} className="ahr-fmh-condition" aria-label={`Condition ${index + 1}`}>
                                    <div className="ahr-fmh-condition-head">
                                        <p className="ahr-fmh-subhead">Condition {index + 1}</p>
                                        <Button variant="ghost" size="icon" aria-label="Remove condition" disabled={disabled}
                                                onClick={() => conditionFieldArray.remove(index)}>
                                            <Trash2/>
                                        </Button>
                                    </div>

                                    <CodeSearch label="Condition"
                                                context={`condition.${index}.code`}
                                                valueSetUrl={valueSetUrls.conditionCode}
                                                placeholder="Start typing, e.g. diabetes"
                                                required={true}
                                                disabled={disabled}/>

                                    <CodeSearch label="Outcome"
                                                context={`condition.${index}.outcome`}
                                                valueSetUrl={valueSetUrls.conditionOutcome}
                                                placeholder="Start typing, e.g. recovered"
                                                disabled={disabled}/>

                                    <CheckField label="Contributed to their death" context={`condition.${index}.contributedToDeath`} disabled={disabled}/>

                                    <Choice label="When it started"
                                            value={onsetType ?? ''}
                                            onChange={(value) => setValue(`condition.${index}.onsetType`, value, { shouldDirty: true })}
                                            groups={[{ options: ONSET_CHOICES }]}
                                            disabled={disabled}/>
                                    {onsetType === 'age' && <AgeFields label="Age it started" context={`condition.${index}.onsetAge`} disabled={disabled}/>}
                                    {onsetType === 'range' && <RangeFields label="Age range it started" context={`condition.${index}.onsetRange`} disabled={disabled}/>}
                                    {onsetType === 'period' && <PeriodFields label="Dates it started" context={`condition.${index}.onsetPeriod`} disabled={disabled}/>}

                                    <NotesField label="Notes about this condition" context={`condition.${index}.note`} disabled={disabled}/>
                                </section>
                            );
                        })}

                        <Button variant="outline" size="sm" className="ahr-fmh-add" disabled={disabled} onClick={addCondition}>
                            <Plus/> Add a condition
                        </Button>
                    </TabsContent>

                    <TabsContent value="reason" className="ahr-fmh-panel">
                        <CodeSearch label="Reasons"
                                    context="reasonCode"
                                    valueSetUrl={valueSetUrls.clinicalFindings}
                                    placeholder="Start typing, e.g. screening"
                                    multiple={true}
                                    disabled={disabled}/>
                        <ReferencesField label="Records it relates to"
                                         context="reasonReference"
                                         kinds={REFERENCE_KINDS}
                                         listFor={listFor}
                                         describe={describe}
                                         disabled={disabled}
                                         linkActions={enableInlineActions && staff}/>
                    </TabsContent>

                    <TabsContent value="notes" className="ahr-fmh-panel">
                        <NotesField label="Notes" context="note" disabled={disabled}/>
                    </TabsContent>
                </Tabs>
            </CardContent>
        </Card>
    );
};