Add 3 roles, settings for marathons

frontend/src/pages/MarathonPage.tsx

@@ -4,7 +4,7 @@ import { marathonsApi } from '@/api'
 import type { Marathon } from '@/types'
 import { Button, Card, CardContent } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
-import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2 } from 'lucide-react'
+import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft } from 'lucide-react'
 import { format } from 'date-fns'
 
 export function MarathonPage() {
@@ -14,6 +14,8 @@ export function MarathonPage() {
   const [marathon, setMarathon] = useState<Marathon | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [copied, setCopied] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isJoining, setIsJoining] = useState(false)
 
   useEffect(() => {
     loadMarathon()
@@ -40,6 +42,36 @@ export function MarathonPage() {
     }
   }
 
+  const handleDelete = async () => {
+    if (!marathon || !confirm('Вы уверены, что хотите удалить этот марафон? Это действие нельзя отменить.')) return
+
+    setIsDeleting(true)
+    try {
+      await marathonsApi.delete(marathon.id)
+      navigate('/marathons')
+    } catch (error) {
+      console.error('Failed to delete marathon:', error)
+      alert('Не удалось удалить марафон')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handleJoinPublic = async () => {
+    if (!marathon) return
+
+    setIsJoining(true)
+    try {
+      const updated = await marathonsApi.joinPublic(marathon.id)
+      setMarathon(updated)
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } }
+      alert(error.response?.data?.detail || 'Не удалось присоединиться')
+    } finally {
+      setIsJoining(false)
+    }
+  }
+
   if (isLoading || !marathon) {
     return (
       <div className="flex justify-center py-12">
@@ -48,21 +80,51 @@ export function MarathonPage() {
     )
   }
 
-  const isOrganizer = user?.id === marathon.organizer.id
+  const isOrganizer = marathon.my_participation?.role === 'organizer' || user?.role === 'admin'
   const isParticipant = !!marathon.my_participation
+  const isCreator = marathon.creator.id === user?.id
+  const canDelete = isCreator || user?.role === 'admin'
 
   return (
     <div className="max-w-4xl mx-auto">
+      {/* Back button */}
+      <Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
+        <ArrowLeft className="w-4 h-4" />
+        К списку марафонов
+      </Link>
+
       {/* Header */}
       <div className="flex justify-between items-start mb-8">
         <div>
-          <h1 className="text-3xl font-bold text-white mb-2">{marathon.title}</h1>
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-3xl font-bold text-white">{marathon.title}</h1>
+            <span className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${
+              marathon.is_public
+                ? 'bg-green-900/50 text-green-400'
+                : 'bg-gray-700 text-gray-300'
+            }`}>
+              {marathon.is_public ? (
+                <><Globe className="w-3 h-3" /> Открытый</>
+              ) : (
+                <><Lock className="w-3 h-3" /> Закрытый</>
+              )}
+            </span>
+          </div>
           {marathon.description && (
             <p className="text-gray-400">{marathon.description}</p>
           )}
         </div>
 
         <div className="flex gap-2">
+          {/* Кнопка присоединиться для открытых марафонов */}
+          {marathon.is_public && !isParticipant && marathon.status !== 'finished' && (
+            <Button onClick={handleJoinPublic} isLoading={isJoining}>
+              <UserPlus className="w-4 h-4 mr-2" />
+              Присоединиться
+            </Button>
+          )}
+
+          {/* Настройка для организаторов */}
           {marathon.status === 'preparing' && isOrganizer && (
             <Link to={`/marathons/${id}/lobby`}>
               <Button variant="secondary">
@@ -72,6 +134,16 @@ export function MarathonPage() {
             </Link>
           )}
 
+          {/* Предложить игру для участников (не организаторов) если разрешено */}
+          {marathon.status === 'preparing' && isParticipant && !isOrganizer && marathon.game_proposal_mode === 'all_participants' && (
+            <Link to={`/marathons/${id}/lobby`}>
+              <Button variant="secondary">
+                <Gamepad2 className="w-4 h-4 mr-2" />
+                Предложить игру
+              </Button>
+            </Link>
+          )}
+
           {marathon.status === 'active' && isParticipant && (
             <Link to={`/marathons/${id}/play`}>
               <Button>
@@ -87,11 +159,22 @@ export function MarathonPage() {
               Рейтинг
             </Button>
           </Link>
+
+          {canDelete && (
+            <Button
+              variant="ghost"
+              onClick={handleDelete}
+              isLoading={isDeleting}
+              className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          )}
         </div>
       </div>
 
       {/* Stats */}
-      <div className="grid md:grid-cols-4 gap-4 mb-8">
+      <div className="grid md:grid-cols-5 gap-4 mb-8">
         <Card>
           <CardContent className="text-center py-4">
             <div className="text-2xl font-bold text-white">{marathon.participants_count}</div>
@@ -116,7 +199,19 @@ export function MarathonPage() {
             </div>
             <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
               <Calendar className="w-4 h-4" />
-              Дата начала
+              Начало
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="text-center py-4">
+            <div className="text-2xl font-bold text-white">
+              {marathon.end_date ? format(new Date(marathon.end_date), 'd MMM') : '-'}
+            </div>
+            <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
+              <CalendarCheck className="w-4 h-4" />
+              Конец
             </div>
           </CardContent>
         </Card>