import { useState } from 'react';
import { Item, ItemGroup } from "../../../../components/ui/item-group";
import { useNavigate } from 'react-router-dom';
import { Icon } from "../../../../components/ui/icon";
import { Flex, FlexItem, FlexBlock } from '../../../../components/ui/flex';
import { Text } from '../../../../components/ui/text';
import { Spacer } from '../../../../components/ui/spacer';
// `info` is KEPT: it feeds the WordPress icon component on each row as well as the Help button.
import { Pencil, Plus, Info as info } from 'lucide-react';
import { Encounter } from 'fhir/r4';
import { AppSpinner, FhirEncounterDisplay, ScrollableTab } from '../../../../components';
import { ResourceListStatus } from '../../../../components/ui/resource-list-status';
import { useFhirEncounterBroadcast, useFhirEncounters, useFhirEncounterTargetedBroadcast } from '../../../../hooks';
import { useAuthServiceContext, useEncounterServiceContext } from '../../../../services';

const Encounters = () => {
    const navigate = useNavigate();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { getEncounterDisplay } = useEncounterServiceContext();
    const { loading, error, clearError, encountersList, attempted } = useFhirEncounters();
    const [selectedEncounter, setSelectedEncounter] = useState<Encounter | null>(null);
    const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

    useFhirEncounterBroadcast();
    useFhirEncounterTargetedBroadcast({
        encounter: selectedEncounter || undefined,
        isOpen: showDisplayModal,
        onUpdate: (updatedEncounter) => {
            setSelectedEncounter(updatedEncounter);
        },
        onDelete: () => {
            setShowDisplayModal(false);
            setSelectedEncounter(null);
        }
    });

    const viewEncounter = (encounter: Encounter) => {
        setSelectedEncounter(encounter);
        setShowDisplayModal(true);
    };

    const editEncounter = (event: React.MouseEvent, encounter: Encounter) => {
        event.stopPropagation();
        navigate(encounter.id as string, { relative: 'path' });
    };

    const addEncounter = () => {
        navigate('new', { relative: 'path' });
    };

    const isAuthorizedToEdit = () => {
        return userRole && [USER_ROLES.PRACTITIONER].includes(userRole as string);
    };

    const getStatusDisplay = (encounter: Encounter): { text: string, color?: string } => {
        if (!encounter) return { text: 'Unknown' };

        switch (encounter.status) {
            case 'planned':
                return { text: 'Planned', color: '#9C27B0' };
            case 'arrived':
                return { text: 'Arrived', color: '#2196F3' };
            case 'triaged':
                return { text: 'Triaged', color: '#00BCD4' };
            case 'in-progress':
                return { text: 'In Progress', color: '#4CAF50' };
            case 'onleave':
                return { text: 'On Leave', color: '#FF9800' };
            case 'finished':
                return { text: 'Finished', color: '#607D8B' };
            case 'cancelled':
                return { text: 'Cancelled', color: '#F44336' };
            case 'entered-in-error':
                return { text: 'Error', color: '#FF5722' };
            case 'unknown':
                return { text: 'Unknown', color: '#9E9E9E' };
            default:
                return { text: encounter.status?.charAt(0).toUpperCase() + encounter.status?.slice(1) || 'Unknown', color: '#757575' };
        }
    };

    const getLocationDisplay = (encounter: Encounter): string => {
        if (!encounter.location || encounter.location.length === 0) {
            return '';
        }

        return encounter.location
            .map(loc => loc.location?.display || 'Unknown location')
            .join(', ');
    };

    return (
        <div>

            <Flex align="center" justify="space-between">
                <FlexBlock>
                </FlexBlock>
                
                {isAuthorizedToEdit() && (
                    <FlexItem>
                        <button
                            type="button"
                            className="btn btn-blue"
                            onClick={addEncounter}
                        >
                            <Plus />
                            Add
                        </button>
                    </FlexItem>
                )}
            </Flex>
            <Spacer margin="8"/>

            <ResourceListStatus
                loading={loading}
                error={error}
                isEmpty={encountersList.length === 0}

                /* - without this the empty message is a claim about the patient's
 record made before the server was ever asked. */
                attempted={attempted}
                resourceLabel="encounters"
                emptyMessage="No encounters found."
                onDismissError={clearError}
            />

            <>
                {loading ? (
                    <AppSpinner/>
                ) : (
                    <ScrollableTab>
                        {encountersList.length !== 0 && (
                            <ItemGroup isBordered isSeparated isRounded size='large'>
                                {encountersList.map((encounter: Encounter) => {
                                    const displayTitle = getEncounterDisplay(encounter);
                                    const { text: statusText, color: statusColor } = getStatusDisplay(encounter);
                                    const location = getLocationDisplay(encounter);
                                    const diagnosisCount = encounter.diagnosis?.length || 0;

                                    return (
                                        <Item key={encounter.id}
                                              onClick={() => viewEncounter(encounter)}>
                                            <Flex>
                                                <FlexItem>
                                                    <Icon icon={info}
                                                          size={24}
                                                          style={{
                                                              marginRight: 12,
                                                              color: statusColor
                                                          }}/>
                                                </FlexItem>
                                                <FlexBlock>
                                                    <Flex align="center" justify="space-between">
                                                        <FlexItem>
                                                            <Text style={{ fontWeight: 500 }}>
                                                                {displayTitle}
                                                            </Text>
                                                            {location && (
                                                                <Text variant="muted" style={{ display: 'block' }}>
                                                                    Location: {location}
                                                                </Text>
                                                            )}
                                                            {diagnosisCount > 0 && (
                                                                <Text variant="muted" style={{ display: 'block' }}>
                                                                    {diagnosisCount} diagnosis{diagnosisCount !== 1 ? 'es' : ''}
                                                                </Text>
                                                            )}
                                                        </FlexItem>
                                                        {isAuthorizedToEdit() && (
                                                            <FlexItem>
                                                                <button
                                                                    type="button"
                                                                    className="btn btn-blue-ghost-sm"
                                                                    onClick={(event: React.MouseEvent) => editEncounter(event, encounter)}
                                                                >
                                                                    <Pencil />
                                                                    Edit
                                                                </button>
                                                            </FlexItem>
                                                        )}
                                                    </Flex>
                                                </FlexBlock>
                                            </Flex>
                                        </Item>
                                    );
                                })}
                            </ItemGroup>
                        )}
                    </ScrollableTab>
                )}
            </>

            {selectedEncounter && (
                <FhirEncounterDisplay
                    encounter={selectedEncounter}
                    isOpen={showDisplayModal}
                    visitNote={{ kind: 'current' }}
                    onClose={() => {
                        setShowDisplayModal(false);
                        setSelectedEncounter(null);
                    }}
                />
            )}
        </div>
    );
};

export default Encounters;