fotospiel-app/resources/js/pages/marketing/checkout/CheckoutWizard.tsx

import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy, useState } from "react";
import { useTranslation } from 'react-i18next';
import { Steps } from "@/components/ui/Steps";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
import type { CheckoutPackage, CheckoutStepId, GoogleProfilePrefill } from "./types";
import { PackageStep } from "./steps/PackageStep";
import { AuthStep } from "./steps/AuthStep";
import { ConfirmationStep } from "./steps/ConfirmationStep";
import { useAnalytics } from '@/hooks/useAnalytics';

const PaymentStep = lazy(() => import('./steps/PaymentStep').then((module) => ({ default: module.PaymentStep })));

interface CheckoutWizardProps {
  initialPackage: CheckoutPackage;
  packageOptions: CheckoutPackage[];
  privacyHtml: string;
  initialAuthUser?: {
    id: number;
    email: string;
    name?: string;
    pending_purchase?: boolean;
  } | null;
  initialStep?: CheckoutStepId;
  googleProfile?: GoogleProfilePrefill | null;
  paddle?: {
    environment?: string | null;
    client_token?: string | null;
  } | null;
}

const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
  {
    id: "package",
    titleKey: 'checkout.package_step.title',
    descriptionKey: 'checkout.package_step.subtitle',
    detailsKey: 'checkout.package_step.description'
  },
  {
    id: "auth",
    titleKey: 'checkout.auth_step.title',
    descriptionKey: 'checkout.auth_step.subtitle',
    detailsKey: 'checkout.auth_step.description'
  },
  {
    id: "payment",
    titleKey: 'checkout.payment_step.title',
    descriptionKey: 'checkout.payment_step.subtitle',
    detailsKey: 'checkout.payment_step.description'
  },
  {
    id: "confirmation",
    titleKey: 'checkout.confirmation_step.title',
    descriptionKey: 'checkout.confirmation_step.subtitle',
    detailsKey: 'checkout.confirmation_step.description'
  },
];

const PaymentStepFallback: React.FC = () => (
  <div className="rounded-lg border bg-card p-6 shadow-sm">
    <div className="mb-4 h-4 w-52 animate-pulse rounded bg-muted" />
    <div className="h-10 w-full animate-pulse rounded bg-muted" />
  </div>
);

const WizardBody: React.FC<{
  privacyHtml: string;
  googleProfile?: GoogleProfilePrefill | null;
  onClearGoogleProfile?: () => void;
}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
  const { t } = useTranslation('marketing');
  const {
    currentStep,
    nextStep,
    previousStep,
    selectedPackage,
    authUser,
    isAuthenticated,
    paymentCompleted,
  } = useCheckoutWizard();
  const progressRef = useRef<HTMLDivElement | null>(null);
  const hasMountedRef = useRef(false);
  const { trackEvent } = useAnalytics();

  const isFreeSelected = useMemo(() => {
    if (!selectedPackage) {
      return false;
    }

    const priceValue = Number(selectedPackage.price);
    return Number.isFinite(priceValue) && priceValue <= 0;
  }, [selectedPackage]);

  const stepConfig = useMemo(() =>
    baseStepConfig.map(step => ({
      id: step.id,
      title: t(step.titleKey),
      description: t(step.descriptionKey),
      details: t(step.detailsKey),
    })),
    [t]
  );

  const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
  const progress = useMemo(() => {
    if (currentIndex < 0) {
      return 0;
    }
    return (currentIndex / (stepConfig.length - 1)) * 100;
  }, [currentIndex, stepConfig]);

  useEffect(() => {
    trackEvent({
      category: 'marketing_checkout',
      action: 'step_view',
      name: currentStep,
    });
  }, [currentStep, trackEvent]);

  useEffect(() => {
    if (typeof window === 'undefined' || !progressRef.current) {
      return;
    }

    if (!hasMountedRef.current) {
      hasMountedRef.current = true;
      return;
    }

    const element = progressRef.current;
    const rect = element.getBoundingClientRect();
    const scrollTop = window.scrollY + rect.top - 16; // slightly above the progress bar

    window.scrollTo({
      top: Math.max(scrollTop, 0),
      behavior: 'smooth',
    });
  }, [currentStep]);

  const atLastStep = currentIndex >= stepConfig.length - 1;

  const canProceedToNextStep = useMemo(() => {
    if (atLastStep) {
      return false;
    }

    if (currentStep === 'package') {
      return Boolean(selectedPackage);
    }

    if (currentStep === 'auth') {
      return Boolean(isAuthenticated && authUser);
    }

    if (currentStep === 'payment') {
      return isFreeSelected || paymentCompleted;
    }

    return true;
  }, [atLastStep, authUser, currentStep, isAuthenticated, isFreeSelected, paymentCompleted, selectedPackage]);

  const shouldShowNextButton = useMemo(() => {
    if (currentStep !== 'payment') {
      return true;
    }

    return isFreeSelected || paymentCompleted;
  }, [currentStep, isFreeSelected, paymentCompleted]);

  const handleNext = useCallback(() => {
    if (!canProceedToNextStep) {
      return;
    }

    const targetStep = stepConfig[currentIndex + 1]?.id ?? 'end';
    trackEvent({
      category: 'marketing_checkout',
      action: 'step_next',
      name: `${currentStep}->${targetStep}`,
    });
    nextStep();
  }, [canProceedToNextStep, currentIndex, currentStep, nextStep, stepConfig, trackEvent]);

  const handlePrevious = useCallback(() => {
    const targetStep = stepConfig[currentIndex - 1]?.id ?? 'start';
    trackEvent({
      category: 'marketing_checkout',
      action: 'step_previous',
      name: `${currentStep}->${targetStep}`,
    });
    previousStep();
  }, [currentIndex, currentStep, previousStep, stepConfig, trackEvent]);

  const handleViewProfile = useCallback(() => {
    window.location.href = '/settings/profile';
  }, []);

  const handleGoToAdmin = useCallback(() => {
    window.location.href = '/event-admin';
  }, []);

  return (
    <div className="space-y-8">
      <div ref={progressRef} className="space-y-4">
        <Progress value={progress} />
        <Steps steps={stepConfig} currentStep={currentIndex >= 0 ? currentIndex : 0} />
      </div>

      <div className="space-y-6">
        {currentStep === "package" && <PackageStep />}
        {currentStep === "auth" && (
          <AuthStep
            privacyHtml={privacyHtml}
            googleProfile={googleProfile ?? undefined}
            onClearGoogleProfile={onClearGoogleProfile}
          />
        )}
        {currentStep === "payment" && (
          <Suspense fallback={<PaymentStepFallback />}>
            <PaymentStep />
          </Suspense>
        )}
        {currentStep === "confirmation" && (
          <ConfirmationStep onViewProfile={handleViewProfile} onGoToAdmin={handleGoToAdmin} />
        )}
      </div>

      <div className="flex items-center justify-between gap-4">
        <Button variant="ghost" onClick={handlePrevious} disabled={currentIndex <= 0}>
          {t('checkout.back')}
        </Button>
        {shouldShowNextButton ? (
          <Button onClick={handleNext} disabled={!canProceedToNextStep}>
            {t('checkout.next')}
          </Button>
        ) : (
          <div className="h-10 min-w-[128px]" aria-hidden="true" />
        )}
      </div>
    </div>
  );
};

export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
  initialPackage,
  packageOptions,
  privacyHtml,
  initialAuthUser,
  initialStep,
  googleProfile,
  paddle,
}) => {
  const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
    if (typeof window === 'undefined') {
      return null;
    }

    const raw = window.localStorage.getItem('checkout-google-profile');
    if (!raw) {
      return null;
    }

    try {
      return JSON.parse(raw) as GoogleProfilePrefill;
    } catch (error) {
      console.warn('Failed to parse checkout google profile from storage', error);
      window.localStorage.removeItem('checkout-google-profile');
      return null;
    }
  });

  useEffect(() => {
    if (!googleProfile) {
      return;
    }

    setStoredProfile(googleProfile);

    if (typeof window !== 'undefined') {
      window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
    }
  }, [googleProfile]);

  const clearStoredProfile = useCallback(() => {
    setStoredProfile(null);
    if (typeof window !== 'undefined') {
      window.localStorage.removeItem('checkout-google-profile');
    }
  }, []);

  const effectiveProfile = googleProfile ?? storedProfile;

  return (
    <CheckoutWizardProvider
      initialPackage={initialPackage}
      packageOptions={packageOptions}
      initialStep={initialStep}
      initialAuthUser={initialAuthUser ?? undefined}
      initialIsAuthenticated={Boolean(initialAuthUser)}
      paddle={paddle ?? null}
    >
      <WizardBody
        privacyHtml={privacyHtml}
        googleProfile={effectiveProfile}
        onClearGoogleProfile={clearStoredProfile}
      />
    </CheckoutWizardProvider>
  );
};