// The LIST half of sub-task 5a Task 9 (the count button lives in `MeetingWindow`'s header).
//
// THE CLIENT CANNOT NAME ANYONE FROM `attendeeId` ALONE - it is an opaque Chime id. What CAN name a
// participant is `externalUserId`, which `ChimeCallSession` now carries (see `RemoteMeetingParticipant`)
// and which - per the video contract - IS the participant's stable FHIR reference (`Practitioner/abc`,
// `Patient/xyz`). This component resolves that reference to a name.
//
// NEVER RENDER THE RAW REFERENCE. `Practitioner/9f2c-...` means nothing to a patient and leaks an
// internal id into a room a related person may be sitting in. The fallback RULES live in
// `participantIdentity.ts` (dependency-free, so they are unit-testable in plain node without pulling in
// `environment.ts`'s module-scope `window` read); this file only does the fetching.
//
// Participant identity is PHI-adjacent: resolved names live in this component's own React state only -
// no localStorage/sessionStorage - and are re-fetched fresh on every mount. The fetch-and-cache logic
// itself lives in `useParticipantNames` so the main stage's name card and this list
// resolve a participant's identity through ONE implementation instead of two.
import { useState } from 'react';
import type { RemoteMeetingParticipant } from '../../services/video/ChimeCallSession';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
import { Z_POPOVER_DIALOG_CLASS } from '../../lib/stackingLayers';
import { initialsOf, resolveParticipantLabel } from './participantIdentity';
import { useParticipantNames } from './useParticipantNames';

export interface MeetingParticipantsPanelProps {
    participants: RemoteMeetingParticipant[];
    /** Remove is offered to the host only, and is ABSENT rather than disabled for everyone else - the
 * same treatment the clinical note tab gets for a non-host. Defaults to false so an omitted prop
 * cannot hand out a host control. */
    isHost?: boolean;
    /** Takes the participant's FHIR reference (Chime's `externalUserId`). Absent means no control is
 * offered, so a caller that forgets to wire it degrades to a read-only roster. */
    onRemove?: (participantRef: string) => void | Promise<void>;
    /** What the removal copy calls the meeting. A case conference is not a visit. */
    meeting?: 'visit' | 'conference';
    /** The viewer's own name for their row; without it the row reads "You". */
    selfName?: string;
}

// What the reference says the person is; the name alone does not tell a patient from a clinician.
const ROLE: Record<string, string> = { Patient: 'Patient', Practitioner: 'Practitioner', RelatedPerson: 'Related person' };
const roleOf = (ref?: string) => (ref ? ROLE[ref.split('/')[0]] : undefined);

const Avatar = ({ text }: { text: string }) => (
    <span aria-hidden="true" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-700 text-xs font-medium text-gray-200">
        {text}
    </span>
);

/** One row per remote participant and the viewer's own row last - Zoom's mobile pattern (Spencer's
 * ruling): a count alone tells you five other people are here, the list is where you find out who.
 * Laid out as practitioner#s-video-visit board 23. */
export const MeetingParticipantsPanel: React.FC<MeetingParticipantsPanelProps> = ({
    participants, isHost = false, onRemove, meeting = 'visit', selfName,
}) => {
    const names = useParticipantNames(participants);

    // Removal is irreversible for this session, so it takes a second press, in a dialog named for the
    // person (board 24).
    const [confirming, setConfirming] = useState<{ ref: string; label: string } | undefined>();
    const canRemove = isHost && typeof onRemove === 'function';

    return (
        <div data-testid="meeting-participants-list" className="flex flex-col text-sm">
            <p className="px-1 pb-1 font-semibold text-ink-strong">In this {meeting} · {participants.length + 1}</p>
            {participants.map((p) => {
                // `||` here too, for the same reason as inside `useParticipantNames`'s fetch: `names[...]`
                // may be an empty string ("fetched, no usable name") or simply absent (not yet fetched) -
                // both must read as "no name yet", and `??` would not catch the empty string.
                const resolvedName = (p.externalUserId ? names[p.externalUserId] : undefined) || undefined;
                const label = resolveParticipantLabel(p.externalUserId, resolvedName);
                // No reference, no control: the server keys removal on it and there is nothing to guess.
                const removable = canRemove && Boolean(p.externalUserId);
                const role = roleOf(p.externalUserId);

                return (
                    <div key={p.attendeeId} data-testid="meeting-participant-row" className="flex items-center gap-2.5 border-b border-line py-2 last:border-b-0">
                        <Avatar text={initialsOf(label)} />
                        <span className="flex min-w-0 flex-1 flex-col">
                            <span className="truncate text-ink-strong">{label}</span>
                            {role && <span className="text-xs text-ink-muted">{role}</span>}
                        </span>
                        {removable && (
                            <button type="button" className="btn btn-red-ghost text-xs"
                                onClick={() => setConfirming({ ref: p.externalUserId as string, label })}>
                                Remove
                            </button>
                        )}
                    </div>
                );
            })}
            <div data-testid="meeting-participant-row" className="flex items-center gap-2.5 py-2">
                <Avatar text={selfName ? initialsOf(selfName) : 'Y'} />
                <span className="flex min-w-0 flex-1 flex-col">
                    <span className="truncate text-ink-strong">{selfName || 'You'}</span>
                    {isHost && <span className="text-xs text-ink-muted">Hosting this {meeting}</span>}
                </span>
                {selfName && <span className="text-xs text-ink-muted">you</span>}
            </div>

            <Dialog open={confirming !== undefined} onOpenChange={(open) => { if (!open) setConfirming(undefined); }}>
                {/* Opened from the roster popover, so above it; drawn in the call's dark palette (board 24). */}
                <DialogContent aria-describedby={undefined} className={`ahr-call ${Z_POPOVER_DIALOG_CLASS}`}>
                    <DialogHeader>
                        <DialogTitle>Remove {confirming?.label} from this {meeting}?</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-3 text-sm">
                        <p>They are disconnected immediately, and they will not be able to rejoin — the 10-minute window
                            that lets somebody back after a dropped call does not apply to a removal.</p>
                        <p>The {meeting} carries on for everyone else. Nothing changes about their place on the
                            collaboration team.</p>
                    </div>
                    <DialogFooter>
                        <button type="button" className="btn btn-red"
                            onClick={() => {
                                const ref = confirming?.ref;
                                setConfirming(undefined);
                                if (ref) void onRemove?.(ref);
                            }}>
                            Remove from {meeting}
                        </button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
};