import React, { useId, useState } from 'react';
import { Search } from 'lucide-react';
import { shortList } from '../../../utils/recordActions';
import { KINDS_WITHOUT_A_FORM } from '../../../utils/recordFieldCatalogue.generated';
import { seedForThing, splitOnPrefix, type RecordThing } from '../../../utils/recordThingSearch';
import type { ProposalKind } from '../../../utils/recordProposals';
import { useRecordThingSearch } from './useRecordThingSearch';
import { useIsPhoneWidth } from '../../../hooks/useIsPhoneWidth';

/**
 * The fallback for whatever the visit did not cover.
 *
 * Drawn in `mockups/practitioner/encounter.html` as two groups under one search box:
 *
 *     What you add most
 *       Metformin 500 mg tablet     prescription
 *       Type 2 diabetes mellitus    diagnosis
 *     Or by kind
 *       Prescription - Diagnosis - Referral - Test or lab order
 *
 * THE LIST HOLDS THINGS, NOT KINDS, and the deck says why: *"A clinician does not search for
 * 'Prescription', they search for metformin - the kind is decided by what they pick, which is Epic's
 * whole answer to a chart too large to menu."* The kind is an OUTCOME of the pick, shown on the row,
 * never a question asked first.
 *
 * CORRECTED 2026-09-04. This surface previously searched the four KIND LABELS and showed nothing
 * else - which is a menu of four with a filter on it, and *"Epic's answer to too many things is never a
 * better menu"* is the one rule the whole surface exists to obey. The kinds are still here, under
 * *"Or by kind"*, for the thing that is on nobody's list yet.
 *
 * IT IS ALSO THE ONLY WAY TWO KINDS ARE REACHABLE AT ALL. A referral and a lab order have no resource
 * form, so nothing the note describes can ever propose one.
 */

interface Props {
    /** What this clinician has added most. Empty until there is a history, which is expected on day one. */
    mostAdded?: readonly RecordThing[];
    /** Kinds this clinician reached for recently. Orders the "Or by kind" group as it builds up. */
    recents?: readonly ProposalKind[];
    /** The kinds this specialty reaches for. Seeds that order before there are any recents. */
    specialty?: readonly ProposalKind[];
    /** A kind, and whatever the picked thing prefills - empty when the kind itself was chosen. */
    onChoose: (kind: ProposalKind, prefilled: Record<string, unknown>) => void;
}

const KIND_LABEL: Partial<Record<ProposalKind, string>> = {
    medication: 'prescription',
    condition: 'diagnosis',
    labOrder: 'lab order',
};

const ThingRow: React.FC<{ thing: RecordThing; term: string; onChoose: Props['onChoose'] }> = ({
    thing, term, onChoose,
}) => {
    const split = splitOnPrefix(thing.label, term);

    return (
        <li>
            <button
                type="button"
                className="flex w-full items-baseline gap-2 rounded-md border border-border px-2.5 py-2 text-left text-sm hover:bg-accent"
                onClick={() => onChoose(thing.kind, seedForThing(thing))}
            >
                <span className="min-w-0 flex-1 truncate">
                    {/*
                        THE MATCH IS SHOWN IN PLACE, as drawn - `Metfor|min 500 mg tablet` - rather than
                        the row being annotated with why it matched. Emphasising the middle of a word is
                        noise, so a term that is not a prefix simply is not highlighted.
                    */}
                    {split ? (<><b className="font-semibold">{split.matched}</b>{split.rest}</>) : thing.label}
                </span>
                {/*
                    THE KIND, ON THE ROW. It is the only place it is ever said - picking the row IS
                    choosing the kind, so a row that does not name it asks the clinician to file
                    something without telling them what.
                */}
                <span className="shrink-0 text-xs text-muted-foreground">{KIND_LABEL[thing.kind]}</span>
            </button>
        </li>
    );
};

export const AddSomethingElse: React.FC<Props> = ({ mostAdded, recents, specialty, onChoose }) => {
    const [query, setQuery] = useState('');
    const { searching, things, unavailable } = useRecordThingSearch(query);
    // At 390 the field is about 170px, and the drawn hint was cut at "...or type". A phone gets the field's
    // own name, which fits whole.
    const isPhone = useIsPhoneWidth();

    const searchId = useId();
    const typed = query.trim() !== '';
    const kinds = shortList(recents, specialty);

    return (
        <section className="space-y-2">
            {/* A visible label, as the deck draws it; a placeholder alone disappears as soon as someone types. */}
            <label htmlFor={searchId} className="text-xs font-medium text-ink-muted">Search the record</label>
            <div className="ak-field-shell flex items-center gap-2 rounded-md border border-input px-2.5 py-2">
                <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
                <input
                    id={searchId}
                    type="search"
                    value={query}
                    onChange={(event) => setQuery(event.target.value)}
                    placeholder={isPhone ? 'Search the record' : 'Search for an item or type of record'}
                    className="w-full bg-transparent text-sm text-foreground focus:outline-none"
                />
            </div>

            {typed ? (
                <div className="space-y-1">
                    <h5 className="text-xs font-medium uppercase text-muted-foreground">Matches</h5>

                    {searching && <p className="text-sm text-muted-foreground">Searching&hellip;</p>}

                    {/*
                        A SEARCH THAT FINDS NOTHING SAYS SO, rather than falling back to the kinds.
                        Silently showing them reads as "these are your matches" and sends somebody
                        hunting for what they typed among four rows with nothing to do with it.
                    */}
                    {!searching && things.length === 0 && (
                        <p className="text-sm text-muted-foreground">
                            Nothing matches &ldquo;{query.trim()}&rdquo;. Try a different word.
                        </p>
                    )}

                    <ul className="space-y-1">
                        {things.map((thing) => (
                            <ThingRow key={`${thing.kind}:${thing.id}`} thing={thing} term={query} onChoose={onChoose} />
                        ))}
                    </ul>

                    {/*
                        "WE COULD NOT LOOK" IS NOT "THERE IS NOTHING". A clinician told nothing matched,
                        when the drug lookup was simply down, concludes the drug is not orderable here
                        and goes elsewhere - which is worse than being told to try again.
                    */}
                    {unavailable.length > 0 && (
                        <p className="text-sm text-warning">
                            Could not search {unavailable.join(' or ')} just now, so any of those are missing
                            from this list.
                        </p>
                    )}
                </div>
            ) : (
                <>
                    {/*
                        EMPTY ON DAY ONE, AND THAT IS THE ACCEPTED TRADE - the same one already ruled on
                        the kind list: recents beat specialty as they accumulate, and a group with no
                        history behind it is drawn as absent rather than as a heading over nothing.
                    */}
                    {mostAdded && mostAdded.length > 0 && (
                        <div className="space-y-1">
                            <h5 className="text-xs font-medium uppercase text-muted-foreground">
                                What you add most
                            </h5>
                            <ul className="space-y-1">
                                {mostAdded.map((thing) => (
                                    <ThingRow
                                        key={`${thing.kind}:${thing.id}`}
                                        thing={thing}
                                        term=""
                                        onChoose={onChoose}
                                    />
                                ))}
                            </ul>
                        </div>
                    )}

                    <div className="space-y-1">
                        <h5 className="text-xs font-medium uppercase text-muted-foreground">Or by kind</h5>
                        <ul className="space-y-1">
                            {kinds.map((action) => (
                                <li key={action.kind}>
                                    <button
                                        type="button"
                                        className="w-full rounded-md border border-border px-2.5 py-2 text-left text-sm hover:bg-accent"
                                        onClick={() => onChoose(action.kind, {})}
                                    >
                                        {action.label}
                                        {/*
                                            SAID ON THE ROW, because pressing it goes somewhere different.
                                            These two have no resource form, so they open their own dialog
                                            rather than the condensed overlay - and a clinician who expects
                                            the overlay and gets something else has been surprised by the
                                            product.
                                        */}
                                        {KINDS_WITHOUT_A_FORM.includes(action.kind) && (
                                            <span className="ml-1.5 text-muted-foreground">
                                                &mdash; opens its own form
                                            </span>
                                        )}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                </>
            )}
        </section>
    );
};

export default AddSomethingElse;