import React from "react";
import { Head, usePage } from "@inertiajs/react";
import MarketingLayout from "@/layouts/mainWebsite";
import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types";
import { CheckoutWizard } from "./checkout/CheckoutWizard";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";

interface CheckoutWizardPageProps {
  package: CheckoutPackage;
  packageOptions: CheckoutPackage[];
  privacyHtml: string;
  googleAuth?: {
    status?: string | null;
    error?: string | null;
    profile?: GoogleProfilePrefill | null;
  };
  paddle?: {
    environment?: string | null;
    client_token?: string | null;
  };
}

const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
  package: initialPackage,
  packageOptions,
  privacyHtml,
  googleAuth,
  paddle,
}) => {
  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
  const currentUser = page.props.auth?.user ?? null;
  const googleProfile = googleAuth?.profile ?? null;


  const dedupedOptions = React.useMemo(() => {
    const ids = new Set<number>();
    const list = [initialPackage, ...packageOptions];
    return list.filter((pkg) => {
      if (ids.has(pkg.id)) {
        return false;
      }
      ids.add(pkg.id);
      return true;
    });
  }, [initialPackage, packageOptions]);

  return (
    <MarketingLayout title="Checkout Wizard">
      <Head title="Checkout Wizard" />
      <div className="min-h-screen bg-muted/20 py-12">
        <div className="mx-auto w-full max-w-4xl px-4">
          {/* Abbruch-Button oben rechts */}
          <div className="flex justify-end mb-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => window.location.href = '/packages'}
              className="text-muted-foreground hover:text-foreground"
            >
              <X className="h-4 w-4 mr-2" />
              Abbrechen
            </Button>
          </div>

          <CheckoutWizard
            initialPackage={initialPackage}
            packageOptions={dedupedOptions}
            privacyHtml={privacyHtml}
            initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
            googleProfile={googleProfile}
            paddle={paddle ?? null}
          />
        </div>
      </div>
    </MarketingLayout>
  );
};

CheckoutWizardPage.layout = (page: React.ReactNode) => page;

export default CheckoutWizardPage;
