import { useNavigate } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { fetchTests } from '@/features/toeic/api/test-list-api'

export function ToeicTestList() {
  const navigate = useNavigate()
  const { data: tests = [], isLoading, error } = useQuery({
    queryKey: ['tests'],
    queryFn: fetchTests,
  })

  return (
    <div className="px-6 lg:px-10 py-10 max-w-6xl mx-auto page-enter">
      {/* Editorial head */}
      <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-10">
        <div>
          <div className="at-eyebrow mb-3">Luyện đề</div>
          <h1 className="at-title text-4xl lg:text-[44px]">
            TOEIC <i>Mock Tests</i>
          </h1>
          <p className="mt-4 text-sm" style={{ color: 'var(--at-mute)' }}>
            Chọn đề để bắt đầu luyện tập — {tests.length} đề thi
          </p>
        </div>
      </div>

      {isLoading && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {Array.from({ length: 6 }).map((_, i) => (
            <div
              key={i}
              className="rounded-2xl h-44 animate-pulse"
              style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
            />
          ))}
        </div>
      )}

      {error && (
        <div
          className="rounded-2xl p-6 text-sm"
          style={{ background: 'var(--at-bad-soft)', border: '1px solid rgba(193,68,62,0.2)', color: 'var(--at-bad)' }}
        >
          Không thể tải danh sách đề thi. Vui lòng thử lại.
        </div>
      )}

      {!isLoading && !error && tests.length === 0 && (
        <div
          className="rounded-2xl p-16 text-center"
          style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
        >
          <span className="material-symbols-outlined mb-3 block" style={{ fontSize: 48, color: 'var(--at-mute-2)' }}>
            library_books
          </span>
          <p className="at-serif text-lg" style={{ color: 'var(--at-ink)' }}>Chưa có đề thi nào.</p>
          <p className="text-sm mt-1" style={{ color: 'var(--at-mute)' }}>Dữ liệu đang được cập nhật.</p>
        </div>
      )}

      {tests.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {tests.map((test) => (
            <div
              key={test.id}
              className="rounded-2xl p-6 flex flex-col transition-all hover:-translate-y-1"
              style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
            >
              {test.categoryName && (
                <span className="at-chip at-chip-brand self-start mb-3">
                  <span className="at-chip-dot" />
                  {test.categoryName}
                </span>
              )}

              <h3
                className="at-serif text-[20px] leading-[1.2] tracking-tight mb-2"
                style={{ color: 'var(--at-ink)', fontWeight: 500 }}
              >
                {test.title}
              </h3>
              {test.description && (
                <p className="text-xs leading-[1.5] mb-3 line-clamp-2" style={{ color: 'var(--at-mute)' }}>
                  {test.description}
                </p>
              )}

              <div className="flex items-center gap-4 text-xs mt-auto mb-4" style={{ color: 'var(--at-mute)' }}>
                <span className="flex items-center gap-1">
                  <span className="material-symbols-outlined" style={{ fontSize: 13 }}>list_alt</span>
                  <b className="tabular-nums" style={{ color: 'var(--at-ink)' }}>{test.totalQuestions}</b> câu
                </span>
                <span className="flex items-center gap-1">
                  <span className="material-symbols-outlined" style={{ fontSize: 13 }}>timer</span>
                  <b className="tabular-nums" style={{ color: 'var(--at-ink)' }}>{test.durationMinutes}</b> phút
                </span>
              </div>

              <button
                onClick={() => navigate({ to: '/toeic/$testId', params: { testId: String(test.id) } })}
                className="w-full py-2.5 rounded-xl text-[13px] font-semibold transition-opacity hover:opacity-90"
                style={{ background: 'var(--at-ink)', color: 'var(--at-paper)' }}
              >
                Bắt đầu
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
