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 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 gap-6" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))' }}>
          {Array.from({ length: 4 }).map((_, i) => (
            <div
              key={i}
              className="rounded-2xl h-64 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 gap-6" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))' }}>
          {tests.map((test) => (
            <div
              key={test.id}
              className="rounded-3xl flex flex-col transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-16px_rgba(15,17,20,0.12)]"
              style={{
                background: 'var(--at-surface)',
                border: '1px solid var(--at-line)',
                padding: 32,
              }}
            >
              {test.categoryName && (
                <span className="at-chip at-chip-brand self-start mb-5">
                  <span className="at-chip-dot" />
                  {test.categoryName}
                </span>
              )}

              <h3
                className="at-serif tracking-tight mb-3"
                style={{
                  color: 'var(--at-ink)',
                  fontWeight: 500,
                  fontSize: 28,
                  lineHeight: 1.15,
                  letterSpacing: '-0.02em',
                }}
              >
                {test.title}
              </h3>
              {test.description && (
                <p
                  className="line-clamp-2 mb-6"
                  style={{ color: 'var(--at-mute)', fontSize: 14, lineHeight: 1.55 }}
                >
                  {test.description}
                </p>
              )}

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

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