'use client';

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

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

export default function VerseHistoryPage() {
  const { id: verseId } = useParams() as { id: string };
  const router = useRouter();

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

  return (
    <>
      <title>Riwayat Setoran | Nadhom Smart</title>
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()} className="rounded-full">
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 className="text-xl font-bold">Riwayat Setoran</h1>
            <p className="text-muted-foreground text-sm">Seluruh riwayat setoran hafalan untuk nadhom ini</p>
          </div>
        </div>

        {isLoading ? (
          <div className="flex justify-center items-center py-20">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        ) : submissions?.length === 0 ? (
          <div className="text-center py-20 text-muted-foreground">
            <History className="h-12 w-12 mx-auto mb-4 opacity-20" />
            <p>Belum ada riwayat setoran untuk nadhom ini.</p>
          </div>
        ) : (
          <div className="space-y-4">
            {submissions?.map((submission: Submission, i: number) => (
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                key={submission.id}
              >
                <SubmissionCard submission={submission} />
              </motion.div>
            ))}
          </div>
        )}
      </motion.div>
    </>
  );
}