import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
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 } from '../ui/flex';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import { IValueSet, useValueSetServiceContext } from '../../services';
import {
    FhirCodeableConcept,
    FhirContactPoint,
    FhirIdentifier,
    FhirOperationalHours,
    FhirOperationalHoursNotAvailable,
    FhirReference,
    PhotoAttachment
} from '../../components';
import {
    useFhirHealthcareServiceBroadcast,
    useFhirHealthcareServices,
    useFhirLocations
} from '../../hooks';
import { Attachment } from 'fhir/r4';
import { Plus, Trash2 } from 'lucide-react';
import { onlySites } from '../../utils/roomLocation';
// - 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';
import { ServiceTypeField } from '../ServiceTypeSearch/ServiceTypeField';

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

export const FhirHealthcareService: React.FC<FhirHealthcareServiceProps> = ({ photo, onPhotoChange, elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [serviceCategory, setServiceCategory] = useState<IValueSet[]>([]);
    const [practiceCodes, setPracticeCodes] = useState<IValueSet[]>([]);
    const [serviceProvisionConditions, setServiceProvisionConditions] = useState<IValueSet[]>([]);
    const [program, setProgram] = useState<IValueSet[]>([]);
    const [languages, setLanguages] = useState<IValueSet[]>([]);
    const [serviceReferralMethod, setServiceReferralMethod] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirHealthcareServices();
    useFhirHealthcareServiceBroadcast();
    const { locationsList } = useFhirLocations();

    const hoursOfOperationFieldArray = useFieldArray({ control: control, name: 'availableTime' });
    const notAvailableFieldArray = useFieldArray({ control: control, name: 'notAvailable' });
    const telecomFieldArray = useFieldArray({ control: control, name: 'telecom' });
    const identifierFieldArray = useFieldArray({ control: control, name: 'identifier' });
    const eligibilityFieldArray = useFieldArray({ control, name: 'eligibility' });
    const endpointFieldArray = useFieldArray({ control, name: 'endpoint' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    serviceCategoryValueSet,
                    practiceCodesValueSet,
                    serviceProvisionConditionsValueSet,
                    programValueSet,
                    languagesValueSet,
                    serviceReferralMethodValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.serviceCategory),
                    fetchValueSet(valueSetUrls.practiceCodes),
                    fetchValueSet(valueSetUrls.serviceProvisionConditions),
                    fetchValueSet(valueSetUrls.program),
                    fetchValueSet(valueSetUrls.languages),
                    fetchValueSet(valueSetUrls.serviceReferralMethod)
                ]);

                setServiceCategory(serviceCategoryValueSet);
                setPracticeCodes(practiceCodesValueSet);
                setServiceProvisionConditions(serviceProvisionConditionsValueSet);
                setProgram(programValueSet);
                setLanguages(languagesValueSet);
                setServiceReferralMethod(serviceReferralMethodValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addEligibility = () => {
        eligibilityFieldArray.append({
            code: null,
            comment: ''
        });
    };

    const removeEligibility = (index: number) => {
        eligibilityFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={4}>Healthcare Service Information</Heading>
            </CardHeader>
            <CardBody>
                {/* Photo */}
                <PhotoAttachment photo={photo}
                                 onPhotoChange={onPhotoChange}
                                 disabled={disabled}
                                 cover={true}
                                 description="Photo identification of the service"/>
            </CardBody>
            <CardDivider/>
            <CardBody>
                {/* name */}
                <Controller key="name"
                            name="name"
                            control={control}
                            disabled={disabled}
                            rules={{ required: true }}
                            render={({ field, fieldState }) => (
                                <>
                                    <InputControl
                                                  {...field}
                                                  label="Name *"
                                                  placeholder="Healthcare service name"/>

                                    {fieldState.error && (
                                        <DismissibleAlert status="error">
                                            Healthcare Service 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}/>

                {/* comment */}
                <Controller key="comment"
                            name="comment"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <TextareaControl
                                                 label="Comment"
                                                 {...field}
                                                 help="Additional description and/or any specific issues not covered elsewhere"
                                                 rows={3}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* extraDetails */}
                <Controller key="extraDetails"
                            name="extraDetails"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <TextareaControl
                                                 {...field}
                                                 label="Extra Details"
                                                 help="Extra details about the service that can't be placed in the other fields"
                                                 rows={5}/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* appointmentRequired */}
                <Controller key="appointmentRequired"
                            name="appointmentRequired"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <ToggleControl
                                               label="Appointment Required"
                                               checked={field.value}
                                               onChange={field.onChange}/>
                            )}/>
            </CardBody>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="categories"
                          tabs={[
                              { name: 'categories', title: 'Categories & Types' },
                              { name: 'locations', title: 'Locations' },
                              // { name: 'eligibility', title: 'Eligibility' },
                              { name: 'characteristics', title: 'Characteristics' },
                              { name: 'availability', title: 'Availability' },
                              { name: 'contact', title: 'Contact' },
                              { name: 'identifiers', title: 'Identifiers' }
                          ]}>
                    {(tab) => {
                        // categories
                        if (tab.name === 'categories') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* category */}
                                    <FhirCodeableConcept label="Broad category of service being performed or delivered"
                                                         context="category"
                                                         options={serviceCategory}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* type: a SNOMED concept from the scoped search, which booking routes by; the
                                        HL7 service-type list is not one the server accepts */}
                                    <ServiceTypeField disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* specialty */}
                                    <FhirCodeableConcept label="Specialties handled by the HealthcareService"
                                                         context="specialty"
                                                         options={practiceCodes}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* serviceProvisionCode */}
                                    <FhirCodeableConcept label="Conditions under which service is available/offered"
                                                         context="serviceProvisionCode"
                                                         options={serviceProvisionConditions}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

                                    <Spacer margin={spacerMargin} />

                                    {/* program */}
                                    <FhirCodeableConcept label="Programs that this service is applicable to"
                                                         context="program"
                                                         options={program}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

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

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

                                    {/* location */}
                                    <FhirReference label="Location(s) where service may be provided"
                                                   context="location"
                                                   placeholder="Select location"
                                                   referenceType="Location"
                                                   referenceList={onlySites(locationsList)}
                                                   enableInlineActions={enableInlineActions}
                                                   multiple={true}
                                                   disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* coverageArea */}
                                    <FhirReference label="Location(s) service is intended for/available to"
                                                   context="coverageArea"
                                                   placeholder="Select location"
                                                   referenceType="Location"
                                                   referenceList={locationsList}
                                                   enableInlineActions={enableInlineActions}
                                                   multiple={true}
                                                   disabled={disabled}/>

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

                        // eligibility
                        if (tab.name === 'eligibility') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Flex>
                                        <FlexItem>
                                            <Heading level={4}>Eligibility</Heading>
                                        </FlexItem>
                                        <FlexItem>
                                            <button
                                                type="button"
                                                className="btn btn-blue-ghost"
                                                onClick={addEligibility}
                                                disabled={disabled}
                                            >
                                                <Plus />
                                                Add Eligibility
                                            </button>
                                        </FlexItem>
                                    </Flex>
                                    <Divider margin="2"/>
                                    <Spacer margin={spacerMargin}/>

                                    {eligibilityFieldArray.fields.length === 0 && (
                                        <DismissibleAlert status="info">
                                            No eligibility criteria specified.
                                        </DismissibleAlert>
                                    )}

                                    {eligibilityFieldArray.fields.map((field, index) => (
                                        <Card key={field.id} style={{ marginBottom: '16px' }}>
                                            <CardHeader>
                                                <Flex align="center" justify="space-between">
                                                    <FlexItem>
                                                        <Heading level={5}>Eligibility Criteria {index + 1}</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        <button
                                                            type="button"
                                                            className="btn btn-red-ghost"
                                                            title="Remove eligibility"
                                                            aria-label="Remove eligibility"
                                                            onClick={() => removeEligibility(index)}
                                                            disabled={disabled}
                                                        >
                                                            <Trash2 />
                                                        </button>
                                                    </FlexItem>
                                                </Flex>
                                            </CardHeader>
                                            <CardBody>
                                                {/* eligibility code */}
                                                <FhirCodeableConcept label="Eligibility Category"
                                                                     context={`eligibility.${index}.code`}
                                                                     options={[]}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* eligibility comment */}
                                                <Controller key={`eligibility.${index}.comment`}
                                                            name={`eligibility.${index}.comment`}
                                                            control={control}
                                                            render={({ field }) => (
                                                                <TextareaControl label="Eligibility Comment"
                                                                                 {...field}
                                                                                 placeholder="Additional information about the eligibility"
                                                                                 rows={3}/>
                                                            )}/>

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

                        // characteristics
                        if (tab.name === 'characteristics') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Heading level={4}>Characteristics</Heading>
                                    <Divider margin="2"/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* characteristic */}
                                    {/*<FhirValueSetSearch label="Characteristics"*/}
                                    {/*                    context="characteristic"*/}
                                    {/*                    valueSetUrl={valueSetUrls.serviceCharacteristic}*/}
                                    {/*                    placeholder="Search for service characteristics..."*/}
                                    {/*                    multiple={true}/>*/}

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

                                    {/* communication */}
                                    <FhirCodeableConcept label="The language that this service is offered in"
                                                         context="communication"
                                                         options={languages}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* referralMethod */}
                                    <FhirCodeableConcept label="Ways that the service accepts referrals"
                                                         context="referralMethod"
                                                         options={serviceReferralMethod}
                                                         multiple={true}
                                                         loading={loading}
                                                         disabled={disabled}/>

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

                        // availability
                        if (tab.name === 'availability') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    {/* availableTime */}
                                    <FhirOperationalHours label="Times the Service Site is available"
                                                          context={`availableTime`}
                                                          hours={hoursOfOperationFieldArray}
                                                          showAvailabilityExceptions={true}
                                                          submitting={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* notAvailable */}
                                    <FhirOperationalHoursNotAvailable label="Not available during this time due to provided reason"
                                                                      context={`notAvailable`}
                                                                      notAvailable={notAvailableFieldArray}
                                                                      submitting={disabled}/>

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

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

                                    {/* telecom */}
                                    <FhirContactPoint telecoms={telecomFieldArray}
                                                      label="Contacts related to the healthcare service"
                                                      disabled={disabled}/>

                                    <Spacer margin={spacerMargin}/>

                                    {/* Endpoints */}
                                    {/*<Flex>*/}
                                    {/*    <FlexItem>*/}
                                    {/*        <Heading level={5}>Endpoints</Heading>*/}
                                    {/*    </FlexItem>*/}
                                    {/*    <FlexItem>*/}
                                    {/*        <Button variant="secondary"*/}
                                    {/*                icon={plus}*/}
                                    {/*                onClick={addEndpoint}*/}
                                    {/*                disabled={submitting}>*/}
                                    {/*            Add Endpoint*/}
                                    {/*        </Button>*/}
                                    {/*    </FlexItem>*/}
                                    {/*</Flex>*/}
                                    {/*<Divider margin="2"/>*/}
                                    {/*<Spacer margin={spacerMargin}/>*/}

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

                                    {/*{endpointFieldArray.fields.map((field, index) => (*/}
                                    {/*    <Flex key={field.id} align="center" gap={2} style={{ marginBottom: '16px' }}>*/}
                                    {/*        <FlexBlock>*/}
                                    {/*            <FhirReference label={`Endpoint ${index + 1}`}*/}
                                    {/*                           context={`endpoint.${index}`}*/}
                                    {/*                           placeholder="Select an endpoint"*/}
                                    {/*                           disabled={submitting}/>*/}
                                    {/*        </FlexBlock>*/}
                                    {/*        <FlexItem>*/}
                                    {/*            <Button icon={cancelCircleFilled}*/}
                                    {/*                    isDestructive*/}
                                    {/*                    onClick={() => removeEndpoint(index)}*/}
                                    {/*                    disabled={submitting}*/}
                                    {/*                    label="Remove endpoint"*/}
                                    {/*                    showTooltip/>*/}
                                    {/*        </FlexItem>*/}
                                    {/*    </Flex>*/}
                                    {/*))}*/}
                                </div>
                            );
                        }

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

                                    {/* identifier */}
                                    <FhirIdentifier identifiers={identifierFieldArray}
                                                    label="External identifiers for this service"
                                                    disabled={disabled}/>

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

export default FhirHealthcareService;