import { lazy, Suspense } 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
}

export const RoomParticipant = ({
  participants,
  localStream,
  currentUserId,
  currentUserName,
  isTeacher,
  isAudioEnabled,
  isVideoEnabled,
  onMuteParticipant,
  layout,
  focusedParticipant,
  onParticipantFocus,
  onKickParticipant,
  hasSidePanel = false,
}: RoomParticipantProps) => {
  // Only show current user's video once
  const currentUserParticipant = {
    id: currentUserId,
    name: currentUserName,
    isTeacher,
    stream: localStream ?? undefined,
  } as unknown as VideoroomParticipantDto

  // Eğer hiç katılımcı yoksa ve localStream de yoksa hiçbir şey render etme
  if (!localStream && (!participants || participants.length === 0)) {
    return null
  }

  const allParticipants = [currentUserParticipant, ...participants]

  // Ortak ana video kutusu container class'ı
  const mainVideoContainerClass = 'w-full h-full flex flex-col justify-center'

  const renderGridLayout = () => {
    const getGridClass = (participantCount: number) => {
      if (participantCount === 1) return 'grid-cols-1'
      if (participantCount <= 2) return 'grid-cols-1 sm:grid-cols-2'
      if (participantCount <= 4) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2'
      if (participantCount <= 6) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
      if (participantCount <= 9) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
      return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
    }

    const getGridRows = (participantCount: number) => {
      if (participantCount === 1) return 'grid-rows-1'
      if (participantCount <= 2) return 'grid-rows-1 sm:grid-rows-1'
      if (participantCount <= 4) return 'grid-rows-2 lg:grid-rows-2'
      if (participantCount <= 6) return 'grid-rows-3 sm:grid-rows-2'
      if (participantCount <= 9) return 'grid-rows-3'
      return 'grid-rows-4 sm:grid-rows-3'
    }

    const getPadding = (participantCount: number) => {
      if (participantCount === 1) return ''
      if (participantCount <= 4) return 'p-2 sm:p-4'
      return 'p-1 sm:p-2'
    }

    const getGap = (participantCount: number) => {
      if (participantCount === 1) return 'gap-0'
      if (participantCount <= 4) return 'gap-2 sm:gap-3'
      return 'gap-1 sm:gap-2'
    }

    // Mobilde: En üstte öğretmen, altında katılımcılar 2'li grid ve dikey scroll
    const mainParticipant = allParticipants[0]
    const otherParticipants = allParticipants.slice(1)
    return (
      <>
        {/* Mobil özel layout */}
        <div className="sm:hidden w-full h-full flex flex-col items-center overflow-hidden p-2">
          {/* Ana katılımcı */}
          <div className="w-full max-w-md mx-auto flex-none flex items-center justify-center mb-2">
            <div className="w-full aspect-video max-h-[40vh] rounded-xl overflow-hidden flex bg-white/10 shadow-md border border-white/10">
              {renderParticipant(mainParticipant, true)}
            </div>
          </div>
          {/* Diğer katılımcılar 2'li grid ve dikey scroll */}
          {otherParticipants.length > 0 && (
            <div
              className="w-full max-w-md mx-auto flex-1 overflow-y-auto grid grid-cols-1 gap-2 pb-2 min-h-0"
              style={{ maxHeight: '55vh' }}
            >
              {Array.from({ length: Math.ceil(otherParticipants.length / 2) }).map((_, rowIdx) => (
                <div key={rowIdx} className="flex gap-2">
                  {otherParticipants.slice(rowIdx * 2, rowIdx * 2 + 2).map((participant) => (
                    <div
                      key={participant.id}
                      className="flex-1 aspect-video rounded-lg overflow-hidden flex bg-white/10 shadow border border-white/10"
                    >
                      {renderParticipant(participant, false, true)}
                    </div>
                  ))}
                  {otherParticipants.length % 2 === 1 &&
                  rowIdx === Math.floor(otherParticipants.length / 2) ? (
                    <div className="flex-1" />
                  ) : null}
                </div>
              ))}
            </div>
          )}
        </div>
        {/* Masaüstü ve tablet için eski grid layout */}
        <div className="hidden sm:flex h-full items-center justify-center overflow-hidden">
          <div
            className={`w-full h-full flex flex-col justify-center ${getPadding(allParticipants.length)}`}
          >
            <div
              className={`h-full grid ${getGridClass(allParticipants.length)} ${getGridRows(allParticipants.length)} ${getGap(allParticipants.length)} place-items-stretch`}
            >
              {allParticipants.map((participant) => (
                <div
                  key={participant.id}
                  className="w-full h-full max-h-full flex items-stretch justify-stretch min-h-0"
                >
                  <div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden flex">
                    {renderParticipant(participant, false)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </>
    )
  }

  const renderSidebarLayout = () => {
    const mainParticipant = focusedParticipant
      ? allParticipants.find((p) => p.id === focusedParticipant) || allParticipants[0]
      : 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'

    // Eğer hiç katılımcı yoksa, video player öğretmen odaklı gibi ortalanır ve geniş olur
    return (
      <div className="h-screen flex items-center justify-center p-0">
        <div className={mainVideoContainerClass + ' h-full'}>
          <div className="flex h-full">
            <div className={`flex-1 min-w-0 flex items-center justify-center`}>
              <div className="w-full h-full flex items-center justify-center">
                <div className="w-full h-full rounded-xl overflow-hidden transition-all duration-200">
                  {renderParticipant(mainParticipant, true)}
                </div>
              </div>
            </div>
            {otherParticipants.length > 0 && (
              <div className={`${sidebarWidth} p-2 overflow-y-auto rounded-l-lg h-full`}>
                <div className="flex flex-col gap-2 h-full min-w-0">
                  {otherParticipants.map((participant) => (
                    <div
                      key={participant.id}
                      className="rounded-lg border border-blue-300/40 shadow shadow-blue-200/20 backdrop-blur-sm transition-all duration-200"
                    >
                      {renderParticipant(participant, false, true)}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }

  const renderTeacherFocusLayout = () => {
    // Sadece öğretmen gösterilecek, katılımcılar asla gösterilmeyecek
    const teacher = allParticipants.find((p) => p.isTeacher) || allParticipants[0]
    return (
      <div className="h-full flex items-center justify-center overflow-hidden">
        <div className="w-full h-full flex flex-col justify-center ">
          <div className="h-full w-full max-h-full flex items-center justify-center">
            <div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden">
              {renderParticipant(teacher, true)}
            </div>
          </div>
        </div>
      </div>
    )
  }

  const renderParticipant = (
    participant: VideoroomParticipantDto,
    isMain: boolean = false,
    isSmall: boolean = false,
  ) => (
    <div
      key={participant.id}
      className={`relative w-full h-full ${isMain ? '' : isSmall ? 'aspect-video' : ''} ${!isMain && onParticipantFocus ? 'cursor-pointer' : ''}`}
      onClick={() => !isMain && onParticipantFocus?.(participant.id)}
      style={{ minHeight: 0, minWidth: 0 }}
    >
      <div className="absolute inset-0 w-full h-full">
        <Suspense fallback={<div className="h-full w-full bg-gray-900" />}>
          <VideoPlayer
            stream={participant.stream}
            isLocal={participant.id === currentUserId}
            userName={participant.name}
            isAudioEnabled={
              participant.id === currentUserId ? isAudioEnabled : !participant.isAudioMuted
            }
            isVideoEnabled={
              participant.id === currentUserId ? isVideoEnabled : !participant.isVideoMuted
            }
          />
        </Suspense>
      </div>
      {/* Teacher controls for students */}
      {isTeacher && participant.id !== currentUserId && (
        <div className="absolute top-2 left-2 flex space-x-1 z-10">
          <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>
          <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 renderLayout = () => {
    switch (layout.type) {
      case 'sidebar':
        return renderSidebarLayout()
      case 'teacher-focus':
        return renderTeacherFocusLayout()
      default:
        return renderGridLayout()
    }
  }

  return <div className="h-full min-h-0 flex flex-col">{renderLayout()}</div>
}