import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Check, X } from 'lucide-react';
import { usePractitionerServiceContext } from '../../../../../services';
import { useFhirLocations } from '../../../../../hooks';
import { useServiceCatalogueBasis } from '../../../../../hooks/useServiceCatalogueBasis';
import { useFhirSchedules } from '../../../../../hooks/useFhirSchedules';
import { useStaffBookabilityContext } from '../../../../../hooks/useStaffBookabilityContext';
import { useStaffPermissionServiceContext } from '../../../../../services/StaffPermissionService';
import { formatFhirHumanName } from '../../../../../utils/fhirHumanName';
import { resolveProviderSetupChain } from '../../../../../utils/booking/providerSetupChain';
import BookabilityPanel from '../../../../../components/booking/BookabilityPanel';

// "What can patients actually book with this provider, and if not - why?"
//
// A reference point at the person's own profile, which is where someone goes when they ask the question. The
// setup chain below is the part that has never existed per-provider: the onboarding hub has a version of it,
// but only for the FIRST provider an org sets up.
//
// This is a REPORT, not an editor - every fix links back to the tab that owns that setting.
//
// MIRROR, NEVER A GATE - read-only throughout.

const StaffPatientBookingPage = () => {
    const { practitionerState } = usePractitionerServiceContext();
    const { canManage } = useStaffPermissionServiceContext();
    const navigate = useNavigate();
    const serviceBasis = useServiceCatalogueBasis();
    const healthcareServicesList = serviceBasis.services;
    const { locationsList } = useFhirLocations();
    const { schedulesList } = useFhirSchedules();

    const practitionerId = practitionerState?.practitioner?.id;

    const bookabilityCtx = useStaffBookabilityContext({
        practitioners: practitionerState ? [practitionerState] : [],
        serviceBasis,
        locationCount: locationsList?.length ?? 0,
    });

    const chain = useMemo(
        () => (practitionerState ? resolveProviderSetupChain(practitionerState, schedulesList, bookabilityCtx) : []),
        [practitionerState, schedulesList, bookabilityCtx],
    );

    const scopeInput = useMemo(
        () => ({
            schedules: schedulesList,
            ctx: bookabilityCtx,
            practitionerNameById: new Map(
                practitionerId
                    ? ([[
                        practitionerId,
                        formatFhirHumanName(practitionerState?.practitioner?.name) || 'This provider',
                    ]] as [string, string][])
                    : [],
            ),
            locationNameById: new Map(
                (locationsList ?? [])
                    .filter((location) => location.id)
                    .map((location) => [
                        location.id as string,
                        location.name ?? (location.id as string),
                    ] as [string, string]),
            ),
            orgCatalogSize: healthcareServicesList.length,
        }),
        [schedulesList, bookabilityCtx, practitionerId, practitionerState, locationsList, healthcareServicesList],
    );

    if (!practitionerId) {
        return <p className="ak-empty ak-empty--compact">Select a staff member to see their booking setup.</p>;
    }

    const firstUndone = chain.find((link) => !link.done);

    return (
        <div className="ak-card ak-card--panel flex flex-col gap-4">
            <div>
                <h2 className="ak-section-title">Patient Booking</h2>
                <p className="ak-page-title__sub">
                    What patients can book with this provider through the portal, and what still needs setting up.
                </p>
            </div>

            {serviceBasis.state !== 'complete' ? (
                <div className="ak-notice flex-wrap" role="status" data-testid="services-unverified">
                    {serviceBasis.state === 'checking' ? 'Checking available services' : 'Available services could not be verified.'}
                    {serviceBasis.state === 'unavailable' && <button type="button" className="btn btn-blue ml-2" onClick={() => void serviceBasis.retry()}>Retry</button>}
                </div>
            ) : (<>
            <BookabilityPanel
                scope={{ kind: 'practitioner', practitionerId }}
                input={scopeInput}
                canManageSection={(section) => canManage(section)}
                defaultOpen
            />

            <div>
                <div>
                    <h3 className="ak-section-title">What has to be true</h3>
                    <p className="ak-card__meta">
                        {firstUndone
                            ? `Next step: ${firstUndone.label.toLowerCase()}.`
                            : 'Every step is done — patients can book this provider.'}
                    </p>
                </div>
                <ul className="flex flex-col">
                    {chain.map((link) => (
                        <li key={link.id} className="ak-row items-start">
                            <span className="mt-0.5 shrink-0" aria-hidden>
                                {link.done ? (
                                    <Check className="h-4 w-4 text-success" />
                                ) : (
                                    <X className="h-4 w-4 text-warning" />
                                )}
                            </span>
                            <span className="min-w-0">
                                <span className="block ak-row__name">
                                    {link.label}
                                    <span className="sr-only">{link.done ? ' — done' : ' — not done yet'}</span>
                                </span>
                                <span className="block ak-field-help">{link.detail}</span>
                                {!link.done && link.id === 'servicesAssigned' && canManage('staff') && (
                                    <button type="button" className="btn btn-blue-ghost-sm mt-2"
                                            onClick={() => navigate('../services', { relative: 'path' })}>
                                        Choose services
                                    </button>
                                )}
                                {!link.done && link.id === 'scheduleWithHours' && canManage('schedules') && (
                                    <button type="button" className="btn btn-blue-ghost-sm mt-2"
                                            onClick={() => navigate('/dashboard/schedules')}>
                                        Set up schedule
                                    </button>
                                )}
                            </span>
                        </li>
                    ))}
                </ul>
            </div>
            </>)}
        </div>
    );
};

export default StaffPatientBookingPage;