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 fed BOTH the Help Button (now lucide `Info`) AND the WordPress
// icon component on each row, which is a separate sweep. Dropping it because "its Button
// was converted" would break the row icon. Note the lowercase `info` (WordPress) and the
// capitalised `Info` (lucide) coexist here deliberately.
import { Pencil, Plus, Info as info } from 'lucide-react';
import { ClinicalImpression } from 'fhir/r4';
import { AppSpinner, FhirClinicalImpressionDisplay, ScrollableTab } from '../../../../components';
import { ResourceListStatus } from '../../../../components/ui/resource-list-status';
import {
    useFhirClinicalImpressionBroadcast,
    useFhirClinicalImpressions,
    useFhirClinicalImpressionTargetedBroadcast
} from '../../../../hooks';
import { useAuthServiceContext, useClinicalImpressionServiceContext } from '../../../../services';
import { mayEditRecord } from '../../../../utils/recordEditability';
import { useSeatStanding } from '../../../../utils/seatStanding';
import { patientNoteTitle, patientNoteVisitPath } from '../../../../utils/patientNoteRow';
import { SourcePractice } from '../../../../components/ui/source-practice';
import { RecordPracticeNote, recordPracticeId, useRecordPracticeView, useRetireOnPracticeChange } from '../../../../contexts/RecordPracticeContext';

const ClinicalImpressions = () => {
    const navigate = useNavigate();
    const { userRole, USER_ROLES, practitionerRoles } = useAuthServiceContext();
    const seatStanding = useSeatStanding();
    const { getClinicalImpressionDisplay } = useClinicalImpressionServiceContext();
    const { loading, error, clearError, clinicalImpressionsList, attempted } = useFhirClinicalImpressions();
    const [selectedClinicalImpression, setSelectedClinicalImpression] = useState<ClinicalImpression | null>(null);
    const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
    // The record's practice context: its own clinical impressions under a named practice; the empty state speaks for the whole record.
    const practiceView = useRecordPracticeView(clinicalImpressionsList, recordPracticeId);
    useRetireOnPracticeChange(() => { setShowDisplayModal(false); setSelectedClinicalImpression(null); });

    useFhirClinicalImpressionBroadcast();
    useFhirClinicalImpressionTargetedBroadcast({
        clinicalImpression: selectedClinicalImpression || undefined,
        isOpen: showDisplayModal,
        onUpdate: (updatedClinicalImpression) => {
            setSelectedClinicalImpression(updatedClinicalImpression);
        },
        onDelete: () => {
            setShowDisplayModal(false);
            setSelectedClinicalImpression(null);
        }
    });

    const viewerIsPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);

    const viewClinicalImpression = (clinicalImpression: ClinicalImpression) => {
        const visitPath = viewerIsPatient ? patientNoteVisitPath(clinicalImpression) : undefined;
        if (visitPath) {
            navigate(visitPath);
            return;
        }
        setSelectedClinicalImpression(clinicalImpression);
        setShowDisplayModal(true);
    };

    const editClinicalImpression = (event: React.MouseEvent, clinicalImpression: ClinicalImpression) => {
        event.stopPropagation();
        navigate(clinicalImpression.id as string, { relative: 'path' });
    };

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

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

    /*
     * AND THE ROLE IS NOT THE RULE THE SERVER APPLIES.
     *
     * Writing a ClinicalImpression needs a paid clinician seat, resolved per request by `callerMayWrite`. The role
     * check above passes for an unseated practitioner - a medical assistant, a nurse rooming patients,
     * somebody whose seat was turned off this morning - so the page offered Add and Edit, and the save
     * came back refused. A refusal that arrives after the typing has already spent the work.
     */
    const seat = mayEditRecord({ seatStanding,
        resourceType: 'ClinicalImpression',
        viewerIsStaff: Boolean(userRole)
            && ![USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string),
        practitionerRoles,
    });

    const isAuthorizedToEdit = () => roleAllowsEdit() && seat.mayEdit;

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

        switch (clinicalImpression.status) {
            case 'in-progress':
                return { text: 'In Progress', color: '#e39700' };
            case 'completed':
                return { text: 'Completed', color: '#00a32a' };
            case 'entered-in-error':
                return { text: 'Error', color: '#cc1818' };
            default:
                return { text: clinicalImpression.status.charAt(0).toUpperCase() + clinicalImpression.status.slice(1).replace(/-/g, ' ') };
        }
    };

    return (
        <div>

            <Flex align="center" justify="space-between">
                <FlexBlock>
                </FlexBlock>
                
                {/* SAID, NOT WITHHELD. A control that simply disappears reads as a broken screen or as a
                    permission the reader has lost, and both send them to an administrator to check permissions
                    that are already correct. A seat is nameable, and a practice can enable one in a minute. */}
                {roleAllowsEdit() && !seat.mayEdit && (
                    <p className="text-sm text-secondary max-w-[22rem] text-right">{seat.reason}</p>
                )}
                {isAuthorizedToEdit() && (
                    <FlexItem>
                        <button
                            type="button"
                            className="btn btn-blue"
                            onClick={addClinicalImpression}
                        >
                            <Plus />
                            Add
                        </button>
                    </FlexItem>
                )}
            </Flex>
            <Spacer margin="8"/>

            <ResourceListStatus
                loading={loading}
                error={error}
                isEmpty={clinicalImpressionsList.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="clinical impressions"
                emptyMessage="No clinical impressions found."
                onDismissError={clearError}
            />

            <>
                {loading ? (
                    <AppSpinner />
                ) : (
                    <ScrollableTab>
                        <RecordPracticeNote view={practiceView} />
                        {practiceView.shown.length !== 0 && (
                            <ItemGroup isBordered isSeparated isRounded size='large'>
                                {practiceView.shown.map((clinicalImpression: ClinicalImpression) => {
                                    const displayTitle = viewerIsPatient
                                        ? patientNoteTitle(clinicalImpression, getClinicalImpressionDisplay(clinicalImpression))
                                        : getClinicalImpressionDisplay(clinicalImpression);
                                    const { text: statusText, color: statusColor } = getStatusDisplay(clinicalImpression);
                                    const findingCount = clinicalImpression.finding?.length || 0;
                                    const investigationCount = clinicalImpression.investigation?.length || 0;

                                    return (
                                        <Item key={clinicalImpression.id}
                                              onClick={() => viewClinicalImpression(clinicalImpression)}>
                                            <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>
                                                            {clinicalImpression.description && (
                                                                <Text variant="muted" style={{ display: 'block' }}>
                                                                    {clinicalImpression.description.length > 60
                                                                        ? clinicalImpression.description.substring(0, 60) + '...'
                                                                        : clinicalImpression.description}
                                                                </Text>
                                                            )}
                                                            {(findingCount > 0 || investigationCount > 0) && (
                                                                <Text variant="muted" style={{ display: 'block' }}>
                                                                    {findingCount > 0 && `${findingCount} finding${findingCount !== 1 ? 's' : ''}`}
                                                                    {findingCount > 0 && investigationCount > 0 && ', '}
                                                                    {investigationCount > 0 && `${investigationCount} investigation${investigationCount !== 1 ? 's' : ''}`}
                                                                </Text>
                                                            )}
                                                            <Text variant="muted" style={{ display: 'block' }}><SourcePractice resource={clinicalImpression} /></Text>
                                                        </FlexItem>
                                                        {isAuthorizedToEdit() && (
                                                            <FlexItem>
                                                                <button
                                                                    type="button"
                                                                    className="btn btn-blue-ghost-sm"
                                                                    onClick={(event: React.MouseEvent) => editClinicalImpression(event, clinicalImpression)}
                                                                >
                                                                    <Pencil />
                                                                    Edit
                                                                </button>
                                                            </FlexItem>
                                                        )}
                                                    </Flex>
                                                </FlexBlock>
                                            </Flex>
                                        </Item>
                                    );
                                })}
                            </ItemGroup>
                        )}
                    </ScrollableTab>
                )}
            </>

            {selectedClinicalImpression && (
                <FhirClinicalImpressionDisplay clinicalImpression={selectedClinicalImpression}
                                               isOpen={showDisplayModal}
                                               onClose={() => {
                                                   setShowDisplayModal(false);
                                                   setSelectedClinicalImpression(null);
                                               }}/>
            )}
        </div>
    );
};

export default ClinicalImpressions;