sozsoft-platform/ui/src/views/admin/videoroom/RoomParticipant.tsx

import { lazy, Suspense, useMemo, type KeyboardEvent } from 'react'
import { FaMicrophoneSlash, FaUserTimes } from 'react-icons/fa'
import { VideoroomParticipantDto, VideoroomLayoutDto } from '@/proxy/videoroom/models'
import { Button } from '@/components/ui'

const VideoPlayer = lazy(() =>
  import('./VideoPlayer').then((module) => ({ default: module.VideoPlayer })),
)

interface RoomParticipantProps {
  participants: VideoroomParticipantDto[]
  localStream?: MediaStream | null
  currentUserId: string
  currentUserName: string
  isTeacher: boolean
  isAudioEnabled: boolean
  isVideoEnabled: boolean
  onMuteParticipant?: (participantId: string, isMuted: boolean, isTeacher: boolean) => void
  layout?: VideoroomLayoutDto
  focusedParticipant?: string
  onParticipantFocus?: (participantId: string | undefined) => void
  onKickParticipant?: (participantId: string) => void
  hasSidePanel?: boolean
}

/** Katılımcı sayısına göre kolon sayısı. Satırlar `auto-rows-fr` ile eşit yüksekliğe dağıtılır. */
const getGridColumns = (count: number) => {
  if (count <= 1) return 'grid-cols-1'
  if (count <= 2) return 'grid-cols-1 sm:grid-cols-2'
  if (count <= 4) return 'grid-cols-2 sm:grid-cols-2'
  if (count <= 9) return 'grid-cols-2 sm:grid-cols-3'
  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
}

const VideoTileFallback = () => <div className="h-full w-full animate-pulse bg-gray-900" />

export const RoomParticipant = ({
  participants,
  localStream,
  currentUserId,
  currentUserName,
  isTeacher,
  isAudioEnabled,
  isVideoEnabled,
  onMuteParticipant,
  layout,
  focusedParticipant,
  onParticipantFocus,
  onKickParticipant,
  hasSidePanel = false,
}: RoomParticipantProps) => {
  const allParticipants = useMemo<VideoroomParticipantDto[]>(() => {
    const remote = (participants ?? []).filter((p) => p.id !== currentUserId)
    const self: VideoroomParticipantDto = {
      id: currentUserId,
      name: currentUserName,
      sessionId: remote[0]?.sessionId ?? '',
      isTeacher,
      isAudioMuted: !isAudioEnabled,
      isVideoMuted: !isVideoEnabled,
      isActive: true,
      stream: localStream ?? undefined,
    }
    return [self, ...remote]
  }, [
    participants,
    currentUserId,
    currentUserName,
    isTeacher,
    isAudioEnabled,
    isVideoEnabled,
    localStream,
  ])

  const renderParticipant = (
    participant: VideoroomParticipantDto,
    { isMain = false }: { isMain?: boolean } = {},
  ) => {
    const isSelf = participant.id === currentUserId
    const isFocusable = !isMain && !!onParticipantFocus
    const canModerate = isTeacher && !isSelf

    return (
      <div
        className={`relative h-full w-full min-h-0 min-w-0 ${isFocusable ? 'cursor-pointer' : ''}`}
        {...(isFocusable
          ? {
              role: 'button' as const,
              tabIndex: 0,
              title: `${participant.name} görüntüsünü büyüt`,
              onClick: () => onParticipantFocus?.(participant.id),
              onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault()
                  onParticipantFocus?.(participant.id)
                }
              },
            }
          : {})}
      >
        <Suspense fallback={<VideoTileFallback />}>
          <VideoPlayer
            stream={participant.stream}
            isLocal={isSelf}
            userName={participant.name}
            isAudioEnabled={isSelf ? isAudioEnabled : !participant.isAudioMuted}
            isVideoEnabled={isSelf ? isVideoEnabled : !participant.isVideoMuted}
          />
        </Suspense>

        {participant.isHandRaised && !isSelf && (
          <div className="absolute right-1 top-8 rounded-full bg-yellow-500 px-2 py-0.5 text-xs text-white sm:right-2 sm:top-10">
            ✋
          </div>
        )}

        {canModerate && (
          <div className="absolute left-2 top-2 z-10 flex space-x-1">
            <Button
              type="button"
              variant="plain"
              shape="circle"
              onClick={(e) => {
                e.stopPropagation()
                onMuteParticipant?.(participant.id, !participant.isAudioMuted, isTeacher)
              }}
              className={`!inline-flex !h-auto items-center justify-center rounded-full !p-1 text-xs text-white ${
                participant.isAudioMuted ? '!bg-red-600' : '!bg-gray-600 hover:!bg-gray-700'
              } transition-colors`}
              title={participant.isAudioMuted ? 'Sesi Aç' : 'Sesi Kapat'}
            >
              <FaMicrophoneSlash size={12} />
            </Button>
            {onKickParticipant && (
              <Button
                type="button"
                variant="plain"
                shape="circle"
                onClick={(e) => {
                  e.stopPropagation()
                  onKickParticipant(participant.id)
                }}
                className="!inline-flex !h-auto items-center justify-center rounded-full !bg-red-600 !p-1 text-xs text-white transition-colors hover:!bg-red-700"
                title="Sınıftan Çıkar"
              >
                <FaUserTimes size={12} />
              </Button>
            )}
          </div>
        )}
      </div>
    )
  }

  const renderGridLayout = () => {
    const count = allParticipants.length
    const gap = count <= 4 ? 'gap-2 sm:gap-3' : 'gap-1 sm:gap-2'
    const padding = count === 1 ? 'p-0' : count <= 4 ? 'p-2 sm:p-4' : 'p-1 sm:p-2'

    return (
      <div className={`h-full min-h-0 overflow-y-auto ${padding}`}>
        <div
          className={`grid h-full min-h-0 auto-rows-fr ${getGridColumns(count)} ${gap} place-items-stretch`}
        >
          {allParticipants.map((participant, index) => (
            <div
              key={participant.id}
              className={`min-h-0 min-w-0 overflow-hidden rounded-lg sm:rounded-xl ${
                // Mobilde ilk katılımcı tam genişlik kaplar
                index === 0 && count > 2 ? 'col-span-2 sm:col-span-1' : ''
              }`}
            >
              {renderParticipant(participant)}
            </div>
          ))}
        </div>
      </div>
    )
  }

  const renderSidebarLayout = () => {
    const mainParticipant =
      allParticipants.find((p) => p.id === focusedParticipant) ?? allParticipants[0]
    const otherParticipants = allParticipants.filter((p) => p.id !== mainParticipant.id)

    const sidebarWidth = hasSidePanel
      ? 'w-20 sm:w-24 md:w-32 lg:w-40'
      : 'w-24 sm:w-32 md:w-40 lg:w-48'

    return (
      <div className="flex h-full min-h-0">
        <div className="flex min-w-0 flex-1 items-center justify-center p-1 sm:p-2">
          <div className="h-full w-full overflow-hidden rounded-xl">
            {renderParticipant(mainParticipant, { isMain: true })}
          </div>
        </div>
        {otherParticipants.length > 0 && (
          <div className={`${sidebarWidth} h-full min-h-0 overflow-y-auto p-2`}>
            <div className="flex min-w-0 flex-col gap-2">
              {otherParticipants.map((participant) => (
                <div
                  key={participant.id}
                  className="aspect-video shrink-0 overflow-hidden rounded-lg border border-blue-300/40 shadow shadow-blue-200/20 transition-all duration-200"
                >
                  {renderParticipant(participant)}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    )
  }

  const renderTeacherFocusLayout = () => {
    const teacher = allParticipants.find((p) => p.isTeacher) ?? allParticipants[0]
    return (
      <div className="h-full min-h-0 overflow-hidden">
        <div className="h-full w-full overflow-hidden rounded-lg sm:rounded-xl">
          {renderParticipant(teacher, { isMain: true })}
        </div>
      </div>
    )
  }

  // Ne yerel yayın ne de katılımcı varsa gösterilecek bir şey yok
  if (!localStream && allParticipants.length <= 1) {
    return null
  }

  switch (layout?.type) {
    case 'sidebar':
      return <div className="h-full min-h-0">{renderSidebarLayout()}</div>
    case 'teacher-focus':
      return <div className="h-full min-h-0">{renderTeacherFocusLayout()}</div>
    default:
      return <div className="h-full min-h-0">{renderGridLayout()}</div>
  }
}