import { useNavigate } from 'react-router-dom';
import { Item, ItemGroup } from "../../../../../components/ui/item-group";
import { FormProvider, useForm } from 'react-hook-form';
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';
import { Disabled } from '../../../../../components/ui/disabled';
import { Modal } from '../../../../../components/ui/wp-modal-shim';
// warning / check / commentEditLink are RETURNED BY getStatusIcon() and fed to the
// WordPress icon component in the status row - a separate sweep, and invisible to a
// naive per-icon grep because the reference is a `return`, not a JSX attribute.
import { ExternalLink, Pencil, TriangleAlert as warning, Check as check, FilePen as commentEditLink } from 'lucide-react';
import { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
import { useQuestionnaireServiceContext, useQuestionnaireResponseServiceContext, useAuthServiceContext } from '../../../../../services';
import { AppSpinner, ScrollableTab, FhirQuestionnaireResponseDisplay } from '../../../../../components';
import { ResourceListStatus } from '../../../../../components/ui/resource-list-status';
import { DismissibleAlert } from '../../../../../components/ui/dismissible-alert';
import { Button } from '../../../../../components/ui/button';
import { describeFetchFailure } from '../../../../../utils/fetchFailureMessage';
import { formatDate } from '../../../../../utils/dateUtils.ts';
import "./PatientQuestionnaireResponses.css";
import { useQuestionnaireTitles } from '../../../../../hooks/useQuestionnaireTitles';
import { ANSWERS_WITHHELD_MESSAGE, answersWithheld } from '../../../../../utils/answersWithheld';
import QuestionnairePreview from '../../../QuestionnairesPage/QuestionnairePage/QuestionnairePreview/QuestionnairePreview.tsx';
import {
    useFhirQuestionnaireResponseBroadcast,
    useFhirQuestionnaireResponses,
    useFhirQuestionnaireResponseTargetedBroadcast
} from '../../../../../hooks';
import React, { useState } from 'react';

const QuestionnaireResponsesPage = () => {
    const navigate = useNavigate();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    // A patient or helper reads "forms"; staff keep the record's own word.
    const formsReader = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
    const { loading, error, clearError, questionnaireResponsesList, attempted, answersNotReadBack, retryAnswersNotReadBack } = useFhirQuestionnaireResponses();
    const { fetchQuestionnaire, transformFromFhirQuestionnaire } = useQuestionnaireServiceContext();
    const { getQuestionnaireResponseDisplay } = useQuestionnaireResponseServiceContext();
    const formTitles = useQuestionnaireTitles(questionnaireResponsesList.map((response: QuestionnaireResponse) => response.questionnaire));
    const [showResponse, setShowResponse] = useState(false);
    // - kept separate from the LIST's `error`: the list loaded fine, one row's viewer did not.
    const [viewError, setViewError] = useState<string | null>(null);
    const [selectedQuestionnaireResponse, setSelectedQuestionnaireResponse] = useState<QuestionnaireResponse | null>(null);
    const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

    useFhirQuestionnaireResponseBroadcast();
    useFhirQuestionnaireResponseTargetedBroadcast({
        questionnaireResponse: selectedQuestionnaireResponse || undefined,
        isOpen: showDisplayModal,
        onUpdate: (updatedQuestionnaireResponse) => {
            setSelectedQuestionnaireResponse(updatedQuestionnaireResponse);
        },
        onDelete: () => {
            setShowDisplayModal(false);
            setSelectedQuestionnaireResponse(null);
        }
    });

    const methods = useForm({
        defaultValues: {}
    });

    const { reset, watch } = methods;

    const getStatusIcon = (status: string) => {
        switch (status) {
            case 'completed':
                return check;
            case 'in-progress':
                return commentEditLink;
            case 'entered-in-error':
            case 'stopped':
                return warning;
            default:
                return commentEditLink;
        }
    };

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

        switch (questionnaireResponse.status) {
            case 'in-progress':
                return { text: 'In Progress', color: '#e39700' };
            case 'completed':
                return { text: 'Completed', color: '#00a32a' };
            case 'amended':
                return { text: 'Amended', color: '#4f94d4' };
            case 'entered-in-error':
                return { text: 'Error', color: '#cc1818' };
            case 'stopped':
                return { text: 'Stopped', color: '#cc1818' };
            default:
                return { text: questionnaireResponse.status || 'Unknown' };
        }
    };

    const viewQuestionnaireResponse = (questionnaireResponse: QuestionnaireResponse) => {
        setSelectedQuestionnaireResponse(questionnaireResponse);
        setShowDisplayModal(true);
    };

    const editQuestionnaireResponse = (event: React.MouseEvent, questionnaireResponse: QuestionnaireResponse) => {
        event.stopPropagation();
        navigate(questionnaireResponse.id as string, { relative: 'path' });
    };

    /**
 * - the catch used to be `console.error` and nothing else, so a failure here was
 * INDISTINGUISHABLE FROM A DEAD BUTTON. A patient pressed View Answers, the request 404'd on a
 * doubled path, and the screen did not move: no dialog, no message, no way to tell whether the
 * record was empty, still loading, or broken. The URL is fixed, but a fetch that fails silently
 * would hide the next failure just as completely.
 *
 * `describeFetchFailure` rather than a hand-written string, because whether to say
 * *"please try again"* is a property of the RESPONSE - telling someone to retry a 403 is an
 * instruction that can never succeed.
 */
    const viewResponse = async (event: any, questionnaireResponse: QuestionnaireResponse) => {
        event.preventDefault();
        event.stopPropagation();

        setViewError(null);

        // No questionnaire recorded at all is a different fact from a failed load, and it is not an
        // error - there is simply nothing to render the answers against.
        if (!questionnaireResponse.questionnaire) {
            setViewError('These answers are not linked to a questionnaire, so they cannot be displayed.');
            return;
        }

        try {
            const questionnaire: Questionnaire = await fetchQuestionnaire(questionnaireResponse.questionnaire);
            const transformedQuestionnaire = transformFromFhirQuestionnaire(questionnaire, questionnaireResponse);

            reset(transformedQuestionnaire);
            setShowResponse(true);
        } catch (error) {
            console.error('Failed to load questionnaire:', error);
            setViewError(describeFetchFailure(error, 'We could not open these answers'));
        }
    };

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

    return (
        <div>

            <Flex align="center" justify="space-between">
                <FlexBlock>
                </FlexBlock>
                
                {/*
                  * 🔻 THE "Add" BUTTON IS GONE, because the screen it opened could not create anything.
                  *
                  * It navigated to `new`, which the route bound as a record id, so the editor fetched a
                  * QuestionnaireResponse literally named "new" and announced "Failed to load questionnaire
                  * response. Please try again." Nothing there could have worked: creating one requires
                  * both a `questionnaire` and a `subject`, the editor sends neither, its questionnaire
                  * picker is permanently disabled, and Save called the update path — a PUT to
                  * `/QuestionnaireResponse/undefined`.
                  *
                  * ⚖️ Answers come from the two paths that hold a questionnaire: a patient completing one
                  * assigned to them, and the conversion of a submitted public form. Recording answers on a
                  * patient's behalf at the front desk is a genuine and unbuilt feature — a control that
                  * cannot save is not a stand-in for it, it just moves the failure later.
                  */}
            </Flex>
            <Spacer margin="8"/>

            <ResourceListStatus
                loading={loading}
                error={error}
                isEmpty={questionnaireResponsesList.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={formsReader ? "forms" : "questionnaire responses"}
                emptyMessage={formsReader ? "No forms found." : "No questionnaire responses found."}
                onDismissError={clearError}
            />

            {/* Card 523 — what View Answers says when it cannot open. */}
            {answersNotReadBack > 0 && (
                <DismissibleAlert status="warning" className="mb-4">
                    <span data-testid="answers-not-read-back">
                        {answersNotReadBack === 1 ? 'A form attached to this patient could not be loaded yet.' : answersNotReadBack + ' forms attached to this patient could not be loaded yet.'}
                    </span>
                    <Button variant="outline" size="sm" className="ml-2" disabled={loading} onClick={() => { void retryAnswersNotReadBack(); }}>Try again</Button>
                </DismissibleAlert>
            )}

            {viewError && (
                <DismissibleAlert status="error"
                                  onDismiss={() => setViewError(null)}
                                  className="mb-4">
                    <span data-testid="questionnaire-response-view-failed">{viewError}</span>
                </DismissibleAlert>
            )}

            <>
                {loading ? (
                    <AppSpinner/>
                ) : (
                    <ScrollableTab>
                        {questionnaireResponsesList.length !== 0 && (
                            <ItemGroup isBordered isSeparated isRounded size='large'>
                                {questionnaireResponsesList.map((questionnaireResponse: QuestionnaireResponse) => {
                                    const form = formTitles[questionnaireResponse.questionnaire ?? ''];
                                    const displayTitle = getQuestionnaireResponseDisplay(questionnaireResponse, form?.state === 'ready' ? form.title : undefined);
                                    const { text: statusText, color: statusColor } = getStatusDisplay(questionnaireResponse);
                                    const authoredDate = questionnaireResponse.authored
                                        ? formatDate(questionnaireResponse.authored)
                                        : '';

                                    /*
                                     * THE ROW IS NOT A BUTTON, and that is the fix rather than a
                                     * preference.
                                     *
                                     * `Item` renders a <button> when it is given an onClick, so this row
                                     * was a button CONTAINING two buttons - invalid HTML that browsers
                                     * resolve by dropping one, and a control whose accessible name was
                                     * the whole row, including the words "View Answers" and "Edit".
                                     * Pressing it did neither: it opened the metadata dialog.
                                     *
                                     * The tell that this was already known is the `stopPropagation` in
                                     * both nested handlers, written to stop the row firing underneath
                                     * them. Those are kept - they cost nothing, and a handler that guards
                                     * its own event is not wrong.
                                     *
                                     * WHAT IT COST, AND WHY IT IS NOT COSMETIC: reading a patient's
                                     * completed questionnaire, I pressed the row, got a dialog with the
                                     * right patient and date and status `completed` and NO ANSWERS, and
                                     * concluded the answers were missing. They were one control away. A
                                     * clinician has less reason than I did to suspect a second control
                                     * exists.
                                     */
                                    return (
                                        <Item key={questionnaireResponse.id}>
                                            <Flex>
                                                <FlexItem>
                                                    <Icon icon={getStatusIcon(questionnaireResponse.status)}
                                                          size={24}
                                                          style={{
                                                              marginRight: 12,
                                                              color: statusColor
                                                          }}/>
                                                </FlexItem>
                                                <FlexBlock>
                                                    <Flex align="center" justify="space-between" className="qr-row__head">
                                                        <FlexItem>
                                                            <Text style={{ fontWeight: 500 }}>
                                                                {displayTitle}
                                                            </Text>
                                                        </FlexItem>
                                                        <FlexItem>
                                                            <Flex className="qr-row__actions">
                                                                <FlexItem>
                                                                    {answersWithheld(questionnaireResponse) ? (
                                                                        <Text className="text-secondary" data-testid="answers-withheld">
                                                                            {ANSWERS_WITHHELD_MESSAGE}
                                                                        </Text>
                                                                    ) : (
                                                                        <button
                                                                            type="button"
                                                                            className="btn btn-blue-ghost-sm"
                                                                            onClick={(event: any) => viewResponse(event, questionnaireResponse)}
                                                                        >
                                                                            <ExternalLink />
                                                                            View Answers
                                                                        </button>
                                                                    )}
                                                                </FlexItem>
                                                                {/* WHAT THE ROW USED TO DO, now saying so.
                                                                    It opens who answered, when, and what
                                                                    the response is attached to - a real
                                                                    thing to want, and previously reachable
                                                                    only by pressing a row that gave no
                                                                    sign it would do that. */}
                                                                <FlexItem>
                                                                    <button
                                                                        type="button"
                                                                        className="btn btn-blue-ghost-sm"
                                                                        onClick={(event: React.MouseEvent) => {
                                                                            event.stopPropagation();
                                                                            viewQuestionnaireResponse(questionnaireResponse);
                                                                        }}
                                                                    >
                                                                        Details
                                                                    </button>
                                                                </FlexItem>
                                                                {isAuthorizedToEdit() && !answersWithheld(questionnaireResponse) && (
                                                                    <FlexItem>
                                                                        <button
                                                                            type="button"
                                                                            className="btn btn-blue-ghost-sm"
                                                                            onClick={(event: React.MouseEvent) => editQuestionnaireResponse(event, questionnaireResponse)}
                                                                        >
                                                                            <Pencil />
                                                                            Edit
                                                                        </button>
                                                                    </FlexItem>
                                                                )}
                                                            </Flex>
                                                        </FlexItem>
                                                    </Flex>
                                                </FlexBlock>
                                            </Flex>
                                        </Item>
                                    );
                                })}
                            </ItemGroup>
                        )}
                    </ScrollableTab>
                )}

                {/* Response Modal */}
                {showResponse && (
                    <Modal style={{ width: '70%', height: '90%' }}
                           title={`Preview: ${watch('title') ?? 'Untitled'}`}
                           onRequestClose={() => setShowResponse(false)}>
                        <FormProvider {...methods}>
                            <Disabled>
                                <form>
                                    <div style={{ paddingBottom: 16 }}>
                                        <QuestionnairePreview/>
                                    </div>
                                </form>
                            </Disabled>
                        </FormProvider>
                    </Modal>
                )}

                {/* Display Modal */}
                {selectedQuestionnaireResponse && (
                    <FhirQuestionnaireResponseDisplay
                        questionnaireResponse={selectedQuestionnaireResponse}
                        isOpen={showDisplayModal}
                        onClose={() => {
                            setShowDisplayModal(false);
                            setSelectedQuestionnaireResponse(null);
                        }}
                    />
                )}
            </>
        </div>
    );
};

export default QuestionnaireResponsesPage;