'use client';

import { useQuery } from '@tanstack/react-query';
import { History, Loader2 } from 'lucide-react';
import { useRouter } from 'next/navigation';

import { Button } from '@/components/ui/button';
import { SubmissionCard } from '@/components/submission/submission-card';
import { submissionApi } from '@/services/api/submission';
import { Submission } from '@/types';

interface SubmissionListProps {
  verseId: string;
  limit?: number;
}

export function SubmissionList({ verseId, limit = 3 }: SubmissionListProps) {
  const router = useRouter();

  const { data: submissions, isLoading } = useQuery({
    queryKey: ['my-submissions', verseId],
    queryFn: () => submissionApi.getMySubmissionsByVerse(verseId),
    enabled: !!verseId,
  });

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

  if (!submissions || submissions.length === 0) {
    return (
      <div className="text-center py-10 text-muted-foreground">
        <History className="h-10 w-10 mx-auto mb-3 opacity-20" />
        <p>Belum ada riwayat setoran untuk nadhom ini.</p>
        <p className="text-xs mt-1">Tekan tombol di bawah untuk setor hafalan.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {submissions.slice(0, limit).map((submission: Submission) => (
        <SubmissionCard key={submission.id} submission={submission} />
      ))}

      {submissions.length > limit && (
        <Button
          variant="outline"
          className="w-full rounded-xl mt-2"
          onClick={() => router.push(`/verses/${verseId}/history`)}
        >
          Lihat Semua
        </Button>
      )}
    </div>
  );
}