import type { MouseEvent } from 'react';
import type { EffectiveSeat } from '../../utils/seatStanding';

/**
 * Navigation state that asks the Workspaces tab to tick the seat and open its confirmation. The tab keeps
 * every rule about who may grant a seat and what it costs; this only saves the admin the hunt for it.
 */
export const GIVE_CLINICIAN_SEAT_STATE = { grantClinicianSeat: true } as const;

export const asksToGiveClinicianSeat = (state: unknown): boolean =>
    (state as { grantClinicianSeat?: unknown } | null)?.grantClinicianSeat === true;

export const GiveClinicianSeatButton = ({ onGive, className = '' }: {
    onGive: () => void;
    className?: string;
}) => (
    <button
        type="button"
        className={`btn btn-blue-ghost-sm ${className}`.trim()}
        onClick={(event: MouseEvent) => {
            event.stopPropagation();
            onGive();
        }}
        onKeyDown={(event) => event.stopPropagation()}
    >
        Give clinician seat
    </button>
);

const SEAT_WORDS: Record<EffectiveSeat, string> = {
    none: 'None',
    held: 'Held',
    'free-keeper': 'Held. Keeps the free seat while your subscription is lapsed.',
    kept: 'Not in use. Kept for when your subscription resumes.',
    checking: 'Checking…',
    unknown: "Can't be confirmed right now.",
};

/** The seat line at the top of a provider's staff record: what this person can do now, not only what is stored. */
export const ClinicianSeatStatus = ({ seat, onGive, onChooseFreeSeat }: {
    seat: EffectiveSeat;
    /** Absent when the reader may not grant a seat; the status still shows. */
    onGive?: () => void;
    /** Opens the free-seat choice for a person whose seat is kept; absent when the reader may not choose. */
    onChooseFreeSeat?: () => void;
}) => (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-2" data-testid="clinician-seat-status">
        <span className="text-sm">
            <span className="font-semibold">Clinician seat:</span>{' '}
            {SEAT_WORDS[seat]}
        </span>
        {seat === 'none' && onGive && <GiveClinicianSeatButton onGive={onGive} />}
        {seat === 'kept' && onChooseFreeSeat && (
            <button type="button" className="btn btn-blue-ghost-sm" onClick={onChooseFreeSeat}>
                Choose who keeps the free seat
            </button>
        )}
    </div>
);