'use client';

import { useQuery } from '@tanstack/react-query';
import { Loader2, Sparkles } from 'lucide-react';
import { practiceApi } from '@/services/api/practice';
import { PracticeCard } from './practice-card';

interface PracticeHistoryProps {
  verseId: string;
}

export function PracticeHistory({ verseId }: PracticeHistoryProps) {
  const { data: practices, isLoading } = useQuery({
    queryKey: ['my-practices', verseId],
    queryFn: () => practiceApi.getMyPracticesByVerse(verseId),
    enabled: !!verseId,
    refetchInterval: (query) => {
      const hasProcessing = query.state.data?.some(
        (practice) => practice.status.toUpperCase() === 'PROCESSING'
      );
      return hasProcessing ? 4000 : false;
    },
  });

  const verseHistory = (practices ?? []).slice().sort(
    (a, b) => new Date(b.recordedAt).getTime() - new Date(a.recordedAt).getTime()
  );

  if (isLoading) {
    return (
      <div className="flex justify-center items-center py-10">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (verseHistory.length === 0) {
    return (
      <div className="text-center py-10 text-muted-foreground">
        <Sparkles className="h-10 w-10 mx-auto mb-3 opacity-20" />
        <p>Belum ada latihan untuk nadhom ini.</p>
        <p className="text-xs mt-1">Tekan tombol di bawah untuk mulai latihan.</p>
      </div>
    );
  }

  return (
    <div className="w-full space-y-3">
      {verseHistory.map((practice) => (
        <PracticeCard key={practice.id} practice={practice} />
      ))}
    </div>
  );
}