import React, { useEffect, useRef, useState } from 'react';
import { ComboboxControl } from "../ui/combobox-control";
import { ProgressBar } from "../ui/progress-bar";
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Flex, FlexItem, FlexBlock } from '../ui/flex';
import { Text } from '../ui/text';
import { Spacer } from '../ui/spacer';
import { useFormContext, Controller } from 'react-hook-form';
import { Patient } from 'fhir/r4';
import { Check, Trash2 } from 'lucide-react';
import { Badge } from '../ui/badge';
import { usePatientServiceContext, useFhirServiceContext } from '../../services';
import { isRefusedRead } from '../../utils/fetchFailureMessage';
import { FhirHumanNameDisplay, formatFhirHumanName } from '../../utils/fhirHumanName';

interface PatientSearchProps {
    label?: string;
    context: string;
    placeholder?: string;
    disabled?: boolean;
    required?: boolean;
    allowClear?: boolean;
    onPatientSelected?: (patient: Patient | null) => void;
    /** Replaces the chart search, for a caller who may only search through a narrower route. */
    search?: (searchTerm: string) => Promise<Patient[]>;
    showSelectedPatient?: boolean;
    selectedPatientStyle?: 'button' | 'text';
}

const PatientSearch: React.FC<PatientSearchProps> = ({
                                                         label = "Patient",
                                                         context,
                                                         placeholder = "Search by name or full phone #",
                                                         disabled = false,
                                                         required = false,
                                                         allowClear = true,
                                                         onPatientSelected,
                                                         search,
                                                         showSelectedPatient = true,
                                                         selectedPatientStyle = 'button'
                                                     }) => {
    const { control, watch, setValue } = useFormContext();
    const { searchPatients } = usePatientServiceContext();
    const { unpackBundle } = useFhirServiceContext();

    const [patientSearchResults, setPatientSearchResults] = useState<Patient[]>([]);
    const [patientSearchLoading, setPatientSearchLoading] = useState(false);
    const [searchFailure, setSearchFailure] = useState<string>();

    const selectedPatient = watch(context);

    // Only the newest search may offer patients, a failure, or the end of loading.
    const generation = useRef(0);
    const retireSearch = () => {
        generation.current += 1;
        setPatientSearchLoading(false);
    };
    useEffect(() => () => { generation.current += 1; }, []);

    const searchPatientParticipants = async (searchTerm: string) => {
        retireSearch();
        const mine = generation.current;
        // The previous answer is not this query's: nothing from it stays to be picked while this one loads.
        setPatientSearchResults([]);
        setSearchFailure(undefined);
        if (!searchTerm || searchTerm.length < 2) return;

        setPatientSearchLoading(true);
        try {
            const patients = search ? await search(searchTerm) : unpackBundle(await searchPatients(searchTerm));
            if (generation.current !== mine) return;
            setPatientSearchResults(patients);
            setSearchFailure(undefined);
        } catch (error) {
            if (generation.current !== mine) return;
            console.error('Failed to search patients:', error);
            setPatientSearchResults([]);
            // A refused or failed search is not an empty one.
            setSearchFailure(isRefusedRead(error)
                ? 'You do not have access to search patient records.'
                : 'Patients could not be searched. Please try again.');
        } finally {
            if (generation.current === mine) setPatientSearchLoading(false);
        }
    };

    const handlePatientChange = (value: string | null | undefined) => {
        // A clear arrives as null and is handled once, by onReset.
        if (value == null) return;
        const patient = patientSearchResults.find(p => p.id === value) || null;
        setValue(context, patient);
        onPatientSelected?.(patient);
    };

    const handlePatientClear = () => {
        retireSearch();
        setValue(context, null);
        setPatientSearchResults([]);
        onPatientSelected?.(null);
    };

    const renderSelectedPatient = () => {
        if (!selectedPatient || !showSelectedPatient) return null;

        if (selectedPatientStyle === 'button') {
            return (
                <>
                    <Spacer margin="16px" />
                    <Flex align="center" gap={2}>
                        <FlexItem>
                            {/* THIRD badge-shaped button found in this sweep: `disabled` +
                                hardcoded green, displaying a NAME — a status indicator, not a
                                control. Takes Spencer's QuestionnairesPage ruling (squared,
                                font-normal, colours preserved). NOT converted to
                                <button disabled>, which would freeze a focusable,
                                button-announced status label in place. */}
                            <Badge variant="outline"
                                   className="rounded-md font-normal"
                                   style={{
                                       backgroundColor: '#e8f5e8',
                                       borderColor: '#00a32a',
                                       color: '#00a32a'
                                   }}>
                                <Check />
                                <FhirHumanNameDisplay name={selectedPatient.name}/>
                            </Badge>
                        </FlexItem>
                        <FlexItem>
                            <Text variant="muted" size="12px">
                                (Selected Patient)
                            </Text>
                        </FlexItem>
                        {/*{allowClear && (*/}
                        {/*    <FlexItem>*/}
                        {/*        <Button*/}
                        {/*            icon={trash}*/}
                        {/*            variant="secondary"*/}
                        {/*            onClick={handlePatientClear}*/}
                        {/*            disabled={disabled}*/}
                        {/*            isDestructive*/}
                        {/*            size="small"*/}
                        {/*            showTooltip*/}
                        {/*            label="Clear patient selection"*/}
                        {/*        />*/}
                        {/*    </FlexItem>*/}
                        {/*)}*/}
                    </Flex>
                </>
            );
        } else {
            return (
                <>
                    <Spacer margin="16px" />
                    <Flex justify="space-between" align="center">
                        <FlexItem>
                            <Text weight="600">Selected Patient:</Text>
                        </FlexItem>
                        <FlexItem>
                            <FhirHumanNameDisplay name={selectedPatient.name}/>
                        </FlexItem>
                        {allowClear && (
                            <FlexItem>
                                <button
                                    type="button"
                                    className="btn btn-red-ghost-sm"
                                    title="Clear patient selection"
                                    aria-label="Clear patient selection"
                                    onClick={handlePatientClear}
                                    disabled={disabled}
                                >
                                    <Trash2 />
                                </button>
                            </FlexItem>
                        )}
                    </Flex>
                </>
            );
        }
    };

    return (
        <>
            <Controller key={context}
                        name={context}
                        control={control}
                        rules={{ required: required ? 'Patient selection is required' : false }}
                        render={({ fieldState }) => (
                            <>
                                <Flex>
                                    <FlexBlock>
                                        <ComboboxControl
                                                         label={label}
                                                         isLoading={patientSearchLoading}
                                                         emptyMessage={searchFailure ? null : undefined}
                                                         // The options are the server's answer to what was typed.
                                                         filterOptions={false}
                                                         value={selectedPatient?.id ?? ''}
                                                         options={patientSearchResults.map(patient => ({
                                                             value: patient.id ?? '',
                                                             label: formatFhirHumanName(patient.name)
                                                         }))}
                                                         onFilterValueChange={(inputValue) => {
                                                             searchPatientParticipants(inputValue);
                                                         }}
                                                         onChange={handlePatientChange}
                                                         placeholder={placeholder}
                                                         disabled={disabled}
                                                         allowReset={allowClear}
                                                         onReset={handlePatientClear}/>
                                        {patientSearchLoading && (
                                            <ProgressBar className="wp-progress-bar"/>
                                        )}
                                        {searchFailure && (
                                            <p className="ak-field-error" role="alert">{searchFailure}</p>
                                        )}
                                    </FlexBlock>
                                </Flex>
                                {fieldState.error && (
                                    <DismissibleAlert status="error">
                                        {fieldState.error.message}
                                    </DismissibleAlert>
                                )}
                            </>
                        )}/>

            {renderSelectedPatient()}
        </>
    );
};

export default PatientSearch;