import { useMemo } from 'react';
import type { Reference } from 'fhir/r4';
import { Card } from '../../../../components/ui/card';
import { useAuthServiceContext, usePractitionerServiceContext, useStaffPermissionServiceContext } from '../../../../services';
import { useFhirHealthcareServices } from '../../../../hooks';
import { getRefSelfBookableOverride, overrideToChoice } from '../../../../config/serviceSelfBookable';
import { getRefTelehealthEligibleOverride, overrideToTelehealthChoice } from '../../../../config/serviceTelehealthEligible';
import StaffServicesOfferedPage from './StaffServicesOfferedPage/StaffServicesOfferedPage';
import { SELF_BOOKABLE_CHOICE_LABELS, TELEHEALTH_CHOICE_LABELS } from './StaffServicesOfferedPage/offeredServiceLabels';
import { EmptyState } from '../../../../components/ui/empty-state';

const refId = (ref: Reference): string | undefined => ref.reference?.split('/').pop();

// The Services Offered tab. staff:manage gets the editor; staff:view reads the same per-practice set
// and its two overrides as text, with no picker, no Remove and no Save.
const StaffRecordServices = () => {
    const { canManage } = useStaffPermissionServiceContext();
    const { practitionerState } = usePractitionerServiceContext();
    const { currentOrganization } = useAuthServiceContext();
    const { healthcareServicesList } = useFhirHealthcareServices();

    const orgRoles = useMemo(
        () => (practitionerState?.roles ?? []).filter(
            (role) => Boolean(role.organization && refId(role.organization) === currentOrganization?.id),
        ),
        [practitionerState?.roles, currentOrganization?.id],
    );
    const offered = useMemo(() => {
        const byId = new Map<string, Reference>();
        for (const role of orgRoles) {
            for (const ref of role.healthcareService ?? []) {
                const id = refId(ref);
                if (id && !byId.has(id)) byId.set(id, ref);
            }
        }
        return Array.from(byId);
    }, [orgRoles]);

    if (canManage('staff')) return <StaffServicesOfferedPage />;
    if (!practitionerState) return null;

    // The catalog can be out of a viewer's reach; the name written onto the role reference stands in.
    const serviceName = (id: string, ref: Reference) =>
        healthcareServicesList.find((service) => service.id === id)?.name ?? ref.display ?? id;

    return (
        <Card>
            <h3 className="ak-section-title">Services Offered</h3>
            <p className="ak-page-title__sub">
                Services this person offers at {currentOrganization?.name ?? 'this practice'}.
            </p>
            {orgRoles.length === 0 ? (
                <EmptyState size="compact" title="This staff member has no role at this practice." />
            ) : offered.length === 0 ? (
                <EmptyState size="compact" title="No services offered at this practice yet." />
            ) : (
                <div className="ak-card-list">
                    {offered.map(([id, ref]) => (
                        <div key={id} className="ak-card ak-card--panel">
                            <strong className="min-w-0 break-words ak-card__title">{serviceName(id, ref)}</strong>
                            <dl className="mt-2 grid gap-3 sm:grid-cols-2">
                                <div>
                                    <dt className="ak-label">Patient self-booking</dt>
                                    <dd>{SELF_BOOKABLE_CHOICE_LABELS[overrideToChoice(getRefSelfBookableOverride(ref))]}</dd>
                                </div>
                                <div>
                                    <dt className="ak-label">Delivered by video</dt>
                                    <dd>{TELEHEALTH_CHOICE_LABELS[overrideToTelehealthChoice(getRefTelehealthEligibleOverride(ref))]}</dd>
                                </div>
                            </dl>
                        </div>
                    ))}
                </div>
            )}
        </Card>
    );
};

export default StaffRecordServices;