'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { processMontonioCallback } from './actions';

export default function MontonioCallbackClient({ orderToken, error }: {
  orderToken?: string;
  error?: string;
}) {
  const router = useRouter();

  const [isProcessing, setIsProcessing] = useState(false);
  const [hasProcessed, setHasProcessed] = useState(false);

  useEffect(() => {
    if (error) {
      console.error(error);
      router.push('/home/cart/montonio-callback/error');
      return;
    }

    if (!orderToken || hasProcessed || isProcessing) {
      return;
    }

    const processOrder = async () => {
      setIsProcessing(true);
      setHasProcessed(true);

      try {
        const { orderId } = await processMontonioCallback(orderToken);
        router.push(`/home/order/${orderId}/confirmed`);
      } catch (error) {
        console.error("Failed to place order", error);
        router.push('/home/cart/montonio-callback/error');
      } finally {
        setIsProcessing(false);
      }
    };

    processOrder();
  }, [orderToken, error, router, hasProcessed, isProcessing]);

  return (
    <div className="flex mt-10 justify-center min-h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
      </div>
    </div>
  );
}