// The blocker a patient meets when a practice has booked them and nothing has been agreed yet.
//
// It is FRAME FURNITURE - it belongs in the banner slot on every screen, not on one page. The failure
// this corrects is that consent lived as a task: something in a list, on a page nobody has a reason to
// open, while an appointment the practice cannot lawfully honour sat in the diary.
//
// Presentation only. It takes the three answers and gives back which document was opened; it does not
// know how they are stored, and it does not decide whether the practice may treat anybody - the status
// bundle answers that server-side. The names come from `config/consentInstruments.ts`, never from here.
//
// The drawn amber panel carries its own two inks - #5c3d0b for regular text and #8a5a10 for links.
// The plugin has a token for neither, so this uses the warm ink scale and the Tailwind amber it does
// have. Adding those two as tokens is a design-system change and belongs with the styling work.
import { Check, TriangleAlert, X } from 'lucide-react';
import { ConsentInstrumentId } from '../../config/consentInstruments';
import {
    ORG_AGREEMENT_ORDER,
    OrgAgreementState,
    hasOutstandingAgreement,
    orgAgreementName,
} from './orgAgreements';

interface OutstandingAgreementsNoticeProps {
    /** The practice's name, as the patient knows it. */
    organizationName: string;
    agreements: readonly OrgAgreementState[];
    onOpenAgreement: (instrument: ConsentInstrumentId) => void;
}

const OutstandingAgreementsNotice = ({
    organizationName,
    agreements,
    onOpenAgreement,
}: OutstandingAgreementsNoticeProps) => {
    // It exists only while something is owed. Once every document has an answer the notice is gone
    // entirely - not collapsed, not a tick, gone.
    if (!hasOutstandingAgreement(agreements)) {
        return null;
    }

    const answerFor = (instrument: ConsentInstrumentId) =>
        agreements.find((agreement) => agreement.instrument === instrument)?.answer ?? 'outstanding';

    return (
        <div
            role="status"
            data-testid="outstanding-agreements-notice"
            data-slot="alert"
            className="ak-notice mb-4 shadow-sm"
        >
            {/* The icon sits beside the sentence and NOT above the list: the list is indented under the
                text, so an eye reads one column of words rather than stepping around a glyph. */}
            <TriangleAlert
                className="col-start-1 row-start-1 mt-0.5 shrink-0"
                aria-hidden="true"
            />

            <p className="col-start-2 row-start-1 text-sm leading-snug">
                {organizationName} needs the following agreements to access your medical information and
                provide care:
            </p>

            {/*
              * THREE LINKS, NOT ONE BUTTON, and not cards either.
              *
              * A single "review and agree" control hides how many documents there are and what they are
              * until the patient has already committed to a flow. Named links say the size of the job up
              * front, let somebody do one now and two later, and put the progress in the same place they
              * were told about it.
              *
              * Cards were tried and reverted: three boxes inside a box to carry three short names pushed
              * the notice to nearly half the screen, for something meant to be read at a glance. A card
              * is for a thing with content; these are names.
              */}
            <ul className="col-start-2 row-start-2 mt-2 space-y-1.5">
                {ORG_AGREEMENT_ORDER.map((instrument) => {
                    const answer = answerFor(instrument);
                    const name = orgAgreementName(instrument);

                    /* A REFUSAL IS NOT AN AGREEMENT, AND IT WAS DRAWN AS ONE.
                     *
                     * This branch read `answer !== 'outstanding'`, so a DECLINED document got the same
                     * green tick as one the patient had agreed to. Seen on screen 2026-09-02: a patient
                     * who had declined Consent to Treat - and therefore could not be treated at all -
                     * was shown a green check against it on their own home page.
                     *
                     * Worse than the check-in version of this defect, because the person being misled
                     * is the one who made the decision. If they wonder why their appointments went, this
                     * screen tells them everything is settled.
                     *
                     * The row still greys and still loses its link: a decline is FINAL and is never
                     * re-prompted, so it is not something to tap. Only the claim that they agreed goes.
                     */
                    if (answer === 'declined') {
                        return (
                            <li
                                key={instrument}
                                data-testid={`agreement-${instrument}`}
                                data-answer={answer}
                                className="flex items-center gap-1.5 text-sm text-ink-muted"
                            >
                                {/* Muted rather than red. This is the patient's own decision, lawfully
                                    made - it should read as settled, not as an error they should fix. */}
                                <X className="size-4 shrink-0 text-ink-muted" aria-hidden="true" />
                                {/* THE WORD CARRIES IT, NOT THE ICON. The icon is aria-hidden, so a
                                    screen reader hearing the name alone would get no state at all -
                                    and for a refusal that is the same misreading in another medium. */}
                                <span>{name} — declined</span>
                            </li>
                        );
                    }

                    // An answered document loses its link and greys out, and the check sits BEFORE the
                    // text so an eye running down the list reads the settled ones without reading the
                    // words.
                    if (answer !== 'outstanding') {
                        return (
                            <li
                                key={instrument}
                                data-testid={`agreement-${instrument}`}
                                data-answer={answer}
                                className="flex items-center gap-1.5 text-sm text-ink-muted"
                            >
                                <Check className="size-4 shrink-0 text-green-600" aria-hidden="true" />
                                <span>{name}</span>
                            </li>
                        );
                    }

                    return (
                        <li key={instrument} data-testid={`agreement-${instrument}`} data-answer={answer}>
                            {/* A name to tap, not a button - and it says so in a NAMED rule now.
                                The utilities that used to say it were beaten by the mount's own
                                `button { color: ... }` and by the weight remap, so this rendered as
                                prose in the same colour as the sentence beside it, on the notice the
                                consent blocker sends a stuck patient to. See ahr-inline-word-control. */}
                            <button
                                type="button"
                                onClick={() => onOpenAgreement(instrument)}
                                className="ahr-inline-word-control text-sm"
                            >
                                {name}
                            </button>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default OutstandingAgreementsNotice;