import React, { useState } from 'react';
import { EmptyState } from '../../../components/ui/empty-state';
import { RECORD_ACTIONS } from '../../../utils/recordActions';
import type { ProposalState } from '../../../utils/recordProposals';

// What saving a note offers to put on the patient's record, drawn as the approved encounter deck's
// "From your note" card: each item added or declined on its own, and "Add anything else to the
// patient's record?" always last - while items wait, once they are done, and when there were none.
//
// Presentational: it files nothing and reports each decision upward, so a test can assert that no
// control here acts on two items at once.

interface Props {
    proposals: ProposalState[];
    /** Which visit everything here will be filed to, in words. */
    filedTo: string;
    onAdd: (id: string) => void;
    onDecline: (id: string) => void;
    /**
     * The search for whatever the note did not describe, shown inside the closing disclosure. The note editor draws
     * that disclosure itself, beside this card, so it is there before any round; left out, this card draws none.
     */
    addSomethingElse?: React.ReactNode;
    /** The round could not read the note; its empty list is unknown. */
    failed?: boolean;
    onRetry?: () => void;
}

const kindLabel = (kind: string) => RECORD_ACTIONS.find((action) => action.kind === kind)?.label;

/**
 * "Add anything else to the patient's record?" - the closing disclosure holding manual entry. Its search mounts only
 * once asked for, so its lookups never load behind a closed line.
 */
export const AddAnythingElse: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [searchOpen, setSearchOpen] = useState(false);
    return (
        <details
            className="rounded-md border border-border"
            onToggle={(event) => setSearchOpen(event.currentTarget.open)}
        >
            <summary className="cursor-pointer px-3 py-2.5 text-sm font-medium">
                Add anything else to the patient&rsquo;s record?
            </summary>
            {searchOpen && <div className="px-3 pb-3">{children}</div>}
        </details>
    );
};

export const RecordProposals: React.FC<Props> = ({
    proposals, filedTo, onAdd, onDecline, addSomethingElse, failed = false, onRetry,
}) => {
    // A declined item leaves without a trace; added ones stay, marked, in the order the note gave them.
    const shown = proposals.filter((state) => state.decision !== 'declined');

    return (
        <section className="space-y-3">
            {/* Which visit, said once above everything, for the clinician writing up after it ended. */}
            <p className="text-xs text-muted-foreground">{filedTo}</p>

            {failed && (
                <div role="alert" className="flex items-center justify-between gap-2 rounded-md border border-border p-2 text-sm">
                    <span>Suggestions could not be checked just now. Nothing else was added to the record.</span>
                    {onRetry && (
                        <button type="button" className="btn btn-blue-ghost-sm shrink-0" onClick={onRetry}>
                            Try again
                        </button>
                    )}
                </div>
            )}

            {!failed && shown.length > 0 && (
                <div className="space-y-2">
                    <h3 className="text-sm font-semibold">From your note</h3>
                    <p className="text-sm text-muted-foreground">Review each item before adding it to the record.</p>

                    <ul className="space-y-1.5" aria-label="From your note">
                        {shown.map(({ proposal, decision }) => (
                            <li key={proposal.id} className="flex flex-wrap items-center gap-2 rounded-md border border-border p-2">
                                {/* Wide enough to read before the controls wrap under it on a phone. */}
                                <span className="min-w-0 flex-1 basis-48 text-sm">
                                    <b className="block font-medium text-foreground">{proposal.title}</b>
                                    {/* Why it is offered, not the sentence it came from: the note is on screen. */}
                                    <small className="block text-xs text-muted-foreground">
                                        {[kindLabel(proposal.kind), proposal.reason].filter(Boolean).join(' · ')}
                                    </small>
                                </span>

                                {decision === 'added' ? (
                                    <span className="text-xs font-medium text-success">Added to record</span>
                                ) : (
                                    // One pair per item and nothing that acts on all of them: Spencer,
                                    // "keep it one at a time, no add all."
                                    <span className="flex gap-2">
                                        <button type="button" className="btn btn-blue-ghost-sm" onClick={() => onAdd(proposal.id)}>
                                            Add
                                        </button>
                                        <button type="button" className="btn btn-red-ghost-sm" onClick={() => onDecline(proposal.id)}>
                                            Decline
                                        </button>
                                    </span>
                                )}
                            </li>
                        ))}
                    </ul>
                </div>
            )}

            {!failed && shown.length === 0 && (
                <EmptyState
                    size="compact"
                    title="No pending suggestions"
                    description="No additional record items were filed."
                />
            )}

            {addSomethingElse !== undefined && <AddAnythingElse>{addSomethingElse}</AddAnythingElse>}
        </section>
    );
};

export default RecordProposals;