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>
  )
}