import React, { useState, useEffect } from 'react';
import { usePracticeTypeOptions } from '../../config/serviceCategories';
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
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 { TabPanel } from '../ui/tab-panel';
import { useFormContext, Controller, useFieldArray, useWatch } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import {
    FhirAddress,
    FhirCode,
    FhirCodeableConcept,
    FhirContactPoint,
    FhirIdentifier,
    FhirReference,
    PhotoAttachment
} from '../../components';
import { PlusCircle, XCircle } from 'lucide-react';
import { Attachment } from 'fhir/r4';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../ui/toggle-control';

interface FhirOrganizationProps {
    photo?: Attachment;
    onPhotoChange?: (photo: Attachment | undefined) => void;
    elevated?: boolean;
    disabled?: boolean;
}

export const FhirOrganization: React.FC<FhirOrganizationProps> = ({ photo, onPhotoChange, elevated = true, disabled = false }) => {
    const { control, watch, getValues } = useFormContext();
    const practiceTypeOptions = usePracticeTypeOptions();
    const { fetchValueSet, fetchTimezoneOptions, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);

    // value sets
    const [careTeamMemberFunction, setCareTeamMemberFunction] = useState<IValueSet[]>([]);
    const [practitionerSpecialty, setPractitionerSpecialty] = useState<IValueSet[]>([]);
    const [timezones, setTimezones] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    const isPartOf = watch('isPartOf');
    const aliasFieldArray = useFieldArray({ control: control, name: 'alias' });
    const orgIdentifierFieldArray = useFieldArray({ control: control, name: 'identifier' });
    const npiFieldArray = useFieldArray({ control: control, name: 'npi' });
    const cliaFieldArray = useFieldArray({ control: control, name: 'clia' });
    const naicFieldArray = useFieldArray({ control: control, name: 'naic' });
    const addressFieldArray = useFieldArray({ control: control, name: 'address' });
    const telecomFieldArray = useFieldArray({ control: control, name: 'telecom' });
    const endpointFieldArray = useFieldArray({ control, name: 'endpoint' });

    useWatch({
        control,
        name: 'alias'
    });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    careTeamMemberFunctionValueSet,
                    practitionerSpecialtyValueSet,
                    timezonesValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.careTeamMemberFunction),
                    fetchValueSet(valueSetUrls.practitionerSpecialty),
                    fetchTimezoneOptions()
                ]);

                setCareTeamMemberFunction(careTeamMemberFunctionValueSet);
                setPractitionerSpecialty(practitionerSpecialtyValueSet);
                setTimezones(timezonesValueSet)
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, fetchTimezoneOptions, valueSetUrls]);

    const canAddAlias = () => {
        const aliases = getValues('alias');
        const lastAlias = aliases[aliases.length - 1];
        return lastAlias.trim() !== '';
    };

    const addAlias = () => {
        if (canAddAlias()) {
            aliasFieldArray.append('');
        }
    };

    const removeAlias = (index: number) => {
        aliasFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={4}>Organization Information</Heading>
            </CardHeader>
            {onPhotoChange && (
                <>
                    <CardBody>
                        <PhotoAttachment photo={photo}
                                         onPhotoChange={onPhotoChange}
                                         uploadType="org-asset"
                                         disabled={disabled}/>
                    </CardBody>
                    <CardDivider/>
                </>
            )}
            <CardBody>
                <Spacer margin={spacerMargin}/>

                {/* name */}
                <Controller key="name"
                            name="name"
                            control={control}
                            rules={{ required: 'Name is required' }}
                            disabled={disabled}
                            render={({ field, fieldState }) => (
                                <>
                                    <InputControl
                                                  {...field}
                                                  label="Organization name"
                                                  placeholder="Organization name"
                                                  help={fieldState.error?.message}/>

                                    {fieldState.error && (
                                        <DismissibleAlert status="error">
                                            Organization name is required
                                        </DismissibleAlert>
                                    )}
                                </>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* active */}
                <Controller key="active"
                            name="active"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <ToggleControl
                                               label="Active"
                                               checked={field.value}
                                               onChange={field.onChange}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* timezone */}
                <FhirCode label="Time zone"
                          context="timezone"
                          options={timezones}
                          multiple={false}
                          combobox={true}
                          required={true}
                          loading={loading}
                          disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* isPartOf */}
                {/*<Controller key="isPartOf"*/}
                {/*            name="isPartOf"*/}
                {/*            control={control}*/}
                {/*            render={({ field }) => (*/}
                {/*                <ToggleControl */}
                {/*                               label="Is part of another organization"*/}
                {/*                               checked={field.value}*/}
                {/*                               onChange={field.onChange}*/}
                {/*                               disabled={submitting}/>*/}
                {/*            )}/>*/}

                <Spacer margin={spacerMargin}/>

                {/* partOf */}
                {isPartOf && (
                    <>
                        <FhirReference label="Parent Organization"
                                       context="partOf"
                                       placeholder="Select parent organization"
                                       referenceList={[]}
                                       disabled={disabled}/>

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

                {/* type */}
                <FhirCodeableConcept label="Practice Type"
                                     context="type"
                                     options={practiceTypeOptions}
                                     multiple={true}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* Aliases */}
                <Heading level={5}>Aliases</Heading>
                <Divider margin="2"/>
                <Spacer margin={spacerMargin}/>

                {/* alias */}
                {aliasFieldArray.fields.map((field, index) => (
                    <div key={field.id}>
                        <Flex>
                            <FlexBlock>
                                <Controller key={`alias.${index}`}
                                            name={`alias.${index}`}
                                            control={control}
                                            disabled={disabled}
                                            render={({ field }) => (
                                                <InputControl
                                                              {...field}
                                                              label={`Alias ${aliasFieldArray.fields.length > 1 ? index + 1 : ''}`}/>
                                            )}/>
                            </FlexBlock>
                            <FlexItem style={{ marginTop: '24px' }}>
                                {index === aliasFieldArray.fields.length - 1 && (
                                    <button
                                        type="button"
                                        className="btn btn-blue-ghost"
                                        title="Add alias"
                                        aria-label="Add alias"
                                        onClick={addAlias}
                                        disabled={!canAddAlias() || disabled}
                                    >
                                        <PlusCircle />
                                    </button>
                                )}

                                {aliasFieldArray.fields.length > 1 && (
                                    <button
                                        type="button"
                                        className="btn btn-red-ghost"
                                        title="Remove alias"
                                        aria-label="Remove alias"
                                        onClick={() => removeAlias(index)}
                                        disabled={disabled}
                                    >
                                        <XCircle />
                                    </button>
                                )}
                            </FlexItem>
                        </Flex>

                        <Spacer margin={spacerMargin}/>
                    </div>
                ))}
            </CardBody>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="address"
                          tabs={[
                              { name: 'address', title: 'Address' },
                              { name: 'contact', title: 'Contact Information' },
                              { name: 'npi', title: 'NPI' },
                              { name: 'clia', title: 'CLIA Number for laboratories' },
                              { name: 'naic', title: 'NAIC Code' },
                              { name: 'identifiers', title: 'Identifiers' },
                              // { name: 'contacts', title: 'Contacts' }
                          ]}>
                    {(tab) => {
                        // address
                        if (tab.name === 'address') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* address */}
                                    <FhirAddress addresses={addressFieldArray}
                                                 submitting={disabled}/>

                                    <Spacer margin={spacerMargin}/>
                                </div>
                            );
                        }
                        // npi
                        if (tab.name === 'npi') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* NPI */}
                                    <FhirIdentifier label="National Provider Identifier (NPI)"
                                                    context="npi"
                                                    identifiers={npiFieldArray}
                                                    showSystem={false}
                                                    disabled={disabled}/>

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

                        // clia
                        if (tab.name === 'clia') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* CLIA */}
                                    <FhirIdentifier label="Clinical Laboratory Improvement Amendments (CLIA) Number for laboratories"
                                                    context="clia"
                                                    identifiers={cliaFieldArray}
                                                    showSystem={false}
                                                    disabled={disabled}/>

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

                        // naic
                        if (tab.name === 'naic') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* NAIC */}
                                    <FhirIdentifier label="NAIC Code"
                                                    context="naic"
                                                    identifiers={naicFieldArray}
                                                    showSystem={false}
                                                    disabled={disabled}/>

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

                        // identifiers
                        if (tab.name === 'identifiers') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* Other Identifiers */}
                                    <FhirIdentifier label="Other Identifiers"
                                                    context="identifier"
                                                    identifiers={orgIdentifierFieldArray}
                                                    disabled={disabled}/>

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

                        // contact
                        if (tab.name === 'contact') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* telecom */}
                                    <FhirContactPoint label="Contact details for the organization"
                                                      telecoms={telecomFieldArray}
                                                      disabled={disabled}/>

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

                        // contacts
                        if (tab.name === 'contacts') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    {/*<Flex>*/}
                                    {/*    <FlexItem>*/}
                                    {/*        <Heading level={4}>Organization Contacts</Heading>*/}
                                    {/*    </FlexItem>*/}
                                    {/*    <FlexItem>*/}
                                    {/*        <Button variant="secondary"*/}
                                    {/*                icon={plus}*/}
                                    {/*                onClick={addContact}*/}
                                    {/*                disabled={submitting}>*/}
                                    {/*            Add Contact*/}
                                    {/*        </Button>*/}
                                    {/*    </FlexItem>*/}
                                    {/*</Flex>*/}
                                    {/*<Divider margin="2"/>*/}
                                    {/*<Spacer margin={spacerMargin}/>*/}

                                    {/*{contactFieldArray.fields.length === 0 && (*/}
                                    {/*    <DismissibleAlert status="info">*/}
                                    {/*        No contacts specified.*/}
                                    {/*    </DismissibleAlert>*/}
                                    {/*)}*/}

                                    {/*{contactFieldArray.fields.map((field, index) => (*/}
                                    {/*    <Card key={field.id} style={{ marginBottom: '16px' }}>*/}
                                    {/*        <CardHeader>*/}
                                    {/*            <Flex align="center" justify="space-between">*/}
                                    {/*                <FlexItem>*/}
                                    {/*                    <Heading level={5}>Contact {index + 1}</Heading>*/}
                                    {/*                </FlexItem>*/}
                                    {/*                <FlexItem>*/}
                                    {/*                    <Button icon={trash}*/}
                                    {/*                            isDestructive*/}
                                    {/*                            onClick={() => removeContact(index)}*/}
                                    {/*                            disabled={submitting}*/}
                                    {/*                            label="Remove contact"*/}
                                    {/*                            showTooltip/>*/}
                                    {/*                </FlexItem>*/}
                                    {/*            </Flex>*/}
                                    {/*        </CardHeader>*/}
                                    {/*        <CardBody>*/}
                                    {/*            /!* contact purpose *!/*/}
                                    {/*            <FhirCodeableConcept label="Contact Purpose"*/}
                                    {/*                                 context={`contact.${index}.purpose`}*/}
                                    {/*                                 options={[]}*/}
                                    {/*                                 disabled={submitting}/>*/}

                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact name *!/*/}
                                    {/*            <Heading level={6}>Contact Name</Heading>*/}
                                    {/*            <Divider margin="2"/>*/}
                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact name.text *!/*/}
                                    {/*            <Controller name={`contact.${index}.name.text`}*/}
                                    {/*                        control={control}*/}
                                    {/*                        render={({ field }) => (*/}
                                    {/*                            <InputControl*/}
                                    {/*                                          {...field}*/}
                                    {/*                                          label="Full Name"*/}
                                    {/*                                          placeholder="Full name of the contact person"/>*/}
                                    {/*                        )}/>*/}

                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact name.family *!/*/}
                                    {/*            <Controller name={`contact.${index}.name.family`}*/}
                                    {/*                        control={control}*/}
                                    {/*                        render={({ field }) => (*/}
                                    {/*                            <InputControl*/}
                                    {/*                                          {...field}*/}
                                    {/*                                          label="Family Name"*/}
                                    {/*                                          placeholder="Family name"/>*/}
                                    {/*                        )}/>*/}

                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact name.given *!/*/}
                                    {/*            <Controller name={`contact.${index}.name.given.0`}*/}
                                    {/*                        control={control}*/}
                                    {/*                        render={({ field }) => (*/}
                                    {/*                            <InputControl*/}
                                    {/*                                          {...field}*/}
                                    {/*                                          label="Given Name"*/}
                                    {/*                                          placeholder="Given name"/>*/}
                                    {/*                        )}/>*/}

                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact telecom *!/*/}
                                    {/*            <FhirContactPoint label="Contact Points"*/}
                                    {/*                              context={`contact.${index}.telecom`}*/}
                                    {/*                              disabled={submitting}/>*/}

                                    {/*            <Spacer margin={spacerMargin}/>*/}

                                    {/*            /!* contact address *!/*/}
                                    {/*            <FhirAddress label="Address"*/}
                                    {/*                         context={`contact.${index}.address`}*/}
                                    {/*                         disabled={submitting}/>*/}
                                    {/*        </CardBody>*/}
                                    {/*    </Card>*/}
                                    {/*))}*/}
                                </div>
                            );
                        }
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};

export default FhirOrganization;