import { FormEvent, useState } from 'react';
import { Building2, ChevronLeft, Search, UserRound } from 'lucide-react';
import { Button } from '../ui/button.tsx';
import { Input } from '../ui/input.tsx';
import { Badge } from '../ui/badge.tsx';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Skeleton } from '../ui/skeleton.tsx';
import {
    useReferralDirectory,
    type DirectoryLocation,
    type DirectoryOrganization,
    type DirectoryPractitioner,
    type DirectoryResult,
} from '../../hooks/useReferralDirectory.tsx';

// THE REFERRAL DIRECTORY SEARCH -, design ruling Addendum 4.
//
// ORG FIRST, THEN THE PEOPLE AT THE LOCATION YOU PICKED. Not a stylistic ordering: measured against
// the live registry, the org-then-address direction returned 77 named cardiologists at one institution
// while the practitioner-first direction resolved 3 of 6 searches and was ambiguous when it did. And it
// is how a referring practitioner actually thinks - *"send them to cardiology at University of Iowa"*,
// not *"find me Dr Someone."*
//
// THE REFERRER MAY STOP AFTER STEP ONE. Addendum 5: a referral addressed to a department rather than a
// person is normal and plausibly the more common case - the receiving org triages internally, and the
// referrer usually cannot know who is available. So "Refer to this organization" is a first-class ending,
// never a fallback for a failed practitioner search.

export interface ReferralTarget {
    organization: DirectoryOrganization;
    location?: DirectoryLocation;
    /** Absent = the referral is addressed to the organization. That is a complete answer. */
    practitioner?: DirectoryPractitioner;
}

interface ReferralDirectorySearchProps {
    onSelect: (target: ReferralTarget) => void;
    /** Offered when the registry cannot answer, so a referral is never blocked on a third party. */
    onEnterManually?: () => void;
    /** Also offer manual entry when the registry answers with nothing, as a send-out laboratory often is not listed by its common name. */
    manualOnNoMatch?: boolean;
    /** What choosing an organization is called where it is not a referral. */
    chooseLabel?: string;
}

const addressLine = (location: DirectoryLocation | undefined): string => {
    if (!location) return 'No practice address listed';

    return [
        location.street,
        location.city && `${location.city}, ${location.state} ${location.postalCode}`.trim(),
    ].filter(Boolean).join(' · ');
};

/**
 * THE HONEST LIMIT, SAID ON THE SCREEN RATHER THAN IN A COMMENT. The registry is an IDENTIFIER
 * registry, not a licensure one - an NPI is not revoked when a licence lapses. Somebody choosing where to
 * send a patient must not read a listing as verification.
 */
const REGISTRY_CAVEAT =
    'Listings come from the national provider registry. It confirms a provider is registered — it does not confirm a licence is current.';

const Unavailable = ({ onEnterManually }: { onEnterManually?: () => void }) => (
    <DismissibleAlert status="warning">
        <div className="space-y-2">
            <p>The provider registry is not answering right now.</p>
            {onEnterManually && (
                <Button type="button" variant="outline" onClick={onEnterManually}>
                    Enter the provider details manually
                </Button>
            )}
        </div>
    </DismissibleAlert>
);

const Refused = ({ onEnterManually }: { onEnterManually?: () => void }) => (
    <DismissibleAlert status="error">
        <div className="space-y-2">
            <p>You do not have permission to search the provider registry.</p>
            {onEnterManually && (
                <Button type="button" variant="outline" onClick={onEnterManually}>
                    Enter the provider details manually
                </Button>
            )}
        </div>
    </DismissibleAlert>
);

const ResultsSkeleton = () => (
    <div className="space-y-2" data-testid="directory-loading">
        {[0, 1, 2].map((row) => (
            <div key={row} className="space-y-2 rounded border p-3">
                <Skeleton className="h-4 w-1/2 rounded" />
                <Skeleton className="h-3 w-3/4 rounded" />
            </div>
        ))}
    </div>
);

export const ReferralDirectorySearch = ({
    onSelect,
    onEnterManually,
    manualOnNoMatch = false,
    chooseLabel = 'Refer to this organization',
}: ReferralDirectorySearchProps) => {
    const { searchOrganizations, searchPractitioners } = useReferralDirectory();

    const [organizationName, setOrganizationName] = useState('');
    const [organizationState, setOrganizationState] = useState('');
    const [specialty, setSpecialty] = useState('');

    const [organizations, setOrganizations] = useState<DirectoryResult<DirectoryOrganization>>();
    const [practitioners, setPractitioners] = useState<DirectoryResult<DirectoryPractitioner>>();
    const [chosen, setChosen] = useState<DirectoryOrganization>();
    const [loading, setLoading] = useState(false);

    const runOrganizationSearch = async (page = 0) => {
        setLoading(true);
        const result = await searchOrganizations({
            name: organizationName,
            state: organizationState || undefined,
            page,
        });
        // Appended rather than replaced when paging, so "Show more" adds to the list the reader is
        // already looking at instead of silently replacing it under them.
        setOrganizations((previous) => merge(previous, result, page));
        setLoading(false);
    };

    const runPractitionerSearch = async (organization: DirectoryOrganization, page = 0) => {
        setLoading(true);
        const result = await searchPractitioners({
            postalCode: organization.location?.postalCode ?? '',
            street: organization.location?.street,
            specialty: specialty || undefined,
            state: organization.location?.state,
            page,
        });
        setPractitioners((previous) => merge(previous, result, page));
        setLoading(false);
    };

    const chooseOrganization = async (organization: DirectoryOrganization) => {
        setChosen(organization);
        setPractitioners(undefined);
        await runPractitionerSearch(organization);
    };

    const backToOrganizations = () => {
        setChosen(undefined);
        setPractitioners(undefined);
    };

    const onSubmitOrganizationSearch = (event: FormEvent) => {
        event.preventDefault();
        void runOrganizationSearch(0);
    };

    const onSubmitSpecialty = (event: FormEvent) => {
        event.preventDefault();
        if (chosen) void runPractitionerSearch(chosen, 0);
    };

    if (chosen) {
        return (
            <div className="space-y-4">
                <div className="flex items-start gap-2">
                    <Button type="button" variant="ghost" size="sm" onClick={backToOrganizations}>
                        <ChevronLeft size={16} />
                        Back
                    </Button>
                    <div className="min-w-0">
                        <p className="font-medium">{chosen.name}</p>
                        <p className="text-sm text-secondary">{addressLine(chosen.location)}</p>
                    </div>
                </div>

                <Button
                    type="button"
                    className="btn btn-blue"
                    onClick={() => onSelect({ organization: chosen, location: chosen.location })}
                >
                    <Building2 size={16} />
                    {chooseLabel}
                </Button>

                <form onSubmit={onSubmitSpecialty} className="flex gap-2">
                    <Input
                        aria-label="Specialty"
                        placeholder="Specialty, e.g. Cardiovascular Disease"
                        value={specialty}
                        onChange={(event) => setSpecialty(event.target.value)}
                    />
                    <Button type="submit" variant="outline" disabled={loading}>
                        <Search size={16} />
                        Find providers
                    </Button>
                </form>

                {loading && !practitioners && <ResultsSkeleton />}

                {practitioners && !practitioners.available && practitioners.reason === 'unavailable' && (
                    <Unavailable onEnterManually={onEnterManually} />
                )}
                {practitioners && !practitioners.available && practitioners.reason === 'refused' && (
                    <Refused onEnterManually={onEnterManually} />
                )}

                {practitioners?.available && (
                    <PractitionerResults
                        result={practitioners}
                        loading={loading}
                        onSelect={(practitioner) => onSelect({
                            organization: chosen,
                            location: chosen.location,
                            practitioner,
                        })}
                        onShowMore={() => void runPractitionerSearch(chosen, practitioners.page + 1)}
                    />
                )}

                <p className="text-xs text-secondary">{REGISTRY_CAVEAT}</p>
            </div>
        );
    }

    return (
        <div className="space-y-4">
            {/* On a phone the name takes its own line: beside State and Search it had about 125 px. */}
            <form onSubmit={onSubmitOrganizationSearch} className="flex flex-wrap gap-2">
                <Input
                    aria-label="Organization name"
                    className="basis-full sm:basis-0 sm:flex-1"
                    placeholder="Hospital or practice name"
                    value={organizationName}
                    onChange={(event) => setOrganizationName(event.target.value)}
                />
                {/* The shared field rule sets every input to 100% width, which outranks a width class
                    on the input, so the wrapper holds State to 6rem and keeps Search beside it. */}
                <div className="flex basis-full gap-2 sm:basis-auto">
                    <div className="w-24 shrink-0">
                        <Input
                            aria-label="State"
                            placeholder="State"
                            maxLength={2}
                            value={organizationState}
                            onChange={(event) => setOrganizationState(event.target.value)}
                        />
                    </div>
                    <Button type="submit" className="btn btn-blue" disabled={loading}>
                        <Search size={16} />
                        Search
                    </Button>
                </div>
            </form>

            {loading && !organizations && <ResultsSkeleton />}

            {organizations && !organizations.available && (
                organizations.reason === 'unavailable'
                    ? <Unavailable onEnterManually={onEnterManually} />
                    : organizations.reason === 'refused'
                    ? <Refused onEnterManually={onEnterManually} />
                    : (
                        <DismissibleAlert status="info">
                            Enter at least two characters of the organization&apos;s name.
                        </DismissibleAlert>
                    )
            )}

            {organizations?.available && organizations.results.length === 0 && (
                <DismissibleAlert status="info">
                    <div className="space-y-2">
                        <p>
                            No organizations matched that name. The registry lists the LEGAL name, which is often
                            not the common one — try a shorter piece of it.
                        </p>
                        {manualOnNoMatch && onEnterManually && (
                            <Button type="button" variant="outline" onClick={onEnterManually}>
                                Enter the details manually
                            </Button>
                        )}
                    </div>
                </DismissibleAlert>
            )}

            {organizations?.available && organizations.results.length > 0 && (
                <>
                    <ul className="space-y-2">
                        {organizations.results.map((organization) => (
                            <li key={organization.npi}>
                                <button
                                    type="button"
                                    onClick={() => void chooseOrganization(organization)}
                                    className="w-full rounded border p-3 text-left hover:bg-muted"
                                >
                                    <span className="flex flex-wrap items-center gap-2">
                                        <span className="font-medium">{organization.name}</span>
                                        {/* 🚨 A BADGE AND NOTHING MORE. It never reorders this list and it
                                            never claims the opposite — an organization without it is one
                                            we cannot see, not one that is absent.

                                            🔑 TWO BADGES, BECAUSE THEY ARE TWO CLAIMS AND THE SENDER
                                            NEEDS THE NARROWER ONE. "On Akashic" says the practice has an
                                            account; it does NOT say a referral sent here would arrive.
                                            A practice that has designated no destination is one whose
                                            in-system referral lands in a queue nobody watches — worse
                                            than a fax, because the sender believes it arrived. */}
                                        {organization.acceptsReferrals ? (
                                            <Badge variant="default">Accepts referrals through Akashic</Badge>
                                        ) : organization.onAkashic && (
                                            <Badge variant="outline">On Akashic</Badge>
                                        )}
                                    </span>
                                    {organization.alsoKnownAs.length > 0 && (
                                        <span className="block text-sm text-secondary">
                                            Also known as {organization.alsoKnownAs.join(', ')}
                                        </span>
                                    )}
                                    {/* One institution has many registry records — 20 of them shared a
                                        name across four towns. City and street are what stop somebody
                                        picking the wrong campus. */}
                                    <span className="block text-sm text-secondary">
                                        {addressLine(organization.location)}
                                    </span>
                                    {/* AND WHEN NAME AND ADDRESS STILL MATCH, THE NPI. Measured on staging:
                                        three records read "University Of Iowa Hospitals And Clinics · 200
                                        Hawkins Dr" and nothing else, so the choice was blind. */}
                                    {organization.npi && (
                                        <span className="block text-sm text-secondary">NPI {organization.npi}</span>
                                    )}
                                    {/* ⭐ SAYS WHY, RATHER THAN LEAVING A GAP WHERE THE OTHER BADGE WAS.
                                        Without this the reader has to explain the difference to
                                        themselves, and the explanation they reach for is "this one is
                                        not really on the system" — which is wrong and would send them
                                        hunting for a practice they have already found.

                                        ⛔ ONLY WHEN WE POSITIVELY KNOW. It hangs off `onAkashic`, so it
                                        is said about a practice whose routing we actually read. A
                                        practice we cannot see gets NO sentence, because we have nothing
                                        to say about it — that is the same absence-is-not-evidence rule
                                        the badge itself obeys. */}
                                    {organization.onAkashic && !organization.acceptsReferrals && (
                                        <span className="block text-sm text-secondary">
                                            They have not turned on in-system referrals — send this one by
                                            fax or phone as usual.
                                        </span>
                                    )}
                                </button>
                            </li>
                        ))}
                    </ul>
                    <MoreResults
                        result={organizations}
                        loading={loading}
                        onShowMore={() => void runOrganizationSearch(organizations.page + 1)}
                    />
                </>
            )}

            <p className="text-xs text-secondary">{REGISTRY_CAVEAT}</p>
        </div>
    );
};

const PractitionerResults = ({
    result,
    loading,
    onSelect,
    onShowMore,
}: {
    result: Extract<DirectoryResult<DirectoryPractitioner>, { available: true }>;
    loading: boolean;
    onSelect: (practitioner: DirectoryPractitioner) => void;
    onShowMore: () => void;
}) => {
    const atThisAddress = result.results.filter((entry) => entry.proximity === 'exact-street');
    const nearby = result.results.filter((entry) => entry.proximity === 'nearby');

    if (result.results.length === 0) {
        return (
            <DismissibleAlert status="info">
                No providers matched that specialty at this location.
            </DismissibleAlert>
        );
    }

    return (
        <div className="space-y-4">
            {atThisAddress.length > 0 && (
                <Group label="At this address" people={atThisAddress} onSelect={onSelect} />
            )}
            {/* ⛔ NEVER MERGED INTO THE SET ABOVE. These are practitioners in the same postal code — often
                the institution's other buildings, sometimes an unrelated practice. Offering them is
                useful; presenting them as being at the address the referrer picked is a different claim. */}
            {nearby.length > 0 && (
                <Group label="Nearby, same postal code" people={nearby} onSelect={onSelect} />
            )}
            <MoreResults result={result} loading={loading} onShowMore={onShowMore} />
        </div>
    );
};

const Group = ({
    label,
    people,
    onSelect,
}: {
    label: string;
    people: DirectoryPractitioner[];
    onSelect: (practitioner: DirectoryPractitioner) => void;
}) => (
    <div className="space-y-2">
        <h4 className="text-sm font-semibold text-secondary">{label}</h4>
        <ul className="space-y-2">
            {people.map((practitioner) => (
                <li key={practitioner.npi}>
                    <button
                        type="button"
                        onClick={() => onSelect(practitioner)}
                        className="w-full rounded border p-3 text-left hover:bg-muted"
                    >
                        <span className="flex items-center gap-2 font-medium">
                            <UserRound size={16} />
                            {practitioner.name}
                            {practitioner.credential && (
                                <span className="text-secondary">{practitioner.credential}</span>
                            )}
                        </span>
                        {/* The specialty they SEARCHED for leads, which is not always the registry's
                            primary one — the first cardiologist the design run returned lists Internal
                            Medicine as primary. */}
                        {practitioner.specialties[0] && (
                            <span className="block text-sm text-secondary">
                                {practitioner.specialties[0].description}
                                {practitioner.specialties[0].license && (
                                    <> · Licence {practitioner.specialties[0].license}
                                        {practitioner.specialties[0].licenseState
                                            ? ` (${practitioner.specialties[0].licenseState})`
                                            : ''}
                                    </>
                                )}
                            </span>
                        )}
                        {/* THE NPI WAS ALREADY IN HAND AND WAS THE ONE THING NOT SHOWN. This row is
                            keyed on it. Meanwhile the collaboration-team invite refuses to send to a
                            practitioner who is not on Akashic without their NPI - deliberately, because
                            with no organization vouching for a stranger the registry check is the only
                            structural evidence they are real - and a licence number satisfies nothing
                            we ask for anywhere.

                            So somebody who found the specialist through OUR search still had to leave
                            the product to look up the number OUR form was about to demand, and the
                            value was sitting in the response the whole time. It is a public business
                            identifier, printed in every provider directory in the country, so there is
                            nothing to weigh against showing it. */}
                        <span className="block text-sm text-secondary">
                            NPI {practitioner.npi}
                        </span>
                    </button>
                </li>
            ))}
        </ul>
    </div>
);

/**
 * "THERE IS MORE" AND "THERE IS MORE AND YOU CANNOT HAVE IT" ARE DIFFERENT SENTENCES. The registry
 * stops paging at a fixed offset, so a wide search cannot be walked to its end - and a list that simply
 * stops reads as a complete answer. When that happens the reader is told to narrow instead of being
 * offered a button that would return nothing.
 */
const MoreResults = ({
    result,
    loading,
    onShowMore,
}: {
    result: { hasMore: boolean; pagingExhausted: boolean };
    loading: boolean;
    onShowMore: () => void;
}) => {
    if (!result.hasMore) return null;

    if (result.pagingExhausted) {
        return (
            <DismissibleAlert status="info">
                There are more matches than the registry will list. Narrow the search — add a state, a
                city, or more of the name.
            </DismissibleAlert>
        );
    }

    return (
        <Button type="button" variant="outline" onClick={onShowMore} disabled={loading}>
            Show more
        </Button>
    );
};

/** Paging appends; a fresh search replaces. A failure never wipes results the reader is still reading. */
function merge<T>(
    previous: DirectoryResult<T> | undefined,
    next: DirectoryResult<T>,
    page: number,
): DirectoryResult<T> {
    if (!next.available) {
        return page > 0 && previous ? previous : next;
    }

    if (page === 0 || !previous?.available) {
        return next;
    }

    return { ...next, results: [...previous.results, ...next.results] };
}

export default ReferralDirectorySearch;