'use client'
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Users, Plus, Trash2, Play, Square, Settings, Brain, Crown, Target } from 'lucide-react'

interface Question {
  question_id: string
  question_text: string
  options: string[]
  correct_answer: string
  difficulty: 'easy' | 'medium' | 'hard'
  points: number
  explanation: string
}

interface Participant {
  session_id: string
  username: string
  score: number
  current_difficulty: string
  total_questions: number
  correct_answers: number
  status: string
}

interface QuizRoom {
  room_id: string
  room_code: string
  title: string
  host_name: string
  is_private: boolean
  status: string
  questions: Question[]
  participants: Participant[]
  max_participants: number
  duration_minutes: number
  participants_count?: number
  questions_count?: number
  questions_by_difficulty?: {
    easy: number
    medium: number
    hard: number
  }
}

export default function QuizHostPanel() {
  const router = useRouter()
  const [currentRoom, setCurrentRoom] = useState<QuizRoom | null>(null)
  const [activeTab, setActiveTab] = useState<'setup' | 'questions' | 'participants' | 'live'>('setup')
  const [showCreateRoom, setShowCreateRoom] = useState(false)
  const [showAddQuestion, setShowAddQuestion] = useState(false)
  const [showAIGenerate, setShowAIGenerate] = useState(false)

  // Room creation form
  const [roomForm, setRoomForm] = useState({
    host_name: '',
    room_title: '',
    is_private: false,
    max_participants: 50,
    duration_minutes: 30
  })

  // Question form
  const [questionForm, setQuestionForm] = useState({
    question_text: '',
    options: ['', '', '', ''],
    correct_answer: '',
    difficulty: 'medium' as 'easy' | 'medium' | 'hard',
    points: 10,
    explanation: ''
  })

  // AI generation form
  const [aiForm, setAiForm] = useState({
    topic: '',
    num_easy: 3,
    num_medium: 3,
    num_hard: 2
  })

  const createRoom = async () => {
    try {
      const response = await fetch('http://127.0.0.1:5000/api/quizzes/create-room', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(roomForm)
      })

      const data = await response.json()
      console.log('Room creation response:', data) // Debug log

      if (data.success) {
        // Ensure the room has all required properties
        const room = {
          ...data.room,
          status: data.room.status || 'waiting',
          participants: data.room.participants || [],
          questions: data.room.questions || []
        }
        console.log('Room object:', room) // Debug log
        setCurrentRoom(room)
        setShowCreateRoom(false)
        setActiveTab('questions')
        alert(`🎉 Room created! Code: ${room.room_code}`)
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      console.error('Room creation error:', error)
      alert('Network error: Could not create room')
    }
  }

  const addQuestion = async () => {
    if (!currentRoom) return

    if (!questionForm.question_text || questionForm.options.some(opt => !opt.trim()) || !questionForm.correct_answer) {
      alert('Please fill all question fields')
      return
    }

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/add-question`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(questionForm)
      })

      const data = await response.json()

      if (data.success) {
        // Refresh room data
        fetchRoomData()
        setShowAddQuestion(false)
        setQuestionForm({
          question_text: '',
          options: ['', '', '', ''],
          correct_answer: '',
          difficulty: 'medium',
          points: 10,
          explanation: ''
        })
        alert('✅ Question added successfully!')
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not add question')
    }
  }

  const generateAIQuestions = async () => {
    if (!currentRoom) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/generate-ai-questions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(aiForm)
      })

      const data = await response.json()

      if (data.success) {
        fetchRoomData()
        setShowAIGenerate(false)
        alert(`🤖 Generated ${data.questions.length} AI questions!`)
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not generate questions')
    }
  }

  const removeQuestion = async (questionId: string) => {
    if (!currentRoom || !confirm('Remove this question?')) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/remove-question/${questionId}`, {
        method: 'DELETE'
      })

      const data = await response.json()

      if (data.success) {
        fetchRoomData()
        alert('✅ Question removed')
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not remove question')
    }
  }

  const removeParticipant = async (username: string) => {
    if (!currentRoom || !confirm(`Remove ${username} from the quiz?`)) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/remove-participant/${username}`, {
        method: 'DELETE'
      })

      const data = await response.json()

      if (data.success) {
        fetchRoomData()
        alert(`✅ Removed ${username}`)
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not remove participant')
    }
  }

  const startQuiz = async () => {
    if (!currentRoom) return

    if (currentRoom.questions.length === 0) {
      alert('Add questions before starting the quiz!')
      return
    }

    if (!confirm('Start the quiz now? Participants will begin answering questions.')) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/start`, {
        method: 'POST'
      })

      const data = await response.json()

      if (data.success) {
        fetchRoomData()
        setActiveTab('live')
        alert('🚀 Quiz started!')
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not start quiz')
    }
  }

  const endQuiz = async () => {
    if (!currentRoom || !confirm('End the quiz now?')) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/end`, {
        method: 'POST'
      })

      const data = await response.json()

      if (data.success) {
        fetchRoomData()
        alert('✅ Quiz ended!')
      } else {
        alert(`Error: ${data.error}`)
      }
    } catch (error) {
      alert('Network error: Could not end quiz')
    }
  }

  const fetchRoomData = async () => {
    if (!currentRoom) return

    try {
      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/room/${currentRoom.room_code}/info`)
      const data = await response.json()

      if (data.success) {
        setCurrentRoom(data.room)
      }
    } catch (error) {
      console.error('Failed to fetch room data:', error)
    }
  }

  // Poll for live updates when quiz is active
  useEffect(() => {
    if (currentRoom?.status === 'active') {
      const interval = setInterval(fetchRoomData, 3000)
      return () => clearInterval(interval)
    }
  }, [currentRoom?.status])

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'easy': return 'text-green-400 bg-green-900'
      case 'medium': return 'text-yellow-400 bg-yellow-900'
      case 'hard': return 'text-red-400 bg-red-900'
      default: return 'text-gray-400 bg-gray-700'
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'waiting': return 'text-yellow-400 bg-yellow-900'
      case 'active': return 'text-green-400 bg-green-900'
      case 'completed': return 'text-gray-400 bg-gray-700'
      default: return 'text-gray-400 bg-gray-700'
    }
  }

  // Safe status getter
  const roomStatus = currentRoom?.status || 'waiting'

  if (!currentRoom) {
    return (
      <div className="min-h-screen bg-gray-900 text-white">
        <div className="max-w-4xl mx-auto p-6">
          <div className="text-center mb-8">
            <Crown className="h-16 w-16 text-yellow-400 mx-auto mb-4" />
            <h1 className="text-4xl font-bold mb-4">👑 Quiz Host Panel</h1>
            <p className="text-gray-400">
              Create and manage adaptive quizzes with AI-powered questions
            </p>
          </div>

          <div className="bg-gray-800 p-6 rounded-lg">
            <h2 className="text-xl font-bold mb-4">Create New Quiz Room</h2>
            
            <div className="space-y-4">
              <input
                type="text"
                placeholder="Your name (Host)"
                value={roomForm.host_name}
                onChange={(e) => setRoomForm(prev => ({...prev, host_name: e.target.value}))}
                className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />
              
              <input
                type="text"
                placeholder="Quiz room title"
                value={roomForm.room_title}
                onChange={(e) => setRoomForm(prev => ({...prev, room_title: e.target.value}))}
                className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
              />

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      checked={roomForm.is_private}
                      onChange={(e) => setRoomForm(prev => ({...prev, is_private: e.target.checked}))}
                      className="rounded"
                    />
                    <span>Private Room (requires code)</span>
                  </label>
                </div>
                
                <input
                  type="number"
                  placeholder="Max participants"
                  value={roomForm.max_participants}
                  onChange={(e) => setRoomForm(prev => ({...prev, max_participants: parseInt(e.target.value) || 50}))}
                  className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                  min="1"
                  max="100"
                />
                
                <input
                  type="number"
                  placeholder="Duration (minutes)"
                  value={roomForm.duration_minutes}
                  onChange={(e) => setRoomForm(prev => ({...prev, duration_minutes: parseInt(e.target.value) || 30}))}
                  className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                  min="5"
                  max="180"
                />
              </div>

              <button
                onClick={createRoom}
                disabled={!roomForm.host_name || !roomForm.room_title}
                className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 disabled:from-gray-600 disabled:to-gray-600 p-4 rounded-lg font-semibold"
              >
                🚀 Create Quiz Room
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="bg-gray-800 p-4 rounded-lg mb-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-2xl font-bold flex items-center space-x-2">
                <Crown className="h-6 w-6 text-yellow-400" />
                <span>{currentRoom.title}</span>
              </h1>
              <div className="flex items-center space-x-4 text-sm text-gray-400 mt-1">
                <span>Code: <span className="font-bold text-blue-400">{currentRoom.room_code}</span></span>
                <span className={`px-2 py-1 rounded text-xs ${getStatusColor(roomStatus)}`}>
                  {roomStatus.toUpperCase()}
                </span>
                <span>👥 {currentRoom.participants?.length || 0}/{currentRoom.max_participants}</span>
                <span>❓ {currentRoom.questions?.length || 0} questions</span>
              </div>
            </div>
            
            <div className="flex items-center space-x-2">
              {roomStatus === 'waiting' && (
                <button
                  onClick={startQuiz}
                  disabled={(currentRoom.questions?.length || 0) === 0}
                  className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2"
                >
                  <Play className="h-4 w-4" />
                  <span>Start Quiz</span>
                </button>
              )}
              
              {roomStatus === 'active' && (
                <button
                  onClick={endQuiz}
                  className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded flex items-center space-x-2"
                >
                  <Square className="h-4 w-4" />
                  <span>End Quiz</span>
                </button>
              )}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex space-x-1 mb-6">
          {[
            { id: 'questions', label: `Questions (${currentRoom.questions?.length || 0})`, icon: Target },
            { id: 'participants', label: `Participants (${currentRoom.participants?.length || 0})`, icon: Users },
            { id: 'live', label: 'Live View', icon: Play }
          ].map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
              className={`px-4 py-2 rounded flex items-center space-x-2 ${
                activeTab === tab.id 
                  ? 'bg-blue-600 text-white' 
                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
            >
              <tab.icon className="h-4 w-4" />
              <span>{tab.label}</span>
            </button>
          ))}
        </div>

        {/* Questions Tab */}
        {activeTab === 'questions' && (
          <div>
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-bold">📝 Question Management</h2>
              <div className="flex space-x-2">
                <button
                  onClick={() => setShowAIGenerate(true)}
                  className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center space-x-2"
                >
                  <Brain className="h-4 w-4" />
                  <span>🤖 AI Generate</span>
                </button>
                <button
                  onClick={() => setShowAddQuestion(true)}
                  className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded flex items-center space-x-2"
                >
                  <Plus className="h-4 w-4" />
                  <span>Add Question</span>
                </button>
              </div>
            </div>

            {/* Questions by Difficulty */}
            {['easy', 'medium', 'hard'].map(difficulty => {
              const difficultyQuestions = (currentRoom.questions || []).filter(q => q.difficulty === difficulty)
              return (
                <div key={difficulty} className="mb-6">
                  <h3 className={`text-lg font-semibold mb-3 px-3 py-1 rounded inline-block ${getDifficultyColor(difficulty)}`}>
                    {difficulty.toUpperCase()} ({difficultyQuestions.length} questions)
                  </h3>
                  
                  <div className="space-y-3">
                    {difficultyQuestions.map((question, index) => (
                      <div key={question.question_id} className="bg-gray-800 p-4 rounded-lg">
                        <div className="flex justify-between items-start">
                          <div className="flex-1">
                            <h4 className="font-semibold mb-2">{question.question_text}</h4>
                            <div className="grid grid-cols-2 gap-2 text-sm text-gray-400 mb-2">
                              {question.options.map((option, optIndex) => (
                                <span key={optIndex} className={`${option === question.correct_answer ? 'text-green-400 font-semibold' : ''}`}>
                                  {String.fromCharCode(65 + optIndex)}) {option}
                                </span>
                              ))}
                            </div>
                            <div className="text-xs text-gray-500">
                              Points: {question.points} | Correct: {question.correct_answer}
                            </div>
                          </div>
                          <button
                            onClick={() => removeQuestion(question.question_id)}
                            disabled={roomStatus !== 'waiting'}
                            className="text-red-400 hover:text-red-300 disabled:text-gray-600 ml-4"
                          >
                            <Trash2 className="h-4 w-4" />
                          </button>
                        </div>
                      </div>
                    ))}
                    
                    {difficultyQuestions.length === 0 && (
                      <div className="text-center py-4 text-gray-500 border-2 border-dashed border-gray-700 rounded-lg">
                        No {difficulty} questions yet
                      </div>
                    )}
                  </div>
                </div>
              )
            })}

            {/* Add Question Modal */}
            {showAddQuestion && (
              <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                <div className="bg-gray-800 p-6 rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
                  <h3 className="text-xl font-bold mb-4">➕ Add New Question</h3>
                  
                  <div className="space-y-4">
                    <textarea
                      placeholder="Question text"
                      value={questionForm.question_text}
                      onChange={(e) => setQuestionForm(prev => ({...prev, question_text: e.target.value}))}
                      className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
                      rows={3}
                    />

                    <div className="space-y-2">
                      <label className="text-sm font-medium">Options:</label>
                      {questionForm.options.map((option, index) => (
                        <input
                          key={index}
                          type="text"
                          placeholder={`Option ${String.fromCharCode(65 + index)}`}
                          value={option}
                          onChange={(e) => {
                            const newOptions = [...questionForm.options]
                            newOptions[index] = e.target.value
                            setQuestionForm(prev => ({...prev, options: newOptions}))
                          }}
                          className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                        />
                      ))}
                    </div>

                    <div className="grid grid-cols-3 gap-4">
                      <input
                        type="text"
                        placeholder="Correct answer"
                        value={questionForm.correct_answer}
                        onChange={(e) => setQuestionForm(prev => ({...prev, correct_answer: e.target.value}))}
                        className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                      />
                      
                      <select
                        value={questionForm.difficulty}
                        onChange={(e) => setQuestionForm(prev => ({...prev, difficulty: e.target.value as any}))}
                        className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                      >
                        <option value="easy">🟢 Easy</option>
                        <option value="medium">🟡 Medium</option>
                        <option value="hard">🔴 Hard</option>
                      </select>
                      
                      <input
                        type="number"
                        placeholder="Points"
                        value={questionForm.points}
                        onChange={(e) => setQuestionForm(prev => ({...prev, points: parseInt(e.target.value) || 10}))}
                        className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                        min="1"
                      />
                    </div>

                    <textarea
                      placeholder="Explanation (optional)"
                      value={questionForm.explanation}
                      onChange={(e) => setQuestionForm(prev => ({...prev, explanation: e.target.value}))}
                      className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
                      rows={2}
                    />
                  </div>

                  <div className="flex space-x-4 mt-6">
                    <button
                      onClick={addQuestion}
                      className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded font-semibold"
                    >
                      ✅ Add Question
                    </button>
                    <button
                      onClick={() => setShowAddQuestion(false)}
                      className="bg-gray-600 hover:bg-gray-700 px-6 py-2 rounded"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              </div>
            )}

            {/* AI Generate Modal */}
            {showAIGenerate && (
              <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                <div className="bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4">
                  <h3 className="text-xl font-bold mb-4 flex items-center space-x-2">
                    <Brain className="h-5 w-5 text-purple-400" />
                    <span>🤖 AI Question Generator</span>
                  </h3>
                  
                  <div className="space-y-4">
                    <input
                      type="text"
                      placeholder="Topic (e.g., Programming, Science)"
                      value={aiForm.topic}
                      onChange={(e) => setAiForm(prev => ({...prev, topic: e.target.value}))}
                      className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                    />

                    <div className="grid grid-cols-3 gap-4">
                      <div>
                        <label className="block text-sm font-medium mb-1">🟢 Easy</label>
                        <input
                          type="number"
                          value={aiForm.num_easy}
                          onChange={(e) => setAiForm(prev => ({...prev, num_easy: parseInt(e.target.value) || 0}))}
                          className="w-full p-2 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          min="0"
                          max="10"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium mb-1">🟡 Medium</label>
                        <input
                          type="number"
                          value={aiForm.num_medium}
                          onChange={(e) => setAiForm(prev => ({...prev, num_medium: parseInt(e.target.value) || 0}))}
                          className="w-full p-2 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          min="0"
                          max="10"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium mb-1">🔴 Hard</label>
                        <input
                          type="number"
                          value={aiForm.num_hard}
                          onChange={(e) => setAiForm(prev => ({...prev, num_hard: parseInt(e.target.value) || 0}))}
                          className="w-full p-2 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          min="0"
                          max="10"
                        />
                      </div>
                    </div>
                  </div>

                  <div className="flex space-x-4 mt-6">
                    <button
                      onClick={generateAIQuestions}
                      disabled={aiForm.num_easy + aiForm.num_medium + aiForm.num_hard === 0}
                      className="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-6 py-2 rounded font-semibold"
                    >
                      🚀 Generate
                    </button>
                    <button
                      onClick={() => setShowAIGenerate(false)}
                      className="bg-gray-600 hover:bg-gray-700 px-6 py-2 rounded"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Participants Tab */}
        {activeTab === 'participants' && (
          <div>
            <h2 className="text-xl font-bold mb-6">👥 Participant Management</h2>
            
            {(currentRoom.participants?.length || 0) === 0 ? (
              <div className="text-center py-12 text-gray-400">
                <Users className="h-16 w-16 mx-auto mb-4 opacity-50" />
                <p className="text-xl mb-2">No participants yet</p>
                <p>Share room code: <span className="font-bold text-blue-400">{currentRoom.room_code}</span></p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {(currentRoom.participants || []).map((participant) => (
                  <div key={participant.session_id} className="bg-gray-800 p-4 rounded-lg">
                    <div className="flex justify-between items-start mb-3">
                      <div>
                        <h3 className="font-semibold">{participant.username}</h3>
                        <div className="text-sm text-gray-400">
                          Score: {participant.score} pts
                        </div>
                      </div>
                      <button
                        onClick={() => removeParticipant(participant.username)}
                        disabled={roomStatus === 'active'}
                        className="text-red-400 hover:text-red-300 disabled:text-gray-600"
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                    
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>Difficulty:</span>
                        <span className={`px-2 py-1 rounded text-xs ${getDifficultyColor(participant.current_difficulty)}`}>
                          {participant.current_difficulty}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span>Progress:</span>
                        <span>{participant.correct_answers}/{participant.total_questions}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>Accuracy:</span>
                        <span>
                          {participant.total_questions > 0 
                            ? Math.round((participant.correct_answers / participant.total_questions) * 100)
                            : 0}%
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* Live View Tab */}
        {activeTab === 'live' && (
          <div>
            <h2 className="text-xl font-bold mb-6">📺 Live Quiz Dashboard</h2>
            
            {roomStatus !== 'active' ? (
              <div className="text-center py-12 text-gray-400">
                <Play className="h-16 w-16 mx-auto mb-4 opacity-50" />
                <p className="text-xl mb-2">Quiz not active</p>
                <p>Start the quiz to see live updates</p>
              </div>
            ) : (
              <div className="space-y-6">
                {/* Real-time Stats */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div className="bg-gray-800 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-blue-400">{currentRoom.participants?.length || 0}</div>
                    <div className="text-sm text-gray-400">Active Participants</div>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-green-400">
                      {Math.round((currentRoom.participants || []).reduce((sum, p) => sum + (p.total_questions > 0 ? (p.correct_answers / p.total_questions) * 100 : 0), 0) / Math.max((currentRoom.participants || []).length, 1))}%
                    </div>
                    <div className="text-sm text-gray-400">Avg Accuracy</div>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-purple-400">
                      {Math.max(...(currentRoom.participants || []).map(p => p.score), 0)}
                    </div>
                    <div className="text-sm text-gray-400">Top Score</div>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-yellow-400">
                      {(currentRoom.participants || []).filter(p => p.current_difficulty === 'hard').length}
                    </div>
                    <div className="text-sm text-gray-400">Hard Level</div>
                  </div>
                </div>

                {/* Leaderboard */}
                <div className="bg-gray-800 p-6 rounded-lg">
                  <h3 className="text-lg font-bold mb-4">🏆 Live Leaderboard</h3>
                  <div className="space-y-2">
                    {(currentRoom.participants || [])
                      .sort((a, b) => b.score - a.score)
                      .map((participant, index) => (
                        <div key={participant.session_id} className="flex items-center justify-between p-3 bg-gray-700 rounded">
                          <div className="flex items-center space-x-3">
                            <span className="font-bold text-yellow-400">#{index + 1}</span>
                            <span className="font-semibold">{participant.username}</span>
                            <span className={`px-2 py-1 rounded text-xs ${getDifficultyColor(participant.current_difficulty)}`}>
                              {participant.current_difficulty}
                            </span>
                          </div>
                          <div className="text-right">
                            <div className="font-bold">{participant.score} pts</div>
                            <div className="text-sm text-gray-400">
                              {participant.correct_answers}/{participant.total_questions} correct
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  )
}