import type { VisitAttendee, VisitHost } from '../../types/visitInvitation';

const ANSWER: Record<VisitAttendee['response'], string> = {
    accepted: 'Accepted',
    declined: 'Declined',
    awaiting: 'Not answered yet',
};

/** "2 accepted, 1 declined, 1 not answered yet", from the same list it summarises and nothing else. */
export const attendeeCounts = (attendees: VisitAttendee[]): string => {
    const count = (response: VisitAttendee['response']) => attendees.filter((attendee) => attendee.response === response).length;
    return [
        [count('accepted'), 'accepted'],
        [count('declined'), 'declined'],
        [count('awaiting'), 'not answered yet'],
    ].filter(([n]) => (n as number) > 0).map(([n, word]) => `${n} ${word}`).join(', ');
};

/**
 * Who hosts the visit and who else it has invited, read-only, exactly as the server lets an invitee see them: names
 * and saved answers. Nothing here can be changed, and nobody's reason or contact is shown. A name the server could not
 * read is said to be unavailable, never guessed. Renders nothing when the server sent neither (an older server, or a
 * caller not shown the team).
 */
export const VisitAttendeeSummary = ({ host, attendees }: { host?: VisitHost | null; attendees?: VisitAttendee[] }) => {
    if (host === undefined && attendees === undefined) return null;
    return (
        <div className="space-y-1 text-sm" data-testid="visit-attendee-summary">
            {host && <p>Hosted by {host.display ?? <span className="text-muted-foreground">a host whose name is not available</span>}</p>}
            {attendees && attendees.length === 0 && <p className="text-muted-foreground">No one else is invited yet.</p>}
            {attendees && attendees.length > 0 && (
                <details>
                    <summary className="cursor-pointer">Also invited: {attendeeCounts(attendees)}</summary>
                    <ul className="mt-1 space-y-0.5" aria-label="Also invited">
                        {attendees.map((attendee, index) => (
                            <li key={index} className="flex flex-wrap justify-between gap-2">
                                <span className="break-words">
                                    {attendee.display ?? <span className="text-muted-foreground">Name not available</span>}
                                </span>
                                <span className="text-muted-foreground">{ANSWER[attendee.response]}</span>
                            </li>
                        ))}
                    </ul>
                </details>
            )}
        </div>
    );
};

export default VisitAttendeeSummary;