import React, { Suspense, useEffect, useId, useMemo, useRef, useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { debounce } from 'lodash';
import { ExternalLink, Plus, Trash2, X } from 'lucide-react';
import type { FhirResource, Reference } from 'fhir/r4';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { Checkbox } from '../ui/checkbox';
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '../ui/select';
import { IValueSet, useAuthServiceContext, useFhirServiceContext, useValueSetServiceContext } from '../../services';
import { formatFhirHumanName } from '../../utils/fhirHumanName.tsx';
import { getNestedError } from '../../utils/formUtils.ts';

// The relative form's controls, built on the app's own ui primitives rather than WordPress-shaped adapters.

export const sentenceCase = (text: string): string => (text ? text.charAt(0).toUpperCase() + text.slice(1) : text);

export type ChoiceOption = { value: string; label: string };
export type ChoiceGroup = { label?: string; options: ChoiceOption[] };

const FieldError: React.FC<{ show: boolean; children: React.ReactNode }> = ({ show, children }) =>
    show ? <p className="ahr-fmh-error" role="alert">{children}</p> : null;

interface ChoiceProps {
    label: string;
    value: string;
    onChange: (value: string) => void;
    groups: ChoiceGroup[];
    placeholder?: string;
    required?: boolean;
    disabled?: boolean;
    invalid?: boolean;
    focusRef?: React.Ref<HTMLDivElement>;
}

/** A labelled single choice. */
export const Choice: React.FC<ChoiceProps> = ({ label, value, onChange, groups, placeholder = 'Choose one', required, disabled, invalid, focusRef }) => {
    const id = useId();
    return (
        <div className="ahr-fmh-field" ref={focusRef} tabIndex={-1}>
            <Label htmlFor={id} className="ahr-fmh-label">
                {label}{required && <span className="ahr-fmh-required" aria-hidden="true">*</span>}
            </Label>
            {/* Radix reports "" when a value arrives before its option does (a reset on load); nothing here clears. */}
            <Select value={value || undefined} onValueChange={(next) => { if (next) onChange(next); }} disabled={disabled}>
                <SelectTrigger id={id} className="ahr-fmh-select" aria-invalid={invalid || undefined}>
                    <SelectValue placeholder={placeholder}/>
                </SelectTrigger>
                {/* Item-aligned: Radix sizes it to the viewport, which the popper's max-height class cannot under Tailwind 3. */}
                <SelectContent>
                    {groups.filter((group) => group.options.length > 0).map((group, index) => (
                        <SelectGroup key={group.label ?? index}>
                            {group.label && <SelectLabel>{group.label}</SelectLabel>}
                            {group.options.map((option) => (
                                <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>
                            ))}
                        </SelectGroup>
                    ))}
                </SelectContent>
            </Select>
        </div>
    );
};

interface CodedChoiceProps {
    label: string;
    context: string;
    options: IValueSet[];
    /** Patient words for a code, where the value set's own display is FHIR jargon. */
    words?: Record<string, string>;
    /** Codes offered first, under "Most common". */
    common?: string[];
    required?: boolean;
    disabled?: boolean;
    /** Store the bare code rather than the coding. */
    asCode?: boolean;
}

/** A value-set choice bound to the form, storing the coding (or the bare code). */
export const CodedChoice: React.FC<CodedChoiceProps> = ({ label, context, options, words, common, required, disabled, asCode }) => {
    const { control, formState: { errors } } = useFormContext();
    const invalid = Boolean(getNestedError(errors, context));

    const groups = useMemo((): ChoiceGroup[] => {
        const toOption = (option: IValueSet): ChoiceOption => ({
            value: option.code,
            label: words?.[option.code] ?? sentenceCase(option.display || option.code),
        });
        if (!common?.length) return [{ options: options.map(toOption) }];
        const first = common.map((code) => options.find((option) => option.code === code)).filter((o): o is IValueSet => Boolean(o));
        const rest = options.filter((option) => !common.includes(option.code));
        return [
            { label: 'Most common', options: first.map(toOption) },
            { label: 'Other relatives', options: rest.map(toOption) },
        ];
    }, [options, words, common]);

    return (
        <>
            <Controller name={context}
                        control={control}
                        rules={{ required }}
                        render={({ field }) => (
                            <Choice label={label}
                                    value={(asCode ? field.value : field.value?.code) ?? ''}
                                    onChange={(code) => field.onChange(asCode ? code : options.find((option) => option.code === code) ?? null)}
                                    groups={groups}
                                    required={required}
                                    disabled={disabled}
                                    invalid={invalid}
                                    focusRef={field.ref}/>
                        )}/>
            <FieldError show={invalid}>{label} is required</FieldError>
        </>
    );
};

interface TextFieldProps {
    label: string;
    context: string;
    type?: 'text' | 'date' | 'number';
    placeholder?: string;
    disabled?: boolean;
}

/** A labelled text, date or number input bound to the form. */
export const TextField: React.FC<TextFieldProps> = ({ label, context, type = 'text', placeholder, disabled }) => {
    const { control } = useFormContext();
    const id = useId();
    return (
        <Controller name={context}
                    control={control}
                    render={({ field }) => (
                        <div className="ahr-fmh-field">
                            <Label htmlFor={id} className="ahr-fmh-label">{label}</Label>
                            <Input id={id}
                                   ref={field.ref}
                                   name={field.name}
                                   type={type}
                                   placeholder={placeholder}
                                   disabled={disabled}
                                   value={type === 'date' ? String(field.value ?? '').slice(0, 10) : field.value ?? ''}
                                   onBlur={field.onBlur}
                                   onChange={(event) => field.onChange(event.target.value)}/>
                        </div>
                    )}/>
    );
};

interface CheckFieldProps {
    label: string;
    context: string;
    disabled?: boolean;
}

/** A labelled yes/no bound to the form. */
export const CheckField: React.FC<CheckFieldProps> = ({ label, context, disabled }) => {
    const { control } = useFormContext();
    const id = useId();
    return (
        <Controller name={context}
                    control={control}
                    render={({ field }) => (
                        <div className="ahr-fmh-check">
                            <Checkbox id={id}
                                      checked={Boolean(field.value)}
                                      disabled={disabled}
                                      onCheckedChange={(checked) => field.onChange(checked === true)}/>
                            <Label htmlFor={id} className="ahr-fmh-label">{label}</Label>
                        </div>
                    )}/>
    );
};

/** An age: a number and its unit, stored as `{ value, unit }`. */
export const AgeFields: React.FC<{ label: string; context: string; disabled?: boolean }> = ({ label, context, disabled }) => {
    const { watch, setValue } = useFormContext();
    const { ageUnits } = useValueSetServiceContext();
    const id = useId();
    const age = watch(context) ?? {};
    const unit = ageUnits.find((option: IValueSet) => option.code === age.unit || option.display === age.unit)?.display ?? 'years';

    return (
        <div className="ahr-fmh-pair">
            <div className="ahr-fmh-field">
                <Label htmlFor={id} className="ahr-fmh-label">{label}</Label>
                <Input id={id}
                       type="number"
                       min={0}
                       inputMode="numeric"
                       disabled={disabled}
                       value={age.value ?? ''}
                       onChange={(event) => setValue(context, {
                           ...age,
                           value: event.target.value === '' ? undefined : Number(event.target.value),
                           unit,
                       }, { shouldDirty: true })}/>
            </div>
            <Choice label="In"
                    value={unit}
                    onChange={(next) => setValue(context, { ...age, unit: next }, { shouldDirty: true })}
                    groups={[{ options: ageUnits.map((option: IValueSet) => ({ value: option.display, label: option.display })) }]}
                    disabled={disabled}/>
        </div>
    );
};

/** An age range in years, stored as a FHIR Range. */
export const RangeFields: React.FC<{ label: string; context: string; disabled?: boolean }> = ({ label, context, disabled }) => {
    const { watch, setValue } = useFormContext();
    const { ucumSystemUrl } = useValueSetServiceContext();
    const lowId = useId();
    const highId = useId();
    const range = watch(context) ?? {};

    const set = (end: 'low' | 'high', raw: string) => setValue(context, {
        ...range,
        [end]: { ...range[end], system: ucumSystemUrl, value: raw === '' ? undefined : Number(raw) },
    }, { shouldDirty: true });

    return (
        <fieldset className="ahr-fmh-fieldset">
            <legend className="ahr-fmh-label">{label}</legend>
            <div className="ahr-fmh-pair">
                <div className="ahr-fmh-field">
                    <Label htmlFor={lowId} className="ahr-fmh-label">From age</Label>
                    <Input id={lowId} type="number" min={0} inputMode="numeric" disabled={disabled}
                           value={range.low?.value ?? ''} onChange={(event) => set('low', event.target.value)}/>
                </div>
                <div className="ahr-fmh-field">
                    <Label htmlFor={highId} className="ahr-fmh-label">To age</Label>
                    <Input id={highId} type="number" min={0} inputMode="numeric" disabled={disabled}
                           value={range.high?.value ?? ''} onChange={(event) => set('high', event.target.value)}/>
                </div>
            </div>
        </fieldset>
    );
};

/** Two dates, stored as a FHIR Period. */
export const PeriodFields: React.FC<{ label: string; context: string; disabled?: boolean }> = ({ label, context, disabled }) => (
    <fieldset className="ahr-fmh-fieldset">
        <legend className="ahr-fmh-label">{label}</legend>
        <div className="ahr-fmh-pair">
            <TextField label="From" context={`${context}.start`} type="date" disabled={disabled}/>
            <TextField label="To" context={`${context}.end`} type="date" disabled={disabled}/>
        </div>
    </fieldset>
);

interface CodeSearchProps {
    label: string;
    context: string;
    valueSetUrl: string;
    placeholder?: string;
    multiple?: boolean;
    required?: boolean;
    disabled?: boolean;
}

/** A terminology search: type two letters, pick a match. Stores a coding, or a list of them. */
export const CodeSearch: React.FC<CodeSearchProps> = ({ label, context, valueSetUrl, placeholder, multiple = false, required, disabled }) => {
    const { control, formState: { errors } } = useFormContext();
    const { fetchValueSetInternal } = useValueSetServiceContext();
    const id = useId();
    const [term, setTerm] = useState('');
    const [matches, setMatches] = useState<IValueSet[]>([]);
    const [loading, setLoading] = useState(false);
    const [failed, setFailed] = useState(false);
    const latest = useRef(0);
    const invalid = Boolean(getNestedError(errors, context));

    const search = useMemo(() => debounce(async (text: string) => {
        const trimmed = text.trim();
        if (trimmed.length < 2) {
            setMatches([]);
            setLoading(false);
            return;
        }
        const request = ++latest.current;
        setLoading(true);
        setFailed(false);
        try {
            const found = await fetchValueSetInternal(valueSetUrl, false, trimmed);
            if (request !== latest.current) return;
            setMatches(Array.isArray(found) ? found.slice(0, 15) : []);
            setFailed(!Array.isArray(found));
        } catch {
            if (request === latest.current) {
                setMatches([]);
                setFailed(true);
            }
        } finally {
            if (request === latest.current) setLoading(false);
        }
    }, 300), [fetchValueSetInternal, valueSetUrl]);

    useEffect(() => () => search.cancel(), [search]);

    return (
        <Controller name={context}
                    control={control}
                    rules={{ required }}
                    render={({ field }) => {
                        const chosen: IValueSet[] = multiple
                            ? (Array.isArray(field.value) ? field.value : [])
                            : (field.value?.code || field.value?.display ? [field.value] : []);

                        const pick = (option: IValueSet) => {
                            if (multiple) {
                                if (!chosen.some((value) => value.code === option.code)) field.onChange([...chosen, option]);
                            } else {
                                field.onChange(option);
                            }
                            setTerm('');
                            setMatches([]);
                        };

                        const remove = (index: number) => {
                            if (!multiple) return field.onChange(null);
                            const rest = chosen.filter((_, i) => i !== index);
                            field.onChange(rest.length ? rest : null);
                        };

                        return (
                            <div className="ahr-fmh-field">
                                <Label htmlFor={id} className="ahr-fmh-label">
                                    {label}{required && <span className="ahr-fmh-required" aria-hidden="true">*</span>}
                                </Label>
                                {chosen.length > 0 && (
                                    <ul className="ahr-fmh-chips" aria-label={`${label} chosen`}>
                                        {chosen.map((value, index) => (
                                            <li key={`${value.code}-${index}`} className="ahr-fmh-chip">
                                                <span>{sentenceCase(value.display || value.code)}</span>
                                                <button type="button"
                                                        className="ahr-fmh-chip-remove"
                                                        aria-label={`Remove ${value.display || value.code}`}
                                                        disabled={disabled}
                                                        onClick={() => remove(index)}>
                                                    <X className="size-4"/>
                                                </button>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                                {(multiple || chosen.length === 0) && (
                                    <Input id={id}
                                           ref={field.ref}
                                           type="search"
                                           autoComplete="off"
                                           placeholder={placeholder}
                                           disabled={disabled}
                                           aria-invalid={invalid || undefined}
                                           value={term}
                                           onChange={(event) => {
                                               setTerm(event.target.value);
                                               void search(event.target.value);
                                           }}/>
                                )}
                                {matches.length > 0 && (
                                    <ul className="ahr-fmh-matches" aria-label={`${label} matches`}>
                                        {matches.map((option) => (
                                            <li key={`${option.system}|${option.code}`}>
                                                <button type="button" className="ahr-fmh-match" onClick={() => pick(option)}>
                                                    {sentenceCase(option.display || option.code)}
                                                </button>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                                {loading && <p className="ahr-fmh-hint" aria-live="polite">Searching…</p>}
                                {!loading && term.trim().length >= 2 && matches.length === 0 && (
                                    <p className="ahr-fmh-hint" aria-live="polite">
                                        {failed
                                            ? 'Could not load this list. Contact support if this continues.'
                                            : `No matches for “${term.trim()}”.`}
                                    </p>
                                )}
                                <FieldError show={invalid}>{label} is required</FieldError>
                            </div>
                        );
                    }}/>
    );
};

/** Free-text notes, stored as FHIR Annotations signed by whoever is signed in. */
export const NotesField: React.FC<{ label: string; context: string; disabled?: boolean }> = ({ label, context, disabled }) => {
    const { watch, setValue, getValues } = useFormContext();
    const { currentUser } = useAuthServiceContext();
    const { createReferenceObject } = useFhirServiceContext();
    const notes: { text?: string }[] = watch(context) ?? [];

    const add = () => setValue(context, [...(getValues(context) ?? []), {
        text: '',
        time: new Date().toISOString(),
        authorReference: createReferenceObject(currentUser?.fhir?.resourceType as string, currentUser?.fhir?.id as string, formatFhirHumanName(currentUser?.fhir?.name)),
    }], { shouldDirty: true });

    const remove = (index: number) => setValue(context, (getValues(context) ?? []).filter((_: unknown, i: number) => i !== index), { shouldDirty: true });

    return (
        <fieldset className="ahr-fmh-fieldset">
            <legend className="ahr-fmh-label">{label}</legend>
            {notes.map((note, index) => (
                <div key={index} className="ahr-fmh-note">
                    <Textarea aria-label={`${label} ${index + 1}`}
                              disabled={disabled}
                              value={note?.text ?? ''}
                              onChange={(event) => setValue(`${context}.${index}.text`, event.target.value, { shouldDirty: true })}/>
                    <Button variant="ghost" size="icon" aria-label="Remove note" disabled={disabled} onClick={() => remove(index)}>
                        <Trash2/>
                    </Button>
                </div>
            ))}
            <Button variant="outline" size="sm" className="ahr-fmh-add" disabled={disabled} onClick={add}>
                <Plus/> Add a note
            </Button>
        </fieldset>
    );
};

export type ReferenceKind = { key: string; label: string };

const LinkedRecordWindow = React.lazy(() => import('./linkedRecordWindows.tsx'));

// Staff may start any linked kind here except a form response, as the old reference picker allowed.
const canCreateLinked = (kind: string): boolean => ['Condition', 'Observation', 'AllergyIntolerance'].includes(kind);

interface ReferencesFieldProps {
    label: string;
    context: string;
    kinds: ReferenceKind[];
    listFor: (kind: string) => FhirResource[];
    describe: (resource: FhirResource) => string;
    disabled?: boolean;
    /** View and create beside each link, for staff. */
    linkActions?: boolean;
}

/** Links to other records, stored as `{ referenceType, reference }` rows. */
export const ReferencesField: React.FC<ReferencesFieldProps> = ({ label, context, kinds, listFor, describe, disabled, linkActions = false }) => {
    const { watch, setValue, getValues } = useFormContext();
    const { createReferenceObject, extractReferenceId } = useFhirServiceContext();
    const rows: { referenceType?: string; reference?: Reference }[] = watch(context) ?? [];
    const [viewing, setViewing] = useState<FhirResource | undefined>();
    const [creating, setCreating] = useState<string | undefined>();

    const update = (index: number, row: object) => {
        const next = [...(getValues(context) ?? [])];
        next[index] = row;
        setValue(context, next, { shouldDirty: true });
    };

    return (
        <fieldset className="ahr-fmh-fieldset">
            <legend className="ahr-fmh-label">{label}</legend>
            {rows.map((row, index) => {
                const records = row.referenceType ? listFor(row.referenceType) : [];
                const chosenId = row.reference ? extractReferenceId(row.reference) : '';
                return (
                    <div key={index} className="ahr-fmh-reference">
                        <Choice label="Kind of record"
                                value={row.referenceType ?? ''}
                                onChange={(kind) => update(index, { referenceType: kind })}
                                groups={[{ options: kinds.map((kind) => ({ value: kind.key, label: kind.label })) }]}
                                disabled={disabled}/>
                        {row.referenceType && (
                            <Choice label="Record"
                                    value={typeof chosenId === 'string' ? chosenId : ''}
                                    placeholder={records.length ? 'Choose one' : 'None on file'}
                                    onChange={(recordId) => {
                                        const resource = records.find((record) => record.id === recordId);
                                        if (resource) update(index, {
                                            referenceType: row.referenceType,
                                            reference: createReferenceObject(resource.resourceType, resource.id as string, describe(resource)),
                                        });
                                    }}
                                    groups={[{ options: records.map((record) => ({ value: record.id as string, label: describe(record) })) }]}
                                    disabled={disabled || records.length === 0}/>
                        )}
                        {linkActions && row.referenceType && (() => {
                            const chosen = records.find((record) => record.id === chosenId);
                            return (
                                <>
                                    {chosen && (
                                        <Button variant="outline" size="sm" disabled={disabled}
                                                onClick={() => setViewing(chosen)}>
                                            <ExternalLink/> View{" "}<span className="sr-only">{row.referenceType}</span>
                                        </Button>
                                    )}
                                    {canCreateLinked(row.referenceType) && (
                                        <Button variant="outline" size="sm" disabled={disabled}
                                                onClick={() => setCreating(row.referenceType)}>
                                            <Plus/> Create{" "}<span className="sr-only">new {row.referenceType}</span>
                                        </Button>
                                    )}
                                </>
                            );
                        })()}
                        <Button variant="ghost" size="icon" aria-label="Remove link" disabled={disabled}
                                onClick={() => setValue(context, (getValues(context) ?? []).filter((_: unknown, i: number) => i !== index), { shouldDirty: true })}>
                            <Trash2/>
                        </Button>
                    </div>
                );
            })}
            <Button variant="outline" size="sm" className="ahr-fmh-add" disabled={disabled}
                    onClick={() => setValue(context, [...(getValues(context) ?? []), { referenceType: '' }], { shouldDirty: true })}>
                <Plus/> Link a record
            </Button>
            {(viewing || creating) && (
                <Suspense fallback={null}>
                    <LinkedRecordWindow viewing={viewing} creating={creating}
                                        onClose={() => { setViewing(undefined); setCreating(undefined); }}/>
                </Suspense>
            )}
        </fieldset>
    );
};