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'

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 { partId, partName, questions, answers, timeUsed, reset } = useTestStore()
  const { isAuthenticated, isLoading } = useRequireAuth()
  const user = useAuthStore((s) => s.user)
  const savedRef = useRef(false)

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

  // Save test result once when page mounts (fire-and-forget)
  useEffect(() => {
    if (!user || savedRef.current || questions.length === 0) return
    savedRef.current = true
    saveTestResult(user.id, {
      partId,
      partName,
      score: answers.filter((a, i) => a === questions[i]?.correctAnswer).length,
      total: questions.length,
      timeUsed,
      answers: questions.map((q, i) => ({
        questionId: q.id,
        selected: answers[i],
        correct: answers[i] === q.correctAnswer,
      })),
    })
  }, [user, questions, answers, partId, partName, timeUsed])

  const correct = answers.filter((a, i) => a === questions[i]?.correctAnswer).length
  const wrong = answers.filter((a, i) => a !== null && a !== questions[i]?.correctAnswer).length
  const skipped = answers.filter((a) => a === null).length
  const total = questions.length
  const percent = total > 0 ? Math.round((correct / total) * 100) : 0

  const circumference = 2 * Math.PI * 52
  const offset = circumference - (percent / 100) * circumference

  function handleRetry() {
    navigate({ to: '/toeic/session' })
  }

  function handleHome() {
    reset()
    navigate({ to: '/' })
  }

  if (questions.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 Part để luyện thi
        </button>
      </div>
    )
  }

  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">
          {/* Circle */}
          <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>

          {/* Stats */}
          <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">
              Part {partId} — {partName}
            </div>
            <div className="flex flex-wrap gap-3 justify-center lg:justify-start">
              <div className="bg-green-50 border border-green-100 rounded-xl px-4 py-2 text-center">
                <div className="text-xl font-extrabold text-green-600">{correct}</div>
                <div className="text-xs text-slate-400">Đúng</div>
              </div>
              <div className="bg-red-50 border border-red-100 rounded-xl px-4 py-2 text-center">
                <div className="text-xl font-extrabold text-red-600">{wrong}</div>
                <div className="text-xs text-slate-400">Sai</div>
              </div>
              <div className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-center">
                <div className="text-xl font-extrabold text-slate-500">{skipped}</div>
                <div className="text-xs text-slate-400">Bỏ qua</div>
              </div>
              <div className="bg-blue-50 border border-blue-100 rounded-xl px-4 py-2 text-center">
                <div className="text-xl font-extrabold text-blue-600">{formatTime(timeUsed)}</div>
                <div className="text-xs text-slate-400">Thời gian</div>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="flex lg:flex-col gap-3 flex-shrink-0">
            <button
              onClick={handleRetry}
              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={handleHome}
              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 */}
      <div className="bg-white rounded-2xl border border-slate-200 p-6">
        <h2 className="text-base font-bold text-slate-800 mb-4">Xem lại đáp án</h2>
        <div className="space-y-4">
          {questions.map((q, i) => {
            const userAnswer = answers[i]
            const isCorrect = userAnswer === q.correctAnswer
            const isSkipped = userAnswer === null

            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">
                    <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',
                          )}
                        >
                          {['A', 'B', 'C', 'D'][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>
  )
}
