fotospiel-app/resources/js/pages/marketing/PurchaseWizard.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Head, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { loadStripe } from '@stripe/stripe-js';
import { Steps } from '@/components/ui/steps';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import RegisterForm from '../auth/RegisterForm';
import LoginForm from '../auth/LoginForm';
import PaymentForm from './PaymentForm';
import SuccessStep from './SuccessStep';

interface Package {
  id: number;
  name: string;
  description: string;
  price: number;
  features: string[];
}

interface PurchaseWizardProps {
  package: Package;
  stripePublishableKey: string;
  paypalClientId?: string | null;
  privacyHtml: string;
}

type StepId = 'package' | 'auth' | 'payment' | 'success';

interface WizardUser {
  id: number;
  email: string;
  name?: string;
  pending_purchase?: boolean;
  email_verified?: boolean;
}

interface AuthSuccessPayload {
  status: 'authenticated' | 'registered';
  user?: WizardUser;
  next_step?: StepId | 'verification';
  needs_verification?: boolean;
  package?: {
    id: number;
    name: string;
    price: number;
    type: string;
  } | null;
}

const steps: Array<{ id: StepId; title: string; description: string }> = [
  { id: 'package', title: 'Paket auswählen', description: 'Bestätigen Sie Ihr gewähltes Paket' },
  { id: 'auth', title: 'Anmelden oder Registrieren', description: 'Erstellen oder melden Sie sich an' },
  { id: 'payment', title: 'Zahlung', description: 'Sichern Sie Ihr Paket ab' },
  { id: 'success', title: 'Erfolg', description: 'Willkommen!' },
];

export default function PurchaseWizard({
  package: initialPackage,
  stripePublishableKey,
  paypalClientId,
  privacyHtml,
}: PurchaseWizardProps) {
  const { t } = useTranslation(['marketing', 'auth']);
  const { props } = usePage();
  const serverUser = (props as any)?.auth?.user ?? null;

  const [currentStepIndex, setCurrentStepIndex] = useState(0);
  const [authType, setAuthType] = useState<'register' | 'login'>('register');
  const [wizardUser, setWizardUser] = useState<WizardUser | null>(serverUser);
  const [authNotice, setAuthNotice] = useState<string | null>(null);

  const isAuthenticated = Boolean(wizardUser);

  useEffect(() => {
    if (serverUser) {
      setWizardUser(serverUser);
    }
  }, [serverUser ? serverUser.id : null]);

  const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);

  const goToStep = useCallback((stepId: StepId) => {
    const idx = steps.findIndex((step) => step.id === stepId);
    if (idx >= 0) {
      setCurrentStepIndex(idx);
    }
  }, []);

  const handleContinue = useCallback(() => {
    let nextIndex = Math.min(currentStepIndex + 1, steps.length - 1);
    if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
      nextIndex = Math.min(nextIndex + 1, steps.length - 1);
    }
    setCurrentStepIndex(nextIndex);
  }, [currentStepIndex, isAuthenticated]);

  const handleBack = useCallback(() => {
    let nextIndex = Math.max(currentStepIndex - 1, 0);
    if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
      nextIndex = Math.max(nextIndex - 1, 0);
    }
    setCurrentStepIndex(nextIndex);
  }, [currentStepIndex, isAuthenticated]);

  const handleAuthSuccess = useCallback(
    (payload: AuthSuccessPayload) => {
      if (payload?.user) {
        setWizardUser(payload.user);
      }

      if (payload?.needs_verification) {
        setAuthNotice(t('auth:verify_notice', { defaultValue: 'Bitte bestätige deine E-Mail-Adresse, um fortzufahren.' }));
      } else {
        setAuthNotice(null);
      }

      const next = payload?.next_step;
      if (next === 'success') {
        goToStep('success');
      } else {
        goToStep('payment');
      }
    },
    [goToStep, t],
  );

  const handlePaymentSuccess = useCallback(() => {
    goToStep('success');
  }, [goToStep]);

  const renderPackageStep = () => (
    <Card>
      <CardHeader>
        <CardTitle>{initialPackage.name}</CardTitle>
        <CardDescription>{initialPackage.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          {t('marketing:payment.price_label', { defaultValue: 'Preis' })}:
          {' '}
          {initialPackage.price === 0
            ? t('marketing:payment.free', { defaultValue: 'Kostenlos' })
            : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(initialPackage.price)}
        </p>
        <ul className="list-disc pl-5 mt-4 space-y-1">
          {initialPackage.features.map((feature, index) => (
            <li key={index}>{feature}</li>
          ))}
        </ul>
        <Button onClick={handleContinue} className="w-full mt-6">
          {t('marketing:payment.continue', { defaultValue: 'Weiter' })}
        </Button>
      </CardContent>
    </Card>
  );

  const renderAuthStep = () => {
    if (isAuthenticated) {
      return (
        <Card>
          <CardHeader>
            <CardTitle>{t('auth:already_authenticated', { defaultValue: 'Bereits angemeldet' })}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Alert>
              <AlertDescription>
                {t('auth:logged_in_as', {
                  defaultValue: 'Du bist angemeldet als {{email}}.',
                  email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
                })}
              </AlertDescription>
            </Alert>
            {authNotice && (
              <Alert>
                <AlertDescription>{authNotice}</AlertDescription>
              </Alert>
            )}
            <Button onClick={() => goToStep('payment')} className="w-full">
              {t('auth:skip_to_payment', { defaultValue: 'Weiter zur Zahlung' })}
            </Button>
          </CardContent>
        </Card>
      );
    }

    return (
      <div className="space-y-6">
        <div className="flex justify-center gap-3">
          <Button
            variant={authType === 'register' ? 'default' : 'outline'}
            onClick={() => {
              setAuthType('register');
              setAuthNotice(null);
            }}
          >
            {t('auth:register.title', { defaultValue: 'Registrieren' })}
          </Button>
          <Button
            variant={authType === 'login' ? 'default' : 'outline'}
            onClick={() => {
              setAuthType('login');
              setAuthNotice(null);
            }}
          >
            {t('auth:login.title', { defaultValue: 'Anmelden' })}
          </Button>
        </div>
        {authNotice && (
          <Alert>
            <AlertDescription>{authNotice}</AlertDescription>
          </Alert>
        )}
        {authType === 'register' ? (
          <RegisterForm
            packageId={initialPackage.id}
            privacyHtml={privacyHtml}
            onSuccess={handleAuthSuccess}
          />
        ) : (
          <LoginForm onSuccess={handleAuthSuccess} />
        )}
      </div>
    );
  };

  const renderPaymentStep = () => (
    <div className="space-y-4">
      {isAuthenticated && (
        <Alert>
          <AlertDescription>
            {t('marketing:payment.authenticated_notice', {
              defaultValue: 'Angemeldet als {{email}}. Zahlungsmethode auswählen.',
              email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
            })}
          </AlertDescription>
        </Alert>
      )}
      {authNotice && (
        <Alert>
          <AlertDescription>{authNotice}</AlertDescription>
        </Alert>
      )}
      <PaymentForm
        packageId={initialPackage.id}
        packageName={initialPackage.name}
        price={initialPackage.price}
        currency="EUR"
        stripePromise={stripePromise}
        paypalClientId={paypalClientId}
        onSuccess={handlePaymentSuccess}
      />
    </div>
  );

  const renderSuccessStep = () => <SuccessStep package={initialPackage} />;

  const currentStep = steps[currentStepIndex];

  const renderStepContent = () => {
    switch (currentStep.id) {
      case 'package':
        return renderPackageStep();
      case 'auth':
        return renderAuthStep();
      case 'payment':
        return renderPaymentStep();
      case 'success':
        return renderSuccessStep();
      default:
        return null;
    }
  };

  return (
    <MarketingLayout title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })}>
      <Head title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })} />
      <div className="min-h-screen bg-gray-50 py-12">
        <div className="max-w-2xl mx-auto px-4">
          <Progress value={(currentStepIndex / (steps.length - 1)) * 100} className="mb-6" />
          <Steps steps={steps} currentStep={currentStepIndex} />
          {renderStepContent()}
          {currentStep.id !== 'success' && currentStep.id !== 'package' && (
            <div className="mt-6">
              <Button variant="outline" onClick={handleBack}>
                {t('marketing:payment.back', { defaultValue: 'Zurück' })}
              </Button>
            </div>
          )}
        </div>
      </div>
    </MarketingLayout>
  );
}