"use client";

import { RFAList } from '@/components/rfas/list';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { Plus, Loader2 } from 'lucide-react';
import { useRFAs } from '@/hooks/use-rfa';
import { useSearchParams } from 'next/navigation';
import { Pagination } from '@/components/common/pagination';

export default function RFAsPage() {
  const searchParams = useSearchParams();
  const page = parseInt(searchParams.get('page') || '1');
  const status = searchParams.get('status') || undefined;
  const search = searchParams.get('search') || undefined;

  const { data, isLoading, isError } = useRFAs({ page, status, search });

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
          <p className="text-muted-foreground mt-1">
            Manage approval requests and submissions
          </p>
        </div>
        <Link href="/rfas/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            New RFA
          </Button>
        </Link>
      </div>

      {/* RFAFilters component could be added here if needed */}

      {isLoading ? (
        <div className="flex justify-center py-8">
          <Loader2 className="h-8 w-8 animate-spin" />
        </div>
      ) : isError ? (
        <div className="text-red-500 text-center py-8">
          Failed to load RFAs.
        </div>
      ) : (
        <>
          <RFAList data={data} />
           <div className="mt-4">
            <Pagination
              currentPage={data?.page || 1}
              totalPages={data?.lastPage || data?.totalPages || 1}
              total={data?.total || 0}
            />
          </div>
        </>
      )}
    </div>
  );
}