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, FlexBlock } 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 {
    FhirCode,
    FhirIdentifier
} from '../../components';
import { useFhirDeviceBroadcast, useFhirDevices } from '../../hooks';
import { PlusCircle, Trash2, XCircle } from 'lucide-react';

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

export const FhirDevice: React.FC<FhirDeviceProps> = ({ elevated = true, disabled = false }) => {
    const { control } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [udiEntryType, setUdiEntryType] = useState<IValueSet[]>([]);
    const [deviceStatus, setDeviceStatus] = useState<IValueSet[]>([]);
    const [deviceNametype, setDeviceNametype] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirDevices();
    useFhirDeviceBroadcast();

    const deviceNameFieldArray = useFieldArray({ control, name: 'deviceName' });
    const udiCarrierFieldArray = useFieldArray({ control, name: 'udiCarrier' });
    const identifierFieldArray = useFieldArray({ control, name: 'identifier' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    udiEntryTypeValueSet,
                    deviceStatusValueSet,
                    deviceNametypeValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.udiEntryType),
                    fetchValueSet(valueSetUrls.deviceStatus),
                    fetchValueSet(valueSetUrls.deviceNametype)
                ]);

                setUdiEntryType(udiEntryTypeValueSet);
                setDeviceStatus(deviceStatusValueSet.filter((option: IValueSet) => ['active', 'inactive', 'unknown'].includes(option.code)));
                setDeviceNametype(deviceNametypeValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addDeviceName = () => {
        deviceNameFieldArray.append({ name: '', type: 'user-friendly-name' });
    };

    const removeDeviceName = (index: number) => {
        deviceNameFieldArray.remove(index);
    };

    const addUdiCarrier = () => {
        udiCarrierFieldArray.append({ deviceIdentifier: '', carrierHRF: '' });
    };

    const removeUdiCarrier = (index: number) => {
        udiCarrierFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <CardBody>
                {/* status */}
                <FhirCode label="Status"
                          context="status"
                          options={deviceStatus}
                          multiple={false}
                          loading={loading}
                          disabled={disabled}/>
                <Spacer margin={spacerMargin}/>

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

                {(deviceNameFieldArray.fields as any[]).map((deviceName, index) => (
                    <div key={deviceName.id}>
                        <Flex gap={4}>
                            <FlexBlock>
                                <Controller key={`deviceName.${index}.name`}
                                            name={`deviceName.${index}.name`}
                                            control={control}
                                            rules={{ required: true }}
                                            disabled={disabled}
                                            render={({ field, fieldState }) => (
                                                <>
                                                    <InputControl
                                                                  {...field}
                                                                  label="Name of the device *"
                                                                  placeholder="Name"/>

                                                    {fieldState.error && (
                                                        <DismissibleAlert status="error">
                                                            Name of the device is required
                                                        </DismissibleAlert>
                                                    )}
                                                </>
                                            )}/>
                            </FlexBlock>
                            <FlexBlock>
                                {/* deviceName.type */}
                                <FhirCode label="Device name type"
                                          context={`deviceName.${index}.type`}
                                          options={deviceNametype}
                                          multiple={false}
                                          required={true}
                                          loading={loading}
                                          disabled={disabled}/>
                            </FlexBlock>
                            {true && (
                                <FlexItem style={{ marginTop: '24px' }}>
                                    <button type="button"
                                            className="btn btn-red-ghost"
                                            title="Remove name"
                                            aria-label="Remove name"
                                            onClick={() => removeDeviceName(index)}
                                            disabled={disabled}>
                                        <XCircle className="w-4 h-4" />
                                    </button>
                                </FlexItem>
                            )}
                        </Flex>
                        <Spacer margin={spacerMargin} />
                    </div>
                ))}

                <button type="button"
                        className="btn btn-blue-ghost"
                        onClick={addDeviceName}
                        disabled={disabled}>
                    <PlusCircle className="w-4 h-4" />
                    Add Name
                </button>

                <Spacer margin={spacerMargin}/>
            </CardBody>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="details"
                          tabs={[
                              { name: 'details', title: 'Device Details' },
                              { name: 'udi', title: 'UDI Information' },
                              { name: 'identifiers', title: 'Identifiers' }
                          ]}>
                    {(tab) => {
                        // details
                        if (tab.name === 'details') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {/* manufacturer */}
                                    <Controller key="manufacturer"
                                                name="manufacturer"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Manufacturer"
                                                                  placeholder="Name of device manufacturer"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* modelNumber */}
                                    <Controller key="modelNumber"
                                                name="modelNumber"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Model Number"
                                                                  placeholder="Device model number"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* partNumber */}
                                    <Controller key="partNumber"
                                                name="partNumber"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Part Number"
                                                                  placeholder="The part number of the device"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* distinctIdentifier */}
                                    <Controller key="distinctIdentifier"
                                                name="distinctIdentifier"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Distinct Identifier"
                                                                  placeholder="The distinct identification string"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* serialNumber */}
                                    <Controller name="serialNumber"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Serial Number"
                                                                  placeholder="Device serial number"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* lotNumber */}
                                    <Controller key="lotNumber"
                                                name="lotNumber"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Lot Number"
                                                                  placeholder="Device lot number"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* manufactureDate */}
                                    <Controller key="manufactureDate"
                                                name="manufactureDate"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Date when the device was made"
                                                                  type="date"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>

                                    {/* expirationDate */}
                                    <Controller key="expirationDate"
                                                name="expirationDate"
                                                control={control}
                                                disabled={disabled}
                                                render={({ field }) => (
                                                    <InputControl
                                                                  {...field}
                                                                  label="Date and time of expiry of this device (if applicable)"
                                                                  type="date"/>
                                                )}/>
                                    <Spacer margin={spacerMargin}/>
                                </div>
                            );
                        }

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

                                    {(udiCarrierFieldArray.fields as any[]).map((udiCarrier, index) => (
                                        <div key={udiCarrier.id}>
                                            <Card>
                                                <CardHeader>
                                                    <Flex align="center" justify="space-between">
                                                        <FlexItem>
                                                            <h4>UDI Carrier {index + 1}</h4>
                                                        </FlexItem>
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className="btn btn-red-ghost"
                                                                    title="Remove UDI"
                                                                    aria-label="Remove UDI"
                                                                    onClick={() => removeUdiCarrier(index)}
                                                                    disabled={disabled}>
                                                                <Trash2 className="w-4 h-4" />
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                </CardHeader>
                                                <CardBody>
                                                    {/* udiCarrier.deviceIdentifier */}
                                                    <Controller key={`udiCarrier.${index}.deviceIdentifier`}
                                                                name={`udiCarrier.${index}.deviceIdentifier`}
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Device Identifier"
                                                                                  placeholder="UDI device identifier"/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>

                                                    {/* udiCarrier.carrierHRF */}
                                                    <Controller key={`udiCarrier.${index}.carrierHRF`}
                                                                name={`udiCarrier.${index}.carrierHRF`}
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Carrier HRF"
                                                                                  placeholder="UDI Human Readable Barcode String"/>
                                                                )}/>
                                                    <Spacer margin={spacerMargin}/>

                                                    {/* status */}
                                                    <FhirCode label="UDI Entry Type"
                                                              context={`udiCarrier.${index}.entryType`}
                                                              options={udiEntryType}
                                                              loading={loading}
                                                              disabled={disabled}/>

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

                                    <button type="button"
                                            className="btn btn-blue-ghost"
                                            onClick={addUdiCarrier}
                                            disabled={disabled}>
                                        <PlusCircle className="w-4 h-4" />
                                        Add UDI Carrier
                                    </button>
                                    <Spacer margin={spacerMargin}/>
                                </div>
                            );
                        }

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

                                    <FhirIdentifier identifiers={identifierFieldArray}
                                                    context="identifier"
                                                    disabled={disabled}/>

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

export default FhirDevice;