game-marathon/frontend/src/pages/MarathonPage.tsx

import { useState, useEffect, useRef } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { marathonsApi, eventsApi, challengesApi } from '@/api'
import type { Marathon, ActiveEvent, Challenge } from '@/types'
import { Button, Card, CardContent } from '@/components/ui'
import { useAuthStore } from '@/store/auth'
import { useToast } from '@/store/toast'
import { useConfirm } from '@/store/confirm'
import { EventBanner } from '@/components/EventBanner'
import { EventControl } from '@/components/EventControl'
import { ActivityFeed, type ActivityFeedRef } from '@/components/ActivityFeed'
import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag } from 'lucide-react'
import { format } from 'date-fns'

export function MarathonPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const user = useAuthStore((state) => state.user)
  const toast = useToast()
  const confirm = useConfirm()
  const [marathon, setMarathon] = useState<Marathon | null>(null)
  const [activeEvent, setActiveEvent] = useState<ActiveEvent | null>(null)
  const [challenges, setChallenges] = useState<Challenge[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [copied, setCopied] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isJoining, setIsJoining] = useState(false)
  const [isFinishing, setIsFinishing] = useState(false)
  const [showEventControl, setShowEventControl] = useState(false)
  const activityFeedRef = useRef<ActivityFeedRef>(null)

  useEffect(() => {
    loadMarathon()
  }, [id])

  const loadMarathon = async () => {
    if (!id) return
    try {
      const data = await marathonsApi.get(parseInt(id))
      setMarathon(data)

      // Load event data if marathon is active
      if (data.status === 'active' && data.my_participation) {
        const eventData = await eventsApi.getActive(parseInt(id))
        setActiveEvent(eventData)

        // Load challenges for event control if organizer
        if (data.my_participation.role === 'organizer') {
          try {
            const challengesData = await challengesApi.list(parseInt(id))
            setChallenges(challengesData)
          } catch {
            // Ignore if no challenges
          }
        }
      }
    } catch (error) {
      console.error('Failed to load marathon:', error)
      navigate('/marathons')
    } finally {
      setIsLoading(false)
    }
  }

  const refreshEvent = async () => {
    if (!id) return
    try {
      const eventData = await eventsApi.getActive(parseInt(id))
      setActiveEvent(eventData)
      // Refresh activity feed when event changes
      activityFeedRef.current?.refresh()
    } catch (error) {
      console.error('Failed to refresh event:', error)
    }
  }

  const getInviteLink = () => {
    if (!marathon) return ''
    return `${window.location.origin}/invite/${marathon.invite_code}`
  }

  const copyInviteLink = () => {
    if (marathon) {
      navigator.clipboard.writeText(getInviteLink())
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  const handleDelete = async () => {
    if (!marathon) return

    const confirmed = await confirm({
      title: 'Удалить марафон?',
      message: 'Все данные марафона будут удалены безвозвратно.',
      confirmText: 'Удалить',
      cancelText: 'Отмена',
      variant: 'danger',
    })
    if (!confirmed) return

    setIsDeleting(true)
    try {
      await marathonsApi.delete(marathon.id)
      navigate('/marathons')
    } catch (error) {
      console.error('Failed to delete marathon:', error)
      toast.error('Не удалось удалить марафон')
    } 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 } } }
      toast.error(error.response?.data?.detail || 'Не удалось присоединиться')
    } finally {
      setIsJoining(false)
    }
  }

  const handleFinish = async () => {
    if (!marathon) return

    const confirmed = await confirm({
      title: 'Завершить марафон?',
      message: 'Марафон будет завершён досрочно. Участники больше не смогут выполнять задания.',
      confirmText: 'Завершить',
      cancelText: 'Отмена',
      variant: 'warning',
    })
    if (!confirmed) return

    setIsFinishing(true)
    try {
      const updated = await marathonsApi.finish(marathon.id)
      setMarathon(updated)
      toast.success('Марафон завершён')
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось завершить марафон')
    } finally {
      setIsFinishing(false)
    }
  }

  if (isLoading || !marathon) {
    return (
      <div className="flex justify-center py-12">
        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
      </div>
    )
  }

  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-7xl 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>

      <div className="flex flex-col lg:flex-row gap-6">
        {/* Main content */}
        <div className="flex-1 min-w-0">
          {/* Header */}
          <div className="flex justify-between items-start mb-8">
            <div>
              <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 flex-wrap justify-end">
              {/* Кнопка присоединиться для открытых марафонов */}
              {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">
                    <Settings className="w-4 h-4 mr-2" />
                    Настройка
                  </Button>
                </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>
                    <Play className="w-4 h-4 mr-2" />
                    Играть
                  </Button>
                </Link>
              )}

              <Link to={`/marathons/${id}/leaderboard`}>
                <Button variant="secondary">
                  <Trophy className="w-4 h-4 mr-2" />
                  Рейтинг
                </Button>
              </Link>

              {marathon.status === 'active' && isOrganizer && (
                <Button
                  variant="secondary"
                  onClick={handleFinish}
                  isLoading={isFinishing}
                  className="text-yellow-400 hover:text-yellow-300 hover:bg-yellow-900/20"
                >
                  <Flag className="w-4 h-4 mr-2" />
                  Завершить
                </Button>
              )}

              {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 grid-cols-2 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>
                <div className="text-sm text-gray-400 flex items-center justify-center gap-1">
                  <Users className="w-4 h-4" />
                  Участников
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="text-center py-4">
                <div className="text-2xl font-bold text-white">{marathon.games_count}</div>
                <div className="text-sm text-gray-400">Игр</div>
              </CardContent>
            </Card>

            <Card>
              <CardContent className="text-center py-4">
                <div className="text-2xl font-bold text-white">
                  {marathon.start_date ? format(new Date(marathon.start_date), 'd MMM') : '-'}
                </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>

            <Card>
              <CardContent className="text-center py-4">
                <div className={`text-2xl font-bold ${
                  marathon.status === 'active' ? 'text-green-500' :
                  marathon.status === 'preparing' ? 'text-yellow-500' : 'text-gray-400'
                }`}>
                  {marathon.status === 'active' ? 'Активен' : marathon.status === 'preparing' ? 'Подготовка' : 'Завершён'}
                </div>
                <div className="text-sm text-gray-400">Статус</div>
              </CardContent>
            </Card>
          </div>

          {/* Active event banner */}
          {marathon.status === 'active' && activeEvent?.event && (
            <div className="mb-8">
              <EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
            </div>
          )}

          {/* Event control for organizers */}
          {marathon.status === 'active' && isOrganizer && (
            <Card className="mb-8">
              <CardContent>
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-medium text-white flex items-center gap-2">
                    <Zap className="w-5 h-5 text-yellow-500" />
                    Управление событиями
                  </h3>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setShowEventControl(!showEventControl)}
                  >
                    {showEventControl ? 'Скрыть' : 'Показать'}
                  </Button>
                </div>
                {showEventControl && activeEvent && (
                  <EventControl
                    marathonId={marathon.id}
                    activeEvent={activeEvent}
                    challenges={challenges}
                    onEventChange={refreshEvent}
                  />
                )}
              </CardContent>
            </Card>
          )}

          {/* Invite link */}
          {marathon.status !== 'finished' && (
            <Card className="mb-8">
              <CardContent>
                <h3 className="font-medium text-white mb-3">Ссылка для приглашения</h3>
                <div className="flex items-center gap-3">
                  <code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono text-sm overflow-hidden text-ellipsis">
                    {getInviteLink()}
                  </code>
                  <Button variant="secondary" onClick={copyInviteLink}>
                    {copied ? (
                      <>
                        <Check className="w-4 h-4 mr-2" />
                        Скопировано!
                      </>
                    ) : (
                      <>
                        <Copy className="w-4 h-4 mr-2" />
                        Копировать
                      </>
                    )}
                  </Button>
                </div>
                <p className="text-sm text-gray-500 mt-2">
                  Поделитесь этой ссылкой с друзьями, чтобы они могли присоединиться к марафону
                </p>
              </CardContent>
            </Card>
          )}

          {/* My stats */}
          {marathon.my_participation && (
            <Card>
              <CardContent>
                <h3 className="font-medium text-white mb-4">Ваша статистика</h3>
                <div className="grid grid-cols-3 gap-4 text-center">
                  <div>
                    <div className="text-2xl font-bold text-primary-500">
                      {marathon.my_participation.total_points}
                    </div>
                    <div className="text-sm text-gray-400">Очков</div>
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-yellow-500">
                      {marathon.my_participation.current_streak}
                    </div>
                    <div className="text-sm text-gray-400">Серия</div>
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-gray-400">
                      {marathon.my_participation.drop_count}
                    </div>
                    <div className="text-sm text-gray-400">Пропусков</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>

        {/* Activity Feed - right sidebar */}
        {isParticipant && (
          <div className="lg:w-96 flex-shrink-0">
            <div className="lg:sticky lg:top-4">
              <ActivityFeed
                ref={activityFeedRef}
                marathonId={marathon.id}
                className="lg:max-h-[calc(100vh-8rem)]"
              />
            </div>
          </div>
        )}
      </div>
    </div>
  )
}