Add 3 roles, settings for marathons

frontend/src/pages/LobbyPage.tsx

@@ -1,10 +1,13 @@
 import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate, Link } from 'react-router-dom'
 import { marathonsApi, gamesApi } from '@/api'
 import type { Marathon, Game, Challenge, ChallengePreview } from '@/types'
 import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
-import { Plus, Trash2, Sparkles, Play, Loader2, Gamepad2, X, Save, Eye, ChevronDown, ChevronUp, Edit2, Check } from 'lucide-react'
+import {
+  Plus, Trash2, Sparkles, Play, Loader2, Gamepad2, X, Save, Eye,
+  ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft
+} from 'lucide-react'
 
 export function LobbyPage() {
   const { id } = useParams<{ id: string }>()
@@ -13,6 +16,7 @@ export function LobbyPage() {
 
   const [marathon, setMarathon] = useState<Marathon | null>(null)
   const [games, setGames] = useState<Game[]>([])
+  const [pendingGames, setPendingGames] = useState<Game[]>([])
   const [isLoading, setIsLoading] = useState(true)
 
   // Add game form
@@ -22,6 +26,9 @@ export function LobbyPage() {
   const [gameGenre, setGameGenre] = useState('')
   const [isAddingGame, setIsAddingGame] = useState(false)
 
+  // Moderation
+  const [moderatingGameId, setModeratingGameId] = useState<number | null>(null)
+
   // Generate challenges
   const [isGenerating, setIsGenerating] = useState(false)
   const [generateMessage, setGenerateMessage] = useState<string | null>(null)
@@ -44,12 +51,23 @@ export function LobbyPage() {
   const loadData = async () => {
     if (!id) return
     try {
-      const [marathonData, gamesData] = await Promise.all([
-        marathonsApi.get(parseInt(id)),
-        gamesApi.list(parseInt(id)),
-      ])
+      const marathonData = await marathonsApi.get(parseInt(id))
       setMarathon(marathonData)
+
+      // Load games - organizers see all, participants see approved + own
+      const gamesData = await gamesApi.list(parseInt(id))
       setGames(gamesData)
+
+      // If organizer, load pending games separately
+      if (marathonData.my_participation?.role === 'organizer' || user?.role === 'admin') {
+        try {
+          const pending = await gamesApi.listPending(parseInt(id))
+          setPendingGames(pending)
+        } catch {
+          // If not authorized, just ignore
+          setPendingGames([])
+        }
+      }
     } catch (error) {
       console.error('Failed to load data:', error)
       navigate('/marathons')
@@ -91,6 +109,32 @@ export function LobbyPage() {
     }
   }
 
+  const handleApproveGame = async (gameId: number) => {
+    setModeratingGameId(gameId)
+    try {
+      await gamesApi.approve(gameId)
+      await loadData()
+    } catch (error) {
+      console.error('Failed to approve game:', error)
+    } finally {
+      setModeratingGameId(null)
+    }
+  }
+
+  const handleRejectGame = async (gameId: number) => {
+    if (!confirm('Отклонить эту игру?')) return
+
+    setModeratingGameId(gameId)
+    try {
+      await gamesApi.reject(gameId)
+      await loadData()
+    } catch (error) {
+      console.error('Failed to reject game:', error)
+    } finally {
+      setModeratingGameId(null)
+    }
+  }
+
   const handleToggleGameChallenges = async (gameId: number) => {
     if (expandedGameId === gameId) {
       setExpandedGameId(null)
@@ -205,57 +249,248 @@ export function LobbyPage() {
     )
   }
 
-  const isOrganizer = user?.id === marathon.organizer.id
-  const totalChallenges = games.reduce((sum, g) => sum + g.challenges_count, 0)
+  const isOrganizer = marathon.my_participation?.role === 'organizer' || user?.role === 'admin'
+  const approvedGames = games.filter(g => g.status === 'approved')
+  const totalChallenges = approvedGames.reduce((sum, g) => sum + g.challenges_count, 0)
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return (
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-green-900/50 text-green-400">
+            <CheckCircle className="w-3 h-3" />
+            Одобрено
+          </span>
+        )
+      case 'pending':
+        return (
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-yellow-900/50 text-yellow-400">
+            <Clock className="w-3 h-3" />
+            На модерации
+          </span>
+        )
+      case 'rejected':
+        return (
+          <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-red-900/50 text-red-400">
+            <XCircle className="w-3 h-3" />
+            Отклонено
+          </span>
+        )
+      default:
+        return null
+    }
+  }
+
+  const renderGameCard = (game: Game, showModeration = false) => (
+    <div key={game.id} className="bg-gray-900 rounded-lg overflow-hidden">
+      {/* Game header */}
+      <div
+        className={`flex items-center justify-between p-4 ${
+          game.challenges_count > 0 ? 'cursor-pointer hover:bg-gray-800/50' : ''
+        }`}
+        onClick={() => game.challenges_count > 0 && handleToggleGameChallenges(game.id)}
+      >
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {game.challenges_count > 0 && (
+            <span className="text-gray-400 shrink-0">
+              {expandedGameId === game.id ? (
+                <ChevronUp className="w-4 h-4" />
+              ) : (
+                <ChevronDown className="w-4 h-4" />
+              )}
+            </span>
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h4 className="font-medium text-white">{game.title}</h4>
+              {getStatusBadge(game.status)}
+            </div>
+            <div className="text-sm text-gray-400 flex items-center gap-3 flex-wrap">
+              {game.genre && <span>{game.genre}</span>}
+              {game.status === 'approved' && <span>{game.challenges_count} заданий</span>}
+              {game.proposed_by && (
+                <span className="flex items-center gap-1 text-gray-500">
+                  <User className="w-3 h-3" />
+                  {game.proposed_by.nickname}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 shrink-0" onClick={(e) => e.stopPropagation()}>
+          {showModeration && game.status === 'pending' && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleApproveGame(game.id)}
+                disabled={moderatingGameId === game.id}
+                className="text-green-400 hover:text-green-300"
+              >
+                {moderatingGameId === game.id ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <CheckCircle className="w-4 h-4" />
+                )}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleRejectGame(game.id)}
+                disabled={moderatingGameId === game.id}
+                className="text-red-400 hover:text-red-300"
+              >
+                <XCircle className="w-4 h-4" />
+              </Button>
+            </>
+          )}
+          {(isOrganizer || game.proposed_by?.id === user?.id) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleDeleteGame(game.id)}
+              className="text-red-400 hover:text-red-300"
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Expanded challenges list */}
+      {expandedGameId === game.id && (
+        <div className="border-t border-gray-800 p-4 space-y-2">
+          {loadingChallenges === game.id ? (
+            <div className="flex justify-center py-4">
+              <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+            </div>
+          ) : gameChallenges[game.id]?.length > 0 ? (
+            gameChallenges[game.id].map((challenge) => (
+              <div
+                key={challenge.id}
+                className="flex items-start justify-between gap-3 p-3 bg-gray-800 rounded-lg"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className={`text-xs px-2 py-0.5 rounded ${
+                      challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
+                      challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
+                      'bg-red-900/50 text-red-400'
+                    }`}>
+                      {challenge.difficulty === 'easy' ? 'Легко' :
+                       challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
+                    </span>
+                    <span className="text-xs text-primary-400 font-medium">
+                      +{challenge.points}
+                    </span>
+                    {challenge.is_generated && (
+                      <span className="text-xs text-gray-500">
+                        <Sparkles className="w-3 h-3 inline" /> ИИ
+                      </span>
+                    )}
+                  </div>
+                  <h5 className="text-sm font-medium text-white">{challenge.title}</h5>
+                  <p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
+                </div>
+                {isOrganizer && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDeleteChallenge(challenge.id, game.id)}
+                    className="text-red-400 hover:text-red-300 shrink-0"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </Button>
+                )}
+              </div>
+            ))
+          ) : (
+            <p className="text-center text-gray-500 py-2 text-sm">
+              Нет заданий
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
 
   return (
     <div className="max-w-4xl mx-auto">
+      {/* Back button */}
+      <Link to={`/marathons/${id}`} className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
+        <ArrowLeft className="w-4 h-4" />
+        К марафону
+      </Link>
+
       <div className="flex justify-between items-center mb-8">
         <div>
           <h1 className="text-2xl font-bold text-white">{marathon.title}</h1>
-          <p className="text-gray-400">Настройка - Добавьте игры и сгенерируйте задания</p>
+          <p className="text-gray-400">
+            {isOrganizer
+              ? 'Настройка - Добавьте игры и сгенерируйте задания'
+              : 'Предложите игры для марафона'}
+          </p>
         </div>
 
         {isOrganizer && (
-          <Button onClick={handleStartMarathon} isLoading={isStarting} disabled={games.length === 0}>
+          <Button onClick={handleStartMarathon} isLoading={isStarting} disabled={approvedGames.length === 0}>
             <Play className="w-4 h-4 mr-2" />
             Запустить марафон
           </Button>
         )}
       </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-2 gap-4 mb-8">
-        <Card>
-          <CardContent className="text-center py-4">
-            <div className="text-2xl font-bold text-white">{games.length}</div>
-            <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
-              <Gamepad2 className="w-4 h-4" />
-              Игр
-            </div>
-          </CardContent>
-        </Card>
+      {/* Stats - только для организаторов */}
+      {isOrganizer && (
+        <div className="grid grid-cols-2 gap-4 mb-8">
+          <Card>
+            <CardContent className="text-center py-4">
+              <div className="text-2xl font-bold text-white">{approvedGames.length}</div>
+              <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+                <Gamepad2 className="w-4 h-4" />
+                Игр одобрено
+              </div>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardContent className="text-center py-4">
-            <div className="text-2xl font-bold text-white">{totalChallenges}</div>
-            <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
-              <Sparkles className="w-4 h-4" />
-              Заданий
+          <Card>
+            <CardContent className="text-center py-4">
+              <div className="text-2xl font-bold text-white">{totalChallenges}</div>
+              <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+                <Sparkles className="w-4 h-4" />
+                Заданий
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Pending games for moderation (organizers only) */}
+      {isOrganizer && pendingGames.length > 0 && (
+        <Card className="mb-8 border-yellow-900/50">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-yellow-400">
+              <Clock className="w-5 h-5" />
+              На модерации ({pendingGames.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {pendingGames.map((game) => renderGameCard(game, true))}
             </div>
           </CardContent>
         </Card>
-      </div>
+      )}
 
       {/* Generate challenges button */}
-      {games.length > 0 && !previewChallenges && (
+      {isOrganizer && approvedGames.length > 0 && !previewChallenges && (
         <Card className="mb-8">
           <CardContent>
             <div className="flex items-center justify-between">
               <div>
                 <h3 className="font-medium text-white">Генерация заданий</h3>
                 <p className="text-sm text-gray-400">
-                  Используйте ИИ для генерации заданий для всех игр без заданий
+                  Используйте ИИ для генерации заданий для одобренных игр без заданий
                 </p>
               </div>
               <Button onClick={handleGenerateChallenges} isLoading={isGenerating} variant="secondary">
@@ -425,10 +660,13 @@ export function LobbyPage() {
       <Card>
         <CardHeader className="flex flex-row items-center justify-between">
           <CardTitle>Игры</CardTitle>
-          <Button size="sm" onClick={() => setShowAddGame(!showAddGame)}>
-            <Plus className="w-4 h-4 mr-1" />
-            Добавить игру
-          </Button>
+          {/* Показываем кнопку если: all_participants ИЛИ (organizer_only И isOrganizer) */}
+          {(marathon.game_proposal_mode === 'all_participants' || isOrganizer) && (
+            <Button size="sm" onClick={() => setShowAddGame(!showAddGame)}>
+              <Plus className="w-4 h-4 mr-1" />
+              {isOrganizer ? 'Добавить игру' : 'Предложить игру'}
+            </Button>
+          )}
         </CardHeader>
         <CardContent>
           {/* Add game form */}
@@ -451,116 +689,38 @@ export function LobbyPage() {
               />
               <div className="flex gap-2">
                 <Button onClick={handleAddGame} isLoading={isAddingGame} disabled={!gameTitle || !gameUrl}>
-                  Добавить
+                  {isOrganizer ? 'Добавить' : 'Предложить'}
                 </Button>
                 <Button variant="ghost" onClick={() => setShowAddGame(false)}>
                   Отмена
                 </Button>
               </div>
+              {!isOrganizer && (
+                <p className="text-xs text-gray-500">
+                  Ваша игра будет отправлена на модерацию организаторам
+                </p>
+              )}
             </div>
           )}
 
           {/* Games */}
-          {games.length === 0 ? (
-            <p className="text-center text-gray-400 py-8">
-              Пока нет игр. Добавьте игры, чтобы начать!
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {games.map((game) => (
-                <div key={game.id} className="bg-gray-900 rounded-lg overflow-hidden">
-                  {/* Game header */}
-                  <div
-                    className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-800/50"
-                    onClick={() => game.challenges_count > 0 && handleToggleGameChallenges(game.id)}
-                  >
-                    <div className="flex items-center gap-3">
-                      {game.challenges_count > 0 && (
-                        <span className="text-gray-400">
-                          {expandedGameId === game.id ? (
-                            <ChevronUp className="w-4 h-4" />
-                          ) : (
-                            <ChevronDown className="w-4 h-4" />
-                          )}
-                        </span>
-                      )}
-                      <div>
-                        <h4 className="font-medium text-white">{game.title}</h4>
-                        <div className="text-sm text-gray-400">
-                          {game.genre && <span className="mr-3">{game.genre}</span>}
-                          <span>{game.challenges_count} заданий</span>
-                        </div>
-                      </div>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleDeleteGame(game.id)
-                      }}
-                      className="text-red-400 hover:text-red-300"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
-                  </div>
+          {(() => {
+            // Организаторы: показываем только одобренные (pending в секции модерации)
+            // Участники: показываем одобренные + свои pending
+            const visibleGames = isOrganizer
+              ? games.filter(g => g.status !== 'pending')
+              : games.filter(g => g.status === 'approved' || (g.status === 'pending' && g.proposed_by?.id === user?.id))
 
-                  {/* Expanded challenges list */}
-                  {expandedGameId === game.id && (
-                    <div className="border-t border-gray-800 p-4 space-y-2">
-                      {loadingChallenges === game.id ? (
-                        <div className="flex justify-center py-4">
-                          <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
-                        </div>
-                      ) : gameChallenges[game.id]?.length > 0 ? (
-                        gameChallenges[game.id].map((challenge) => (
-                          <div
-                            key={challenge.id}
-                            className="flex items-start justify-between gap-3 p-3 bg-gray-800 rounded-lg"
-                          >
-                            <div className="flex-1 min-w-0">
-                              <div className="flex items-center gap-2 mb-1">
-                                <span className={`text-xs px-2 py-0.5 rounded ${
-                                  challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
-                                  challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
-                                  'bg-red-900/50 text-red-400'
-                                }`}>
-                                  {challenge.difficulty === 'easy' ? 'Легко' :
-                                   challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
-                                </span>
-                                <span className="text-xs text-primary-400 font-medium">
-                                  +{challenge.points}
-                                </span>
-                                {challenge.is_generated && (
-                                  <span className="text-xs text-gray-500">
-                                    <Sparkles className="w-3 h-3 inline" /> ИИ
-                                  </span>
-                                )}
-                              </div>
-                              <h5 className="text-sm font-medium text-white">{challenge.title}</h5>
-                              <p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
-                            </div>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleDeleteChallenge(challenge.id, game.id)}
-                              className="text-red-400 hover:text-red-300 shrink-0"
-                            >
-                              <Trash2 className="w-3 h-3" />
-                            </Button>
-                          </div>
-                        ))
-                      ) : (
-                        <p className="text-center text-gray-500 py-2 text-sm">
-                          Нет заданий
-                        </p>
-                      )}
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
+            return visibleGames.length === 0 ? (
+              <p className="text-center text-gray-400 py-8">
+                {isOrganizer ? 'Пока нет игр. Добавьте игры, чтобы начать!' : 'Пока нет одобренных игр. Предложите свою!'}
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {visibleGames.map((game) => renderGameCard(game, false))}
+              </div>
+            )
+          })()}
         </CardContent>
       </Card>
     </div>