import type { Human } from "@/api/types";
import { resolveHumanDisplay } from "@/lib/humans";
import type { ComposingUser } from "@/features/particles/stream-presence-context";

interface ComposingIndicatorProps {
  users: ComposingUser[];
  networkHumans?: Human[];
}

/**
 * Composing indicators pinned to the left edge, text running bottom-to-top
 * via writing-mode so it hugs the edge without transform math issues.
 */
export function ComposingIndicator({
  users,
  networkHumans,
}: ComposingIndicatorProps) {
  if (users.length === 0) return null;

  return (
    <div
      className="z-100 absolute left-2 top-1/2 z-20 flex -translate-y-1/2 flex-col gap-1.5 animate-in fade-in duration-200"
      style={{ writingMode: "vertical-rl" }}
    >
      {users.map((u) => {
        const { displayName } = resolveHumanDisplay(u.humanId, networkHumans);
        const modeLabel = u.mode === "typing" ? "typing" : "recording";

        return (
          <div
            key={u.humanId}
            className="flex rotate-180 items-center gap-1.5 rounded-full bg-white/10 px-2 py-1 backdrop-blur-sm"
          >
            <span className="flex gap-0.5">
              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:0ms]" />
              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:150ms]" />
              <span className="size-1 rounded-full bg-white/70 animate-bounce [animation-delay:300ms]" />
            </span>
            <span className="whitespace-nowrap text-[10px] text-white/50">
              {displayName} {modeLabel}
            </span>
          </div>
        );
      })}
    </div>
  );
}