'use client';

import { Suspense } from 'react';
import { Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { useRouter, useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { VerseRecorder } from '@/components/practice/verse-recorder';
import { verseApi } from '@/services/api/verse';
import { submissionApi } from '@/services/api/submission';

export default function SubmitPage() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>}>
      <SubmitContent />
    </Suspense>
  );
}

function SubmitContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const verseId = searchParams.get('verseId');

  const { data: verse } = useQuery({
    queryKey: ['verse', verseId],
    queryFn: () => verseApi.getVerse(verseId!),
    enabled: !!verseId,
  });

  const handleSubmit = async ({ audio, durationSeconds }: { audio: File; durationSeconds: number }) => {
    if (!verseId) return;
    const submission = await submissionApi.createSubmission({ verseId, audio, durationSeconds });
    toast.success('Latihan terkirim, menganalisis hasil...');
    router.push(`/submit/${submission.id}/result?verseId=${verseId}`);
  };

  return (
    <>
      <title>Latihan Membaca | Nadhom Smart</title>
      <VerseRecorder
        verseId={verseId ?? ''}
        verseLabel={verse?.number ? `Latihan Nadhom Bait ke-${verse.number}` : 'Memuat...'}
        onSubmit={handleSubmit}
      />
    </>
  );
}