import { useState } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { cn } from '@/lib/utils'
import { fetchTestWithParts } from '@/features/toeic/api/test-list-api'
import { fetchQuestionsForTest } from '@/hooks/use-questions'
import { useTestStore } from '@/store/test-store'
import { useRequireAuth } from '@/hooks/use-require-auth'

interface Props { testId: number }

export function ToeicTestDetail({ testId }: Props) {
  const navigate = useNavigate()
  const { startExam } = useTestStore()
  const { requireAuth } = useRequireAuth()
  const [selectedParts, setSelectedParts] = useState<number[]>([])
  const [loading, setLoading] = useState(false)

  const { data, isLoading } = useQuery({
    queryKey: ['test-detail', testId],
    queryFn: () => fetchTestWithParts(testId),
  })

  function togglePart(partNumber: number) {
    setSelectedParts(prev =>
      prev.includes(partNumber) ? prev.filter(p => p !== partNumber) : [...prev, partNumber]
    )
  }

  async function handleStart(mode: 'full' | 'parts') {
    if (!requireAuth()) return
    if (mode === 'parts' && selectedParts.length === 0) return
    if (!data) return
    setLoading(true)
    try {
      const partNumbers = mode === 'full' ? undefined : selectedParts
      const parts = await fetchQuestionsForTest(testId, partNumbers)
      const totalSeconds = mode === 'full'
        ? data.test.durationMinutes * 60
        : selectedParts.length * 10 * 60
      startExam({ testId, testName: data.test.title, parts, totalSeconds })
      navigate({ to: '/toeic/session' })
    } finally {
      setLoading(false)
    }
  }

  if (isLoading) {
    return (
      <div className="px-6 py-8 max-w-5xl mx-auto">
        <div className="h-8 w-64 bg-slate-200 rounded animate-pulse mb-8" />
        <div className="grid grid-cols-2 gap-5">
          <div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
          <div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
        </div>
      </div>
    )
  }

  if (!data) return null
  const { test, parts } = data

  return (
    <div className="px-6 py-8 max-w-5xl mx-auto page-enter">
      {/* Back + title */}
      <div className="flex items-center gap-3 mb-1">
        <button
          onClick={() => navigate({ to: '/toeic' })}
          className="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center hover:bg-slate-50 transition-colors"
        >
          <span className="material-symbols-outlined text-slate-600" style={{ fontSize: 18 }}>arrow_back</span>
        </button>
        <h1 className="text-2xl font-extrabold text-slate-800">{test.title}</h1>
      </div>
      <p className="text-slate-400 text-sm ml-11 mb-8">{test.totalQuestions} câu · {test.durationMinutes} phút</p>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Full test card */}
        <div
          className="rounded-2xl p-6 flex flex-col text-white relative overflow-hidden"
          style={{ background: 'linear-gradient(135deg, #2563EB, #1d4ed8)' }}
        >
          <div className="absolute -top-4 -right-4 opacity-10">
            <span className="material-symbols-outlined" style={{ fontSize: 100 }}>military_tech</span>
          </div>
          <span className="material-symbols-outlined mb-4" style={{ fontSize: 32 }}>military_tech</span>
          <h2 className="text-2xl font-extrabold mb-1">Thi Toàn Bộ</h2>
          <p className="text-blue-100 text-sm mb-2">{test.totalQuestions} câu · {test.durationMinutes} phút · Toàn bộ {parts.length} parts</p>
          <p className="text-blue-100 text-xs mb-8">Mô phỏng bài thi TOEIC thực tế với giới hạn thời gian.</p>
          <button
            onClick={() => handleStart('full')}
            disabled={loading}
            className="mt-auto py-3 bg-white text-blue-600 rounded-xl font-bold text-sm hover:bg-blue-50 transition-colors disabled:opacity-60 flex items-center justify-center gap-2"
          >
            {loading ? <span className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" /> : (
              <><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu thi</>
            )}
          </button>
        </div>

        {/* Part selection card */}
        <div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col">
          <span className="material-symbols-outlined text-blue-600 mb-4" style={{ fontSize: 32 }}>checklist</span>
          <h2 className="text-xl font-extrabold text-slate-800 mb-1">Chọn Part Luyện Tập</h2>
          <p className="text-slate-400 text-sm mb-4">Chọn các part muốn luyện tập</p>

          <div className="space-y-2 flex-1">
            {parts.map((part) => {
              const checked = selectedParts.includes(part.partNumber)
              return (
                <button
                  key={part.partNumber}
                  onClick={() => togglePart(part.partNumber)}
                  className={cn(
                    'w-full flex items-center gap-3 px-3 py-2.5 rounded-xl border-2 transition-all text-left',
                    checked
                      ? 'border-blue-600 bg-blue-50'
                      : 'border-slate-100 hover:border-slate-200 bg-slate-50/50',
                  )}
                >
                  <span className={cn(
                    'w-5 h-5 rounded flex items-center justify-center border-2 flex-shrink-0',
                    checked ? 'bg-blue-600 border-blue-600' : 'border-slate-300',
                  )}>
                    {checked && <span className="material-symbols-outlined text-white" style={{ fontSize: 14 }}>check</span>}
                  </span>
                  <span className="flex-1 text-sm font-semibold text-slate-700">
                    Part {part.partNumber} — {part.title}
                  </span>
                  <span className="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full flex-shrink-0">
                    {part.questionCount} câu
                  </span>
                </button>
              )
            })}
          </div>

          <button
            onClick={() => handleStart('parts')}
            disabled={loading || selectedParts.length === 0}
            className="mt-4 w-full py-3 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            {loading ? <span className="w-4 h-4 border-2 border-blue-200 border-t-white rounded-full animate-spin" /> : (
              <><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu luyện tập</>
            )}
          </button>
        </div>
      </div>
    </div>
  )
}