1043 lines
44 KiB
TypeScript
1043 lines
44 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { useParams, useNavigate } from 'react-router-dom'
|
||
import { assignmentsApi } from '@/api'
|
||
import type { AssignmentDetail } from '@/types'
|
||
import { GlassCard, NeonButton } from '@/components/ui'
|
||
import { useAuthStore } from '@/store/auth'
|
||
import { useToast } from '@/store/toast'
|
||
import {
|
||
ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
|
||
ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
|
||
Send, Flag, Gamepad2, Zap, Trophy, Download, ChevronLeft, ChevronRight, X
|
||
} from 'lucide-react'
|
||
|
||
export function AssignmentDetailPage() {
|
||
const { id } = useParams<{ id: string }>()
|
||
const navigate = useNavigate()
|
||
const user = useAuthStore((state) => state.user)
|
||
const toast = useToast()
|
||
|
||
const [assignment, setAssignment] = useState<AssignmentDetail | null>(null)
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [proofMediaBlobUrl, setProofMediaBlobUrl] = useState<string | null>(null)
|
||
const [proofMediaType, setProofMediaType] = useState<'image' | 'video' | null>(null)
|
||
|
||
// Multiple proof files
|
||
const [proofFiles, setProofFiles] = useState<Array<{ id: number; url: string; type: 'image' | 'video' }>>([])
|
||
|
||
// Bonus proof media
|
||
const [bonusProofMedia, setBonusProofMedia] = useState<Record<number, { url: string; type: 'image' | 'video' }>>({})
|
||
|
||
// Bonus proof files (multiple)
|
||
const [bonusProofFiles, setBonusProofFiles] = useState<Record<number, Array<{ id: number; url: string; type: 'image' | 'video' }>>>({})
|
||
|
||
// Lightbox state
|
||
const [lightboxOpen, setLightboxOpen] = useState(false)
|
||
const [lightboxIndex, setLightboxIndex] = useState(0)
|
||
const [lightboxItems, setLightboxItems] = useState<Array<{ url: string; type: 'image' | 'video' }>>([])
|
||
|
||
// Dispute creation
|
||
const [showDisputeForm, setShowDisputeForm] = useState(false)
|
||
const [disputeReason, setDisputeReason] = useState('')
|
||
const [isCreatingDispute, setIsCreatingDispute] = useState(false)
|
||
|
||
// Bonus dispute creation
|
||
const [activeBonusDisputeId, setActiveBonusDisputeId] = useState<number | null>(null)
|
||
const [bonusDisputeReason, setBonusDisputeReason] = useState('')
|
||
const [isCreatingBonusDispute, setIsCreatingBonusDispute] = useState(false)
|
||
|
||
// Comment
|
||
const [commentText, setCommentText] = useState('')
|
||
const [isAddingComment, setIsAddingComment] = useState(false)
|
||
|
||
// Voting
|
||
const [isVoting, setIsVoting] = useState(false)
|
||
|
||
useEffect(() => {
|
||
loadAssignment()
|
||
return () => {
|
||
// Cleanup blob URLs on unmount
|
||
if (proofMediaBlobUrl) {
|
||
URL.revokeObjectURL(proofMediaBlobUrl)
|
||
}
|
||
proofFiles.forEach(file => {
|
||
URL.revokeObjectURL(file.url)
|
||
})
|
||
Object.values(bonusProofMedia).forEach(media => {
|
||
URL.revokeObjectURL(media.url)
|
||
})
|
||
Object.values(bonusProofFiles).forEach(files => {
|
||
files.forEach(file => {
|
||
URL.revokeObjectURL(file.url)
|
||
})
|
||
})
|
||
lightboxItems.forEach(item => {
|
||
URL.revokeObjectURL(item.url)
|
||
})
|
||
}
|
||
}, [id])
|
||
|
||
const loadAssignment = async () => {
|
||
if (!id) return
|
||
setIsLoading(true)
|
||
setError(null)
|
||
try {
|
||
const data = await assignmentsApi.getDetail(parseInt(id))
|
||
setAssignment(data)
|
||
|
||
// Load proof files if exists (new multi-file support)
|
||
if (data.proof_files && data.proof_files.length > 0) {
|
||
const files: Array<{ id: number; url: string; type: 'image' | 'video' }> = []
|
||
for (const proofFile of data.proof_files) {
|
||
try {
|
||
const { url, type } = await assignmentsApi.getProofFileMediaUrl(parseInt(id), proofFile.id)
|
||
files.push({ id: proofFile.id, url, type })
|
||
} catch {
|
||
// Ignore error, file just won't show
|
||
}
|
||
}
|
||
setProofFiles(files)
|
||
} else if (data.proof_image_url) {
|
||
// Legacy: Load single proof media if exists
|
||
try {
|
||
const { url, type } = await assignmentsApi.getProofMediaUrl(parseInt(id))
|
||
setProofMediaBlobUrl(url)
|
||
setProofMediaType(type)
|
||
} catch {
|
||
// Ignore error, media just won't show
|
||
}
|
||
}
|
||
|
||
// Load bonus proof files for playthrough
|
||
if (data.is_playthrough && data.bonus_challenges) {
|
||
const bonusMedia: Record<number, { url: string; type: 'image' | 'video' }> = {}
|
||
const bonusFiles: Record<number, Array<{ id: number; url: string; type: 'image' | 'video' }>> = {}
|
||
|
||
for (const bonus of data.bonus_challenges) {
|
||
// New multi-file support
|
||
if (bonus.proof_files && bonus.proof_files.length > 0) {
|
||
const files: Array<{ id: number; url: string; type: 'image' | 'video' }> = []
|
||
for (const proofFile of bonus.proof_files) {
|
||
try {
|
||
const { url, type } = await assignmentsApi.getBonusProofFileMediaUrl(parseInt(id), bonus.id, proofFile.id)
|
||
files.push({ id: proofFile.id, url, type })
|
||
} catch {
|
||
// Ignore error, file just won't show
|
||
}
|
||
}
|
||
bonusFiles[bonus.id] = files
|
||
} else if (bonus.proof_image_url) {
|
||
// Legacy: single file
|
||
try {
|
||
const { url, type } = await assignmentsApi.getBonusProofMediaUrl(parseInt(id), bonus.id)
|
||
bonusMedia[bonus.id] = { url, type }
|
||
} catch {
|
||
// Ignore error, media just won't show
|
||
}
|
||
}
|
||
}
|
||
|
||
setBonusProofMedia(bonusMedia)
|
||
setBonusProofFiles(bonusFiles)
|
||
}
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
setError(error.response?.data?.detail || 'Не удалось загрузить данные')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleCreateDispute = async () => {
|
||
if (!id || !disputeReason.trim()) return
|
||
|
||
setIsCreatingDispute(true)
|
||
try {
|
||
await assignmentsApi.createDispute(parseInt(id), disputeReason)
|
||
setDisputeReason('')
|
||
setShowDisputeForm(false)
|
||
await loadAssignment()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось создать оспаривание')
|
||
} finally {
|
||
setIsCreatingDispute(false)
|
||
}
|
||
}
|
||
|
||
const handleCreateBonusDispute = async (bonusId: number) => {
|
||
if (!bonusDisputeReason.trim()) return
|
||
|
||
setIsCreatingBonusDispute(true)
|
||
try {
|
||
await assignmentsApi.createBonusDispute(bonusId, bonusDisputeReason)
|
||
setBonusDisputeReason('')
|
||
setActiveBonusDisputeId(null)
|
||
await loadAssignment()
|
||
toast.success('Оспаривание бонуса создано')
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось создать оспаривание')
|
||
} finally {
|
||
setIsCreatingBonusDispute(false)
|
||
}
|
||
}
|
||
|
||
const handleBonusVote = async (disputeId: number, vote: boolean) => {
|
||
setIsVoting(true)
|
||
try {
|
||
await assignmentsApi.vote(disputeId, vote)
|
||
await loadAssignment()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось проголосовать')
|
||
} finally {
|
||
setIsVoting(false)
|
||
}
|
||
}
|
||
|
||
const handleVote = async (vote: boolean) => {
|
||
if (!assignment?.dispute) return
|
||
|
||
setIsVoting(true)
|
||
try {
|
||
await assignmentsApi.vote(assignment.dispute.id, vote)
|
||
await loadAssignment()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось проголосовать')
|
||
} finally {
|
||
setIsVoting(false)
|
||
}
|
||
}
|
||
|
||
const handleAddComment = async () => {
|
||
if (!assignment?.dispute || !commentText.trim()) return
|
||
|
||
setIsAddingComment(true)
|
||
try {
|
||
await assignmentsApi.addComment(assignment.dispute.id, commentText)
|
||
setCommentText('')
|
||
await loadAssignment()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось добавить комментарий')
|
||
} finally {
|
||
setIsAddingComment(false)
|
||
}
|
||
}
|
||
|
||
const formatDate = (dateString: string) => {
|
||
return new Date(dateString).toLocaleString('ru-RU', {
|
||
day: 'numeric',
|
||
month: 'long',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
|
||
const getTimeRemaining = (expiresAt: string) => {
|
||
const now = new Date()
|
||
const expires = new Date(expiresAt)
|
||
const diff = expires.getTime() - now.getTime()
|
||
|
||
if (diff <= 0) return 'Истекло'
|
||
|
||
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
|
||
|
||
return `${hours}ч ${minutes}м`
|
||
}
|
||
|
||
const openLightbox = (items: Array<{ url: string; type: 'image' | 'video' }>, index: number) => {
|
||
setLightboxItems(items)
|
||
setLightboxIndex(index)
|
||
setLightboxOpen(true)
|
||
}
|
||
|
||
const closeLightbox = () => {
|
||
setLightboxOpen(false)
|
||
}
|
||
|
||
const nextLightboxItem = () => {
|
||
setLightboxIndex((prev) => (prev + 1) % lightboxItems.length)
|
||
}
|
||
|
||
const prevLightboxItem = () => {
|
||
setLightboxIndex((prev) => (prev - 1 + lightboxItems.length) % lightboxItems.length)
|
||
}
|
||
|
||
const getStatusConfig = (status: string) => {
|
||
switch (status) {
|
||
case 'completed':
|
||
return {
|
||
color: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||
icon: <CheckCircle className="w-4 h-4" />,
|
||
text: 'Выполнено',
|
||
}
|
||
case 'dropped':
|
||
return {
|
||
color: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||
icon: <XCircle className="w-4 h-4" />,
|
||
text: 'Пропущено',
|
||
}
|
||
case 'returned':
|
||
return {
|
||
color: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||
icon: <AlertTriangle className="w-4 h-4" />,
|
||
text: 'Возвращено',
|
||
}
|
||
default:
|
||
return {
|
||
color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
|
||
icon: <Zap className="w-4 h-4" />,
|
||
text: 'Активно',
|
||
}
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-24">
|
||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||
<p className="text-gray-400">Загрузка...</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error || !assignment) {
|
||
return (
|
||
<div className="max-w-2xl mx-auto">
|
||
<GlassCard className="text-center py-12">
|
||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
|
||
<AlertTriangle className="w-8 h-8 text-red-400" />
|
||
</div>
|
||
<p className="text-gray-400 mb-6">{error || 'Задание не найдено'}</p>
|
||
<NeonButton variant="outline" onClick={() => navigate(-1)}>
|
||
Назад
|
||
</NeonButton>
|
||
</GlassCard>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const dispute = assignment.dispute
|
||
const status = getStatusConfig(assignment.status)
|
||
|
||
return (
|
||
<div className="max-w-2xl mx-auto space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => navigate(-1)}
|
||
className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
|
||
>
|
||
<ArrowLeft className="w-5 h-5" />
|
||
</button>
|
||
<div>
|
||
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
|
||
<p className="text-sm text-gray-400">Просмотр доказательства</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Challenge/Playthrough info */}
|
||
<GlassCard variant="neon">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center gap-4">
|
||
<div className={`w-14 h-14 rounded-xl border flex items-center justify-center ${
|
||
assignment.is_playthrough
|
||
? 'bg-gradient-to-br from-accent-500/20 to-purple-500/20 border-accent-500/20'
|
||
: 'bg-gradient-to-br from-neon-500/20 to-accent-500/20 border-neon-500/20'
|
||
}`}>
|
||
<Gamepad2 className={`w-7 h-7 ${assignment.is_playthrough ? 'text-accent-400' : 'text-neon-400'}`} />
|
||
</div>
|
||
<div>
|
||
<p className="text-gray-400 text-sm">
|
||
{assignment.is_playthrough ? assignment.game?.title : assignment.challenge?.game.title}
|
||
</p>
|
||
<h2 className="text-xl font-bold text-white">
|
||
{assignment.is_playthrough ? 'Прохождение игры' : assignment.challenge?.title}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col items-end gap-2">
|
||
{assignment.is_playthrough && (
|
||
<span className="px-3 py-1 bg-accent-500/20 text-accent-400 rounded-full text-xs font-medium border border-accent-500/30">
|
||
Прохождение
|
||
</span>
|
||
)}
|
||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-1.5 ${status.color}`}>
|
||
{status.icon}
|
||
{status.text}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-gray-300 mb-4">
|
||
{assignment.is_playthrough
|
||
? assignment.playthrough_info?.description
|
||
: assignment.challenge?.description}
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-2 mb-4">
|
||
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
|
||
<Trophy className="w-4 h-4" />
|
||
+{assignment.is_playthrough
|
||
? assignment.playthrough_info?.points
|
||
: assignment.challenge?.points} очков
|
||
</span>
|
||
{!assignment.is_playthrough && assignment.challenge && (
|
||
<>
|
||
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
|
||
{assignment.challenge.difficulty}
|
||
</span>
|
||
{assignment.challenge.estimated_time && (
|
||
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600 flex items-center gap-1.5">
|
||
<Clock className="w-4 h-4" />
|
||
~{assignment.challenge.estimated_time} мин
|
||
</span>
|
||
)}
|
||
</>
|
||
)}
|
||
{/* Download link */}
|
||
{(assignment.game?.download_url || assignment.challenge?.game.download_url) && (
|
||
<a
|
||
href={assignment.is_playthrough ? assignment.game?.download_url : assignment.challenge?.game.download_url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="px-3 py-1.5 bg-neon-500/20 text-neon-400 rounded-lg text-sm font-medium border border-neon-500/30 flex items-center gap-1.5 hover:bg-neon-500/30 transition-colors"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
Скачать игру
|
||
</a>
|
||
)}
|
||
</div>
|
||
|
||
<div className="pt-4 border-t border-dark-600 text-sm text-gray-400 space-y-1">
|
||
<p>
|
||
<span className="text-gray-500">Выполнил:</span>{' '}
|
||
<span className="text-white">{assignment.participant.nickname}</span>
|
||
</p>
|
||
{assignment.completed_at && (
|
||
<p>
|
||
<span className="text-gray-500">Дата:</span>{' '}
|
||
<span className="text-white">{formatDate(assignment.completed_at)}</span>
|
||
</p>
|
||
)}
|
||
{assignment.points_earned > 0 && (
|
||
<p>
|
||
<span className="text-gray-500">Получено очков:</span>{' '}
|
||
<span className="text-neon-400 font-semibold">{assignment.points_earned}</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* Bonus challenges for playthrough */}
|
||
{assignment.is_playthrough && assignment.bonus_challenges && assignment.bonus_challenges.length > 0 && (
|
||
<GlassCard>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||
<Trophy className="w-5 h-5 text-accent-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-white">Бонусные челленджи</h3>
|
||
<p className="text-sm text-gray-400">
|
||
Выполнено: {assignment.bonus_challenges.filter((b: { status: string }) => b.status === 'completed').length} из {assignment.bonus_challenges.length}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{assignment.bonus_challenges.map((bonus) => (
|
||
<div
|
||
key={bonus.id}
|
||
className={`p-4 rounded-xl border ${
|
||
bonus.dispute ? 'bg-yellow-500/10 border-yellow-500/30' :
|
||
bonus.status === 'completed'
|
||
? 'bg-green-500/10 border-green-500/30'
|
||
: 'bg-dark-700/50 border-dark-600'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
{bonus.dispute ? (
|
||
<AlertTriangle className="w-4 h-4 text-yellow-400" />
|
||
) : bonus.status === 'completed' ? (
|
||
<CheckCircle className="w-4 h-4 text-green-400" />
|
||
) : null}
|
||
<span className="text-white font-medium">{bonus.challenge.title}</span>
|
||
{bonus.dispute && (
|
||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||
bonus.dispute.status === 'open' ? 'bg-yellow-500/20 text-yellow-400' :
|
||
bonus.dispute.status === 'valid' ? 'bg-green-500/20 text-green-400' :
|
||
'bg-red-500/20 text-red-400'
|
||
}`}>
|
||
{bonus.dispute.status === 'open' ? 'Оспаривается' :
|
||
bonus.dispute.status === 'valid' ? 'Валидно' : 'Невалидно'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-gray-400 text-sm">{bonus.challenge.description}</p>
|
||
{bonus.status === 'completed' && (bonus.proof_url || bonus.proof_image_url || bonus.proof_comment || bonusProofFiles[bonus.id]) && (
|
||
<div className="mt-2 text-xs space-y-2">
|
||
{/* Multiple proof files */}
|
||
{bonusProofFiles[bonus.id] && bonusProofFiles[bonus.id].length > 0 && (
|
||
<div className="flex gap-2 flex-wrap">
|
||
{bonusProofFiles[bonus.id].map((file, index) => (
|
||
<div
|
||
key={file.id}
|
||
className="relative rounded-lg overflow-hidden border border-dark-600 cursor-pointer hover:border-neon-500/50 transition-all w-24 h-24"
|
||
onClick={() => openLightbox(bonusProofFiles[bonus.id], index)}
|
||
>
|
||
{file.type === 'video' ? (
|
||
<div className="relative w-full h-full">
|
||
<video
|
||
src={file.url}
|
||
className="w-full h-full object-cover bg-dark-900"
|
||
preload="metadata"
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/50">
|
||
<div className="w-6 h-6 rounded-full bg-neon-500/80 flex items-center justify-center">
|
||
<div className="w-0 h-0 border-l-4 border-l-white border-y-3 border-y-transparent ml-0.5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<img
|
||
src={file.url}
|
||
alt={`Proof ${index + 1}`}
|
||
className="w-full h-full object-cover bg-dark-900"
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Legacy: single proof media */}
|
||
{(!bonusProofFiles[bonus.id] || bonusProofFiles[bonus.id].length === 0) && bonusProofMedia[bonus.id] && (
|
||
<div className="rounded-lg overflow-hidden border border-dark-600 max-w-xs">
|
||
{bonusProofMedia[bonus.id].type === 'video' ? (
|
||
<video
|
||
src={bonusProofMedia[bonus.id].url}
|
||
controls
|
||
className="w-full max-h-32 bg-dark-900"
|
||
preload="metadata"
|
||
/>
|
||
) : (
|
||
<button
|
||
onClick={() => openLightbox([bonusProofMedia[bonus.id]], 0)}
|
||
className="w-full"
|
||
>
|
||
<img
|
||
src={bonusProofMedia[bonus.id].url}
|
||
alt="Proof"
|
||
className="w-full h-auto max-h-32 object-cover hover:opacity-80 transition-opacity"
|
||
/>
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{bonus.proof_url && (
|
||
<a
|
||
href={bonus.proof_url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-neon-400 hover:underline flex items-center gap-1 break-all"
|
||
>
|
||
<ExternalLink className="w-3 h-3 shrink-0" />
|
||
{bonus.proof_url}
|
||
</a>
|
||
)}
|
||
{bonus.proof_comment && (
|
||
<p className="text-gray-400">"{bonus.proof_comment}"</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Bonus dispute form */}
|
||
{activeBonusDisputeId === bonus.id && (
|
||
<div className="mt-3 p-3 bg-red-500/10 rounded-lg border border-red-500/30">
|
||
<textarea
|
||
className="input w-full min-h-[80px] resize-none mb-2 text-sm"
|
||
placeholder="Причина оспаривания (минимум 10 символов)..."
|
||
value={bonusDisputeReason}
|
||
onChange={(e) => setBonusDisputeReason(e.target.value)}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button
|
||
className="px-3 py-1.5 text-sm bg-red-500/20 text-red-400 rounded-lg hover:bg-red-500/30 disabled:opacity-50"
|
||
onClick={() => handleCreateBonusDispute(bonus.id)}
|
||
disabled={bonusDisputeReason.trim().length < 10 || isCreatingBonusDispute}
|
||
>
|
||
{isCreatingBonusDispute ? 'Создание...' : 'Оспорить'}
|
||
</button>
|
||
<button
|
||
className="px-3 py-1.5 text-sm bg-dark-600 text-gray-300 rounded-lg hover:bg-dark-500"
|
||
onClick={() => {
|
||
setActiveBonusDisputeId(null)
|
||
setBonusDisputeReason('')
|
||
}}
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bonus dispute info */}
|
||
{bonus.dispute && (
|
||
<div className="mt-3 p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/30">
|
||
<p className="text-xs text-gray-400 mb-1">
|
||
Оспорил: <span className="text-white">{bonus.dispute.raised_by.nickname}</span>
|
||
</p>
|
||
<p className="text-sm text-white mb-2">{bonus.dispute.reason}</p>
|
||
|
||
{bonus.dispute.status === 'open' && (
|
||
<div className="flex items-center gap-4 mt-2">
|
||
<div className="flex items-center gap-1">
|
||
<ThumbsUp className="w-3 h-3 text-green-400" />
|
||
<span className="text-green-400 text-sm font-medium">{bonus.dispute.votes_valid}</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<ThumbsDown className="w-3 h-3 text-red-400" />
|
||
<span className="text-red-400 text-sm font-medium">{bonus.dispute.votes_invalid}</span>
|
||
</div>
|
||
<div className="flex gap-1 ml-auto">
|
||
<button
|
||
className={`p-1.5 rounded ${bonus.dispute.my_vote === true ? 'bg-green-500/30' : 'bg-dark-600 hover:bg-dark-500'}`}
|
||
onClick={() => handleBonusVote(bonus.dispute!.id, true)}
|
||
disabled={isVoting}
|
||
>
|
||
<ThumbsUp className="w-3 h-3 text-green-400" />
|
||
</button>
|
||
<button
|
||
className={`p-1.5 rounded ${bonus.dispute.my_vote === false ? 'bg-red-500/30' : 'bg-dark-600 hover:bg-dark-500'}`}
|
||
onClick={() => handleBonusVote(bonus.dispute!.id, false)}
|
||
disabled={isVoting}
|
||
>
|
||
<ThumbsDown className="w-3 h-3 text-red-400" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="text-right shrink-0 ml-3 flex flex-col items-end gap-2">
|
||
{bonus.status === 'completed' ? (
|
||
<span className="text-green-400 font-semibold">+{bonus.points_earned}</span>
|
||
) : (
|
||
<span className="text-gray-500">+{bonus.challenge.points}</span>
|
||
)}
|
||
{/* Dispute button for bonus */}
|
||
{bonus.can_dispute && !bonus.dispute && activeBonusDisputeId !== bonus.id && (
|
||
<button
|
||
className="text-xs px-2 py-1 text-red-400 hover:bg-red-500/10 rounded flex items-center gap-1"
|
||
onClick={() => setActiveBonusDisputeId(bonus.id)}
|
||
>
|
||
<Flag className="w-3 h-3" />
|
||
Оспорить
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Proof section */}
|
||
<GlassCard>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||
<Image className="w-5 h-5 text-accent-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-white">Доказательство</h3>
|
||
<p className="text-sm text-gray-400">Пруф выполнения задания</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Proof files gallery (multiple proofs) */}
|
||
{proofFiles.length > 0 && (
|
||
<div className="mb-4">
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{proofFiles.map((file, index) => (
|
||
<div
|
||
key={file.id}
|
||
className="relative rounded-xl overflow-hidden border border-dark-600 cursor-pointer hover:border-neon-500/50 transition-all group"
|
||
onClick={() => openLightbox(proofFiles, index)}
|
||
>
|
||
{file.type === 'video' ? (
|
||
<div className="relative">
|
||
<video
|
||
src={file.url}
|
||
className="w-full h-48 object-cover bg-dark-900"
|
||
preload="metadata"
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 group-hover:bg-black/30 transition-all">
|
||
<div className="w-12 h-12 rounded-full bg-neon-500/80 flex items-center justify-center">
|
||
<div className="w-0 h-0 border-l-8 border-l-white border-y-6 border-y-transparent ml-1"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<img
|
||
src={file.url}
|
||
alt={`Proof ${index + 1}`}
|
||
className="w-full h-48 object-cover bg-dark-900 group-hover:opacity-90 transition-opacity"
|
||
/>
|
||
)}
|
||
<div className="absolute top-2 right-2 px-2 py-1 bg-dark-900/80 rounded text-xs text-gray-300">
|
||
{index + 1}/{proofFiles.length}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Legacy: Single proof media (for backwards compatibility) */}
|
||
{proofFiles.length === 0 && assignment.proof_image_url && (
|
||
<div className="mb-4 rounded-xl overflow-hidden border border-dark-600">
|
||
{proofMediaBlobUrl ? (
|
||
proofMediaType === 'video' ? (
|
||
<video
|
||
src={proofMediaBlobUrl}
|
||
controls
|
||
className="w-full max-h-96 bg-dark-900"
|
||
preload="metadata"
|
||
/>
|
||
) : (
|
||
<button
|
||
onClick={() => openLightbox([{ url: proofMediaBlobUrl, type: 'image' }], 0)}
|
||
className="w-full"
|
||
>
|
||
<img
|
||
src={proofMediaBlobUrl}
|
||
alt="Proof"
|
||
className="w-full max-h-96 object-contain bg-dark-900 hover:opacity-90 transition-opacity"
|
||
/>
|
||
</button>
|
||
)
|
||
) : (
|
||
<div className="w-full h-48 bg-dark-900 flex items-center justify-center">
|
||
<Loader2 className="w-8 h-8 animate-spin text-gray-500" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Proof URL */}
|
||
{assignment.proof_url && (
|
||
<div className="mb-4">
|
||
<a
|
||
href={assignment.proof_url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
|
||
>
|
||
<ExternalLink className="w-4 h-4" />
|
||
{assignment.proof_url}
|
||
</a>
|
||
</div>
|
||
)}
|
||
|
||
{/* Proof comment */}
|
||
{assignment.proof_comment && (
|
||
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
|
||
<p className="text-white">{assignment.proof_comment}</p>
|
||
</div>
|
||
)}
|
||
|
||
{proofFiles.length === 0 && !assignment.proof_image_url && !assignment.proof_url && (
|
||
<div className="text-center py-8">
|
||
<div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
|
||
<Image className="w-6 h-6 text-gray-600" />
|
||
</div>
|
||
<p className="text-gray-500">Пруф не предоставлен</p>
|
||
</div>
|
||
)}
|
||
</GlassCard>
|
||
|
||
{/* Dispute button */}
|
||
{assignment.can_dispute && !dispute && !showDisputeForm && (
|
||
<button
|
||
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border-2 border-red-500/50 text-red-400 bg-transparent hover:bg-red-500/10 hover:border-red-500"
|
||
onClick={() => setShowDisputeForm(true)}
|
||
>
|
||
<Flag className="w-4 h-4" />
|
||
Оспорить выполнение
|
||
</button>
|
||
)}
|
||
|
||
{/* Dispute creation form */}
|
||
{showDisputeForm && !dispute && (
|
||
<GlassCard className="border-red-500/30">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
|
||
<AlertTriangle className="w-5 h-5 text-red-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-red-400">Оспорить выполнение</h3>
|
||
<p className="text-sm text-gray-400">У участников будет 24 часа для голосования</p>
|
||
</div>
|
||
</div>
|
||
|
||
<textarea
|
||
className="input w-full min-h-[100px] resize-none mb-4"
|
||
placeholder="Причина оспаривания (минимум 10 символов)..."
|
||
value={disputeReason}
|
||
onChange={(e) => setDisputeReason(e.target.value)}
|
||
/>
|
||
|
||
<div className="flex gap-3">
|
||
<NeonButton
|
||
className="flex-1 border-red-500/50 bg-red-500/10 hover:bg-red-500/20 text-red-400"
|
||
onClick={handleCreateDispute}
|
||
isLoading={isCreatingDispute}
|
||
disabled={disputeReason.trim().length < 10}
|
||
>
|
||
Оспорить
|
||
</NeonButton>
|
||
<NeonButton
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowDisputeForm(false)
|
||
setDisputeReason('')
|
||
}}
|
||
>
|
||
Отмена
|
||
</NeonButton>
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Dispute section */}
|
||
{dispute && (
|
||
<GlassCard className={dispute.status === 'open' ? 'border-yellow-500/30' : ''}>
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
|
||
<AlertTriangle className="w-5 h-5 text-yellow-400" />
|
||
</div>
|
||
<h3 className="font-semibold text-yellow-400">Оспаривание</h3>
|
||
</div>
|
||
|
||
{dispute.status === 'open' ? (
|
||
<span className="px-3 py-1.5 bg-yellow-500/20 text-yellow-400 rounded-lg text-sm font-medium border border-yellow-500/30 flex items-center gap-1.5">
|
||
<Clock className="w-4 h-4" />
|
||
{getTimeRemaining(dispute.expires_at)}
|
||
</span>
|
||
) : dispute.status === 'valid' ? (
|
||
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
|
||
<CheckCircle className="w-4 h-4" />
|
||
Пруф валиден
|
||
</span>
|
||
) : (
|
||
<span className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded-lg text-sm font-medium border border-red-500/30 flex items-center gap-1.5">
|
||
<XCircle className="w-4 h-4" />
|
||
Пруф невалиден
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mb-4 text-sm text-gray-400">
|
||
<p>
|
||
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
|
||
</p>
|
||
<p>
|
||
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600 mb-4">
|
||
<p className="text-sm text-gray-400 mb-1">Причина:</p>
|
||
<p className="text-white">{dispute.reason}</p>
|
||
</div>
|
||
|
||
{/* Voting section */}
|
||
{dispute.status === 'open' && (
|
||
<div className="mb-6 p-4 bg-dark-700/30 rounded-xl border border-dark-600">
|
||
<h4 className="text-sm font-semibold text-white mb-4">Голосование</h4>
|
||
|
||
<div className="flex items-center gap-6 mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||
<ThumbsUp className="w-4 h-4 text-green-400" />
|
||
</div>
|
||
<span className="text-green-400 font-bold text-lg">{dispute.votes_valid}</span>
|
||
<span className="text-gray-500 text-sm">валидно</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
|
||
<ThumbsDown className="w-4 h-4 text-red-400" />
|
||
</div>
|
||
<span className="text-red-400 font-bold text-lg">{dispute.votes_invalid}</span>
|
||
<span className="text-gray-500 text-sm">невалидно</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-3">
|
||
<NeonButton
|
||
className={`flex-1 ${dispute.my_vote === true ? 'bg-green-500/20 border-green-500/50 text-green-400' : ''}`}
|
||
variant="outline"
|
||
onClick={() => handleVote(true)}
|
||
isLoading={isVoting}
|
||
disabled={isVoting}
|
||
icon={<ThumbsUp className="w-4 h-4" />}
|
||
>
|
||
Валидно
|
||
</NeonButton>
|
||
<NeonButton
|
||
className={`flex-1 ${dispute.my_vote === false ? 'bg-red-500/20 border-red-500/50 text-red-400' : ''}`}
|
||
variant="outline"
|
||
onClick={() => handleVote(false)}
|
||
isLoading={isVoting}
|
||
disabled={isVoting}
|
||
icon={<ThumbsDown className="w-4 h-4" />}
|
||
>
|
||
Невалидно
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{dispute.my_vote !== null && (
|
||
<p className="text-sm text-gray-500 mt-3 text-center">
|
||
Вы проголосовали: <span className={dispute.my_vote ? 'text-green-400' : 'text-red-400'}>
|
||
{dispute.my_vote ? 'валидно' : 'невалидно'}
|
||
</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Comments section */}
|
||
<div>
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<MessageSquare className="w-4 h-4 text-gray-400" />
|
||
<h4 className="text-sm font-semibold text-white">
|
||
Обсуждение ({dispute.comments.length})
|
||
</h4>
|
||
</div>
|
||
|
||
{dispute.comments.length > 0 && (
|
||
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto custom-scrollbar">
|
||
{dispute.comments.map((comment) => (
|
||
<div key={comment.id} className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-1">
|
||
<span className={`font-medium ${comment.user.id === user?.id ? 'text-neon-400' : 'text-white'}`}>
|
||
{comment.user.nickname}
|
||
{comment.user.id === user?.id && ' (Вы)'}
|
||
</span>
|
||
<span className="text-xs text-gray-500">
|
||
{formatDate(comment.created_at)}
|
||
</span>
|
||
</div>
|
||
<p className="text-gray-300 text-sm">{comment.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add comment form */}
|
||
{dispute.status === 'open' && (
|
||
<div className="flex gap-2">
|
||
<input
|
||
type="text"
|
||
className="input flex-1"
|
||
placeholder="Написать комментарий..."
|
||
value={commentText}
|
||
onChange={(e) => setCommentText(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault()
|
||
handleAddComment()
|
||
}
|
||
}}
|
||
/>
|
||
<NeonButton
|
||
onClick={handleAddComment}
|
||
isLoading={isAddingComment}
|
||
disabled={!commentText.trim()}
|
||
icon={<Send className="w-4 h-4" />}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Lightbox modal */}
|
||
{lightboxOpen && lightboxItems.length > 0 && (
|
||
<div
|
||
className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
|
||
onClick={closeLightbox}
|
||
>
|
||
<button
|
||
className="absolute top-4 right-4 w-10 h-10 rounded-full bg-dark-700/80 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition-all z-10"
|
||
onClick={closeLightbox}
|
||
>
|
||
<X className="w-6 h-6" />
|
||
</button>
|
||
|
||
{lightboxItems.length > 1 && (
|
||
<>
|
||
<button
|
||
className="absolute left-4 w-12 h-12 rounded-full bg-dark-700/80 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition-all z-10"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
prevLightboxItem()
|
||
}}
|
||
>
|
||
<ChevronLeft className="w-8 h-8" />
|
||
</button>
|
||
|
||
<button
|
||
className="absolute right-4 w-12 h-12 rounded-full bg-dark-700/80 hover:bg-dark-600 flex items-center justify-center text-gray-400 hover:text-white transition-all z-10"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
nextLightboxItem()
|
||
}}
|
||
>
|
||
<ChevronRight className="w-8 h-8" />
|
||
</button>
|
||
|
||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-dark-700/80 rounded-full text-white text-sm z-10">
|
||
{lightboxIndex + 1} / {lightboxItems.length}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div
|
||
className="max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center p-4"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{lightboxItems[lightboxIndex].type === 'video' ? (
|
||
<video
|
||
src={lightboxItems[lightboxIndex].url}
|
||
controls
|
||
autoPlay
|
||
className="max-w-full max-h-full"
|
||
/>
|
||
) : (
|
||
<img
|
||
src={lightboxItems[lightboxIndex].url}
|
||
alt="Proof"
|
||
className="max-w-full max-h-full object-contain"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|