import { useEffect, useRef } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { cn } from '@/lib/utils'
import { useTestStore } from '@/store/test-store'
import { useRequireAuth } from '@/hooks/use-require-auth'
import { useAuthStore } from '@/store/auth-store'
import { saveTestResult } from '@/lib/progress-service'
import { useAwardActivity } from '@/hooks/use-gamification'
import { XP_REWARDS } from '@/lib/gamification-service'

const ANSWER_LABELS = ['A', 'B', 'C', 'D']

function formatTime(s: number) {
  const m = Math.floor(s / 60)
  const sec = s % 60
  if (m === 0) return `${sec}s`
  return `${m}m ${sec}s`
}

export function TestResult() {
  const navigate = useNavigate()
  const { testId, testName, parts, answers, timeUsed, reset } = useTestStore()
  const { isAuthenticated, isLoading } = useRequireAuth()
  const user = useAuthStore((s) => s.user)
  const savedRef = useRef(false)
  const { mutate: awardActivity } = useAwardActivity()

  // Flatten all questions across parts
  const allQuestions = parts.flatMap(p => p.questions)

  useEffect(() => {
    if (isLoading) return
    if (!isAuthenticated) navigate({ to: '/toeic' })
  }, [isLoading, isAuthenticated, navigate])

  useEffect(() => {
    if (!user || savedRef.current || allQuestions.length === 0) return
    savedRef.current = true
    const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
    awardActivity({ xp: XP_REWARDS.test })
    saveTestResult(user.id, {
      testId,
      selectedParts: parts.map(p => p.partNumber),
      score: correct,
      total: allQuestions.length,
      timeUsed,
      answers: allQuestions.map(q => ({
        questionId: q.id,
        selected: answers[q.id] ?? null,
        correct: answers[q.id] === q.correctAnswer,
      })),
    })
  }, [user, allQuestions.length])

  if (allQuestions.length === 0) {
    return (
      <div className="px-6 py-8 max-w-6xl mx-auto text-center">
        <p className="text-slate-500 mb-4">Không có dữ liệu bài thi.</p>
        <button onClick={() => navigate({ to: '/toeic' })}
          className="bg-blue-600 text-white px-6 py-2.5 rounded-xl font-semibold text-sm hover:bg-blue-700 transition-colors">
          Chọn đề thi
        </button>
      </div>
    )
  }

  const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
  const wrong = allQuestions.filter(q => answers[q.id] !== null && answers[q.id] !== undefined && answers[q.id] !== q.correctAnswer).length
  const skipped = allQuestions.filter(q => answers[q.id] === null || answers[q.id] === undefined).length
  const total = allQuestions.length
  const percent = total > 0 ? Math.round((correct / total) * 100) : 0
  const circumference = 2 * Math.PI * 52
  const offset = circumference - (percent / 100) * circumference

  return (
    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
      {/* Score header */}
      <div className="bg-white rounded-2xl p-6 border border-slate-200 mb-5">
        <div className="flex flex-col lg:flex-row items-center gap-6">
          <div className="flex-shrink-0 relative w-32 h-32">
            <svg className="w-full h-full -rotate-90" viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="52" fill="none" stroke="#e2e8f0" strokeWidth="8" />
              <circle cx="60" cy="60" r="52" fill="none"
                stroke={percent >= 70 ? '#16a34a' : percent >= 50 ? '#2563eb' : '#dc2626'}
                strokeWidth="8" strokeLinecap="round"
                strokeDasharray={circumference} strokeDashoffset={offset}
                className="transition-all duration-700" />
            </svg>
            <div className="absolute inset-0 flex flex-col items-center justify-center">
              <span className="text-3xl font-extrabold text-slate-800">{correct}/{total}</span>
              <span className="text-xs text-slate-400 font-medium">điểm</span>
            </div>
          </div>

          <div className="flex-1 text-center lg:text-left">
            <div className="text-2xl font-extrabold text-slate-800 mb-1">
              {percent >= 80 ? 'Xuất sắc!' : percent >= 60 ? 'Hoàn thành!' : 'Cố gắng hơn nhé!'}
            </div>
            <div className="text-sm text-slate-400 mb-4">{testName}</div>
            <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
              {[
                { label: 'Đúng', value: correct, cls: 'bg-green-50 border-green-100 text-green-600' },
                { label: 'Sai', value: wrong, cls: 'bg-red-50 border-red-100 text-red-600' },
                { label: 'Bỏ qua', value: skipped, cls: 'bg-slate-50 border-slate-200 text-slate-500' },
                { label: 'Thời gian', value: formatTime(timeUsed), cls: 'bg-blue-50 border-blue-100 text-blue-600' },
              ].map(({ label, value, cls }) => (
                <div key={label} className={cn('border rounded-xl px-4 py-2 text-center', cls)}>
                  <div className="text-xl font-extrabold">{value}</div>
                  <div className="text-xs text-slate-400">{label}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="flex lg:flex-col gap-3 flex-shrink-0">
            <button onClick={() => navigate({ to: '/toeic/session' })}
              className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors">
              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>Làm lại
            </button>
            <button onClick={() => { reset(); navigate({ to: '/toeic' }) }}
              className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors">
              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>Về trang chủ
            </button>
          </div>
        </div>
      </div>

      {/* Answer review grouped by part */}
      {parts.map(part => (
        <div key={part.partNumber} className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
          <h2 className="text-base font-bold text-slate-800 mb-4">Part {part.partNumber} — {part.partName}</h2>
          <div className="space-y-4">
            {part.questions.map((q, i) => {
              const userAnswer = answers[q.id] ?? null
              const isCorrect = userAnswer === q.correctAnswer
              const isSkipped = userAnswer === null || userAnswer === undefined
              return (
                <div key={q.id} className={cn(
                  'rounded-xl border p-4',
                  isCorrect ? 'border-green-100 bg-green-50/50' : isSkipped ? 'border-slate-100 bg-slate-50/50' : 'border-red-100 bg-red-50/50',
                )}>
                  <div className="flex items-start gap-3">
                    <span className={cn(
                      'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5',
                      isCorrect ? 'bg-green-600 text-white' : isSkipped ? 'bg-slate-400 text-white' : 'bg-red-600 text-white',
                    )}>{i + 1}</span>
                    <div className="flex-1 min-w-0">
                      {q.text && <p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>}
                      <div className="flex flex-wrap gap-2 mb-2">
                        {q.options.map((opt, j) => (
                          <span key={j} className={cn(
                            'text-xs px-2.5 py-1 rounded-lg font-medium',
                            j === q.correctAnswer ? 'bg-green-100 text-green-700 border border-green-200'
                              : j === userAnswer && !isCorrect ? 'bg-red-100 text-red-700 border border-red-200 line-through'
                                : 'bg-slate-100 text-slate-500',
                          )}>
                            {ANSWER_LABELS[j]}. {opt}
                          </span>
                        ))}
                      </div>
                      {q.explanation && (
                        <p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
                          <span className="font-semibold text-slate-600">Giải thích: </span>{q.explanation}
                        </p>
                      )}
                    </div>
                    <span className="flex-shrink-0">
                      {isCorrect
                        ? <span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
                        : isSkipped
                          ? <span className="material-symbols-outlined text-slate-400" style={{ fontSize: 20 }}>remove_circle</span>
                          : <span className="material-symbols-outlined text-red-500" style={{ fontSize: 20 }}>cancel</span>}
                    </span>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      ))}
    </div>
  )
}