// Pure presentation. This component knows nothing about the Chime SDK, the transport, or any network
// call - it binds a tile id to a DOM element and gets out of the way. That separation is what lets a
// live call move between the docked and floating surfaces (Tasks 8/9) without dropping: the media
// lives in `ChimeCallSession`, not here - and the unbind below names the element it bound, so a
// cleanup from the surface being replaced cannot tear down the element of the one replacing it.
import React, { useEffect, useRef, useState } from 'react';
import { ChevronLeft, ChevronRight, Minus, Video } from 'lucide-react';
import { useVideoServiceContext } from '../../services/VideoService';
import { initialsOf, resolveParticipantLabel } from './participantIdentity';
import { useParticipantNames } from './useParticipantNames';
import './VideoTileGrid.css';

const VideoTile: React.FC<{ tileId: number }> = ({ tileId }) => {
    const { bindTile, unbindTile } = useVideoServiceContext();
    const ref = useRef<HTMLVideoElement | null>(null);

    useEffect(() => {
        const el = ref.current;
        if (!el) return;
        bindTile(tileId, el);
        // Load-bearing, in both directions. An element that is never unbound keeps its media
        // stream attached after the tile is gone - a leak the user sees as a frozen frame and the
        // browser sees as a live camera. But the SDK unbinds by TILE ID, not by element, so an
        // unqualified unbind here would kill whatever element holds this tile at cleanup time - and
        // when two surfaces are mounted at once, that can be the OTHER surface's live element.
        // Naming the captured element lets the session refuse exactly that case.
        return () => { unbindTile(tileId, el); };
    }, [tileId, bindTile, unbindTile]);

    return (
        <video
            ref={ref}
            data-testid="video-tile"
            autoPlay
            playsInline
            // Video tiles are video-only: Chime routes ALL remote audio through a single separate
            // audio element, so `muted` here silences nothing a participant needs to hear - and it is
            // what makes autoplay work without a user gesture.
            muted
            className="w-full h-full object-cover rounded-lg bg-paper"
        />
    );
};

// One grid, any participant count. Columns step 1 2 3 so a 1:1 visit fills the pane and a
// case conference reflows without a second component.
const columnsFor = (n: number): string => {
    if (n <= 1) return 'grid-cols-1';
    if (n <= 4) return 'grid-cols-2';
    return 'grid-cols-3';
};

interface VideoTileGridProps {
    /** sub-task 5b - a MODE on this one component, not a second grid (constraint 1: exactly
 * one `VideoTileGrid` may be mounted at a time or Chime tile binding goes ambiguous).
 * `'gallery'` (default) is today's behaviour, byte-for-byte - every existing call site that never
 * passes this prop is untouched. `'speaker'` is the narrow/minimised rung of the collapse ladder
 * (`akashic-docs/e-visit/meeting-collapse-ladder-design.md` §4): one large remote tile plus a small
 * self-view inset, and nothing else. `'strip'` is one row of tiles under an item shown from the record. */
    layout?: 'gallery' | 'speaker' | 'strip';
    /** Strip only: leave out the viewer's own tile, for a phone where one inset holds the other person. */
    hideSelf?: boolean;
    /** Speaker only: whether the 1:1 inset offers its "−". A phone's inset is too small for it (boards 9, 10). */
    canPutAway?: boolean;
}

export const VideoTileGrid = ({ layout = 'gallery', hideSelf = false, canPutAway = true }: VideoTileGridProps) => {
    // `remoteParticipants` - THE ROSTER - is what this component asks about presence, never
    // `activeSpeakerAttendeeId` taken alone. See `featured` below ( fix round 1): the speaker
    // branch validates `activeSpeakerAttendeeId` against the roster before trusting it as presence,
    // for exactly the reason this comment used to warn about.
    const { tiles, remoteTiles, call, remoteParticipants, activeSpeakerAttendeeId, speakingAttendeeIds, tilesByAttendee } = useVideoServiceContext();
    // - the SAME resolver the participants panel uses, so there is one implementation of
    // "who is this person". Called unconditionally (Rules of Hooks), ahead of every early return
    // below, regardless of layout.
    const names = useParticipantNames(remoteParticipants);
    // Board 18: in a 1:1 the viewer may put their own inset away; it hides on this screen only.
    const [selfPutAway, setSelfPutAway] = useState(false);
    const stripRef = useRef<HTMLDivElement>(null);
    const attendeeOf = new Map(Object.entries(tilesByAttendee).map(([attendee, tile]) => [tile, attendee]));
    const labelFor = (tile: number): string | undefined => {
        if (!remoteTiles.includes(tile)) return 'you';
        const participant = remoteParticipants.find((p) => p.attendeeId === attendeeOf.get(tile));
        if (!participant) return undefined;
        const name = participant.externalUserId ? names[participant.externalUserId] : undefined;
        return resolveParticipantLabel(participant.externalUserId, name || undefined);
    };
    // Marked from live volume: the stage holds the last speaker through silence, the mark does not.
    const speakingTiles = new Set(speakingAttendeeIds.map((id) => tilesByAttendee[id]));
    const frame = (tile: number, className: string, testId?: string) => {
        const label = labelFor(tile);
        return (
            <div data-testid={testId} className={`ahr-video-tile ${className}`} data-speaking={speakingTiles.has(tile) || undefined}>
                <VideoTile tileId={tile} />
                {label && <span className="ahr-video-tile__name">{speakingTiles.has(tile) ? label + ' — speaking' : label}</span>}
            </div>
        );
    };
    if (tiles.length === 0) {
        // THE DEAD BLACK BOX (Task 14, spec §5). Both surfaces give this grid a fixed
        // `aspect-video` box, so returning `null` in a LIVE call left an unexplained black rectangle -
        // which reads as "the video is broken", when the truthful reading is "this call has no video
        // in it". An audio-only visit is a state `ChimeCallSession` deliberately supports rather than
        // refusing, so it deserves saying out loud.
        //
        // KEYED ON THE PHASE, and that is the whole care here. Tiles are equally absent while the
        // meeting is being provisioned, and the surfaces already say "Starting the meeting..." /
        // "Connecting..." underneath - claiming "audio only" over the top of that would be both wrong
        // and self-contradictory.
        if (call?.phase !== 'active') return null;
        return (
            // `video-tile-grid` marks THE grid, on both of this component's roots - it is what the
            // one-grid rule is asserted against (`MeetingWindow.test.tsx`), and a testid on only the
            // tiles-present branch would let a second grid mount unnoticed in an audio-only visit.
            <div data-testid="video-tile-grid" className="flex h-full w-full items-center justify-center">
                {/* A SPAN, NOT A PARAGRAPH, AND THAT IS THE WHOLE FIX. Measured on the mount at 390:
                    this sentence rendered at a contrast ratio of 1.35:1 - dark ink on the dark video
                    ground, effectively invisible, and it is the only thing on screen explaining why the
                    region is empty.

                    `text-faint` was never wrong: #948f85 on this ground measures 5.51:1, comfortably AA.
                    The class simply never applied. `index.css` normalises `color` on p / li / label /
                    input / select / textarea / button at (1,0,1), later in the file than the utility
                    layer, so a `text-...` utility on any of those eight elements loses - the rule's own
                    comment says so and says the escape is `!text-[var(--token)]`. A span is not one of
                    the eight, so the author's own choice lands.

                    On a paper background that trap costs a shade nobody notices. Here it costs the
                    sentence. The class-wide problem is raised on its own card; this is one line of it. */}
                <span className="text-xs text-faint">Audio only — no cameras are on.</span>
            </div>
        );
    }
    if (layout === 'speaker') {
        // The local camera's own tile - whichever id in `tiles` is NOT in `remoteTiles`. `find`, not
        // `filter`: this layout has exactly one self inset, never two.
        const selfTileId = tiles.find((t) => !remoteTiles.includes(t));
        // - THE MAIN STAGE FEATURES A PERSON, NOT A STREAM (Spencer, 2026-08-07: "do it like
        // zoom, main stage follows the person, name card when their camera is off"). `remoteTiles[0]` -
        // whoever's camera arrived first - was correct by coincidence for 1:1 and frozen on the wrong
        // person the moment a third participant joined. `speaker` mode is the NARROW rung, so that
        // failure surfaced on a phone, which is the patient's most likely device.
        //
        // FIX ROUND 1 (Spencer's review) - ROSTER-VALIDATED, NOT `?? `-CHAINED. The original form,
        // `activeSpeakerAttendeeId ?? remoteParticipants[0]?.attendeeId`, is the exact bug 5b's own fix
        // deleted one branch down: `ChimeCallSession` NEVER clears `activeSpeakerAttendeeId` on
        // departure (a pause between sentences must not flicker this layout - see
        // `subscribeToActiveSpeaker`), and its own `emit()` already applies this identical `??` before
        // the value ever reaches here - so a STALE id is never `undefined`, and neither `??` can ever
        // fall through to the roster once anybody has ever spoken. After the last speaker drops, that
        // stale id would go on naming someone with no tile and no roster entry FOREVER, blanking two
        // still-live cameras behind a departed one. Checking membership, not definedness, is what
        // makes a departed speaker fall back to whoever is actually still here.
        const identifiedSpeaker = remoteParticipants.some((p) => p.attendeeId === activeSpeakerAttendeeId)
            ? activeSpeakerAttendeeId
            : undefined;
        // FIX ROUND 2 (I2, Spencer's review) - THE FALLBACK PREFERS A ROSTER ENTRY WITH A TILE, AN
        // IDENTIFIED SPEAKER NEVER DOES. Roster order is arrival order, not "who has a camera on" -
        // before anyone has spoken, `remoteParticipants[0]` alone could suppress a SECOND person's live
        // camera behind a name card for the first (arrival order `[A, B]`, only B has a tile: featuring
        // A's name card hides B's live feed for no reason). There is no misattribution risk in doing
        // this ONLY in the fallback: nobody has been identified as talking, so featuring whoever has a
        // visible camera is strictly more informative, not a guess about who is speaking. This must
        // NEVER extend to `identifiedSpeaker` above - if the person actually talking has their camera
        // off, the name card *is* the feature; preferring somebody else's tile there would misattribute
        // speech to a face, the exact harm the name card exists to prevent.
        const featured = identifiedSpeaker
            ?? remoteParticipants.find((p) => tilesByAttendee[p.attendeeId] !== undefined)?.attendeeId
            ?? remoteParticipants[0]?.attendeeId;
        const featuredTileId = featured !== undefined ? tilesByAttendee[featured] : undefined;
        const featuredParticipant = remoteParticipants.find((p) => p.attendeeId === featured);
        const selfOnStage = selfTileId !== undefined && featuredTileId === undefined && !featuredParticipant && remoteTiles[0] === undefined;
        // Board 3: a crowd is one person on the stage and everyone else in a strip above it, you first,
        // so nobody in the call is left off the screen. Only a 1:1 has the inset. On a phone the strip is
        // shorter, as the surface there is one 16:9 box shared with the stage.
        const crowd = remoteParticipants.length >= 2;
        const stripTiles = remoteTiles.filter((t) => t !== featuredTileId);
        const stripCameraOff = remoteParticipants.filter((p) => p.attendeeId !== featured && tilesByAttendee[p.attendeeId] === undefined);
        const scrollStrip = (by: number) => stripRef.current?.scrollBy?.({ left: by, behavior: 'smooth' });
        const arrow = 'flex h-16 w-7 flex-none sm:h-24 items-center justify-center rounded-lg bg-sunken text-ink';
        return (
            // Same root testid as every other branch - it is what the one-grid rule
            // (`MeetingWindow.test.tsx`) is asserted against, and a testid on only some branches would
            // let a second grid mount unnoticed under this layout too.
            <div data-testid="video-tile-grid" className={crowd ? 'flex h-full w-full flex-col gap-2' : 'relative h-full w-full'}>
                {crowd && (
                    <div className="flex flex-none items-center gap-2">
                        <button type="button" aria-label="Scroll people back" className={arrow} onClick={() => scrollStrip(-200)}>
                            <ChevronLeft aria-hidden className="h-4 w-4" />
                        </button>
                        <div ref={stripRef} data-testid="crowd-strip" className="flex h-16 min-w-0 flex-1 gap-2 overflow-x-auto sm:h-24">
                            {selfTileId !== undefined && frame(selfTileId, 'ahr-video-tile--small aspect-video h-full flex-none', `strip-tile-${selfTileId}`)}
                            {stripTiles.map((t) => <React.Fragment key={t}>{frame(t, 'ahr-video-tile--small aspect-video h-full flex-none', `strip-tile-${t}`)}</React.Fragment>)}
                            {stripCameraOff.map((p) => (
                                <div key={p.attendeeId} data-testid={`strip-name-card-${p.attendeeId}`}
                                    className="ahr-video-tile ahr-video-tile--small aspect-video h-full flex-none flex flex-col items-center justify-center gap-1">
                                    <span aria-hidden="true" className="flex h-8 w-8 items-center justify-center rounded-full bg-line text-xs font-medium text-ink-strong">
                                        {initialsOf(resolveParticipantLabel(p.externalUserId, (p.externalUserId ? names[p.externalUserId] : undefined) || undefined))}
                                    </span>
                                    <span className="text-xs text-faint">
                                        {resolveParticipantLabel(p.externalUserId, (p.externalUserId ? names[p.externalUserId] : undefined) || undefined)}
                                    </span>
                                    <span className="text-xs text-faint">Camera off</span>
                                </div>
                            ))}
                        </div>
                        <button type="button" aria-label="Scroll people on" className={arrow} onClick={() => scrollStrip(200)}>
                            <ChevronRight aria-hidden className="h-4 w-4" />
                        </button>
                    </div>
                )}
                <div className={crowd ? 'min-h-0 flex-1' : 'contents'}>
                {featuredTileId !== undefined ? (
                    frame(featuredTileId, 'h-full w-full', `tile-${featuredTileId}`)
                ) : featuredParticipant ? (
                    // A NAME CARD, NEVER SOMEBODY ELSE'S FACE. We know exactly who is featured but
                    // they have no camera tile - falling back to a different remote tile here would show
                    // one person's video while a different person talks, which misattributes speech to a
                    // face and is worse than showing no video at all.
                    //
                    // THIS IS ALSO NOW THE ONLY BRANCH THAT TELLS THE TWO SILENCES APART (fix round 1
                    // deleted the generic "No other camera is on right now." sentence that used to live
                    // in the `else` below). Once `featured` above is roster-validated, a non-empty
                    // roster ALWAYS yields a real `featuredParticipant` - the sentence's own condition
                    // (`remoteParticipants.length > 0`) became unreachable dead code the moment `featured`
                    // stopped being able to name somebody absent from the roster. A NAME beats a generic
                    // sentence, so this supersedes it rather than needing to coexist with it: roster
                    // non-empty this name card, naming who is actually here; roster EMPTY one of the
                    // two branches below (a degraded-roster tile if one is still on screen, otherwise
                    // nothing) - see their own comments (fix round 2, I1).
                    //
                    // `||` here, never `??`, matching `MeetingParticipantsPanel`'s own pattern: `names[...]`
                    // may be `''` ("fetched, no usable name"), a real value, not an absence - `??` would
                    // not catch it, only `||` folds both `''` and "not yet fetched" into "no name yet"
                    // before `resolveParticipantLabel` (the only thing allowed to turn that into display
                    // text) applies its own PHI-free fallbacks.
                    <div
                        data-testid="main-stage-name-card"
                        className="flex h-full w-full flex-col items-center justify-center gap-1.5"
                    >
                        {(() => {
                            const label = resolveParticipantLabel(
                                featuredParticipant.externalUserId,
                                (featuredParticipant.externalUserId ? names[featuredParticipant.externalUserId] : undefined) || undefined,
                            );
                            // Board 6: initials, name and "Camera off", so the card reads as a person, not a fault.
                            return (
                                <>
                                    <span aria-hidden="true" className="flex h-14 w-14 items-center justify-center rounded-full bg-line text-lg font-medium text-ink-strong">{initialsOf(label)}</span>
                                    <span className="text-sm text-ink-strong">{label}</span>
                                    <span className="text-xs text-faint">Camera off</span>
                                </>
                            );
                        })()}
                    </div>
                ) : remoteTiles[0] !== undefined ? (
                    // FIX ROUND 2 (I1, Spencer's review) - A DEGRADED-STATE SAFETY NET, NOT A LAYOUT
                    // PREFERENCE. Reached ONLY when the roster is EMPTY (see `featured`'s own comment: it
                    // is `undefined` if and only if `remoteParticipants` is) while a remote TILE still
                    // exists - meaning the roster and the tiles have gone out of sync, not that nobody is
                    // here. `roomPresence.ts` marks this state `'occupied'` (it counts `remoteTiles`, not
                    // just `remoteAttendees`) and `roomPresenceCopy('occupied',...)` renders NO line at
                    // all - so without this branch the grid shows an empty box and NOTHING outside it
                    // says why, permanently, if `subscribeToPresence` never populated (it early-returns on
                    // a missing attendee id and swallows a throw) while a tile still arrived independently
                    // of presence. Spencer's own prior ruling here (fix round 1, C2) said this state was
                    // unreachable because the roster is the only thing that empties on departure - that
                    // reasoning holds for DEPARTURE, but not for presence tracking never having populated
                    // in the first place, which this branch is for. Featuring `remoteTiles[0]` is
                    // DELIBERATELY not inferred from `activeSpeakerAttendeeId` or anything roster-shaped -
                    // it says only "the roster is unusable right now, show the video we can actually see",
                    // which is exactly what this layout showed before (`remoteTiles[0]`, always).
                    frame(remoteTiles[0], 'h-full w-full', `tile-${remoteTiles[0]}`)
                ) : selfTileId !== undefined ? (
                    // Alone, your own video is the stage, as the wide gallery shows it; an inset beside an
                    // empty stage is the same face twice around a dead rectangle.
                    frame(selfTileId, 'h-full w-full', `tile-${selfTileId}`)
                ) : (
                    // THE OTHER HALF OF THE TWO SILENCES: nobody is featured because the roster AND
                    // the remote tiles are BOTH empty - there is nobody here and nothing to show. Nothing
                    // else exists to feature-of-last-resort; `MeetingWindow`'s presence line already
                    // carries "waiting for..." / "has left the visit" outside this grid, so this renders
                    // nothing rather than duplicating or CONTRADICTING it.
                    null
                )}
                </div>
                {/* 🚨 NOT OPTIONAL, NOT DECORATION (product ruling 2026-08-07): survives every rung down
                    to minimised. Two of the six defects the first real browser calls found were the
                    self-view tile never reaching the client and camera-off reading as "waiting" — without
                    this a practitioner cannot tell a dead camera from a quiet room mid clinical visit. */}
                {!crowd && !selfOnStage && selfPutAway && (
                    <button type="button" onClick={() => setSelfPutAway(false)}
                        className="ahr-video-tile__control absolute bottom-2 right-2 inline-flex items-center gap-1.5 rounded-md bg-paper px-3 py-1.5 text-xs">
                        <Video aria-hidden className="h-4 w-4" />Show my video
                    </button>
                )}
                {!crowd && !selfOnStage && !selfPutAway && (
                <div
                    data-testid="self-view"
                    className="absolute bottom-2 right-2 h-16 w-24 overflow-hidden rounded-md border-2 border-white/70 bg-sunken shadow-lg sm:h-20 sm:w-32"
                >
                    {selfTileId !== undefined ? (
                        <VideoTile tileId={selfTileId} />
                    ) : (
                        // Honest, not a black rectangle: no local tile exists (no camera acquired), so
                        // say "off" rather than let the inset itself become the dead-black-box defect
                        // (Task 14, spec §5) one layer down.
                        <div className="flex h-full w-full items-center justify-center">
                            <p className="text-step-10 text-faint">Camera off</p>
                        </div>
                    )}
                    <span className="ahr-video-tile__name">you</span>
                    {canPutAway && (
                        <button type="button" aria-label="Put my video away" onClick={() => setSelfPutAway(true)}
                            className="ahr-video-tile__control absolute right-1 top-1 inline-flex h-5 w-5 items-center justify-center rounded bg-paper">
                            <Minus aria-hidden className="h-3.5 w-3.5" />
                        </button>
                    )}
                </div>
                )}
            </div>
        );
    }

    if (layout === 'strip') {
        // Faces become a strip rather than disappearing, so a camera-off participant keeps a card here too.
        // The other people lead and you come last, as board 21 draws it.
        const stripCameraOff = remoteParticipants.filter((p) => tilesByAttendee[p.attendeeId] === undefined);
        return (
            <div data-testid="video-tile-grid" className="flex h-full w-full gap-2 overflow-x-auto">
                {[...remoteTiles, ...tiles.filter((t) => !hideSelf && !remoteTiles.includes(t))].map((t) => <React.Fragment key={t}>{frame(t, 'ahr-video-tile--small aspect-video h-full flex-none')}</React.Fragment>)}
                {stripCameraOff.map((p) => (
                    <div
                        key={p.attendeeId}
                        data-testid={`strip-name-card-${p.attendeeId}`}
                        className="ahr-video-tile ahr-video-tile--small aspect-video h-full flex-none flex flex-col items-center justify-center gap-1"
                    >
                        <span className="text-xs text-faint">
                            {resolveParticipantLabel(p.externalUserId, (p.externalUserId ? names[p.externalUserId] : undefined) || undefined)}
                        </span>
                        <span className="text-xs text-faint">Camera off</span>
                    </div>
                ))}
            </div>
        );
    }

    // `h-full w-full`: the SURFACE decides the size (the floating one gives it an `aspect-video` box,
    // the docked one its pane), and the grid fills whatever it is given. Without a definite height
    // here the auto-sized rows have none either, the tiles' own `h-full` resolves to nothing, and
    // every <video> falls back to its intrinsic 300×150 - which overflows a 22rem floating pane.
    // Somebody in the room with their camera off keeps a cell of their own, as the speaker layout's
    // name card does: without it they vanished from the gallery and the viewer's own face took the room.
    const cameraOff = remoteParticipants.filter((p) => tilesByAttendee[p.attendeeId] === undefined);
    return (
        <div data-testid="video-tile-grid" className={`grid ${columnsFor(tiles.length + cameraOff.length)} gap-2 h-full w-full`}>
            {tiles.map((t) => <React.Fragment key={t}>{frame(t, 'h-full w-full')}</React.Fragment>)}
            {cameraOff.map((p) => (
                <div
                    key={p.attendeeId}
                    data-testid={`gallery-name-card-${p.attendeeId}`}
                    className="ahr-video-tile flex h-full w-full flex-col items-center justify-center gap-1"
                >
                    <span className="text-sm text-faint">
                        {resolveParticipantLabel(p.externalUserId, (p.externalUserId ? names[p.externalUserId] : undefined) || undefined)}
                    </span>
                    <span className="text-xs text-faint">Camera off</span>
                </div>
            ))}
        </div>
    );
};