import { useState, useEffect, useRef, type FormEvent } from 'react'
import { motion } from 'framer-motion'
import {
  FaComments,
  FaExpand,
  FaHandPaper,
  FaVolumeMute,
  FaVolumeUp,
  FaFile,
  FaDesktop,
  FaMicrophone,
  FaMicrophoneSlash,
  FaVideo,
  FaVideoSlash,
  FaPhone,
  FaTimes,
  FaCompress,
  FaUserFriends,
  FaLayerGroup,
  FaFilePdf,
  FaFileWord,
  FaFileImage,
  FaFileAlt,
  FaBars,
} from 'react-icons/fa'
import { SignalRService } from '@/services/videoroom/signalr'
import { WebRTCService } from '@/services/videoroom/webrtc'
import { useStoreState } from '@/store/store'
import { KickParticipantModal } from '@/views/admin/videoroom/KickParticipantModal'
import {
  getVideoroomAttandances,
  getVideoroomById,
  getVideoroomChats,
  endVideoroom
} from '@/services/videoroom.service'
import { showDbDateAsIs } from '@/utils/dateUtils'
import { useNavigate, useParams } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'
import { useLocalization } from '@/utils/hooks/useLocalization'
import ChatPanel from '@/views/admin/videoroom/ChatPanel'
import ParticipantsPanel from '@/views/admin/videoroom/ParticipantsPanel'
import DocumentsPanel from '@/views/admin/videoroom/DocumentsPanel'
import LayoutPanel from '@/views/admin/videoroom/LayoutPanel'
import { ScreenSharePanel } from '@/views/admin/videoroom/ScreenSharePanel'
import { RoomParticipant } from '@/views/admin/videoroom/RoomParticipant'
import toast from '@/components/ui/toast/toast'
import Notification from '@/components/ui/Notification'
import { Button } from '@/components/ui'
import {
  VideoroomDocumentDto,
  VideoroomAttendanceDto,
  VideoroomChatDto,
  VideoroomDto,
  VideoroomParticipantDto,
  VideoroomSettingsDto,
  MessageType,
  VideoroomLayoutDto,
} from '@/proxy/videoroom/models'

type SidePanelType =
  | 'chat'
  | 'participants'
  | 'documents'
  | 'handraises'
  | 'layout'
  | 'settings'
  | null

const newClassSession: VideoroomDto = {
  id: '',
  name: '',
  teacherId: '',
  teacherName: '',
  scheduledStartTime: '',
  scheduledEndTime: '',
  actualStartTime: '',
  actualEndTime: '',
  participantCount: 0,
  settingsDto: undefined,
}

const RoomDetail = () => {
  const handleDismissHandRaise = async (participantId: string) => {
    if (signalRServiceRef.current && user.role === 'teacher') {
      await signalRServiceRef.current.dismissHandRaise(classSession.id, participantId)
    }
  }

  const params = useParams()
  const navigate = useNavigate()
  const { user } = useStoreState((state) => state.auth)
  const { translate } = useLocalization()

  const [classSession, setClassSession] = useState<VideoroomDto>(newClassSession)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [participants, setParticipants] = useState<VideoroomParticipantDto[]>([])
  const [localStream, setLocalStream] = useState<MediaStream | null>(null)
  const [isAudioEnabled, setIsAudioEnabled] = useState(true)
  const [isVideoEnabled, setIsVideoEnabled] = useState(true)
  const [attendanceRecords, setAttendanceRecords] = useState<VideoroomAttendanceDto[]>([])
  const [chatMessages, setChatMessages] = useState<VideoroomChatDto[]>([])
  const [currentLayout, setCurrentLayout] = useState<VideoroomLayoutDto | null>(null)

  const [focusedParticipant, setFocusedParticipant] = useState<string>()
  const [hasRaisedHand, setHasRaisedHand] = useState(false)
  const [isAllMuted, setIsAllMuted] = useState(false)
  const [kickingParticipant, setKickingParticipant] = useState<{ id: string; name: string } | null>(
    null,
  )
  const [documents, setDocuments] = useState<VideoroomDocumentDto[]>([])
  const [isScreenSharing, setIsScreenSharing] = useState(false)
  const [screenStream, setScreenStream] = useState<MediaStream>()
  const [screenSharer, setScreenSharer] = useState<string>()
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [activeSidePanel, setActiveSidePanel] = useState<SidePanelType>(null)
  const [newMessage, setNewMessage] = useState('')
  const [messageMode, setMessageMode] = useState<MessageType>('public')
  const [selectedRecipient, setSelectedRecipient] = useState<{ id: string; name: string } | null>(
    null,
  )
  const raisedHandsCount = participants.filter((p) => p.isHandRaised).length
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [classSettings, setClassSettings] = useState<VideoroomSettingsDto>({
    allowHandRaise: true,
    defaultMicrophoneState: 'muted',
    defaultCameraState: 'on',
    defaultLayout: 'grid',
    allowStudentScreenShare: false,
    allowStudentChat: true,
    allowPrivateMessages: true,
    autoMuteNewParticipants: true,
  })

  const signalRServiceRef = useRef<SignalRService>()
  const webRTCServiceRef = useRef<WebRTCService>()
  const [teacherDisconnected, setTeacherDisconnected] = useState(false)

  const layouts: VideoroomLayoutDto[] = [
    {
      id: 'grid',
      name: 'Izgara Görünümü',
      type: 'grid',
      description: 'Tüm katılımcılar eşit boyutta görünür',
    },
    {
      id: 'sidebar',
      name: 'Sunum Modu',
      type: 'sidebar',
      description: 'Ana konuşmacı büyük, diğerleri yan panelde',
    },
    {
      id: 'teacher-focus',
      name: 'Öğretmen Odaklı',
      type: 'teacher-focus',
      description: 'Öğretmen tam ekranda görünür, öğrenciler küçük panelde',
    },
  ]

  const fetchClassAttendances = async () => {
    if (!params?.id) return
    const attResult = await getVideoroomAttandances(params.id)
    if (attResult && attResult.data) {
      setAttendanceRecords(attResult.data)
    }
  }

  const fetchClassChats = async () => {
    if (!params?.id) return
    const chatResult = await getVideoroomChats(params.id)
    if (chatResult && chatResult.data) {
      setChatMessages(chatResult.data || [])
    }
  }

  const fetchClassDetails = async () => {
    const classEntity = await getVideoroomById(params?.id ?? '')
    if (classEntity) {
      classEntity.data.scheduledStartTime = showDbDateAsIs(classEntity.data.scheduledStartTime)
      setClassSession(classEntity.data)
    }
  }

  useEffect(() => {
    fetchClassDetails()
    fetchClassChats()
    fetchClassAttendances()
  }, [])

  useEffect(() => {
    if (classSession.id) {
      initializeServices()
      return () => {
        cleanup()
      }
    }
  }, [classSession.id])

  // Apply class settings
  useEffect(() => {
    if (classSession?.settingsDto) {
      setClassSettings(classSession.settingsDto)
      const selectedLayout =
        layouts.find((l) => l.id === classSession.settingsDto!.defaultLayout) || layouts[0]
      setCurrentLayout(selectedLayout)

      // Apply default audio/video states for new participants
      if (user.role === 'student') {
        setIsAudioEnabled(classSession.settingsDto.defaultMicrophoneState === 'unmuted')
        setIsVideoEnabled(classSession.settingsDto.defaultCameraState === 'on')
      }
    }
  }, [classSession?.settingsDto, user.role])

  useEffect(() => {
    scrollToBottom()
  }, [chatMessages])

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  const initializeServices = async () => {
    try {
      // Initialize SignalR
      signalRServiceRef.current = new SignalRService()
      await signalRServiceRef.current.start()

      const micEnabled = classSession.settingsDto?.defaultMicrophoneState === 'unmuted'
      const camEnabled = classSession.settingsDto?.defaultCameraState === 'on'

      // WebRTC başlat
      webRTCServiceRef.current = new WebRTCService()
      webRTCServiceRef.current.setSignalRService(signalRServiceRef.current, classSession.id)

      const stream = await webRTCServiceRef.current.initializeLocalStream(micEnabled, camEnabled)
      if (stream) {
        setLocalStream(stream)
      }
      setIsAudioEnabled(micEnabled)
      setIsVideoEnabled(camEnabled)

      // Setup WebRTC remote stream handler
      webRTCServiceRef.current.onRemoteStreamReceived((userId, stream) => {
        setParticipants((prev) => prev.map((p) => (p.id === userId ? { ...p, stream } : p)))
      })

      webRTCServiceRef.current.setIceCandidateHandler(async (toUserId, candidate) => {
        if (signalRServiceRef.current) {
          await signalRServiceRef.current.sendIceCandidate(classSession.id, toUserId, candidate)
        }
      })

      signalRServiceRef.current.setOfferReceivedHandler(async (fromUserId, offer) => {
        if (!webRTCServiceRef.current?.getPeerConnection(fromUserId)) {
          await webRTCServiceRef.current?.createPeerConnection(fromUserId)
        }
        const answer = await webRTCServiceRef.current?.createAnswer(fromUserId, offer)
        if (answer) {
          await signalRServiceRef.current?.sendAnswer(classSession.id, fromUserId, answer)
        }
      })

      signalRServiceRef.current.setAnswerReceivedHandler(async (fromUserId, answer) => {
        await webRTCServiceRef.current?.handleAnswer(fromUserId, answer)
      })

      signalRServiceRef.current.setIceCandidateReceivedHandler(async (fromUserId, candidate) => {
        await webRTCServiceRef.current?.addIceCandidate(fromUserId, candidate)
      })

      // 🔑 Yeni katılan birini gördüğünde
      signalRServiceRef.current.setParticipantJoinHandler(
        async (remoteUserId: string, name: string, isTeacher: boolean, isActive: boolean) => {
          if (remoteUserId === user.id) return
          if (!isActive) return

          toast.push(<Notification title={`${name} sınıfa katıldı`} type="success" />, {
            placement: 'bottom-end',
          })

          // State’e ekle
          setParticipants((prev) => {
            if (prev.find((p) => p.id === remoteUserId)) return prev
            return [
              ...prev,
              {
                id: remoteUserId,
                name,
                sessionId: classSession.id,
                isTeacher,
                isAudioMuted: classSettings.defaultMicrophoneState === 'muted',
                isVideoMuted: classSettings.defaultCameraState === 'off',
                isActive: true,
              },
            ]
          })

          // PeerConnection hazırla
          if (!webRTCServiceRef.current?.getPeerConnection(remoteUserId)) {
            await webRTCServiceRef.current?.createPeerConnection(remoteUserId)
          }

          // 🔑 Çakışmayı önle: sadece id’si küçük olan offer başlatır
          if (user.id < remoteUserId) {
            const offer = await webRTCServiceRef.current!.createOffer(remoteUserId)
            await signalRServiceRef.current?.sendOffer(classSession.id, remoteUserId, offer)
          }
        },
      )

      // 🔑 Odaya girdiğinde var olan katılımcılar
      signalRServiceRef.current.setExistingParticipantsHandler(
        async (
          existing: { userId: string; userName: string; isTeacher: boolean; isActive: boolean }[],
        ) => {
          for (const participant of existing) {
            if (!participant.isActive) continue
            if (participant.userId === user.id) continue

            // State’e ekle
            setParticipants((prev) => {
              if (prev.find((p) => p.id === participant.userId)) return prev
              return [
                ...prev,
                {
                  id: participant.userId,
                  name: participant.userName,
                  sessionId: classSession.id,
                  isTeacher: participant.isTeacher,
                  isAudioMuted: classSettings.defaultMicrophoneState === 'muted',
                  isVideoMuted: classSettings.defaultCameraState === 'off',
                  isActive: true,
                },
              ]
            })

            // PeerConnection hazırla
            if (!webRTCServiceRef.current?.getPeerConnection(participant.userId)) {
              await webRTCServiceRef.current?.createPeerConnection(participant.userId)
            }

            // 🔑 Çakışmayı önle
            if (user.id < participant.userId) {
              const offer = await webRTCServiceRef.current!.createOffer(participant.userId)
              await signalRServiceRef.current?.sendOffer(classSession.id, participant.userId, offer)
            }
          }
        },
      )

      signalRServiceRef.current.setForceCleanupHandler(() => {
        webRTCServiceRef.current?.closeAllConnections()
        localStream?.getTracks().forEach((t) => t.stop())
      })

      signalRServiceRef.current.setParticipantLeaveHandler(({ userId, sessionId, userName }) => {
        if (userId !== user.id) {
          toast.push(
            <Notification
              title={`Katılımcı ayrıldı: ${userName ?? 'Bilinmeyen'}`}
              type="warning"
            />,
            { placement: 'bottom-end' },
          )
        }

        // peer connection’ı kapat
        webRTCServiceRef.current?.closePeerConnection(userId)

        // katılımcıyı state’den tamamen sil
        setParticipants((prev) =>
          prev.filter((p) => !(p.id === userId && p.sessionId === sessionId)),
        )

        if (participants.find((p) => p.id === userId)?.isTeacher) {
          setTeacherDisconnected(true)
        }
      })

      signalRServiceRef.current.setAttendanceUpdatedHandler((record) => {
        setAttendanceRecords((prev) => {
          const existing = prev.find((r) => r.id === record.id)
          if (existing) {
            return prev.map((r) => (r.id === record.id ? record : r))
          }
          return [...prev, record]
        })
      })

      signalRServiceRef.current.setChatMessageReceivedHandler((message) => {
        setChatMessages((prev) => [...prev, message])
      })

      signalRServiceRef.current.setParticipantMutedHandler(async (userId, isMuted) => {
        setParticipants((prev) =>
          prev.map((p) => (p.id === userId ? { ...p, isAudioMuted: isMuted } : p)),
        )

        // Eğer mute edilen kişi currentUser ise → kendi mikrofonunu kapat
        if (userId === user.id) {
          await webRTCServiceRef.current?.toggleAudio(!isMuted)
          setIsAudioEnabled(!isMuted)
        }
      })

      // Hand raise events
      signalRServiceRef.current.setHandRaiseReceivedHandler((studentId) => {
        setParticipants((prev) =>
          prev.map((p) => (p.id === studentId ? { ...p, isHandRaised: true } : p)),
        )
      })

      signalRServiceRef.current.setHandRaiseDismissedHandler((studentId) => {
        setParticipants((prev) =>
          prev.map((p) => (p.id === studentId ? { ...p, isHandRaised: false } : p)),
        )

        // 👇 kendi state’ini de sıfırla
        if (studentId === user.id) {
          setHasRaisedHand(false)
        }
      })

      // Join the class
      await signalRServiceRef.current.joinClass(
        classSession.id,
        user.id,
        user.name,
        user.role === 'teacher',
        true,
      )
    } catch (error) {
      console.error('Sınıf servisleri başlatılamadı:', error)
      toast.push(
        <Notification
          title="❌ Sınıf servisleri başlatılamadı. Bağlantınızı veya tarayıcı izinlerini kontrol edin."
          type="danger"
        />,
        { placement: 'bottom-end' },
      )
    }
  }

  const cleanup = async () => {
    if (signalRServiceRef.current) {
      // ✅ önce LeaveClass
      await signalRServiceRef.current.leaveClass(classSession.id)
      // sonra disconnect
      await signalRServiceRef.current.disconnect()
    }

    webRTCServiceRef.current?.closeAllConnections()
  }

  const handleToggleAudio = () => {
    setIsAudioEnabled(!isAudioEnabled)
    webRTCServiceRef.current?.toggleAudio(!isAudioEnabled)
  }

  const handleToggleVideo = () => {
    setIsVideoEnabled(!isVideoEnabled)
    webRTCServiceRef.current?.toggleVideo(!isVideoEnabled)
  }

  const handleLeaveCall = async () => {
    try {
      // Eğer teacher ise sınıfı kapat
      if (user.role === 'teacher' && user.id === classSession.teacherId) {
        await endVideoroom(classSession.id)
      }

      // Bağlantıları kapat
      await cleanup()

      // Başka sayfaya yönlendir
      navigate(ROUTES_ENUM.protected.admin.videoroom.roomList)
    } catch (err) {
      console.error('Çıkış sırasında hata oluştu:', err)
      toast.push(<Notification title="⚠️ Çıkış sırasında hata oluştu" type="warning" />, {
        placement: 'bottom-end',
      })
      navigate(ROUTES_ENUM.protected.admin.videoroom.roomList)
    }
  }

  const handleSendMessage = async (e: FormEvent) => {
    e.preventDefault()
    if (newMessage.trim() && signalRServiceRef.current) {
      if (messageMode === 'private' && selectedRecipient) {
        try {
          await signalRServiceRef.current.sendPrivateMessage(
            classSession.id,
            user.id,
            user.name,
            newMessage.trim(),
            selectedRecipient.id,
            selectedRecipient.name,
            user.role === 'teacher',
          )
        } catch (error) {
          console.error('Özel mesaj gönderilemedi:', error)
          toast.push(<Notification title="❌ Özel mesaj gönderilemedi" type="danger" />, {
            placement: 'bottom-end',
          })
        }
      } else if (messageMode === 'announcement' && user.role === 'teacher') {
        try {
          await signalRServiceRef.current.sendAnnouncement(
            classSession.id,
            user.id,
            user.name,
            newMessage.trim(),
            user.role === 'teacher',
          )
        } catch (error) {
          console.error('Duyuru gönderilemedi:', error)
          toast.push(<Notification title="❌ Duyuru gönderilemedi" type="danger" />, {
            placement: 'bottom-end',
          })
        }
      } else {
        try {
          await signalRServiceRef.current.sendChatMessage(
            classSession.id,
            user.id,
            user.name,
            newMessage.trim(),
            user.role === 'teacher',
          )
        } catch (error) {
          console.error('Genel mesaj gönderilemedi:', error)
          toast.push(<Notification title="❌ Genel mesaj gönderilemedi" type="danger" />, {
            placement: 'bottom-end',
          })
        }
      }
      setNewMessage('')
    }
  }

  const handleMuteParticipant = async (
    participantId: string,
    isMuted: boolean,
    isTeacher: boolean,
  ) => {
    if (signalRServiceRef.current && user.role === 'teacher') {
      try {
        await signalRServiceRef.current.muteParticipant(
          classSession.id,
          participantId,
          isMuted,
          isTeacher,
        )
      } catch (err) {
        console.error('Katılımcı susturulamadı:', err)
        toast.push(<Notification title="❌ Katılımcı susturulamadı" type="danger" />, {
          placement: 'bottom-end',
        })
      }
    }
  }

  const handleMuteAll = async () => {
    if (signalRServiceRef.current && user.role === 'teacher') {
      const newMuteState = !isAllMuted
      setIsAllMuted(newMuteState)

      // Mute all participants except teacher
      for (const participant of participants) {
        if (!participant.isTeacher) {
          await signalRServiceRef.current.muteParticipant(
            classSession.id,
            participant.id,
            newMuteState,
            user.role === 'teacher',
          )
        }
      }
    }
  }

  const handleRaiseHand = async () => {
    if (
      signalRServiceRef.current &&
      user.role === 'student' &&
      !hasRaisedHand &&
      classSettings.allowHandRaise
    ) {
      await signalRServiceRef.current.raiseHand(classSession.id, user.id, user.name)
      setHasRaisedHand(true)
    }
  }

  const handleKickParticipant = async (participantId: string, participantName: string) => {
    if (signalRServiceRef.current && user.role === 'teacher') {
      try {
        await signalRServiceRef.current.kickParticipant(
          classSession.id,
          participantId,
          participantName,
        )
        setAttendanceRecords((prev) =>
          prev.map((r) => {
            if (r.studentId === participantId && !r.leaveTime) {
              const leaveTime = new Date().toISOString()
              const join = new Date(r.joinTime)
              const leave = new Date(leaveTime)
              const totalDurationMinutes = Math.max(
                1,
                Math.round((leave.getTime() - join.getTime()) / 60000),
              )
              return { ...r, leaveTime, totalDurationMinutes }
            }
            return r
          }),
        )
      } catch (error) {
        console.error('Katılımcı atılamadı:', error)
        toast.push(<Notification title="❌ Katılımcı atılamadı" type="danger" />, {
          placement: 'bottom-end',
        })
      }
    }
  }

  const handleUploadDocument = async (file: File) => {
    // In a real app, this would upload to a server
    const newDoc: VideoroomDocumentDto = {
      id: crypto.randomUUID(),
      name: file.name,
      url: URL.createObjectURL(file),
      type: file.type,
      size: file.size,
      uploadedAt: new Date().toISOString(),
      uploadedBy: user.name,
    }

    setDocuments((prev) => [...prev, newDoc])
  }

  const handleDeleteDocument = (documentId: string) => {
    setDocuments((prev) => prev.filter((d) => d.id !== documentId))
  }

  const handleViewDocument = (document: VideoroomDocumentDto) => {
    window.open(document.url, '_blank')
  }

  const handleStartScreenShare = async () => {
    try {
      // 1. sadece ekran videosu al
      const screen = await navigator.mediaDevices.getDisplayMedia({
        video: true,
      })

      // 2. mikrofonu ayrı al
      let mic: MediaStream | null = null
      try {
        mic = await navigator.mediaDevices.getUserMedia({ audio: true })
      } catch (err) {
        console.error('Mikrofon alınamadı:', err)
        toast.push(
          <Notification
            title="⚠️ Mikrofon alınamadı. Sadece ekran paylaşımı yapılacak."
            type="warning"
          />,
        )
      }

      // 3. merge et
      if (mic) {
        mic.getAudioTracks().forEach((track) => screen.addTrack(track))
      }

      setScreenStream(screen)
      setIsScreenSharing(true)
      setScreenSharer(user.name)
      webRTCServiceRef.current?.addStreamToPeers(screen)

      // Handle stream end
      screen.getVideoTracks()[0].onended = () => {
        handleStopScreenShare()
      }
    } catch (error) {
      console.error('Ekran paylaşımı başlatılamadı:', error)
      toast.push(<Notification title="❌ Ekran paylaşımı başlatılamadı" type="danger" />, {
        placement: 'bottom-end',
      })
    }
  }

  const handleStopScreenShare = () => {
    if (screenStream) {
      // PeerConnections’tan kaldır
      screenStream.getTracks().forEach((track) => {
        webRTCServiceRef.current?.removeTrackFromPeers(track)
        track.stop()
      })
      setScreenStream(undefined)
    }
    setIsScreenSharing(false)
    setScreenSharer(undefined)
  }

  const handleLayoutChange = (layout: VideoroomLayoutDto) => {
    setCurrentLayout(layout)
    if (layout.type === 'grid') {
      setFocusedParticipant(undefined)
    }
  }

  const handleParticipantFocus = (participantId: string | undefined) => {
    setFocusedParticipant(participantId)
  }

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
      setIsFullscreen(true)
    } else {
      document.exitFullscreen()
      setIsFullscreen(false)
    }
  }

  const toggleSidePanel = (panelType: SidePanelType) => {
    setActiveSidePanel(activeSidePanel === panelType ? null : panelType)
  }

  const formatTime = (timestamp: string) => {
    return new Date(timestamp).toLocaleTimeString('tr-TR', {
      hour: '2-digit',
      minute: '2-digit',
    })
  }

  const formatDuration = (minutes: number) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    if (hours > 0) {
      return `${hours}h ${mins}m`
    }
    return `${mins}m`
  }

  const getFileIcon = (type: string) => {
    if (type.includes('pdf')) return <FaFilePdf className="text-red-500" />
    if (
      type.includes('word') ||
      type.includes('doc') ||
      type.includes('presentation') ||
      type.includes('powerpoint')
    )
      return <FaFileWord className="text-blue-500" />
    if (type.includes('image')) return <FaFileImage className="text-green-500" />
    return <FaFileAlt className="text-gray-500" />
  }

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  // ...existing code...
  // ...existing code...
  // --- yan panel fonksiyonu ---
  const renderSidePanel = () => {
    if (!activeSidePanel) return null

    switch (activeSidePanel) {
      case 'chat':
        return (
          <ChatPanel
            user={user}
            participants={participants}
            chatMessages={chatMessages}
            newMessage={newMessage}
            setNewMessage={setNewMessage}
            messageMode={messageMode}
            setMessageMode={setMessageMode}
            selectedRecipient={selectedRecipient}
            setSelectedRecipient={setSelectedRecipient}
            onSendMessage={handleSendMessage}
            onClose={() => setActiveSidePanel(null)}
            formatTime={formatTime}
            classSettings={classSettings}
          />
        )

      case 'participants':
        return (
          <ParticipantsPanel
            user={user}
            participants={participants}
            attendanceRecords={attendanceRecords}
            onMuteParticipant={handleMuteParticipant}
            onKickParticipant={handleKickParticipant}
            onDismissHandRaise={handleDismissHandRaise}
            onClose={() => setActiveSidePanel(null)}
            formatTime={formatTime}
            formatDuration={formatDuration}
          />
        )

      // ...existing code...
      case 'documents':
        return (
          <DocumentsPanel
            user={user}
            documents={documents}
            onUpload={handleUploadDocument}
            onDelete={handleDeleteDocument}
            onView={handleViewDocument}
            onClose={() => setActiveSidePanel(null)}
            formatFileSize={formatFileSize}
            getFileIcon={getFileIcon}
          />
        )

      case 'layout':
        return (
          <LayoutPanel
            layouts={layouts}
            currentLayout={currentLayout ?? layouts[0]}
            onChangeLayout={handleLayoutChange}
            onClose={() => setActiveSidePanel(null)}
          />
        )

      default:
        return null
    }
  }

  useEffect(() => {
    window.addEventListener('beforeunload', handleLeaveCall)
    window.addEventListener('pagehide', handleLeaveCall)

    return () => {
      window.removeEventListener('beforeunload', handleLeaveCall)
      window.removeEventListener('pagehide', handleLeaveCall)
    }
  }, [classSession.id])

  return (
    <>
      <Helmet
        titleTemplate="%s | Erp Platform"
        title={translate('::' + 'App.Videoroom.RoomDetail')}
        defaultTitle="Erp Platform"
      ></Helmet>

      {teacherDisconnected && (
        <div className="bg-red-600 text-white p-2 text-center">
          Öğretmenin bağlantısı koptu, tekrar bağlanmasını bekleyin...
        </div>
      )}

      <div className="min-h-screen h-screen flex flex-col bg-gray-900 text-white overflow-hidden">
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="h-full flex flex-col relative overflow-hidden"
        >
          {/* Main Content Area */}
          <div className="flex-1 flex flex-col lg:flex-row relative min-h-0 h-full">
            {/* Left Content Area - Video and Screen Share */}
            <div
              className={`flex-1 flex flex-col min-h-0 h-full transition-all duration-300 ${!activeSidePanel ? 'flex items-center justify-center' : ''}`}
            >
              {/* Video Container - Panel kapalıyken ortalanmış */}
              <div
                className={`${!activeSidePanel ? 'w-full max-w-6xl' : 'w-full h-full'} flex flex-col min-h-0 h-full`}
              >
                {/* Screen Share Panel */}
                {(isScreenSharing || screenStream) && (
                  <div className="p-2 sm:p-4 flex-shrink-0">
                    <ScreenSharePanel
                      isSharing={isScreenSharing}
                      onStartShare={handleStartScreenShare}
                      onStopShare={handleStopScreenShare}
                      sharedScreen={screenStream}
                      sharerName={screenSharer}
                    />
                  </div>
                )}
                {/* Video Grid */}
                <div className="flex-1 relative overflow-hidden min-h-0 h-full">
                  <RoomParticipant
                    participants={participants.filter((p) => p.isActive)}
                    localStream={user.role === 'observer' ? undefined : localStream}
                    currentUserId={user.id}
                    currentUserName={user.name}
                    isTeacher={user.role === 'teacher'}
                    isAudioEnabled={isAudioEnabled}
                    isVideoEnabled={isVideoEnabled}
                    onMuteParticipant={handleMuteParticipant}
                    layout={currentLayout ?? layouts[0]}
                    focusedParticipant={focusedParticipant}
                    onParticipantFocus={handleParticipantFocus}
                    hasSidePanel={!!activeSidePanel}
                    onKickParticipant={
                      user.role === 'teacher'
                        ? (participantId) => {
                            const participant = participants.find((p) => p.id === participantId)
                            if (participant) {
                              setKickingParticipant({ id: participant.id, name: participant.name })
                            }
                          }
                        : undefined
                    }
                  />
                </div>
              </div>
            </div>

            {/* Side Panel */}
            {activeSidePanel && (
              <div className="fixed inset-0 z-40 bg-white flex flex-col w-full h-full lg:relative lg:inset-auto lg:w-80 lg:h-full lg:z-0 lg:bg-white">
                {renderSidePanel()}
              </div>
            )}
          </div>

          {/* Bottom Control Bar - Google Meet Style */}
          <div className="bg-gray-800 p-2 sm:p-3 flex-shrink-0">
            {/* Mobile Layout */}
            <div className="flex lg:hidden items-center justify-between">
              {/* Left Side - Main Controls */}
              <div className="flex items-center space-x-1 sm:space-x-2">
                {/* Audio Control */}
                {user.role !== 'observer' && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleToggleAudio}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-2 text-white transition-all sm:!p-3 ${
                      isAudioEnabled
                        ? '!bg-gray-700 hover:!bg-gray-600'
                        : '!bg-red-600 hover:!bg-red-700'
                    }`}
                    title={isAudioEnabled ? 'Mikrofonu Kapat' : 'Mikrofonu Aç'}
                  >
                    {isAudioEnabled ? <FaMicrophone size={16} /> : <FaMicrophoneSlash size={16} />}
                  </Button>
                )}

                {/* Video Control */}
                {user.role !== 'observer' && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleToggleVideo}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-2 text-white transition-all sm:!p-3 ${
                      isVideoEnabled
                        ? '!bg-gray-700 hover:!bg-gray-600'
                        : '!bg-red-600 hover:!bg-red-700'
                    }`}
                    title={isVideoEnabled ? 'Kamerayı Kapat' : 'Kamerayı Aç'}
                  >
                    {isVideoEnabled ? <FaVideo size={16} /> : <FaVideoSlash size={16} />}
                  </Button>
                )}

                {/* Screen Share */}
                {(user.role === 'teacher' || classSettings.allowStudentScreenShare) && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={isScreenSharing ? handleStopScreenShare : handleStartScreenShare}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-2 text-white transition-all sm:!p-3 ${
                      isScreenSharing
                        ? '!bg-blue-600 hover:!bg-blue-700'
                        : '!bg-gray-700 hover:!bg-gray-600'
                    }`}
                    title={isScreenSharing ? 'Paylaşımı Durdur' : 'Ekranı Paylaş'}
                  >
                    <FaDesktop size={16} />
                  </Button>
                )}

                {/* Hand Raise (Students) */}
                {user.role === 'student' && classSettings.allowHandRaise && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleRaiseHand}
                    disabled={hasRaisedHand}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-2 text-white transition-all sm:!p-3 ${
                      hasRaisedHand
                        ? '!bg-yellow-600 cursor-not-allowed'
                        : '!bg-gray-700 hover:!bg-yellow-600'
                    }`}
                    title={hasRaisedHand ? 'Parmak Kaldırıldı' : 'Parmak Kaldır'}
                  >
                    <FaHandPaper size={16} />
                  </Button>
                )}

                {/* Leave Call */}
                <Button
                  type="button"
                  variant="plain"
                  shape="circle"
                  onClick={handleLeaveCall}
                  className="!inline-flex !h-auto items-center justify-center rounded-full !bg-red-600 !p-2 text-white transition-all hover:!bg-red-700 sm:!p-3"
                  title="Aramayı Sonlandır"
                >
                  <FaPhone size={16} />
                </Button>
              </div>

              {/* Right Side - Panel Controls */}
              <div className="flex items-center">
                <Button
                  type="button"
                  variant="plain"
                  shape="none"
                  className="!inline-flex !h-auto items-center justify-center rounded-lg !bg-gray-700 !p-2 text-white hover:!bg-gray-600"
                  onClick={() => setMobileMenuOpen(true)}
                  aria-label="Menüyü Aç"
                >
                  <FaBars size={20} />
                </Button>
              </div>

              {/* Hamburger Menu Modal */}
              {mobileMenuOpen && (
                <>
                  {/* Overlay */}
                  <div
                    className="fixed inset-0 z-40 bg-black bg-opacity-40"
                    onClick={() => setMobileMenuOpen(false)}
                  />
                  {/* Drawer */}
                  <motion.div
                    initial={{ x: '100%' }}
                    animate={{ x: 0 }}
                    exit={{ x: '100%' }}
                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                    className="fixed inset-0 z-50 w-full h-full bg-white shadow-2xl flex flex-col p-0 lg:top-0 lg:right-0 lg:w-80 lg:h-full lg:inset-y-0 lg:left-auto"
                  >
                    <div className="flex items-center justify-between px-4 py-4 border-b">
                      <span className="font-semibold text-gray-800 text-lg">Menü</span>
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => setMobileMenuOpen(false)}
                        className="!inline-flex !h-auto items-center justify-center rounded-full !bg-transparent !p-2 hover:!bg-gray-100"
                      >
                        <FaTimes size={22} />
                      </Button>
                    </div>
                    <div className="flex-1 flex flex-col space-y-1 px-2 py-2 overflow-y-auto">
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => {
                          setMobileMenuOpen(false)
                          setTimeout(() => toggleSidePanel('chat'), 200)
                        }}
                        className={`!inline-flex !h-auto items-center gap-2 rounded-lg !p-3 text-base transition-all ${activeSidePanel === 'chat' ? '!bg-blue-100 text-blue-700' : '!bg-transparent text-gray-700 hover:!bg-gray-100'}`}
                      >
                        <FaComments /> <span>Sohbet</span>
                        {chatMessages.length > 0 && (
                          <span className="ml-auto bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                            {chatMessages.length > 9 ? '9+' : chatMessages.length}
                          </span>
                        )}
                      </Button>
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => {
                          setMobileMenuOpen(false)
                          setTimeout(() => toggleSidePanel('participants'), 200)
                        }}
                        className={`!inline-flex !h-auto items-center gap-2 rounded-lg !p-3 text-base transition-all relative ${activeSidePanel === 'participants' ? '!bg-blue-100 text-blue-700' : '!bg-transparent text-gray-700 hover:!bg-gray-100'}`}
                      >
                        <FaUserFriends />
                        <span>Katılımcılar</span>
                        {/* El kaldıran badge */}
                        {raisedHandsCount > 0 && (
                          <span className="absolute top-2 right-3 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
                            {raisedHandsCount > 9 ? '9+' : raisedHandsCount}
                          </span>
                        )}
                      </Button>
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => {
                          setMobileMenuOpen(false)
                          setTimeout(() => toggleSidePanel('documents'), 200)
                        }}
                        className={`!inline-flex !h-auto items-center gap-2 rounded-lg !p-3 text-base transition-all ${activeSidePanel === 'documents' ? '!bg-blue-100 text-blue-700' : '!bg-transparent text-gray-700 hover:!bg-gray-100'}`}
                      >
                        <FaFile /> <span>Dokümanlar</span>
                      </Button>
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => {
                          setMobileMenuOpen(false)
                          setTimeout(() => toggleSidePanel('layout'), 200)
                        }}
                        className={`!inline-flex !h-auto items-center gap-2 rounded-lg !p-3 text-base transition-all ${activeSidePanel === 'layout' ? '!bg-blue-100 text-blue-700' : '!bg-transparent text-gray-700 hover:!bg-gray-100'}`}
                      >
                        <FaLayerGroup /> <span>Görünüm</span>
                      </Button>
                      {user.role === 'teacher' && (
                        <Button
                          type="button"
                          variant="plain"
                          shape="none"
                          onClick={() => {
                            setMobileMenuOpen(false)
                            setTimeout(() => handleMuteAll(), 200)
                          }}
                          className="!inline-flex !h-auto items-center gap-2 rounded-lg !bg-transparent !p-3 text-base text-gray-700 transition-all hover:!bg-gray-100"
                        >
                          {isAllMuted ? <FaVolumeUp /> : <FaVolumeMute />}{' '}
                          <span>{isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}</span>
                        </Button>
                      )}
                      <Button
                        type="button"
                        variant="plain"
                        shape="none"
                        onClick={() => {
                          setMobileMenuOpen(false)
                          setTimeout(() => toggleFullscreen(), 200)
                        }}
                        className="!inline-flex !h-auto items-center gap-2 rounded-lg !bg-transparent !p-3 text-base text-gray-700 transition-all hover:!bg-gray-100"
                      >
                        {isFullscreen ? <FaCompress /> : <FaExpand />}{' '}
                        <span>{isFullscreen ? 'Tam Ekrandan Çık' : 'Tam Ekran'}</span>
                      </Button>
                    </div>
                  </motion.div>
                </>
              )}
            </div>

            {/* Desktop Layout */}
            <div className="hidden lg:flex items-center justify-center relative">
              {/* Left Side - Meeting Info */}
              <div className="flex items-center space-x-4 text-white absolute left-0">
                <div className="flex items-center space-x-2">
                  <span className="text-sm font-medium truncate">{classSession?.name}</span>
                  <div className="w-px h-4 bg-gray-600"></div>
                  <span className="text-sm text-gray-300">
                    {new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
                  </span>
                </div>
              </div>

              {/* Center - Main Controls */}
              <div className="flex items-center space-x-2">
                {/* Audio Control */}
                {user.role !== 'observer' && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleToggleAudio}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-3 text-white transition-all ${
                      isAudioEnabled
                        ? '!bg-gray-700 hover:!bg-gray-600'
                        : '!bg-red-600 hover:!bg-red-700'
                    }`}
                    title={isAudioEnabled ? 'Mikrofonu Kapat' : 'Mikrofonu Aç'}
                  >
                    {isAudioEnabled ? <FaMicrophone size={16} /> : <FaMicrophoneSlash size={16} />}
                  </Button>
                )}

                {/* Video Control */}
                {user.role !== 'observer' && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleToggleVideo}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-3 text-white transition-all ${
                      isVideoEnabled
                        ? '!bg-gray-700 hover:!bg-gray-600'
                        : '!bg-red-600 hover:!bg-red-700'
                    }`}
                    title={isVideoEnabled ? 'Kamerayı Kapat' : 'Kamerayı Aç'}
                  >
                    {isVideoEnabled ? <FaVideo size={16} /> : <FaVideoSlash size={16} />}
                  </Button>
                )}

                {/* Screen Share */}
                {(user.role === 'teacher' || classSettings.allowStudentScreenShare) && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={isScreenSharing ? handleStopScreenShare : handleStartScreenShare}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-3 text-white transition-all ${
                      isScreenSharing
                        ? '!bg-blue-600 hover:!bg-blue-700'
                        : '!bg-gray-700 hover:!bg-gray-600'
                    }`}
                    title={isScreenSharing ? 'Paylaşımı Durdur' : 'Ekranı Paylaş'}
                  >
                    <FaDesktop size={16} />
                  </Button>
                )}

                {/* Hand Raise (Students) */}
                {user.role === 'student' && classSettings.allowHandRaise && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="circle"
                    onClick={handleRaiseHand}
                    disabled={hasRaisedHand}
                    className={`!inline-flex !h-auto items-center justify-center rounded-full !p-3 text-white transition-all ${
                      hasRaisedHand
                        ? '!bg-yellow-600 cursor-not-allowed'
                        : '!bg-gray-700 hover:!bg-yellow-600'
                    }`}
                    title={hasRaisedHand ? 'Parmak Kaldırıldı' : 'Parmak Kaldır'}
                  >
                    <FaHandPaper size={16} />
                  </Button>
                )}

                {/* Leave Call */}
                <Button
                  type="button"
                  variant="plain"
                  shape="circle"
                  onClick={handleLeaveCall}
                  className="!inline-flex !h-auto items-center justify-center rounded-full !bg-red-600 !p-3 text-white transition-all hover:!bg-red-700"
                  title="Aramayı Sonlandır"
                >
                  <FaPhone size={16} />
                </Button>
              </div>

              {/* Right Side - Panel Controls */}
              <div className="flex items-center space-x-2 absolute right-0">
                {/* Fullscreen Toggle */}
                <Button
                  type="button"
                  variant="plain"
                  shape="none"
                  onClick={toggleFullscreen}
                  className="!inline-flex !h-auto items-center justify-center rounded-lg !bg-gray-700 !p-2 text-white transition-all hover:!bg-gray-600"
                  title={isFullscreen ? 'Tam Ekrandan Çık' : 'Tam Ekran'}
                >
                  {isFullscreen ? <FaCompress size={14} /> : <FaExpand size={14} />}
                </Button>

                {/* Chat */}
                {((user.role !== 'observer' && classSettings.allowStudentChat) ||
                  user.role === 'teacher') && (
                  <Button
                    type="button"
                    variant="plain"
                    shape="none"
                    onClick={() => toggleSidePanel('chat')}
                    className={`!inline-flex !h-auto items-center justify-center rounded-lg !p-2 transition-all relative ${
                      activeSidePanel === 'chat'
                        ? '!bg-blue-600 text-white'
                        : '!bg-gray-700 hover:!bg-gray-600 text-white'
                    }`}
                    title="Sohbet"
                  >
                    <FaComments size={14} />
                    {chatMessages.length > 0 && (
                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
                        {chatMessages.length > 9 ? '9+' : chatMessages.length}
                      </span>
                    )}
                  </Button>
                )}

                {/* Participants */}
                <Button
                  type="button"
                  variant="plain"
                  shape="none"
                  onClick={() => toggleSidePanel('participants')}
                  className={`!inline-flex !h-auto items-center justify-center rounded-lg !p-2 transition-all relative ${
                    activeSidePanel === 'participants'
                      ? '!bg-blue-600 text-white'
                      : '!bg-gray-700 hover:!bg-gray-600 text-white'
                  }`}
                  title="Katılımcılar"
                >
                  <FaUserFriends size={14} />
                  {/* El kaldıran badge */}
                  {raisedHandsCount > 0 && (
                    <span className="absolute -top-1 -right-3 bg-yellow-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
                      {raisedHandsCount > 9 ? '9+' : raisedHandsCount}
                    </span>
                  )}
                </Button>

                {/* Teacher Only Options */}
                {user.role === 'teacher' && (
                  <>
                    {/* Documents Button */}
                    <Button
                      type="button"
                      variant="plain"
                      shape="none"
                      onClick={() => toggleSidePanel('documents')}
                      className={`!inline-flex !h-auto items-center justify-center rounded-lg !p-2 transition-all ${
                        activeSidePanel === 'documents'
                          ? '!bg-blue-600 text-white'
                          : '!bg-gray-700 hover:!bg-gray-600 text-white'
                      }`}
                      title="Dokümanlar"
                    >
                      <FaFile size={14} />
                    </Button>

                    {/* Mute All Button */}
                    <Button
                      type="button"
                      variant="plain"
                      shape="none"
                      onClick={handleMuteAll}
                      className="!inline-flex !h-auto items-center justify-center rounded-lg !bg-gray-700 !p-2 text-white transition-all hover:!bg-gray-600"
                      title={isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}
                    >
                      {isAllMuted ? <FaVolumeUp size={14} /> : <FaVolumeMute size={14} />}
                    </Button>
                  </>
                )}

                {/* Layout Button */}
                <Button
                  type="button"
                  variant="plain"
                  shape="none"
                  onClick={() => toggleSidePanel('layout')}
                  className={`!inline-flex !h-auto items-center justify-center rounded-lg !p-2 transition-all ${
                    activeSidePanel === 'layout'
                      ? '!bg-blue-600 text-white'
                      : '!bg-gray-700 hover:!bg-gray-600 text-white'
                  }`}
                  title="Layout"
                >
                  <FaLayerGroup size={14} />
                </Button>
              </div>
            </div>
          </div>

          {/* Kick Participant Modal */}
          <KickParticipantModal
            participant={kickingParticipant}
            isOpen={!!kickingParticipant}
            onClose={() => setKickingParticipant(null)}
            onConfirm={handleKickParticipant}
          />
        </motion.div>
      </div>
    </>
  )
}

export default RoomDetail