import React, { useMemo } from "react";
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 } from "./types";
import { PackageStep } from "./steps/PackageStep";
import { AuthStep } from "./steps/AuthStep";
import { PaymentStep } from "./steps/PaymentStep";
import { ConfirmationStep } from "./steps/ConfirmationStep";

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

const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
  {
    id: "package",
    title: "Paket wählen",
    description: "Auswahl und Vergleich",
    details: "Wähle das passende Paket für deine Bedürfnisse"
  },
  {
    id: "auth",
    title: "Konto einrichten",
    description: "Login oder Registrierung",
    details: "Erstelle ein Konto oder melde dich an"
  },
  {
    id: "payment",
    title: "Bezahlung",
    description: "Sichere Zahlung",
    details: "Gib deine Zahlungsdaten ein"
  },
  {
    id: "confirmation",
    title: "Fertig!",
    description: "Zugang aktiv",
    details: "Dein Paket ist aktiviert"
  },
];

const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
  const { currentStep, nextStep, previousStep } = useCheckoutWizard();


  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]);

  return (
    <div className="space-y-8">
      <div 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} />}
        {currentStep === "payment" && <PaymentStep stripePublishableKey={stripePublishableKey} />}
        {currentStep === "confirmation" && <ConfirmationStep />}
      </div>

      <div className="flex items-center justify-between">
        <Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
          Zurueck
        </Button>
        <Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
          Weiter
        </Button>
      </div>
    </div>
  );
};

export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
  initialPackage,
  packageOptions,
  stripePublishableKey,
  privacyHtml,
  initialAuthUser,
  initialStep,
}) => {

  return (
    <CheckoutWizardProvider
      initialPackage={initialPackage}
      packageOptions={packageOptions}
      initialStep={initialStep}
      initialAuthUser={initialAuthUser ?? undefined}
      initialIsAuthenticated={Boolean(initialAuthUser)}
    >
      <WizardBody stripePublishableKey={stripePublishableKey} privacyHtml={privacyHtml} />
    </CheckoutWizardProvider>
  );
};