import { useState, useEffect, useCallback } from 'react';
import { Item, ItemGroup } from "../../../components/ui/item-group";
import { useNavigate } from 'react-router-dom';
import { Card, CardHeader, CardBody } from '../../../components/ui/wp-card';
import { Heading } from '../../../components/ui/heading';
import { Flex, FlexItem, FlexBlock } from '../../../components/ui/flex';
import { Text } from '../../../components/ui/text';
import { Plus } from 'lucide-react';
import { Medication } from 'fhir/r4';
import { useMedicationServiceContext } from '../../../services';
import { AppSpinner } from '../../../components';
import { ResourceListStatus } from '../../../components/ui/resource-list-status';
import { formatFhirCodeableConcept } from '../../../utils/fhirCodeableConcept.tsx';

const Medications = () => {
    const navigate = useNavigate();
    const {
        fetchMedicationsWithPolling,
        shouldReload,
        setShouldReload,
        medicationsBundle,
        medicationsList,
        setUnsaved,
        setMedicationState
    } = useMedicationServiceContext();

    const [searchTerm, setSearchTerm] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const loadData = useCallback(async () => {
        setLoading(true);
        try {
            await fetchMedicationsWithPolling();
        } catch (error) {
            console.error('Failed to load medications:', error);
            setError(`Could not load medications. Try again.`);
        } finally {
            setLoading(false);
            if (shouldReload) {
                setShouldReload(false);
            }
        }
    }, [shouldReload, fetchMedicationsWithPolling, setShouldReload]);

    useEffect(() => {
        if (!medicationsBundle || shouldReload) {
            loadData();
        }
        setUnsaved(false);
    }, [loadData, medicationsBundle, shouldReload, setUnsaved]);

    const viewMedication = (medication: Medication) => {
        navigate(medication.id as string, {
            relative: 'route',
            state: {
                medication: medication
            }
        });
    };

    const addMedication = () => {
        navigate('new', {
            relative: 'route',
            state: {
                medication: null
            }
        });
    };

    const getMedicationName = (medication: Medication) => {
        if (medication.code) {
            return formatFhirCodeableConcept(medication.code);
        }
        return 'Unnamed Medication';
    };

    const getMedicationDetails = (medication: Medication) => {
        const details = [];

        if (medication.form) {
            details.push(formatFhirCodeableConcept(medication.form));
        }

        if (medication.amount) {
            const amount = medication.amount;
            if (amount.numerator && amount.denominator) {
                details.push(`${amount.numerator.value} ${amount.numerator.unit} / ${amount.denominator.value} ${amount.denominator.unit}`);
            } else if (amount.numerator) {
                details.push(`${amount.numerator.value} ${amount.numerator.unit}`);
            }
        }

        if (medication.manufacturer && medication.manufacturer.display) {
            details.push(`Mfr: ${medication.manufacturer.display}`);
        }

        return details.join(' • ');
    };

    const filteredMedications = medicationsList.filter(medication => {
        if (!searchTerm) return true;

        const medicationName = getMedicationName(medication).toLowerCase();
        const searchLower = searchTerm.toLowerCase();

        return medicationName.includes(searchLower);
    });

    return (
        <Card>
            <CardHeader>
                <Flex align="center" justify="space-between">
                    <FlexItem>
                        <Heading level={2}>Medications</Heading>
                    </FlexItem>
                    <FlexItem>
                        <button
                            type="button"
                            className="btn btn-blue"
                            onClick={addMedication}
                        >
                            <Plus className="w-4 h-4" />
                            Add
                        </button>
                    </FlexItem>
                </Flex>
            </CardHeader>
            <CardBody>
                <ResourceListStatus
                    loading={loading}
                    error={error}
                    isEmpty={filteredMedications.length === 0}
                    /* - `loading` opens false and the load runs only after the first paint,
 so without this the screen said "No medications found." before asking. The bundle
 is undefined until an answer comes back; an EMPTY bundle is still an answer.
 Note `isEmpty` above is the FILTERED list - so a search that matches nothing on a
 loaded record is `attempted: true` + empty, and keeps its own "no match" wording. */
                    attempted={Boolean(medicationsBundle)}
                    resourceLabel="medications"
                    emptyMessage={searchTerm ? 'No medications match your search.' : 'No medications found.'}
                    onDismissError={() => setError(null)}
                />

                <>
                    {loading ? (
                        <AppSpinner />
                    ) : (
                        <>
                            {filteredMedications.length !== 0 && (
                                <ItemGroup isBordered isSeparated isRounded size='large'>
                                    {filteredMedications.map((medication: Medication) => {
                                        const medicationName = getMedicationName(medication);
                                        const medicationDetails = getMedicationDetails(medication);

                                        return (
                                            <Item key={medication.id}
                                                  onClick={() => viewMedication(medication)}>
                                                <Flex>
                                                    {/*<FlexItem>*/}
                                                    {/*    <Icon icon={medicine} size={24} style={{ marginRight: 12 }} />*/}
                                                    {/*</FlexItem>*/}
                                                    <FlexBlock>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <Text style={{ fontWeight: 500 }}>
                                                                    {medicationName}
                                                                </Text>
                                                                {medicationDetails && (
                                                                    <Text variant="muted">
                                                                        {medicationDetails}
                                                                    </Text>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                        {medication.ingredient && medication.ingredient.length > 0 && (
                                                            <Text variant="muted" style={{ marginTop: 4 }}>
                                                                {medication.ingredient.length} ingredient{medication.ingredient.length !== 1 ? 's' : ''}
                                                            </Text>
                                                        )}
                                                    </FlexBlock>
                                                </Flex>
                                            </Item>
                                        );
                                    })}
                                </ItemGroup>
                            )}
                        </>
                    )}
                </>
            </CardBody>
        </Card>
    );
};

export default Medications;