import React, { useState, useEffect, useMemo, useRef } from 'react';
import { SearchControl } from "../ui/search-control";
import { Spinner } from "../ui/spinner";
import { Item, ItemGroup } from "../ui/item-group";
import { Truncate } from "../ui/truncate";
import { Card, CardBody, CardHeader } from '../ui/wp-card';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { Text } from '../ui/text';
import { Modal } from '../ui/wp-modal-shim';
import { debounce } from 'lodash';
import { ExtendedQuestionnaireItem, useQuestionnaireServiceContext, useValueSetServiceContext } from '../../services';
import type { LoincCatalogueQuestion } from '../../services/ValueSetService';
import { v4 as uuidv4 } from 'uuid';
import { Coding, Questionnaire } from 'fhir/r4';
import { FormProvider, useForm } from 'react-hook-form';
import QuestionnairePreview from '../../pages/DashboardPage/QuestionnairesPage/QuestionnairePage/QuestionnairePreview/QuestionnairePreview.tsx';
import { useNavigate } from 'react-router-dom';

interface LoincSearchProps {
    label: string;
    type: 'question' | 'questionnaire' | 'panel';
    onSelectItem: (item: any) => void;
    /** A panel is handed back once loaded, for the caller's own review, instead of opening the preview modal. */
    reviewPanels?: boolean;
}

interface LoincItem {
    code: string;
    text?: string;
    display?: string;
    datatype?: string | null;
    answerList?: LoincCatalogueQuestion['answers'];
    units?: LoincCatalogueQuestion['units'];
}

// Searching, a whole answer, and a read that failed are three different things to say; a failure is never "no results".
type SearchStatus = 'idle' | 'searching' | 'found' | 'unavailable';
const MIN_TERM = 2;

const LoincSearch: React.FC<LoincSearchProps> = ({ label, type = 'question', onSelectItem, reviewPanels = false }) => {
    const navigate = useNavigate();
    const [searchTerm, setSearchTerm] = useState('');
    const [results, setResults] = useState<LoincItem[]>([]);
    const [status, setStatus] = useState<SearchStatus>('idle');
    const [loadingPreview, setLoadingPreview] = useState<Record<number, boolean>>({});
    const [previewFailed, setPreviewFailed] = useState<Record<number, boolean>>({});
    // Each search and each preview takes a number; an answer that is no longer the latest is dropped.
    const searchSeq = useRef(0);
    const previewSeq = useRef(0);
    const mounted = useRef(true);
    const [showPreviewModal, setShowPreviewModal] = useState<boolean>(false);
    const { searchQuestions, searchQuestionnaires, getLoincPanel, fetchFromLoinc } = useValueSetServiceContext();
    const {
        transformFromFhirQuestionnaire,
        convertFromLFormsToQuestionnaire,
        convertLFormsItemsToFHIR,
        getLoincFhirType,
        convertUnitsToExtensions
    } = useQuestionnaireServiceContext();

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

    const { reset, getValues } = methods;

    const runSearch = async (term: string) => {
        const seq = ++searchSeq.current;
        previewSeq.current += 1;
        setStatus('searching');
        try {
            const found: LoincItem[] = type === 'question'
                ? (await searchQuestions(term)).map((question) => ({
                    code: question.code,
                    text: question.text,
                    datatype: question.datatype,
                    answerList: question.answers,
                    units: question.units,
                }))
                : (await searchQuestionnaires(term)).map(({ code, display }) => ({ code, display, text: display }));
            if (seq !== searchSeq.current || !mounted.current) return;
            setResults(found);
            setPreviewFailed({});
            setStatus('found');
        } catch (error) {
            if (seq !== searchSeq.current || !mounted.current) return;
            console.error('LOINC catalogue search failed:', error);
            setResults([]);
            setStatus('unavailable');
        }
    };

    const latestSearch = useRef(runSearch);
    latestSearch.current = runSearch;
    const debouncedSearch = useMemo(() => debounce((term: string) => latestSearch.current(term), 300), []);

    const handleSearchChange = (value: string) => {
        setSearchTerm(value);
        searchSeq.current += 1;
        previewSeq.current += 1;
        setResults([]);
        if (value.trim().length >= MIN_TERM) {
            setStatus('searching');
            debouncedSearch(value);
        } else {
            debouncedSearch.cancel();
            setStatus('idle');
        }
    };

    const retrySearch = () => {
        debouncedSearch.cancel();
        void runSearch(searchTerm);
    };

    const preview = async (event: React.MouseEvent, index: number, code: string) => {
        event.stopPropagation();

        if (type === 'questionnaire') {
            handleQuestionnairePreview(index, code);
        } else if (type === 'panel') {
            handlePanelPreview(index, code);
        }
    };

    // A preview opens only if it is still the latest one asked for, and a failed one says so on its row.
    const loadPreview = async <T,>(index: number, read: () => Promise<T>): Promise<T | undefined> => {
        const seq = ++previewSeq.current;
        setLoadingPreview(prev => ({ ...prev, [index]: true }));
        setPreviewFailed(prev => ({ ...prev, [index]: false }));
        try {
            const value = await read();
            return seq === previewSeq.current && mounted.current ? value : undefined;
        } catch (error: any) {
            console.error(error);
            if (seq === previewSeq.current && mounted.current) setPreviewFailed(prev => ({ ...prev, [index]: true }));
            return undefined;
        } finally {
            if (mounted.current) setLoadingPreview(prev => ({ ...prev, [index]: false }));
        }
    };

    const handleQuestionnairePreview = async (index: number, code: string) => {
        let questionnaire = await loadPreview(index, () => fetchFromLoinc(code));

        if (!questionnaire) {
            return;
        }

        if ((questionnaire as { type?: string }).type === 'LOINC') {
            questionnaire = convertFromLFormsToQuestionnaire(questionnaire) as Questionnaire;
        }

        reset({
            id: questionnaire.id,
            ...transformFromFhirQuestionnaire(questionnaire)
        });
        setShowPreviewModal(true);
    };

    const handlePanelPreview = async (index: number, code: string) => {
        const loincPanel = await loadPreview(index, () => getLoincPanel(code));

        if (!loincPanel) {
            return;
        }

        const panel = convertFromLFormsToPanel(loincPanel);
        panel.item?.forEach((item) => {
            item.code?.forEach((code: Coding) => {
                if (!code.system) {
                    code.system = loincPanel.codeSystem;
                }
            });
        });

        const transformed = transformFromFhirQuestionnaire(panel as Questionnaire);
        if (reviewPanels) {
            onSelectItem({ type: 'group', item: transformed.item?.[0] as ExtendedQuestionnaireItem });
            return;
        }
        reset(transformed);
        setShowPreviewModal(true);
    };

    const convertFromLFormsToPanel = (lformsData: any) => {
        const panel = {
            linkId: uuidv4(),
            text: lformsData.name,
            type: 'group',
            code: [
                {
                    system: lformsData.codeSystem || 'http://loinc.org',
                    code: lformsData.code,
                    display: lformsData.name
                }
            ],
            item: convertLFormsItemsToFHIR(lformsData.items || [])
        };

        return {
            title: lformsData.name,
            copyright: lformsData.copyrightNotice,
            item: [panel]
        };
    };

    const convertLoincQToItem = (loincItem: LoincItem) => {
        const { code, text, answerList, units, datatype } = loincItem;

        const item: any = {
            linkId: uuidv4(),
            code: [
                {
                    code,
                    system: 'http://loinc.org',
                    display: text
                }
            ],
            text: text || '',
            type: getLoincFhirType(datatype || '', units)
        };

        // Already in LOINC sequence order from the catalogue route.
        if (answerList && answerList.length > 0) {
            item.answerOption = answerList.map(answer => ({
                value: {
                    code: answer.code ?? undefined,
                    system: 'http://loinc.org',
                    display: answer.display,
                    ...(answer.score != null ? { score: answer.score } : {})
                }
            }));
        }

        if (units && units.length > 0 && ['quantity', 'integer', 'decimal'].includes(item.type)) {
            item.extension = convertUnitsToExtensions(units, item.type);
        }

        return item;
    };

    const handleSelectQuestion = (item: LoincItem) => {
        onSelectItem({
            type,
            item: convertLoincQToItem(item)
        });
    };

    const handleImport = () => {
        setShowPreviewModal(false);

        const q = getValues() as Questionnaire;

        if (type === 'panel') {
            onSelectItem({
                type: 'group',
                item: q.item?.[0] as ExtendedQuestionnaireItem
            });
        } else if (type === 'questionnaire') {
            const { id } = q;

            navigate(`../new/${id}`, {
                relative: 'path',
                state: {
                    questionnaire: null,
                    template: null
                }
            });
        }
    };

    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
            debouncedSearch.cancel();
        };
    }, [debouncedSearch]);

    return (
        <>
            <Card style={{ maxHeight: 'calc(100% - 64px)', height: '100%', overflow: 'hidden' }}>
                <CardHeader>
                    <SearchControl
                                   className='wp-search-control'
                                   value={searchTerm}
                                   onChange={handleSearchChange}
                                   placeholder="Search"/>
                </CardHeader>
                <CardBody style={{ maxHeight: 'calc(100% - 73px)', overflowY: 'auto' }}>
                    {status === 'unavailable' ? (
                        <Flex direction="column" justify="center" align="center" gap={2} style={{ padding: '16px 0' }} role="alert">
                            <Text>The LOINC catalogue could not be reached, so nothing was found or added. Your form is unchanged.</Text>
                            <button type="button" className="btn btn-blue-ghost" onClick={retrySearch}>Search again</button>
                        </Flex>
                    ) : searchTerm.trim().length >= MIN_TERM ? (
                        status !== 'found' ? (
                            <Flex justify="center" style={{ margin: 16 }}>
                                <Spinner/>
                            </Flex>
                        ) : (
                            results.length > 0 ? (
                                <ItemGroup style={{ height: '100%' }} isBordered isSeparated isRounded>
                                    {results.map((item, index) => (
                                        <Item key={index}>
                                            <Flex justify="space-between" align="center">
                                                <FlexBlock>
                                                    <Truncate numberOfLines={1}>
                                                        {type === 'questionnaire' ? item.display : item.text}
                                                    </Truncate>
                                                </FlexBlock>
                                                <FlexItem>
                                                    {previewFailed[index] && (
                                                        <Text variant="muted" role="alert">Preview could not be loaded. Try again.</Text>
                                                    )}
                                                    {type !== 'question' ? (
                                                        <button
                                                            type="button"
                                                            className={`btn btn-blue-ghost${loadingPreview[index] ? ' btn-busy' : ''}`}
                                                            onClick={(event) => preview(event, index, item.code)}
                                                            disabled={loadingPreview[index]}
                                                        >
                                                            {reviewPanels && type === 'panel' ? 'Review' : 'Preview'}
                                                        </button>
                                                    ) : (
                                                        <button
                                                            type="button"
                                                            className="btn btn-blue-ghost"
                                                            onClick={() => handleSelectQuestion(item)}
                                                        >
                                                            Add
                                                        </button>
                                                    )}
                                                </FlexItem>
                                            </Flex>
                                        </Item>
                                    ))}
                                </ItemGroup>
                            ) : (
                                <Flex justify="center" align="center" style={{ padding: '16px 0' }}>
                                    <Text variant="muted">No results found for "{searchTerm}".</Text>
                                </Flex>
                            )
                        )
                    ) : (
                        <Flex justify="center" align="center" style={{ padding: '16px 0' }}>
                            <Text variant="muted">
                                {searchTerm.trim() ? 'Type at least two characters to search.' : <>Type a keyword in the search bar above to find {label}.</>}
                            </Text>
                        </Flex>
                    )}
                </CardBody>
            </Card>

            {/* Preview Modal */}
            {showPreviewModal && (
                <Modal style={{ width: '70%', height: '90%' }}
                       title={<button type="button" className="btn btn-blue" onClick={handleImport}>Import</button>}
                       onRequestClose={() => setShowPreviewModal(false)}>
                    <FormProvider {...methods}>
                        <form>
                            <QuestionnairePreview/>
                        </form>
                    </FormProvider>
                </Modal>
            )}
        </>
    );
};

export default LoincSearch;