"use client";

import { useState, useCallback } from "react";
import OrderInfoSection from "@/components/OrderInfoSection";
import OrderConfirmationSection from "@/components/OrderConfirmationSection";
import type { HeroButton } from "@/components/Hero";
import WhatHappensNext, { type WhatHappensNextStep } from "@/components/WhatHappensNext";

interface PaymentPageContentProps {
    heroButtons: HeroButton[];
    whatHappensNextSteps: WhatHappensNextStep[];
    importantInformationTitle?: string;
    importantInformationRichtext?: string;
    needHelpTitle?: string;
    needHelpDescription?: string;
    needHelpContacts?: Array<{ text?: string; logo_svg?: string }>;
    needHelpButtons?: Array<{ button_text?: string; button_url?: string; logo_svg?: string }>;
}

export default function PaymentPageContent({
    heroButtons,
    whatHappensNextSteps,
    importantInformationTitle,
    importantInformationRichtext,
    needHelpTitle,
    needHelpDescription,
    needHelpContacts,
    needHelpButtons,
}: PaymentPageContentProps) {
    const [documentUrls, setDocumentUrls] = useState<{
        invoice_url?: string;
        receipt_url?: string;
        email_receipt_url?: string;
    }>({});
    const [orderId, setOrderId] = useState<string>("");

    const handleDocumentsLoaded = useCallback((
        documents: { invoice_url?: string; receipt_url?: string; email_receipt_url?: string },
        id: string
    ) => {
        setDocumentUrls(documents);
        setOrderId(id);
    }, []);

    return (
        <>
            <div className="mt-10 md:mt-14 xl:max-w-[1240px] 2xl:max-w-[1440px] sm:mx-auto">
                <OrderConfirmationSection onDocumentsLoaded={handleDocumentsLoaded} />
            </div>

            <WhatHappensNext
                title={undefined}
                steps={whatHappensNextSteps.length > 0 ? whatHappensNextSteps : undefined}
            />

            <div className="mt-10 md:mt-14 flex flex-col gap-[30px] md:gap-[50px] xl:max-w-[1240px] 2xl:max-w-[1440px] sm:mx-auto">
                <OrderInfoSection
                    importantInformationTitle={importantInformationTitle}
                    importantInformationRichtext={importantInformationRichtext}
                    needHelpTitle={needHelpTitle}
                    needHelpDescription={needHelpDescription}
                    needHelpContacts={needHelpContacts}
                    needHelpButtons={needHelpButtons}
                    invoiceUrl={documentUrls.invoice_url}
                    receiptUrl={documentUrls.receipt_url}
                    emailReceiptUrl={documentUrls.email_receipt_url}
                    orderId={orderId}
                />
            </div>
        </>
    );
}