import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { assignmentsApi } from '@/api'
import type { AssignmentDetail } from '@/types'
import { Card, CardContent, Button } from '@/components/ui'
import { useAuthStore } from '@/store/auth'
import {
  ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
  ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
  Send, Flag
} from 'lucide-react'

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'

export function AssignmentDetailPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const user = useAuthStore((state) => state.user)

  const [assignment, setAssignment] = useState<AssignmentDetail | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Dispute creation
  const [showDisputeForm, setShowDisputeForm] = useState(false)
  const [disputeReason, setDisputeReason] = useState('')
  const [isCreatingDispute, setIsCreatingDispute] = useState(false)

  // Comment
  const [commentText, setCommentText] = useState('')
  const [isAddingComment, setIsAddingComment] = useState(false)

  // Voting
  const [isVoting, setIsVoting] = useState(false)

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

  const loadAssignment = async () => {
    if (!id) return
    setIsLoading(true)
    setError(null)
    try {
      const data = await assignmentsApi.getDetail(parseInt(id))
      setAssignment(data)
    } 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 } } }
      alert(error.response?.data?.detail || 'Не удалось создать оспаривание')
    } finally {
      setIsCreatingDispute(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 } } }
      alert(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 } } }
      alert(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 getStatusBadge = (status: string) => {
    switch (status) {
      case 'completed':
        return (
          <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
            <CheckCircle className="w-4 h-4" /> Выполнено
          </span>
        )
      case 'dropped':
        return (
          <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
            <XCircle className="w-4 h-4" /> Пропущено
          </span>
        )
      case 'returned':
        return (
          <span className="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm flex items-center gap-1">
            <AlertTriangle className="w-4 h-4" /> Возвращено
          </span>
        )
      default:
        return (
          <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">
            Активно
          </span>
        )
    }
  }

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

  if (error || !assignment) {
    return (
      <div className="max-w-2xl mx-auto text-center py-12">
        <p className="text-red-400 mb-4">{error || 'Задание не найдено'}</p>
        <Button onClick={() => navigate(-1)}>Назад</Button>
      </div>
    )
  }

  const dispute = assignment.dispute

  return (
    <div className="max-w-2xl mx-auto">
      {/* Header */}
      <div className="flex items-center gap-4 mb-6">
        <button onClick={() => navigate(-1)} className="text-gray-400 hover:text-white">
          <ArrowLeft className="w-6 h-6" />
        </button>
        <h1 className="text-xl font-bold text-white">Детали выполнения</h1>
      </div>

      {/* Challenge info */}
      <Card className="mb-6">
        <CardContent>
          <div className="flex items-start justify-between mb-4">
            <div>
              <p className="text-gray-400 text-sm">{assignment.challenge.game.title}</p>
              <h2 className="text-xl font-bold text-white">{assignment.challenge.title}</h2>
            </div>
            {getStatusBadge(assignment.status)}
          </div>

          <p className="text-gray-300 mb-4">{assignment.challenge.description}</p>

          <div className="flex flex-wrap gap-2 mb-4">
            <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
              +{assignment.challenge.points} очков
            </span>
            <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
              {assignment.challenge.difficulty}
            </span>
            {assignment.challenge.estimated_time && (
              <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
                ~{assignment.challenge.estimated_time} мин
              </span>
            )}
          </div>

          <div className="text-sm text-gray-400 space-y-1">
            <p>
              <strong>Выполнил:</strong> {assignment.participant.nickname}
            </p>
            {assignment.completed_at && (
              <p>
                <strong>Дата:</strong> {formatDate(assignment.completed_at)}
              </p>
            )}
            {assignment.points_earned > 0 && (
              <p>
                <strong>Получено очков:</strong> {assignment.points_earned}
              </p>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Proof section */}
      <Card className="mb-6">
        <CardContent>
          <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
            <Image className="w-5 h-5" />
            Доказательство
          </h3>

          {/* Proof image */}
          {assignment.proof_image_url && (
            <div className="mb-4">
              <img
                src={`${API_URL}${assignment.proof_image_url}`}
                alt="Proof"
                className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
              />
            </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-primary-400 hover:text-primary-300"
              >
                <ExternalLink className="w-4 h-4" />
                {assignment.proof_url}
              </a>
            </div>
          )}

          {/* Proof comment */}
          {assignment.proof_comment && (
            <div className="p-3 bg-gray-900 rounded-lg">
              <p className="text-sm text-gray-400 mb-1">Комментарий:</p>
              <p className="text-white">{assignment.proof_comment}</p>
            </div>
          )}

          {!assignment.proof_image_url && !assignment.proof_url && (
            <p className="text-gray-500 text-center py-4">Пруф не предоставлен</p>
          )}
        </CardContent>
      </Card>

      {/* Dispute button */}
      {assignment.can_dispute && !dispute && !showDisputeForm && (
        <Button
          variant="danger"
          className="w-full mb-6"
          onClick={() => setShowDisputeForm(true)}
        >
          <Flag className="w-4 h-4 mr-2" />
          Оспорить выполнение
        </Button>
      )}

      {/* Dispute creation form */}
      {showDisputeForm && !dispute && (
        <Card className="mb-6 border-red-500/50">
          <CardContent>
            <h3 className="text-lg font-bold text-red-400 mb-4 flex items-center gap-2">
              <AlertTriangle className="w-5 h-5" />
              Оспорить выполнение
            </h3>

            <p className="text-gray-400 text-sm mb-4">
              Опишите причину оспаривания. После создания у участников будет 24 часа для голосования.
            </p>

            <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">
              <Button
                variant="danger"
                className="flex-1"
                onClick={handleCreateDispute}
                isLoading={isCreatingDispute}
                disabled={disputeReason.trim().length < 10}
              >
                Оспорить
              </Button>
              <Button
                variant="secondary"
                onClick={() => {
                  setShowDisputeForm(false)
                  setDisputeReason('')
                }}
              >
                Отмена
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Dispute section */}
      {dispute && (
        <Card className={`mb-6 ${dispute.status === 'open' ? 'border-yellow-500/50' : ''}`}>
          <CardContent>
            <div className="flex items-start justify-between mb-4">
              <h3 className="text-lg font-bold text-yellow-400 flex items-center gap-2">
                <AlertTriangle className="w-5 h-5" />
                Оспаривание
              </h3>

              {dispute.status === 'open' ? (
                <span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  {getTimeRemaining(dispute.expires_at)}
                </span>
              ) : dispute.status === 'valid' ? (
                <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
                  <CheckCircle className="w-4 h-4" />
                  Пруф валиден
                </span>
              ) : (
                <span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
                  <XCircle className="w-4 h-4" />
                  Пруф невалиден
                </span>
              )}
            </div>

            <div className="mb-4">
              <p className="text-sm text-gray-400">
                Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
              </p>
              <p className="text-sm text-gray-400">
                Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
              </p>
            </div>

            <div className="p-3 bg-gray-900 rounded-lg 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-4">
                <h4 className="text-sm font-medium text-gray-300 mb-3">Голосование</h4>

                <div className="flex items-center gap-4 mb-3">
                  <div className="flex items-center gap-2">
                    <ThumbsUp className="w-5 h-5 text-green-500" />
                    <span className="text-green-400 font-medium">{dispute.votes_valid}</span>
                    <span className="text-gray-500 text-sm">валидно</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <ThumbsDown className="w-5 h-5 text-red-500" />
                    <span className="text-red-400 font-medium">{dispute.votes_invalid}</span>
                    <span className="text-gray-500 text-sm">невалидно</span>
                  </div>
                </div>

                <div className="flex gap-3">
                  <Button
                    variant={dispute.my_vote === true ? 'primary' : 'secondary'}
                    className="flex-1"
                    onClick={() => handleVote(true)}
                    isLoading={isVoting}
                    disabled={isVoting}
                  >
                    <ThumbsUp className="w-4 h-4 mr-2" />
                    Валидно
                  </Button>
                  <Button
                    variant={dispute.my_vote === false ? 'danger' : 'secondary'}
                    className="flex-1"
                    onClick={() => handleVote(false)}
                    isLoading={isVoting}
                    disabled={isVoting}
                  >
                    <ThumbsDown className="w-4 h-4 mr-2" />
                    Невалидно
                  </Button>
                </div>

                {dispute.my_vote !== null && (
                  <p className="text-sm text-gray-500 mt-2 text-center">
                    Вы проголосовали: {dispute.my_vote ? 'валидно' : 'невалидно'}
                  </p>
                )}
              </div>
            )}

            {/* Comments section */}
            <div>
              <h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
                <MessageSquare className="w-4 h-4" />
                Обсуждение ({dispute.comments.length})
              </h4>

              {dispute.comments.length > 0 && (
                <div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
                  {dispute.comments.map((comment) => (
                    <div key={comment.id} className="p-3 bg-gray-900 rounded-lg">
                      <div className="flex items-center justify-between mb-1">
                        <span className={`font-medium ${comment.user.id === user?.id ? 'text-primary-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()
                      }
                    }}
                  />
                  <Button
                    onClick={handleAddComment}
                    isLoading={isAddingComment}
                    disabled={!commentText.trim()}
                  >
                    <Send className="w-4 h-4" />
                  </Button>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
