'use client';
import React, { useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import InscriptionFormShared from '@/components/Inscription/InscriptionFormShared';
import { FE_ADMIN_SUBSCRIPTIONS_URL } from '@/utils/Url';
import { useCsrfToken } from '@/context/CsrfContext';
import { useEstablishment } from '@/context/EstablishmentContext';
import { editRegisterForm } from '@/app/actions/subscriptionAction';
import logger from '@/utils/logger';
import Loader from '@/components/Loader';

export default function Page() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const studentId = searchParams.get('studentId');
  const enable = searchParams.get('enabled') === 'true';

  const [formErrors, setFormErrors] = useState({});
  const csrfToken = useCsrfToken();
  const { selectedEstablishmentId } = useEstablishment();
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = (data) => {
    setIsLoading(true);
    editRegisterForm(studentId, data, csrfToken)
      .then((result) => {
        setIsLoading(false);
        logger.debug('Success:', result);
        router.push(FE_ADMIN_SUBSCRIPTIONS_URL);
      })
      .catch((error) => {
        setIsLoading(false);
        logger.error('Error:', error.message);
        if (error.details) {
          logger.error('Form errors:', error.details);
          setFormErrors(error.details);
        }
      });
  };

  if (isLoading) {
    return <Loader />;
  }

  return (
    <InscriptionFormShared
      studentId={studentId}
      csrfToken={csrfToken}
      selectedEstablishmentId={selectedEstablishmentId}
      onSubmit={handleSubmit}
      cancelUrl={FE_ADMIN_SUBSCRIPTIONS_URL}
      errors={formErrors}
      enable={enable}
    />
  );
}
