'use client';

import { useEffect, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { useAppDispatch } from '@akinon/next/redux/hooks';
import { resetCheckoutState } from '@akinon/next/redux/reducers/checkout';
import {
  useFetchCheckoutQuery,
  useResetCheckoutStateQuery
} from '@akinon/next/data/client/checkout';
import { useRouter, useLocalization } from '@akinon/next/hooks';
import { Button, LoaderSpinner } from '@theme/components';
import { ROUTES } from '@theme/routes';
import settings from '@theme/settings';
import {
  getCheckoutVariant,
  UNIFIED_VARIANTS
} from '@theme/views/checkout/variants/registry';
import { CheckoutOnePageSkeleton } from '@theme/views/checkout/variants/one-page/skeletons';
import { useResolvedCheckoutConfig } from '@theme/views/checkout/variants/use-resolved-config';

const Checkout = () => {
  const { t } = useLocalization();
  const router = useRouter();
  const dispatch = useAppDispatch();

  const { data: indexData, isLoading: isResetStateLoading } =
    useResetCheckoutStateQuery(null);

  const {
    data: checkoutData,
    isLoading: isCheckoutLoading,
    isError,
    refetch: refetchCheckout
  } = useFetchCheckoutQuery(null, {
    refetchOnMountOrArgChange: true,
    skip: isResetStateLoading || !indexData
  });

  const { variantId, options: variantOptions } = useResolvedCheckoutConfig();

  const CheckoutAuth = useMemo(
    () => dynamic(() => import('@theme/views/checkout/auth')),
    []
  );

  const CheckoutVariant = useMemo(
    () => getCheckoutVariant(variantId),
    [variantId]
  );

  useEffect(() => {
    return () => {
      dispatch(resetCheckoutState());
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // In unified mode the basket lives inside the checkout page and the basket
  // page auto-redirects here while it has items — following the backend's
  // basket redirect would bounce between the two pages forever. Check the
  // settings.js baseline as well, since the basket page redirects based on it
  // even when the async theme-settings override resolves to another variant.
  const baselineVariant = (settings as { checkout?: { variant?: string } })
    ?.checkout?.variant;
  const isUnifiedCheckout =
    UNIFIED_VARIANTS.has(variantId) ||
    UNIFIED_VARIANTS.has(baselineVariant ?? '');

  if (!isUnifiedCheckout && checkoutData?.redirect_url?.includes('basket')) {
    router.push(ROUTES.BASKET);
    return null;
  }

  if (checkoutData?.template_name === 'orders/index.html') {
    return (
      <section className="container px-4 my-7 md:mt-20 lg:px-0 lg:mx-auto">
        <CheckoutAuth />
      </section>
    );
  }

  if (isError) {
    return (
      <div className="flex flex-col items-center justify-center h-80">
        <div>{t('checkout.error.title')}</div>
        <div className="mt-5">
          <Button onClick={refetchCheckout}>
            {t('checkout.error.button')}
          </Button>
        </div>
      </div>
    );
  }

  if (isResetStateLoading || isCheckoutLoading) {
    return variantId === 'multi-step' ? (
      <div className="flex flex-col items-center justify-center h-80">
        <LoaderSpinner />
      </div>
    ) : (
      <CheckoutOnePageSkeleton />
    );
  }

  return <CheckoutVariant options={variantOptions} />;
};

export default Checkout;
