update

frontend/app/coding/exam/page.tsx

@@ -1,545 +1,110 @@
 'use client'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield } from 'lucide-react'
+import { Code, Users, Clock, ArrowRight } from 'lucide-react'
 
-interface Participant {
-  name: string
-  score: number
-  rank: number
-  completed: boolean
-  language?: string
-  submission_time?: string
-  wallet_address?: string
-  wallet_short?: string
-  blockchain_verified?: boolean
-}
-
-interface Problem {
-  title: string
-  description: string
-  function_name: string
-  languages: string[]
-  examples: Array<{input: string, expected_output: string, description: string}>
-  constraints: string[]
-  starter_code: {[key: string]: string}
-}
-
-interface ExamSession {
-  exam_code: string
-  student_name: string
-  wallet_address?: string
-  blockchain_verified?: boolean
-  exam_info: any
-}
-
-export default function EnhancedExamInterface() {
-  const [examSession, setExamSession] = useState<ExamSession | null>(null)
-  const [problem, setProblem] = useState<Problem | null>(null)
-  const [selectedLanguage, setSelectedLanguage] = useState('python')
-  const [code, setCode] = useState('')
-  const [output, setOutput] = useState('')
-  const [testResults, setTestResults] = useState<any[]>([])
-  const [leaderboard, setLeaderboard] = useState<Participant[]>([])
-  const [waitingParticipants, setWaitingParticipants] = useState<Participant[]>([])
-  const [timeRemaining, setTimeRemaining] = useState(0)
-  const [isRunning, setIsRunning] = useState(false)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [hasSubmitted, setHasSubmitted] = useState(false)
-  const [examStats, setExamStats] = useState<any>({})
+export default function ExamLandingPage() {
   const router = useRouter()
+  const [examCode, setExamCode] = useState('')
 
-  const languageIcons: {[key: string]: string} = {
-    python: '🐍',
-    java: '☕',
-    c: '⚡',
-    bash: '💻'
-  }
-
-  useEffect(() => {
-    const sessionData = localStorage.getItem('exam_session')
-    if (!sessionData) {
-      router.push('/coding/join')
-      return
-    }
-
-    const session = JSON.parse(sessionData)
-    setExamSession(session)
-    
-    // Fetch problem details
-    fetchProblem(session.exam_code)
-    
-    // Start polling for updates
-    const interval = setInterval(() => {
-      fetchLeaderboard(session.exam_code)
-    }, 3000)
-
-    return () => clearInterval(interval)
-  }, [router])
-
-  const fetchProblem = async (examCode: string) => {
-    try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/get-problem/${examCode}`)
-      const data = await response.json()
-      
-      if (data.success) {
-        setProblem(data.problem)
-        const defaultLang = data.problem.languages[0] || 'python'
-        setSelectedLanguage(defaultLang)
-        setCode(data.problem.starter_code[defaultLang] || '')
-      }
-    } catch (error) {
-      console.error('Failed to fetch problem:', error)
+  const joinExam = () => {
+    if (examCode.trim()) {
+      router.push(`/coding/exam/${examCode.trim().toUpperCase()}`)
+    } else {
+      alert('Please enter a valid exam code')
     }
   }
 
-  const fetchLeaderboard = async (examCode: string) => {
-    try {
-      const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
-      const data = await response.json()
-      
-      if (data.success) {
-        setLeaderboard(data.leaderboard || [])
-        setWaitingParticipants(data.waiting_participants || [])
-        setExamStats(data.stats || {})
-        
-        if (data.exam_info.status === 'active' && data.exam_info.end_time) {
-          const endTime = new Date(data.exam_info.end_time)
-          const now = new Date()
-          const remaining = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000))
-          setTimeRemaining(remaining)
-        }
-      }
-    } catch (error) {
-      console.error('Failed to fetch leaderboard:', error)
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      joinExam()
     }
   }
 
-  const handleLanguageChange = (language: string) => {
-    setSelectedLanguage(language)
-    if (problem?.starter_code[language]) {
-      setCode(problem.starter_code[language])
-    }
-    setOutput('')
-    setTestResults([])
-  }
-
-  const runCode = async () => {
-    if (!code.trim()) {
-      alert('Please write some code first!')
-      return
-    }
-
-    setIsRunning(true)
-    setOutput('')
-    setTestResults([])
-
-    try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/execute-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          code,
-          language: selectedLanguage
-        })
-      })
-
-      const result = await response.json()
-      
-      if (result.success) {
-        setOutput('Code executed successfully!')
-        setTestResults(result.test_results || [])
-      } else {
-        setOutput(`Error: ${result.error}`)
-      }
-    } catch (error) {
-      setOutput(`Execution failed: ${(error as Error).message}`)
-    } finally {
-      setIsRunning(false)
-    }
-  }
-
-  const submitSolution = async () => {
-    if (!code.trim()) {
-      alert('Please write some code before submitting!')
-      return
-    }
-
-    setIsSubmitting(true)
-
-    try {
-      const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          code,
-          language: selectedLanguage
-        })
-      })
-
-      const data = await response.json()
-      
-      if (data.success) {
-        setHasSubmitted(true)
-        setTestResults(data.test_results || [])
-        
-        let alertMessage = `Solution submitted successfully!\nScore: ${data.score}%\nPassed: ${data.passed_tests}/${data.total_tests} tests`
-        
-        if (data.blockchain_verified) {
-          alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
-        }
-        
-        alert(alertMessage)
-        fetchLeaderboard(examSession!.exam_code)
-      } else {
-        alert(data.error || 'Failed to submit solution')
-      }
-    } catch (error) {
-      alert('Failed to submit solution. Please try again.')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-  }
-
-  const getRankColor = (rank: number) => {
-    switch (rank) {
-      case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white'
-      case 2: return 'bg-gradient-to-r from-gray-300 to-gray-500 text-white'
-      case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white'
-      default: return 'bg-gray-100 text-gray-700'
-    }
-  }
-
-  if (!examSession || !problem) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-2 text-gray-400">Loading exam interface...</p>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="min-h-screen bg-gray-900 text-white">
-      {/* Header with Timer */}
+      {/* Header */}
       <div className="bg-gray-800 border-b border-gray-700 p-4">
-        <div className="max-w-7xl mx-auto flex justify-between items-center">
-          <div>
-            <h1 className="text-xl font-bold">{problem.title}</h1>
-            <p className="text-gray-400">Code: {examSession.exam_code}</p>
-          </div>
-          
-          <div className="flex items-center space-x-4">
-            {/* Timer */}
-            {timeRemaining > 0 && (
-              <div className="flex items-center space-x-2 bg-red-900 px-3 py-1 rounded-lg">
-                <Clock className="h-5 w-5 text-red-400" />
-                <span className="font-mono text-lg text-red-400">{formatTime(timeRemaining)}</span>
-              </div>
-            )}
-            
-            {/* Wallet Info Display */}
-            {examSession.blockchain_verified && examSession.wallet_address && (
-              <div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
-                <Wallet className="h-4 w-4 text-green-400" />
-                <span className="text-green-200 text-sm font-mono">
-                  {examSession.wallet_address.slice(0, 6)}...{examSession.wallet_address.slice(-4)}
-                </span>
-                <Shield className="h-4 w-4 text-green-400" />
-              </div>
-            )}
-            
-            {/* Participant Count */}
-            <div className="flex items-center space-x-2">
-              <Users className="h-5 w-5 text-blue-400" />
-              <span>{examStats.total_participants || 0} participants</span>
-              {examStats.blockchain_participants > 0 && (
-                <span className="text-green-400 text-sm">
-                  ({examStats.blockchain_participants} 🔗)
-                </span>
-              )}
-            </div>
-          </div>
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-2xl font-bold">OpenLearnX Coding Exams</h1>
+          <p className="text-gray-400">Join a coding exam with your exam code</p>
         </div>
       </div>
 
-      <div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Problem & Code Editor */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Problem Description */}
-          <div className="bg-gray-800 rounded-lg p-6">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-bold">{problem.title}</h2>
-              {examSession.blockchain_verified && (
-                <div className="flex items-center space-x-1 text-green-400 text-sm">
-                  <Shield className="h-4 w-4" />
-                  <span>Blockchain Verified</span>
-                </div>
-              )}
-            </div>
-            
-            <div className="prose prose-invert">
-              <p className="mb-4 text-gray-300">{problem.description}</p>
-              
-              <h4 className="text-lg font-semibold mb-2">Examples:</h4>
-              {problem.examples.map((example, index) => (
-                <div key={index} className="bg-gray-900 p-4 rounded mb-3">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <span className="text-blue-400">Input:</span>
-                      <code className="ml-2 text-green-400">"{example.input}"</code>
-                    </div>
-                    <div>
-                      <span className="text-blue-400">Output:</span>
-                      <code className="ml-2 text-green-400">"{example.expected_output}"</code>
-                    </div>
-                  </div>
-                  {example.description && (
-                    <div className="mt-2 text-gray-400 text-sm">{example.description}</div>
-                  )}
-                </div>
-              ))}
-
-              <h4 className="text-lg font-semibold mb-2">Constraints:</h4>
-              <ul className="list-disc list-inside mb-4 text-gray-300">
-                {problem.constraints.map((constraint, index) => (
-                  <li key={index}>{constraint}</li>
-                ))}
-              </ul>
-            </div>
+      {/* Main Content */}
+      <div className="max-w-4xl mx-auto p-8">
+        {/* Join Exam Section */}
+        <div className="bg-gray-800 rounded-lg p-8 mb-8">
+          <div className="text-center mb-8">
+            <Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
+            <h2 className="text-3xl font-bold mb-2">Join Coding Exam</h2>
+            <p className="text-gray-400">Enter your 6-character exam code to start</p>
           </div>
 
-          {/* Code Editor */}
-          <div className="bg-gray-800 rounded-lg p-6">
-            <div className="flex justify-between items-center mb-4">
-              <h3 className="text-lg font-bold">Your Solution</h3>
-              
-              {/* Language Selector */}
-              <div className="flex items-center space-x-2">
-                <Code className="h-4 w-4 text-gray-400" />
-                <select
-                  value={selectedLanguage}
-                  onChange={(e) => handleLanguageChange(e.target.value)}
-                  disabled={hasSubmitted}
-                  className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
-                >
-                  {problem.languages.map(lang => (
-                    <option key={lang} value={lang}>
-                      {languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
-                    </option>
-                  ))}
-                </select>
-              </div>
+          <div className="max-w-md mx-auto">
+            <div className="flex space-x-4">
+              <input
+                type="text"
+                value={examCode}
+                onChange={(e) => setExamCode(e.target.value.toUpperCase())}
+                onKeyPress={handleKeyPress}
+                placeholder="Enter exam code (e.g. ABC123)"
+                className="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-lg text-center text-xl font-mono tracking-widest"
+                maxLength={6}
+              />
+              <button
+                onClick={joinExam}
+                className="bg-blue-600 hover:bg-blue-700 px-6 py-4 rounded-lg flex items-center space-x-2"
+              >
+                <span>Join</span>
+                <ArrowRight className="h-5 w-5" />
+              </button>
             </div>
-            
-            <textarea
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              disabled={hasSubmitted}
-              spellCheck={false}
-              placeholder={`Write your ${selectedLanguage} solution here...`}
-            />
-            
-            <div className="flex justify-between items-center mt-4">
-              <div className="text-sm text-gray-400">
-                Function: <code className="text-blue-400">{problem.function_name}</code>
-                {hasSubmitted && (
-                  <span className="ml-4 text-green-400">
-                    ✅ Solution submitted
-                    {examSession.blockchain_verified && (
-                      <span className="ml-2">🔗 Blockchain verified</span>
-                    )}
-                  </span>
-                )}
-              </div>
-              
-              <div className="flex space-x-3">
-                <button
-                  onClick={runCode}
-                  disabled={isRunning || hasSubmitted || !code.trim()}
-                  className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
-                >
-                  <Play className="h-4 w-4" />
-                  <span>{isRunning ? 'Running...' : 'Test Code'}</span>
-                </button>
-                
-                <button
-                  onClick={submitSolution}
-                  disabled={isSubmitting || hasSubmitted || !code.trim()}
-                  className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
-                >
-                  <Send className="h-4 w-4" />
-                  <span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit Solution'}</span>
-                </button>
-              </div>
-            </div>
-
-            {/* Output & Test Results */}
-            {(output || testResults.length > 0) && (
-              <div className="mt-6 bg-gray-900 p-4 rounded">
-                {output && (
-                  <div className="mb-4">
-                    <h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
-                    <pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
-                  </div>
-                )}
-                
-                {testResults.length > 0 && (
-                  <div>
-                    <h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
-                    <div className="space-y-2">
-                      {testResults.map((result, index) => (
-                        <div
-                          key={index}
-                          className={`p-3 rounded text-sm ${
-                            result.passed ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
-                          }`}
-                        >
-                          <div className="flex justify-between items-start">
-                            <div>
-                              <span className="font-medium">
-                                Test {index + 1}: {result.passed ? '✅ Passed' : '❌ Failed'}
-                              </span>
-                              {result.input && (
-                                <div className="text-xs mt-1 opacity-75">
-                                  Input: "{result.input}"
-                                </div>
-                              )}
-                            </div>
-                            {!result.passed && result.error && (
-                              <span className="text-xs text-right">{result.error}</span>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
           </div>
         </div>
 
-        {/* Leaderboard */}
+        {/* Info Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Users className="h-12 w-12 text-green-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Multi-User</h3>
+            <p className="text-gray-400">Compete with other students in real-time coding challenges</p>
+          </div>
+
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Clock className="h-12 w-12 text-yellow-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Timed Exams</h3>
+            <p className="text-gray-400">Complete coding problems within the allocated time limit</p>
+          </div>
+
+          <div className="bg-gray-800 rounded-lg p-6 text-center">
+            <Code className="h-12 w-12 text-purple-400 mx-auto mb-4" />
+            <h3 className="text-xl font-bold mb-2">Multi-Language</h3>
+            <p className="text-gray-400">Code in Python, Java, JavaScript, C++, and more</p>
+          </div>
+        </div>
+
+        {/* Instructions */}
         <div className="bg-gray-800 rounded-lg p-6">
-          <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center space-x-2">
-              <Trophy className="h-6 w-6 text-yellow-400" />
-              <h3 className="text-xl font-bold">Live Leaderboard</h3>
+          <h3 className="text-xl font-bold mb-4">How to Join an Exam</h3>
+          <div className="space-y-3 text-gray-300">
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">1</span>
+              <p>Get your 6-character exam code from your instructor</p>
             </div>
-            
-            <button
-              onClick={() => fetchLeaderboard(examSession.exam_code)}
-              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
-              title="Refresh"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </button>
-          </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
-              <div className="text-xs text-gray-400">Submitted</div>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">2</span>
+              <p>Enter the exam code in the field above and click "Join"</p>
             </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
-              <div className="text-xs text-gray-400">Avg Score</div>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">3</span>
+              <p>Wait for the instructor to start the exam</p>
             </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-purple-400">{examStats.highest_score || 0}%</div>
-              <div className="text-xs text-gray-400">Top Score</div>
-            </div>
-            <div className="bg-gray-900 p-3 rounded">
-              <div className="text-2xl font-bold text-orange-400">{examStats.waiting_submissions || 0}</div>
-              <div className="text-xs text-gray-400">Working</div>
+            <div className="flex items-start space-x-3">
+              <span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">4</span>
+              <p>Code your solution and submit before time runs out</p>
             </div>
           </div>
-
-          {/* Blockchain Stats */}
-          {examStats.blockchain_participants > 0 && (
-            <div className="bg-green-900 p-3 rounded mb-6">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-lg font-bold text-green-200">{examStats.blockchain_participants}</div>
-                  <div className="text-xs text-green-300">Blockchain Verified</div>
-                </div>
-                <Shield className="h-6 w-6 text-green-400" />
-              </div>
-            </div>
-          )}
-
-          {/* Leaderboard */}
-          <div className="space-y-2">
-            <h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
-            {leaderboard.length > 0 ? (
-              leaderboard.map((participant) => (
-                <div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
-                  <div className="flex justify-between items-center">
-                    <div className="flex items-center space-x-3">
-                      <span className="font-bold text-lg">#{participant.rank}</span>
-                      <div>
-                        <div className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
-                          {participant.name}
-                          {participant.name === examSession.student_name && ' (You)'}
-                          {participant.blockchain_verified && (
-                            <Shield className="inline h-3 w-3 ml-1 text-green-400" />
-                          )}
-                        </div>
-                        <div className="text-xs opacity-75 flex items-center space-x-2">
-                          {participant.language && (
-                            <span>
-                              {languageIcons[participant.language]} {participant.language}
-                            </span>
-                          )}
-                          {participant.wallet_short && (
-                            <span className="font-mono text-green-300">
-                              {participant.wallet_short}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    <span className="font-bold text-lg">{participant.score}%</span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-center text-gray-400 py-4">
-                No submissions yet
-              </div>
-            )}
-          </div>
-
-          {/* Waiting Participants */}
-          {waitingParticipants.length > 0 && (
-            <div className="mt-6">
-              <h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
-              <div className="space-y-1">
-                {waitingParticipants.map((participant) => (
-                  <div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
-                    <span>
-                      {participant.name}
-                      {participant.name === examSession.student_name && ' (You)'}
-                    </span>
-                    {participant.blockchain_verified && (
-                      <Shield className="h-3 w-3 text-green-400" />
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>