import { useState, useEffect, useCallback } from 'react';
import { Item, ItemGroup } from "../../../components/ui/item-group";
import { useNavigate } from 'react-router-dom';
import { Icon } from "../../../components/ui/icon";
import { Heading } from '../../../components/ui/heading';
import { Flex, FlexItem, FlexBlock } from '../../../components/ui/flex';
import { Text } from '../../../components/ui/text';
import { Spacer } from '../../../components/ui/spacer';
// `shield`/`info` still feed WordPress's <Icon> here - the separate icon sweep, not this one.
import { Plus, Shield as shield, Info as info } from 'lucide-react';
import { Consent } from 'fhir/r4';
import { useConsentServiceContext, usePatientServiceContext } from '../../../services';
import { AppSpinner } from '../../../components';
import { ResourceListStatus } from '../../../components/ui/resource-list-status';
import { formatDate } from '../../../utils/dateUtils';

const ConsentsPage = () => {
    const navigate = useNavigate();
    const { patientState } = usePatientServiceContext();
    const {
        fetchConsentsWithPolling,
        shouldReload,
        setShouldReload,
        consentsBundle,
        consentsList,
        setUnsaved,
    } = useConsentServiceContext();
    const [loading, setLoading] = useState(false);
    // - this page had NO error state at all: a failed load was swallowed into console.error
    // and the screen then asserted "No consent records found." Consent records are exactly the kind
    // of record whose absence is acted upon, so the failure has to be visible.
    const [error, setError] = useState<string | null>(null);

    const loadData = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            await fetchConsentsWithPolling();
        } catch (err) {
            console.error('Failed to load consents:', err);
            setError('Failed to load consents.');
        } finally {
            setLoading(false);

            if (shouldReload) {
                setShouldReload(false);
            }
        }
    }, [shouldReload, fetchConsentsWithPolling, setShouldReload]);

    useEffect(() => {
        if (!consentsBundle || shouldReload) {
            loadData();
        }

        setUnsaved(false);
    }, [loadData, consentsBundle, shouldReload, setUnsaved]);

    const viewConsent = (consent: Consent) => {
        navigate(consent.id as string, {
            relative: 'route',
            state: {
                consent: consent
            }
        });
    };

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

    const getScopeDisplay = (consent: Consent): string => {
        return consent.scope?.coding?.[0]?.display ||
            consent.scope?.text ||
            'Unknown Scope';
    };

    const getCategoryDisplay = (consent: Consent): string => {
        if (!consent.category || consent.category.length === 0) {
            return '';
        }

        return consent.category[0]?.coding?.[0]?.display ||
            consent.category[0]?.text ||
            'Uncategorized';
    };

    const getStatusInfo = (consent: Consent): { status: string, isActive: boolean } => {
        const status = consent.status || 'unknown';
        const isActive = status === 'active';

        return {
            status: status.charAt(0).toUpperCase() + status.slice(1),
            isActive
        };
    };

    const getOrganizationCount = (consent: Consent): number => {
        return consent.organization?.length || 0;
    };

    return (
        <div>
            <Flex align="center" justify="space-between">
                <FlexItem>
                    <Heading level={2}>Consents</Heading>
                </FlexItem>
                <FlexItem>
                    <button type="button"
                            className="btn btn-blue"
                            onClick={addConsent}>
                        <Plus className="w-4 h-4" />
                        Add
                    </button>
                </FlexItem>
            </Flex>
            <Spacer margin="8"/>

            <ResourceListStatus
                loading={loading}
                error={error}
                isEmpty={consentsList.length === 0}
                /* - WAS THE SERVER ASKED?
 This page owns its own `loading`, and it opens FALSE. The effect that loads only runs
 AFTER the first paint, so on that paint the component was handed
 `loading: false` - `error: null` - `isEmpty: true` and said "No consent records found."
 before anything had been requested - a claim about the patient's record, stated on the
 strength of never having looked.

 The signal is the BUNDLE, not `patientState`: unlike the `useFhirX` hooks, neither
 this page nor ConsentService gates the fetch on a resolved patient, so `patientState`
 would answer a question nobody here asks. `consentsBundle` is undefined until a fetch
 has come back, which is precisely "we have an answer" - and an EMPTY bundle is still an
 answer, so this stays true for a patient with no consents on file.
 Do NOT add a separate `asked` flag: a second copy of this fact is what goes stale
 the first time somebody adds another reason to bail. */
                attempted={Boolean(consentsBundle)}
                resourceLabel="consent records"
                emptyMessage="No consent records found."
                onDismissError={() => setError(null)}
            />

            <>
                {loading ? (
                    <AppSpinner />
                ) : (
                    <>
                        {consentsList.length !== 0 && (
                            <ItemGroup isBordered isSeparated isRounded size='large'>
                                {consentsList.map((consent: Consent) => {
                                    const scope = getScopeDisplay(consent);
                                    const category = getCategoryDisplay(consent);
                                    const { status, isActive } = getStatusInfo(consent);
                                    const organizationCount = getOrganizationCount(consent);

                                    return (
                                        <Item
                                            key={consent.id}
                                            onClick={() => viewConsent(consent)}
                                        >
                                            <Flex>
                                                <FlexItem>
                                                    <Icon
                                                        icon={shield}
                                                        size={24}
                                                        style={{ marginRight: 12 }}
                                                    />
                                                </FlexItem>
                                                <FlexBlock>
                                                    <Flex align="center" justify="space-between">
                                                        <FlexItem>
                                                            <Text style={{ fontWeight: 500 }}>
                                                                {scope}
                                                            </Text>
                                                            {category && (
                                                                <Text variant="muted">
                                                                    {` ${category}`}
                                                                </Text>
                                                            )}

                                                            {consent.dateTime && (
                                                                <Text variant="muted">
                                                                    {` [Date: ${formatDate(consent.dateTime)}]`}
                                                                </Text>
                                                            )}
                                                        </FlexItem>
                                                        <FlexItem>
                                                            <Flex>
                                                                {organizationCount > 0 && (
                                                                    <FlexItem style={{ marginRight: 16 }}>
                                                                        <Text>
                                                                            {organizationCount} organization{organizationCount !== 1 ? 's' : ''}
                                                                        </Text>
                                                                    </FlexItem>
                                                                )}
                                                                <FlexItem>
                                                                    <Flex align="center">
                                                                        <Icon
                                                                            icon={info}
                                                                            size={24}
                                                                            style={{ marginRight: 4 }}
                                                                        />
                                                                        <Text style={{
                                                                            color: isActive ? 'green' : 'inherit'
                                                                        }}>
                                                                            {status}
                                                                        </Text>
                                                                    </Flex>
                                                                </FlexItem>
                                                            </Flex>
                                                        </FlexItem>
                                                    </Flex>
                                                </FlexBlock>
                                            </Flex>
                                        </Item>
                                    );
                                })}
                            </ItemGroup>
                        )}
                    </>
                )}
            </>
        </div>
    );
};

export default ConsentsPage;