'use client';

import { useQuery } from '@tanstack/react-query';
import { BookOpen, Loader2 } from 'lucide-react';
import { VerseCard } from '@/components/cards/verse-card';
import { EmptyState } from '@/components/ui/empty-state';
import { verseApi } from '@/services/api/verse';
import type { VerseStatus } from '@/types';

export default function VersesPage() {
  const { data: versesResponse, isLoading } = useQuery({
    queryKey: ['verses'],
    queryFn: () => verseApi.getStudentVerses({ limit: 100 }),
  });

  const studentVerses = versesResponse?.data || [];

  const verses = studentVerses.map((sv, i) => {
    let mappedStatus: VerseStatus = 'not_started';
    const s = sv.status?.toLowerCase();
    // According to standard submission status
    if (s === 'approved') mappedStatus = 'completed';
    else if (s === 'pending') mappedStatus = 'in_progress';
    else if (s === 'need_revision') mappedStatus = 'need_revision';
    else if (s === 'rejected') mappedStatus = 'need_revision';

    return {
      id: sv.versesId,
      number: i + 1 + ((versesResponse?.meta?.page || 1) - 1) * 100,
      arabicText: sv.arabic,
      latinText: sv.bab,
      translation: '',
      chapterId: '',
      status: mappedStatus,
    };
  });

  return (
    <>
      <title>Daftar Nadhom | Nadhom Smart</title>
      <div className="space-y-4">
        {/* Results count */}
        <p className="text-xs text-muted-foreground">
          {isLoading ? 'Memuat nadhom...' : `${versesResponse?.meta?.total || verses.length} nadhom ditemukan`}
        </p>

        {/* Verse List */}
        {isLoading ? (
          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
            <Loader2 className="h-8 w-8 animate-spin mb-4" />
            <p className="text-sm">Memuat data nadhom...</p>
          </div>
        ) : verses.length > 0 ? (
          <div className="space-y-2">
            {verses.map((verse, i) => (
              <VerseCard key={verse.id} verse={verse} index={i} />
            ))}
          </div>
        ) : (
          <EmptyState
            icon={BookOpen}
            title="Tidak Ada Nadhom"
            description="Belum ada nadhom yang tersedia."
          />
        )}
      </div>
    </>
  );
}