'use client';

import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
import {
  useSponsorshipRequestsPageData,
  useSponsorshipRequestMutations
} from "@/lib/hooks/sponsor/useSponsorshipRequestsPageData";
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";

export default function SponsorshipRequestsPage() {
  const currentDriverId = useEffectiveDriverId();

  // Fetch data using domain hook
  const { data: sections, isLoading, error, refetch } = useSponsorshipRequestsPageData(currentDriverId);

  // Mutations using domain hook
  const { acceptMutation, rejectMutation } = useSponsorshipRequestMutations(currentDriverId, refetch);

  // Template needs to handle mutations
  const TemplateWithMutations = ({ data }: { data: any[] }) => (
    <SponsorshipRequestsTemplate
      data={data}
      onAccept={async (requestId) => {
        await acceptMutation.mutateAsync({ requestId });
      }}
      onReject={async (requestId, reason) => {
        await rejectMutation.mutateAsync({ requestId, reason });
      }}
    />
  );

  return (
    <StatefulPageWrapper
      data={sections}
      isLoading={isLoading}
      error={error as Error | null}
      retry={refetch}
      Template={TemplateWithMutations}
      loading={{ variant: 'skeleton', message: 'Loading sponsorship requests...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        title: 'No Pending Requests',
        description: 'You don\'t have any pending sponsorship requests at the moment.',
      }}
    />
  );
}