import { useEffect, useState } from 'react';
import { requiredText, requiredTextWhen } from '../../utils/requiredText';
import { TextControl } from "../ui/text-control";
import { ComboboxControl } from "../ui/combobox-control";
import type { ComboboxControlOption } from "../ui/combobox-control";
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { PlusCircle, Trash2, XCircle } from 'lucide-react';
import { Controller, useWatch, useFormContext } from 'react-hook-form';
import { Address } from 'fhir/r4';
import { IValueSet, useValueSetServiceContext } from '../../services';
import { sortValueSet } from "../../utils/valueSetUtils";
import { matchUspsState } from '../../utils/matchUspsState';
import FhirCode from '../FhirCode/FhirCode.tsx';
import FhirPeriod from '../FhirPeriod/FhirPeriod.tsx';

interface FHIRAddressProps {
    addresses: any;
    submitting?: boolean;
}

const FhirAddress = ({ addresses, submitting = false }: FHIRAddressProps) => {
    const [addressUse, setAddressUse] = useState<IValueSet[]>([]);
    const [addressType, setAddressType] = useState<IValueSet[]>([]);
    const [uspsState, setUspsState] = useState<IValueSet[]>([]);
    /**
 * WHAT WAS TYPED INTO EACH STATE BOX, which the control itself will not tell the form.
 *
 * `ComboboxControl` holds the typed text internally and calls `onChange` only on a click, so the
 * form could not distinguish "nothing typed" from "typed something we could not resolve" - and it
 * reported both as "State is required" while the box plainly showed text. Keyed by address index
 * because the form can hold several addresses and each has its own box.
 */
    const [typedState, setTypedState] = useState<Record<number, string>>({});

    const { control, formState: { errors }, setValue, getValues } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const spacerMargin = '24px';

    const allAddressFields = useWatch({
        control,
        name: 'address',
        defaultValue: addresses.fields
    });

    useEffect(() => {
        const loadValueSets = async () => {
            try {
                const [addressUseValueSet, addressTypeValueSet, uspsStateValueSet] = await Promise.all([
                    fetchValueSet(valueSetUrls.addressUse),
                    fetchValueSet(valueSetUrls.addressType),
                    fetchValueSet(valueSetUrls.uspsState)
                ]);

                setAddressUse(addressUseValueSet);
                setAddressType(addressTypeValueSet);
                setUspsState(sortValueSet(uspsStateValueSet));
            } catch (error) {
                console.error('Failed to load value sets:', error);
            }
        };

        loadValueSets();
    }, []);


    const addAddress = () => {
        if (canAddAddress()) {
            addresses.append({
                line: [''],
                city: '',
                state: '',
                postalCode: '',
                country: 'US',
                use: '',
                type: ''
            });
        }
    };

    const removeAddress = (index: number) => {
        addresses.remove(index);
    };

    const addAddressLine = (addressIndex: number) => {
        if (canAddAddressLine(addressIndex)) {
            const currentLines = getValues(`address.${addressIndex}.line`) || [];
            setValue(`address.${addressIndex}.line`, [...currentLines, '']);
        }
    };

    const removeAddressLine = (addressIndex: number, lineIndex: number) => {
        const currentLines = getValues(`address.${addressIndex}.line`) || [];
        if (lineIndex > -1 && lineIndex < currentLines.length) {
            const newLines = [...currentLines];
            newLines.splice(lineIndex, 1);
            setValue(`address.${addressIndex}.line`, newLines);
        }
    };

    const canAddAddress = (): boolean => {
        if (addresses.fields.length === 0) {
            return true;
        }

        const lastAddressIndex = addresses.fields.length - 1;
        const lastLines = getValues(`address.${lastAddressIndex}.line`) || [];
        const hasNonEmptyLine = lastLines.some((line: string) => line.trim() !== '');

        const lastCity = getValues(`address.${lastAddressIndex}.city`) || '';
        const lastState = getValues(`address.${lastAddressIndex}.state`) || '';
        const lastPostalCode = getValues(`address.${lastAddressIndex}.postalCode`) || '';
        const lastCountry = getValues(`address.${lastAddressIndex}.country`) || '';

        return hasNonEmptyLine &&
            lastCity.trim() !== '' &&
            lastState &&
            lastPostalCode.trim() !== '' &&
            lastCountry.trim() !== '';
    };

    const canAddAddressLine = (addressIndex: number): boolean => {
        const lines = getValues(`address.${addressIndex}.line`) || [];
        if (lines.length === 0) {
            return true;
        }

        const lastLine = lines[lines.length - 1];
        return lastLine.trim() !== '';
    };

    return (
        <>
            {addresses.fields.length === 0 && (
                <>
                    <Spacer margin="8" />
                    <Flex>
                        <FlexItem>
                            <Heading level={4}>Address</Heading>
                        </FlexItem>
                        <FlexItem>
                        <button
                            type="button"
                            className={`btn btn-blue-ghost${submitting ? ' btn-busy' : ''}`}
                            onClick={addAddress}
                            disabled={!canAddAddress() || submitting}
                        >
                            <PlusCircle />
                            Add Address
                        </button>
                        </FlexItem>
                    </Flex>
                    <Divider margin="2" />
                    <Spacer margin="8" />

                    <DismissibleAlert status="info">
                        No address added yet.
                    </DismissibleAlert>
                </>
            )}

            {addresses.fields.map((address: Address, addressIndex: number) => {
                const addressLines: string[] = allAddressFields?.[addressIndex]?.line ?? [''];

                return (
                    <>
                        <Card key={address.id}>
                            {addresses.fields.length > 0 && (
                                <CardHeader>
                                    <Flex align="center" justify="space-between">
                                        <FlexItem>
                                            <h4>Address {addressIndex + 1}</h4>
                                        </FlexItem>
                                        <FlexItem>
                                            <button
                                                type="button"
                                                className="btn btn-red-ghost"
                                                title="Remove address"
                                                aria-label="Remove address"
                                                onClick={() => removeAddress(addressIndex)}
                                                disabled={submitting}
                                            >
                                                <Trash2 />
                                            </button>
                                        </FlexItem>
                                    </Flex>
                                </CardHeader>
                            )}

                            <CardBody className="fhir-address__card-body">
                                {/* Address Lines */}
                                {addressLines.map((_line: string, lineIndex: number) => (
                                    <div key={`${addressIndex}-${lineIndex}`} className="fhir-address__line-row">
                                        <Flex align="center">
                                            <FlexBlock>
                                                <Controller
                                                    name={`address.${addressIndex}.line.${lineIndex}`}
                                                    control={control}
                                                    rules={requiredTextWhen(lineIndex === 0)}
                                                    render={({ field }) => (
                                                        <TextControl label={`Address line ${lineIndex + 1}`}
                                                                     {...field}
                                                                     className={errors?.address?.[addressIndex]?.line?.[lineIndex] ? 'has-error' : ''}
                                                                     disabled={submitting} />
                                                    )} />
                                            </FlexBlock>
                                            <FlexItem style={{ marginTop: '24px' }}>
                                                {lineIndex === addressLines.length - 1 && (
                                                    <button
                                                        type="button"
                                                        className="btn btn-blue-ghost"
                                                        title="Add address line"
                                                        aria-label="Add address line"
                                                        onClick={() => addAddressLine(addressIndex)}
                                                        disabled={!canAddAddressLine(addressIndex) || submitting}
                                                    >
                                                        <PlusCircle />
                                                    </button>
                                                )}

                                                {addressLines.length > 1 && (
                                                    <button
                                                        type="button"
                                                        className="btn btn-red-ghost"
                                                        title="Remove address line"
                                                        aria-label="Remove address line"
                                                        onClick={() => removeAddressLine(addressIndex, lineIndex)}
                                                        disabled={submitting}
                                                    >
                                                        <XCircle />
                                                    </button>
                                                )}
                                            </FlexItem>
                                        </Flex>

                                        {errors?.address?.[addressIndex]?.line?.[lineIndex] && (
                                            <DismissibleAlert status="error">
                                                Address line {lineIndex + 1} is required
                                            </DismissibleAlert>
                                        )}

                                        <Spacer margin={spacerMargin} />
                                    </div>
                                ))}

                                {/* Country and City */}
                                <Flex>
                                    <FlexBlock className="fhir-address__country">
                                        <Controller
                                            name={`address.${addressIndex}.country`}
                                            control={control}
                                            rules={requiredText}
                                            render={({ field }) => (
                                                <TextControl label="Country *"
                                                             {...field}
                                                             className={errors?.address?.[addressIndex]?.country ? 'has-error' : ''}
                                                             disabled={submitting} />
                                            )} />
                                        {errors?.address?.[addressIndex]?.country && (
                                            <DismissibleAlert status="error">
                                                Country is required
                                            </DismissibleAlert>
                                        )}
                                    </FlexBlock>

                                    <FlexBlock className="fhir-address__city">
                                        <Controller
                                            name={`address.${addressIndex}.city`}
                                            control={control}
                                            rules={requiredText}
                                            render={({ field }) => (
                                                <TextControl label="City *"
                                                             {...field}
                                                             className={errors?.address?.[addressIndex]?.city ? 'has-error' : ''}
                                                             disabled={submitting} />
                                            )} />
                                        {/* `address`, singular. This read `errors?.addresses` - a field
                                            name that does not exist, since the Controller registers
                                            `address.N.city` - so the message could never render however
                                            the field was filled. Found in a browser walk: a City of one
                                            space reddened the box and said nothing, while Country, Postal
                                            Code and Address line 1 beside it all named their fault. */}
                                        {errors?.address?.[addressIndex]?.city && (
                                            <DismissibleAlert status="error">
                                                City is required
                                            </DismissibleAlert>
                                        )}
                                    </FlexBlock>
                                </Flex>

                                <Spacer margin={spacerMargin} />

                                {/* State and Postal Code */}
                                <Flex>
                                    <FlexBlock className="fhir-address__state">
                                        <Controller
                                            name={`address.${addressIndex}.state`}
                                            control={control}
                                            rules={{ required: true }}
                                            render={({ field }) => {
                                                const selectedOption = uspsState.find(state => state.code === field.value);
                                                const transformedValue = selectedOption ? selectedOption.code : undefined;
                                                return (
                                                    <>
                                                        <ComboboxControl label="State"
                                                                         options={[
                                                                             ...uspsState.map((state: IValueSet) => ({
                                                                                 value: state.code,
                                                                                 label: `${state.display} (${state.code})`
                                                                             }))
                                                                         ] as ComboboxControlOption[]}
                                                                         value={transformedValue}
                                                                         onChange={(next) => {
                                                                             // Clicking a suggestion is unchanged - control 1.
                                                                             setTypedState((current) => ({ ...current, [addressIndex]: '' }));
                                                                             field.onChange(next);
                                                                         }}
                                                                         onFilterValueChange={(text: string) => {
                                                                             setTypedState((current) => ({ ...current, [addressIndex]: text }));
                                                                             // TYPING "IL" NOW COUNTS. Exact matches only -
                                                                             // a prefix match would resolve "M" to whichever
                                                                             // of eight states sorts first and write it into
                                                                             // somebody's address, which is worse than the
                                                                             // defect being fixed.
                                                                             const match = matchUspsState(uspsState, text);
                                                                             if (match?.code) field.onChange(match.code);
                                                                         }} />
                                                    </>
                                                );
                                            }}
                                        />
                                        {/* THE MESSAGE MATCHES WHAT THEY ARE LOOKING AT. An empty box gets
                                            "required"; a box with unrecognised text in it gets told the text is
                                            the problem. Reporting the second as "required" is the contradiction
                                            this control was refused for - the user reads it beside the value it
                                            says is missing, and there is no way to reason out of that. */}
                                        {errors?.address?.[addressIndex]?.state && (
                                            <DismissibleAlert status="error">
                                                {(typedState[addressIndex] ?? '').trim().length > 0
                                                    ? 'That is not a state we recognise — pick one from the list.'
                                                    : 'State is required'}
                                            </DismissibleAlert>
                                        )}
                                    </FlexBlock>

                                    <FlexBlock className="fhir-address__postal-code">
                                        <Controller
                                            name={`address.${addressIndex}.postalCode`}
                                            control={control}
                                            rules={requiredText}
                                            render={({ field }) => (
                                                <TextControl label="Postal Code *"
                                                             {...field}
                                                             className={errors?.address?.[addressIndex]?.postalCode ? 'has-error' : ''}
                                                             disabled={submitting} />
                                            )} />
                                        {errors?.address?.[addressIndex]?.postalCode && (
                                            <DismissibleAlert status="error">
                                                Postal Code is required
                                            </DismissibleAlert>
                                        )}
                                    </FlexBlock>
                                </Flex>

                                <Spacer margin={spacerMargin} />

                                {/* Address Use */}
                                <FhirCode label="Use"
                                          context={`address.${addressIndex}.use`}
                                          options={addressUse}
                                          multiple={false}
                                          required={false}
                                          disabled={submitting}/>

                                <Spacer margin={spacerMargin} />

                                {/* Address Type */}
                                <FhirCode label="Type"
                                          context={`address.${addressIndex}.type`}
                                          options={addressType}
                                          multiple={false}
                                          required={false}
                                          disabled={submitting}/>

                                <Spacer margin={spacerMargin}/>

                                {/* Period */}
                                <FhirPeriod label="Time period when address was/is in use"
                                            context={`address.${addressIndex}.period`}
                                            disabled={submitting}/>

                                <Spacer margin={spacerMargin} />
                            </CardBody>
                        </Card>

                        <Divider margin="8"/>

                        {addressIndex === addresses.fields.length - 1 && (
                            <Flex align="center" justify="center">
                                <FlexItem>
                                    <button
                                        type="button"
                                        className={`btn btn-blue-ghost${submitting ? ' btn-busy' : ''}`}
                                        onClick={addAddress}
                                        disabled={!canAddAddress() || submitting}
                                    >
                                        <PlusCircle />
                                        Add Address
                                    </button>
                                </FlexItem>
                            </Flex>
                        )}
                    </>
                );
            })}
        </>
    );
};

export default FhirAddress;