"use client";

import { useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
import { AvatarStack } from "./AvatarStack";

interface RoomListItemProps {
  room: {
    _id: Id<"rooms">;
    name: string;
  };
  isSelected: boolean;
  onClick: () => void;
}

export function RoomListItem({ room, isSelected, onClick }: RoomListItemProps) {
  const presences = useQuery(api.presence.getActiveInRoom, { roomId: room._id });

  // Extract user data from presences, prioritizing profile avatar over auth image
  const activeUsers = presences?.map((p) => ({
    _id: p.user?._id || "",
    name: p.user?.name,
    email: p.user?.email,
    avatar: p.profile?.avatar || p.user?.image, // Prefer profile avatar, fallback to auth image
    displayName: p.profile?.displayName || p.user?.name || p.user?.email,
  })).filter((u) => u._id) || [];

  return (
    <button
      onClick={onClick}
      className={`w-full text-left px-2 py-1.5 rounded transition-colors flex items-center justify-between gap-2 text-sm ${
        isSelected
          ? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 font-medium"
          : "hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
      }`}
    >
      <span className="truncate"># {room.name}</span>
      <AvatarStack users={activeUsers} maxVisible={3} size="xs" />
    </button>
  );
}