/**
 * `AnnouncementsPreview` — F2 of ticket #4.
 *
 * The **requester** side: a small frame, shown near the agent drop-list, that
 * previews the announcements the given agent is currently waiting on (it has
 * contacted another agent and is receiving its réflexions live).
 *
 * Contract (Architect, point 7): filter on `requester == self`. The target
 * thread is shared across every requester, so previewing by target alone would
 * leak another requester's announcements; here `requester` is pinned to this
 * agent's id. Renders nothing when the agent has no announcements in flight.
 */

import { useRequesterAnnouncements } from "./AnnouncementsProvider";

export interface AnnouncementsPreviewProps {
  /** The requesting agent this preview belongs to (the announcement `requester`). */
  requester: string;
  /** Optional ticket scope (a single inter-agent turn). */
  ticketId?: string;
  /** How many most-recent announcements to show. */
  limit?: number;
}

export function AnnouncementsPreview({
  requester,
  ticketId,
  limit = 3,
}: AnnouncementsPreviewProps) {
  const announcements = useRequesterAnnouncements(requester, ticketId);
  if (announcements.length === 0) return null;

  // Most-recent `limit`, newest last (the list is oldest → newest).
  const recent = announcements.slice(Math.max(0, announcements.length - limit));

  return (
    <div
      data-testid="announcements-preview"
      className="flex flex-col gap-1 rounded-md border border-primary/25 bg-primary/5 px-2.5 py-1.5"
    >
      <span className="flex items-center gap-1.5 text-[0.65rem] font-medium uppercase tracking-wide text-primary">
        <span
          aria-hidden
          className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-primary"
        />
        En attente d'un agent
      </span>
      <ul className="flex flex-col gap-0.5">
        {recent.map((a) => (
          <li
            key={a.seq}
            className="truncate text-xs text-muted"
            title={a.text}
          >
            {a.text}
          </li>
        ))}
      </ul>
    </div>
  );
}
