import React, { useState, useEffect } from 'react';
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 { Disabled } from '../ui/disabled';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirQuantity,
    FhirReference
} from '../../components';
import {
    useFhirEncounters,
    useFhirVisionPrescriptionBroadcast,
    useFhirVisionPrescriptions
} from '../../hooks';
import { PlusCircle, Trash2 } from 'lucide-react';

interface FhirVisionPrescriptionProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirVisionPrescription: React.FC<FhirVisionPrescriptionProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch, getValues, setValue } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [fmStatus, setFmStatus] = useState<IValueSet[]>([]);
    const [visionProduct, setVisionProduct] = useState<IValueSet[]>([]);
    const [visionEyeCodes, setVisionEyeCodes] = useState<IValueSet[]>([]);
    const [visionBaseCodes, setVisionBaseCodes] = useState<IValueSet[]>([]);

    const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
    const spacerMargin = '24px';

    useFhirVisionPrescriptions();
    useFhirVisionPrescriptionBroadcast();
    const { encountersList } = useFhirEncounters();

    const lensSpecificationFieldArray = useFieldArray({ control, name: 'lensSpecification' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    fmStatusValueSet,
                    visionProductValueSet,
                    visionEyeCodesValueSet,
                    visionBaseCodesValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.fmStatus),
                    fetchValueSet(valueSetUrls.visionProduct),
                    fetchValueSet(valueSetUrls.visionEyeCodes),
                    fetchValueSet(valueSetUrls.visionBaseCodes)
                ]);

                setFmStatus(fmStatusValueSet);
                setVisionProduct(visionProductValueSet);
                setVisionEyeCodes(visionEyeCodesValueSet);
                setVisionBaseCodes(visionBaseCodesValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addLensSpecification = () => {
        lensSpecificationFieldArray.append({
            product: null,
            eye: null,
            sphere: 0,
            cylinder: 0,
            axis: 0,
            prism: [],
            add: 0,
            power: 0,
            backCurve: 0,
            diameter: 0,
            duration: null,
            color: '',
            brand: '',
            note: []
        });
    };

    const removeLensSpecification = (index: number) => {
        lensSpecificationFieldArray.remove(index);
    };

    const addPrism = (lensIndex: number) => {
        const prisms = getValues(`lensSpecification.${lensIndex}.prism`) || [];
        setValue(`lensSpecification.${lensIndex}.prism`, [
            ...prisms,
            { amount: 0, base: null }
        ]);
    };

    const removePrism = (lensIndex: number, prismIndex: number) => {
        const prisms = getValues(`lensSpecification.${lensIndex}.prism`) || [];
        setValue(`lensSpecification.${lensIndex}.prism`, prisms.filter((_, i) => i !== prismIndex));
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={fmStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* created */}
                    <Controller key="created"
                                name="created"
                                control={control}
                                disabled={disabled}
                                rules={{ required: true }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="Response creation date *"
                                                      type="datetime-local"/>

                                        {fieldState.error && (
                                            <DismissibleAlert status="error">
                                                Response creation date is required
                                            </DismissibleAlert>
                                        )}
                                    </>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* dateWritten */}
                    <Controller key="dateWritten"
                                name="dateWritten"
                                control={control}
                                disabled={disabled}
                                rules={{ required: true }}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="When prescription was authorized *"
                                                      type="datetime-local"/>

                                        {fieldState.error && (
                                            <DismissibleAlert status="error">
                                                Prescription authorization date is required
                                            </DismissibleAlert>
                                        )}
                                    </>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* prescriber is NOT a field here on purpose: the service stamps it from the signed-in
                        practitioner on save. FHIR marks it 1..1, and asking somebody to pick themselves out
                        of a list to sign their own prescription is friction, not safety. */}

                    {/* encounter */}
                    <FhirReference label="Created during encounter / admission / stay"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="lensSpecifications"
                          tabs={[
                              { name: 'lensSpecifications', title: 'Lens Specifications' },
                              // { name: 'identifiers', title: 'Identifiers' }
                          ]}>
                    {(tab) => {
                        // lensSpecifications
                        if (tab.name === 'lensSpecifications') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {lensSpecificationFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addLensSpecification}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Lens Specification
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No lens specifications added yet.
                                                </DismissibleAlert>

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

                                        {lensSpecificationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Lens Specification {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove lens specification"
                                                                            aria-label="Remove lens specification"
                                                                            onClick={() => removeLensSpecification(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* eye */}
                                                        <FhirCode label="Eye"
                                                                  context={`lensSpecification.${index}.eye`}
                                                                  options={visionEyeCodes}
                                                                  required={true}
                                                                  loading={loading}
                                                                  disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* product */}
                                                        <FhirCodeableConcept label="Product to be supplied"
                                                                             context={`lensSpecification.${index}.product`}
                                                                             options={visionProduct}
                                                                             required={true}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <Heading level={6}>Lens Parameters</Heading>
                                                        <Divider margin="2"/>
                                                        <Spacer margin="8"/>

                                                        {/* sphere */}
                                                        <Controller key={`lensSpecification.${index}.sphere`}
                                                                    name={`lensSpecification.${index}.sphere`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Sphere"
                                                                                      help="Power of the lens"
                                                                                      type="number"
                                                                                      step="0.25"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* cylinder */}
                                                        <Controller key={`lensSpecification.${index}.cylinder`}
                                                                    name={`lensSpecification.${index}.cylinder`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Cylinder"
                                                                                      help="Lens power for astigmatism"
                                                                                      type="number"
                                                                                      step="0.25"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* axis */}
                                                        <Controller key={`lensSpecification.${index}.axis`}
                                                                    name={`lensSpecification.${index}.axis`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Axis"
                                                                                      help="Lens meridian which contain no power for astigmatism"
                                                                                      type="number"
                                                                                      min="0"
                                                                                      max="180"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* add */}
                                                        <Controller key={`lensSpecification.${index}.add`}
                                                                    name={`lensSpecification.${index}.add`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Add"
                                                                                      help="Added power for multifocal levels"
                                                                                      type="number"
                                                                                      step="0.25"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* power */}
                                                        <Controller key={`lensSpecification.${index}.power`}
                                                                    name={`lensSpecification.${index}.power`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Power"
                                                                                      help="Contact lens power"
                                                                                      type="number"
                                                                                      step="0.25"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* backCurve */}
                                                        <Controller key={`lensSpecification.${index}.backCurve`}
                                                                    name={`lensSpecification.${index}.backCurve`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Back Curve"
                                                                                      help="Contact lens back curvature"
                                                                                      type="number"
                                                                                      step="0.1"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* diameter */}
                                                        <Controller key={`lensSpecification.${index}.diameter`}
                                                                    name={`lensSpecification.${index}.diameter`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Diameter"
                                                                                      help="Contact lens diameter"
                                                                                      type="number"
                                                                                      step="0.1"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <Heading level={6}>Additional Information</Heading>
                                                        <Divider margin="2"/>
                                                        <Spacer margin="8"/>

                                                        {/* color */}
                                                        <Controller key={`lensSpecification.${index}.color`}
                                                                    name={`lensSpecification.${index}.color`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Color"
                                                                                      help="Color required"
                                                                                      placeholder="Lens color"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* brand */}
                                                        <Controller key={`lensSpecification.${index}.brand`}
                                                                    name={`lensSpecification.${index}.brand`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Brand"
                                                                                      help="Brand required"
                                                                                      placeholder="Lens brand"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* duration */}
                                                        <FhirQuantity label="Lens wear duration"
                                                                      context={`lensSpecification.${index}.duration`}
                                                                      isSimpleQuantity={true}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <Heading level={6}>Prisms</Heading>
                                                        <Divider margin="2"/>
                                                        <Spacer margin="8"/>

                                                        {(watch(`lensSpecification.${index}.prism`) ?? []).length === 0 && (
                                                            <>
                                                                <Flex>
                                                                    <FlexItem>
                                                                        {!isPatient && (
                                                                            <button type="button"
                                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                                    onClick={() => addPrism(index)}
                                                                                    disabled={disabled}>
                                                                                <PlusCircle className="w-4 h-4" />
                                                                                Add Prism
                                                                            </button>
                                                                        )}
                                                                    </FlexItem>
                                                                </Flex>
                                                                <Spacer margin="8"/>

                                                                <DismissibleAlert status="info">
                                                                    No prisms added yet.
                                                                </DismissibleAlert>

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

                                                        {(watch(`lensSpecification.${index}.prism`) ?? []).map((_prism, prismIndex) => (
                                                            <React.Fragment key={prismIndex}>
                                                                <Card>
                                                                    <CardHeader>
                                                                        <Flex align="center" justify="space-between">
                                                                            <FlexItem>
                                                                                <h4>Prism {prismIndex + 1}</h4>
                                                                            </FlexItem>
                                                                            <FlexItem>
                                                                                {!isPatient && (
                                                                                    <button type="button"
                                                                                            className="btn btn-red-ghost"
                                                                                            title="Remove prism"
                                                                                            aria-label="Remove prism"
                                                                                            onClick={() => removePrism(index, prismIndex)}
                                                                                            disabled={disabled}>
                                                                                        <Trash2 className="w-4 h-4" />
                                                                                    </button>
                                                                                )}
                                                                            </FlexItem>
                                                                        </Flex>
                                                                    </CardHeader>
                                                                    <CardBody>
                                                                        {/* amount */}
                                                                        <Controller key={`lensSpecification.${index}.prism.${prismIndex}.amount`}
                                                                                    name={`lensSpecification.${index}.prism.${prismIndex}.amount`}
                                                                                    control={control}
                                                                                    disabled={disabled}
                                                                                    rules={{ required: true }}
                                                                                    render={({ field, fieldState }) => (
                                                                                        <>
                                                                                            <InputControl
                                                                                                          {...field}
                                                                                                          label="Amount"
                                                                                                          help="Amount of adjustment"
                                                                                                          type="number"
                                                                                                          step="0.1"/>

                                                                                            {fieldState.error && (
                                                                                                <DismissibleAlert status="error">
                                                                                                    Amount of adjustment is required
                                                                                                </DismissibleAlert>
                                                                                            )}
                                                                                        </>
                                                                                    )}/>

                                                                        <Spacer margin={spacerMargin}/>

                                                                        {/* base */}
                                                                        <FhirCode label="Base"
                                                                                  context={`lensSpecification.${index}.prism.${prismIndex}.base`}
                                                                                  options={visionBaseCodes}
                                                                                  required={true}
                                                                                  loading={loading}
                                                                                  disabled={disabled}/>
                                                                    </CardBody>
                                                                </Card>
                                                                <Spacer margin={spacerMargin}/>
                                                            </React.Fragment>
                                                        ))}

                                                        {!isPatient && (watch(`lensSpecification.${index}.prism`) ?? []).length > 0 && (
                                                            <Flex justify="center">
                                                                <FlexItem>
                                                                    <button type="button"
                                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                            onClick={() => addPrism(index)}
                                                                            disabled={disabled}>
                                                                        <PlusCircle className="w-4 h-4" />
                                                                        Add Prism
                                                                    </button>
                                                                </FlexItem>
                                                            </Flex>
                                                        )}

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* note */}
                                                        <FhirAnnotation label="Notes for coatings"
                                                                        context={`lensSpecification.${index}.note`}
                                                                        disabled={disabled}
                                                                        readonly={isPatient}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && lensSpecificationFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addLensSpecification}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Lens Specification
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // identifiers
                        if (tab.name === 'identifiers') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                </div>
                            );
                        }
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};

export default FhirVisionPrescription;