import { useMemo, useRef, useState } from 'react';
import styles from './giftcard-preview.module.css';

/** Set false setelah selesai uji layout semua card */
const SHOW_ALL_CARDS_FOR_TESTING = false;

const wait = (ms: number) =>
    new Promise((resolve) => {
        setTimeout(resolve, ms);
    });

const cardConfig = [
    {
        id: "Card 01",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754636/aurumlab/product/images/GIFT_CARD-01_bd5za0.png",
        font: "Freeman",
        titleFontSize: "36px",
        width: "100%",
        titleMarginTop: "25%",
        titleMarginBottom: "25px",
        titlePaddingTop: "20px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "50px",
        titlePaddingRight: "50px",
        contentFontSize: "16px",
        contentPaddingLeft: "40px",
        contentPaddingRight: "40px",
        titleHeight: "120px",
        color: "#AE86B3",
    },
    {
        id: "Card 02",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754636/aurumlab/product/images/GIFT_CARD-04_ce613r.png",
        font: "Freeman",
        titleFontSize: "36px",
        width: "100%",
        titleMarginTop: "20%",
        titleMarginBottom: "50px",
        titlePaddingTop: "20px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "40px",
        titlePaddingRight: "40px",
        contentFontSize: "16px",
        contentMarginTop: "0px",
        contentPaddingLeft: "45px",
        contentPaddingRight: "45px",
        titleHeight: "120px",
        color: "#AE86B3",
    },
    {
        id: "Card 03",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754637/aurumlab/product/images/GIFT_CARD-02_jsotdp.png",
        font: "Palmore",
        titleFontSize: "55px",
        width: "100%",
        titleMarginTop: "25%",
        titleMarginBottom: "25px",
        titlePaddingTop: "0px",
        titlePaddingBottom: "10px",
        titlePaddingLeft: "30px",
        titlePaddingRight: "30px",
        titleLineHeight: "0.7",
        contentFontSize: "16px",
        contentMarginTop: "0px",
        contentPaddingTop: "0px",
        contentPaddingLeft: "35px",
        contentPaddingRight: "35px",
        titleHeight: "120px",
        color: "#5D80A6"
    },
    {
        id: "Card 04",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754636/aurumlab/product/images/GIFT_CARD-06_c7vcre.png",
        font: "AlbraDisplay",
        titleFontSize: "30px",
        width: "100%",
        titleMarginTop: "25%",
        titleMarginBottom: "30px",
        titlePaddingTop: "10px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "40px",
        titlePaddingRight: "40px",
        contentFontSize: "16px",
        contentPaddingLeft: "40px",
        contentPaddingRight: "40px",
        titleHeight: "120px",
        color: "#AE86B3"
    },
    {
        id: "Card 05",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754636/aurumlab/product/images/GIFT_CARD-07_tmpvdl.png",
        font: "AlbraDisplay",
        titleFontSize: "30px",
        width: "100%",
        titleMarginTop: "20%",
        titleMarginBottom: "30px",
        titlePaddingTop: "20px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "20px",
        titlePaddingRight: "20px",
        contentFontSize: "16px",
        contentPaddingLeft: "20px",
        contentPaddingRight: "20px",
        titleHeight: "0px",
    },
    {
        id: "Card 06",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754637/aurumlab/product/images/GIFT_CARD-03_mgroxq.png",
        font: "Freshgrape",
        titleFontSize: "40px",
        width: "100%",
        titleMarginTop: "20%",
        titleMarginBottom: "50px",
        titlePaddingTop: "20px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "15px",
        titlePaddingRight: "15px",
        contentFontSize: "16px",
        contentPaddingLeft: "35px",
        contentPaddingRight: "35px",
        titleHeight: "120px",
        color: "#ED2324",
    },
    {
        id: "Card 07",
        image:
            "https://res.cloudinary.com/aurumlab/image/upload/f_auto,q_auto,c_limit/v1762754636/aurumlab/product/images/GIFT_CARD-05_x5uv1u.png",
        font: "Freshgrape",
        titleFontSize: "36px",
        width: "100%",
        titleMarginTop: "20%",
        titleMarginBottom: "30px",
        titlePaddingTop: "20px",
        titlePaddingBottom: "20px",
        titlePaddingLeft: "15px",
        titlePaddingRight: "15px",
        contentFontSize: "16px",
        contentMarginTop: "20px",
        contentPaddingTop: "0px",
        contentPaddingLeft: "35px",
        contentPaddingRight: "35px",
        titleHeight: "120px",
        color: "#ED2324",
    },
];


// const cardConfig = [
//     {
//       id: "Card 01",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754636/aurumlab/product/images/GIFT_CARD-01_bd5za0.png",
//       font: "Freeman",
//       titleFontSize: "50px",
//       width: "100%",
//       titleMarginTop: "25%",
//       titleMarginBottom: "50px",
//       titlePaddingTop: "20px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "50px",
//       titlePaddingRight: "50px",
//       contentFontSize: "20px",
//       contentPaddingLeft: "50px",
//       contentPaddingRight: "50px",
//       titleHeight: "60px",
//     },
//     {
//       id: "Card 02",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754636/aurumlab/product/images/GIFT_CARD-04_ce613r.png",
//       font: "Freeman",
//       titleFontSize: "55px",
//       width: "100%",
//       titleMarginTop: "20%",
//       titleMarginBottom: "50px",
//       titlePaddingTop: "20px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "40px",
//       titlePaddingRight: "40px",
//       contentFontSize: "20px",
//       contentPaddingLeft: "45px",
//       contentPaddingRight: "45px",
//       titleHeight: "70px",
//     },
//     {
//       id: "Card 03",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754637/aurumlab/product/images/GIFT_CARD-02_jsotdp.png",
//       font: "Palmore",
//       width: "100%",
//       titleMarginTop: "25%",
//       titleMarginBottom: "30px",
//       titlePaddingTop: "0px",
//       titlePaddingBottom: "10px",
//       titlePaddingLeft: "30px",
//       titlePaddingRight: "30px",
//       titleLineHeight: "0.8",
//       contentFontSize: "21px",
//       contentPaddingTop: "0px",
//       contentPaddingLeft: "35px",
//       contentPaddingRight: "35px",
//       titleHeight: "80px",
//     },
//     {
//       id: "Card 04",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754636/aurumlab/product/images/GIFT_CARD-06_c7vcre.png",
//       font: "AlbraDisplay",
//       titleFontSize: "50px",
//       width: "100%",
//       titleMarginTop: "25%",
//       titleMarginBottom: "50px",
//       titlePaddingTop: "10px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "40px",
//       titlePaddingRight: "40px",
//       contentFontSize: "20px",
//       contentPaddingLeft: "45px",
//       contentPaddingRight: "45px",
//       titleHeight: "80px",
//     },
//     {
//       id: "Card 05",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754636/aurumlab/product/images/GIFT_CARD-07_tmpvdl.png",
//       font: "AlbraDisplay",
//       titleFontSize: "50px",
//       width: "100%",
//       titleMarginTop: "30%",
//       titleMarginBottom: "30px",
//       titlePaddingTop: "20px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "20px",
//       titlePaddingRight: "20px",
//       contentFontSize: "20px",
//       contentPaddingLeft: "35px",
//       contentPaddingRight: "35px",
//       titleHeight: "70px",
//     },
//     {
//       id: "Card 06",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754637/aurumlab/product/images/GIFT_CARD-03_mgroxq.png",
//       font: "Freshgrape",
//       titleFontSize: "50px",
//       width: "100%",
//       titleMarginTop: "20%",
//       titleMarginBottom: "50px",
//       titlePaddingTop: "20px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "15px",
//       titlePaddingRight: "15px",
//       contentFontSize: "20px",
//       contentPaddingLeft: "35px",
//       contentPaddingRight: "35px",
//       titleHeight: "70px",
//     },
//     {
//       id: "Card 07",
//       image:
//         "https://res.cloudinary.com/aurumlab/image/upload/v1762754636/aurumlab/product/images/GIFT_CARD-05_x5uv1u.png",
//       font: "Freshgrape",
//       titleFontSize: "65px",
//       width: "100%",
//       titleMarginTop: "20%",
//       titleMarginBottom: "30px",
//       titlePaddingTop: "20px",
//       titlePaddingBottom: "20px",
//       titlePaddingLeft: "15px",
//       titlePaddingRight: "15px",
//       contentFontSize: "24px",
//       contentPaddingLeft: "35px",
//       contentPaddingRight: "35px",
//       contentPaddingTop: "0px",
//       titleHeight: "120px",
//     },
//   ];

const emptyHeaderPlaceholder = '<p style="color:#999;text-transform:uppercase;text-align:center;">TITLE HERE</p>';
const emptyContentPlaceholder = '<p style="color:#999;text-align:center;">Your message will appear here</p>';

const getGiftCardPreviewStyles = (cardId: string) => {
    const selectedCard = cardConfig.find((card) => card.id === cardId) || cardConfig[0];

    return {
        selectedCard,
        previewImageSrc: selectedCard?.image || cardConfig[0]?.image || '',
        titleStyle: {
            fontFamily: selectedCard?.font || 'inherit',
            fontSize: selectedCard?.titleFontSize || '48px',
            textTransform: 'uppercase' as const,
            textAlign: 'center' as const,
            paddingLeft: selectedCard?.titlePaddingLeft || '0px',
            paddingRight: selectedCard?.titlePaddingRight || '0px',
            paddingTop: selectedCard?.titlePaddingTop || '0px',
            paddingBottom: selectedCard?.titlePaddingBottom || '0px',
            width: selectedCard?.width || '100%',
            lineHeight: selectedCard?.titleLineHeight || '1',
            color: selectedCard?.color || '#000',
        },
        titleWrapperStyle: {
            marginTop: selectedCard?.titleMarginTop || '15%',
            marginBottom: selectedCard?.titleMarginBottom || '0px',
            height: selectedCard?.titleHeight || '120px',
        },
        contentStyle: {
            fontFamily: 'NeuzeitGrotesk-Reg',
            textAlign: 'center' as const,
            paddingLeft: selectedCard?.contentPaddingLeft || '0px',
            paddingRight: selectedCard?.contentPaddingRight || '0px',
            paddingTop: selectedCard?.contentPaddingTop || '0px',
            width: selectedCard?.width || '100%',
            fontSize: selectedCard?.contentFontSize || '18px',
        },
    };
};

interface GiftCardPreviewCardProps {
    previewImageSrc: string;
    titleWrapperStyle: React.CSSProperties;
    titleStyle: React.CSSProperties;
    contentStyle: React.CSSProperties;
    previewHeader: string;
    previewContent: string;
    mode?: 'preview' | 'capture';
}

const GiftCardPreviewCard: React.FC<GiftCardPreviewCardProps> = ({
    previewImageSrc,
    titleWrapperStyle,
    titleStyle,
    contentStyle,
    previewHeader,
    previewContent,
    mode = 'preview',
}) => {
    const isCapture = mode === 'capture';
    const containerClass = isCapture ? styles.giftcard_container_capture : styles.giftcard_container;

    return (
        <div className={containerClass} {...(isCapture ? { 'data-giftcard-capture-target': true } : {})}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={previewImageSrc} alt="Gift Card" className={styles.giftcard_image} crossOrigin="anonymous" />
            <div className={isCapture ? styles.giftcard_overlay_capture : styles.giftcard_overlay}>
                <div className={styles.preview_body}>
                    <div className={styles.preview_title_body} style={titleWrapperStyle}>
                        <div style={titleStyle} dangerouslySetInnerHTML={{ __html: previewHeader }} />
                    </div>
                    <div className={styles.preview_content}>
                        <div style={contentStyle} dangerouslySetInnerHTML={{ __html: previewContent }} />
                    </div>
                </div>
            </div>
        </div>
    );
};

interface GiftCardPreviewFormProps {
    items: any[];
    orderId: string;
}

const GiftCardPreviewForm: React.FC<GiftCardPreviewFormProps> = ({ items, orderId }) => {
    const printRef = useRef<HTMLDivElement>(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
    const giftCardItems = Array.isArray(items)
        ? items.filter((item) => {
            const productUrl = String(item.product_url || '');
            return item.is_gift_card || !!item.gift_card_data || !!item.variation?.Gift || productUrl.includes('greeting-card-gift-wrapped');
        })
        : [];

    const getGiftCardPreviewData = (item: any) => {
        const cardId = item.variation?.Gift || item.gift_card_data?.card_id || 'Card 01';
        const cardStyles = getGiftCardPreviewStyles(cardId);
        const previewHeader = item.custom_text?.gift_header || item.gift_card_data?.title || emptyHeaderPlaceholder;
        const previewContent = item.custom_text?.gift_content || item.gift_card_data?.description || emptyContentPlaceholder;

        return {
            cardId,
            previewImageSrc: cardStyles.previewImageSrc,
            titleWrapperStyle: cardStyles.titleWrapperStyle,
            titleStyle: cardStyles.titleStyle,
            contentStyle: cardStyles.contentStyle,
            previewHeader,
            previewContent,
        };
    };

    const getGiftCardPreviewDataByCardId = (cardId: string, sampleHeader: string, sampleContent: string) => {
        const cardStyles = getGiftCardPreviewStyles(cardId);

        return {
            cardId,
            previewImageSrc: cardStyles.previewImageSrc,
            titleWrapperStyle: cardStyles.titleWrapperStyle,
            titleStyle: cardStyles.titleStyle,
            contentStyle: cardStyles.contentStyle,
            previewHeader: sampleHeader,
            previewContent: sampleContent,
        };
    };

    const previewEntries = useMemo(() => {
        if (SHOW_ALL_CARDS_FOR_TESTING) {
            const sampleItem = giftCardItems[0];
            const sampleHeader =
                sampleItem?.custom_text?.gift_header || sampleItem?.gift_card_data?.title || emptyHeaderPlaceholder;
            const sampleContent =
                sampleItem?.custom_text?.gift_content || sampleItem?.gift_card_data?.description || emptyContentPlaceholder;

            return cardConfig.map((card) => ({
                key: card.id,
                label: card.id,
                previewData: getGiftCardPreviewDataByCardId(card.id, sampleHeader, sampleContent),
            }));
        }

        return giftCardItems.map((item, index) => ({
            key: `order-item-${index}`,
            label: null as string | null,
            previewData: getGiftCardPreviewData(item),
        }));
    }, [giftCardItems]);

    const downloadPdf = async () => {
        if (isGeneratingPDF) {
            return;
        }

        if (!isModalOpen) {
            alert('Silakan buka preview terlebih dahulu dengan klik tombol Preview.');
            return;
        }

        if (!printRef.current) {
            alert('Preview tidak tersedia. Silakan buka preview terlebih dahulu.');
            return;
        }

        setIsGeneratingPDF(true);

        try {
            const [{ default: html2canvas }, jsPDFModule] = await Promise.all([import('html2canvas'), import('jspdf')]);

            const JsPDF = jsPDFModule.default || jsPDFModule.jsPDF;
            const pdf = new JsPDF({
                orientation: 'portrait',
                unit: 'mm',
                format: 'a4',
            });

            const printWidth = 100;
            const printHeight = 155;
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const centerX = (pdfWidth - printWidth) / 2;
            const centerY = 10;

            const containers = printRef.current.querySelectorAll('[data-giftcard-preview-item]');

            if (containers.length === 0) {
                alert('Tidak ada gift card untuk di-print. Pastikan preview sudah dibuka dan gift card sudah terlihat.');
                setIsGeneratingPDF(false);
                return;
            }

            const captureWrappers = printRef.current.querySelectorAll('[data-giftcard-capture-wrapper]');

            for (let i = 0; i < containers.length; i++) {
                const container = containers[i] as HTMLElement;
                const giftCardElement = container.querySelector('[data-giftcard-capture-target]') as HTMLElement;

                if (!giftCardElement) {
                    console.warn(`Gift card element tidak ditemukan untuk index ${i}`);
                    continue;
                }

                captureWrappers.forEach((wrapper, wrapperIndex) => {
                    const el = wrapper as HTMLElement;
                    el.style.visibility = wrapperIndex === i ? 'visible' : 'hidden';
                });
                giftCardElement.style.visibility = 'visible';

                const images = giftCardElement.querySelectorAll('img');
                await Promise.all(
                    Array.from(images).map(
                        (img: any) =>
                            new Promise<void>((resolve) => {
                                if (img.complete && img.naturalWidth > 0) {
                                    resolve();
                                    return;
                                }
                                img.onload = () => resolve();
                                img.onerror = () => resolve();
                                setTimeout(() => resolve(), 3000);
                            })
                    )
                );

                if (typeof document !== 'undefined' && document.fonts) {
                    await document.fonts.ready;
                }

                await wait(300);

                let canvas;
                try {
                    canvas = await html2canvas(giftCardElement, {
                        scale: 2,
                        useCORS: true,
                        allowTaint: true,
                        backgroundColor: '#ffffff',
                        logging: false,
                        onclone: (_clonedDoc, clonedElement) => {
                            clonedElement.style.overflow = 'visible';
                            clonedElement.querySelectorAll('*').forEach((el) => {
                                const node = el as HTMLElement;
                                if (!node.style) return;
                                node.style.overflow = 'visible';
                            });
                        },
                    });
                } catch (canvasError) {
                    console.error(`Error creating canvas for element ${i + 1}:`, canvasError);
                    continue;
                } finally {
                    giftCardElement.style.visibility = 'hidden';
                    captureWrappers.forEach((wrapper) => {
                        (wrapper as HTMLElement).style.visibility = 'hidden';
                    });
                }

                const imgData = canvas.toDataURL('image/png', 1.0);
                const canvasAspectRatio = canvas.width / canvas.height;
                const printAspectRatio = printWidth / printHeight;

                let imgWidth = printWidth;
                let imgHeight = printHeight;

                if (canvasAspectRatio > printAspectRatio) {
                    imgHeight = imgWidth / canvasAspectRatio;
                } else {
                    imgWidth = imgHeight * canvasAspectRatio;
                }

                if (i > 0) {
                    pdf.addPage();
                }

                const xOffset = centerX + (printWidth - imgWidth) / 2;

                const borderSize = 1;
                pdf.setDrawColor(0, 0, 0);
                pdf.setLineWidth(0.1);
                pdf.rect(xOffset - borderSize, centerY - borderSize, imgWidth + borderSize * 2, imgHeight + borderSize * 2);

                pdf.addImage(imgData, 'PNG', xOffset, centerY, imgWidth, imgHeight);
            }

            captureWrappers.forEach((wrapper) => {
                (wrapper as HTMLElement).style.visibility = 'hidden';
            });

            const totalPages = pdf.internal.pages.length - 1;

            if (totalPages === 0) {
                alert('Gagal membuat PDF. Tidak ada gift card yang berhasil di-capture. Silakan cek console untuk detail error.');
                setIsGeneratingPDF(false);
                return;
            }

            const fileName = orderId ? `gift-cards-${orderId}.pdf` : 'gift-cards.pdf';
            pdf.save(fileName);
        } catch (error) {
            console.error('Gagal membuat PDF', error);
            alert('Terjadi kesalahan saat membuat PDF. Silakan coba lagi.');
        } finally {
            setIsGeneratingPDF(false);
        }
    };

    return (
        <>
            <div className="panel mb-5">
                <div className="flex items-center justify-between">
                    <div className="text-sm font-semibold">Gift Card Preview</div>
                    <div className="flex gap-2">
                        <button type="button" onClick={() => setIsModalOpen(true)} className="btn btn-info btn-sm gap-2">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.5777 3.38197L17.5777 4.43152C19.7294 5.56066 20.8052 6.12523 21.4026 7.13974C22 8.15425 22 9.41667 22 11.9415V12.0585C22 14.5833 22 15.8458 21.4026 16.8603C20.8052 17.8748 19.7294 18.4393 17.5777 19.5685L15.5777 20.618C13.8221 21.5393 12.9443 22 12 22C11.0557 22 10.1779 21.5393 8.42229 20.618L6.42229 19.5685C4.27063 18.4393 3.19479 17.8748 2.5974 16.8603C2 15.8458 2 14.5833 2 12.0585V11.9415C2 9.41667 2 8.15425 2.5974 7.13974C3.19479 6.12523 4.27063 5.56066 6.42229 4.43152L8.42229 3.38197C10.1779 2.46066 11.0557 2 12 2C12.9443 2 13.8221 2.46066 15.5777 3.38197Z"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                />
                                <path
                                    opacity="0.5"
                                    d="M21 7.5L17 9.5M12 12L3 7.5M12 12V21.5M12 12C12 12 14.7426 10.6287 16.5 9.75C16.6953 9.65237 17 9.5 17 9.5M17 9.5V13M17 9.5L7.5 4.5"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                />
                            </svg>
                            Preview
                        </button>
                    </div>
                </div>
            </div>

            {isModalOpen && (
                <>
                    <div className="fixed inset-0 z-[999] bg-black/60" onClick={() => setIsModalOpen(false)}></div>

                    <div
                        className={styles.canvas_personal}
                        style={{
                            opacity: isModalOpen ? '1' : '0',
                            left: isModalOpen ? '0' : '-100%',
                        }}
                    >
                        <div className={styles.close_popup} onClick={() => setIsModalOpen(false)}>
                            <button type="button" onClick={() => setIsModalOpen(false)} className="btn btn-primary btn-sm">
                                Close Preview
                            </button>
                        </div>
                        <div className={styles.preview_outer}>
                            <div className={styles.preview_inner}>
                                <div className={styles.preview_header}>
                                    <h2 className={styles.preview_title}>Gift Card Preview</h2>
                                    {SHOW_ALL_CARDS_FOR_TESTING && (
                                        <p className={styles.preview_test_banner}>
                                            Mode uji: menampilkan semua {cardConfig.length} desain card (scroll ke bawah)
                                        </p>
                                    )}
                                    <div className="mt-2 flex items-center gap-2 px-5">
                                        <button type="button" disabled={isGeneratingPDF} onClick={downloadPdf} className="btn btn-primary btn-sm gap-2">
                                            {isGeneratingPDF ? (
                                                <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-l-transparent align-middle"></span>
                                            ) : (
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        fillRule="evenodd"
                                                        clipRule="evenodd"
                                                        d="M3.95526 2.25C3.97013 2.25001 3.98505 2.25001 4.00001 2.25001L20.0448 2.25C20.4776 2.24995 20.8744 2.24991 21.1972 2.29331C21.5527 2.3411 21.9284 2.45355 22.2374 2.76257C22.5465 3.07159 22.6589 3.44732 22.7067 3.8028C22.7501 4.12561 22.7501 4.52245 22.75 4.95526V5.04475C22.7501 5.47757 22.7501 5.8744 22.7067 6.19721C22.6589 6.55269 22.5465 6.92842 22.2374 7.23744C21.9437 7.53121 21.5896 7.64733 21.25 7.69914V13.0564C21.25 14.8942 21.25 16.3498 21.0969 17.489C20.9392 18.6615 20.6071 19.6104 19.8588 20.3588C19.1104 21.1071 18.1615 21.4392 16.989 21.5969C15.8498 21.75 14.3942 21.75 12.5564 21.75H11.4436C9.60583 21.75 8.1502 21.75 7.01098 21.5969C5.83856 21.4392 4.88961 21.1071 4.14125 20.3588C3.39289 19.6104 3.06077 18.6615 2.90314 17.489C2.74998 16.3498 2.74999 14.8942 2.75001 13.0564L2.75001 7.69914C2.41038 7.64733 2.05634 7.53121 1.76257 7.23744C1.45355 6.92842 1.3411 6.55269 1.29331 6.19721C1.24991 5.8744 1.24995 5.47757 1.25 5.04476C1.25001 5.02988 1.25001 5.01496 1.25001 5.00001C1.25001 4.98505 1.25001 4.97013 1.25 4.95526C1.24995 4.52244 1.24991 4.12561 1.29331 3.8028C1.3411 3.44732 1.45355 3.07159 1.76257 2.76257C2.07159 2.45355 2.44732 2.3411 2.8028 2.29331C3.12561 2.24991 3.52244 2.24995 3.95526 2.25ZM4.25001 7.75001V13C4.25001 14.9068 4.2516 16.2615 4.38977 17.2892C4.52503 18.2952 4.7787 18.8749 5.20191 19.2981C5.62512 19.7213 6.20477 19.975 7.21086 20.1102C8.23852 20.2484 9.59319 20.25 11.5 20.25H12.5C14.4068 20.25 15.7615 20.2484 16.7892 20.1102C17.7952 19.975 18.3749 19.7213 18.7981 19.2981C19.2213 18.8749 19.475 18.2952 19.6102 17.2892C19.7484 16.2615 19.75 14.9068 19.75 13V7.75001H12.75V14.0455L14.4425 12.1649C14.7196 11.8571 15.1938 11.8321 15.5017 12.1092C15.8096 12.3863 15.8346 12.8605 15.5575 13.1684L12.5575 16.5017C12.4152 16.6598 12.2126 16.75 12 16.75C11.7874 16.75 11.5848 16.6598 11.4425 16.5017L8.44254 13.1684C8.16544 12.8605 8.1904 12.3863 8.49828 12.1092C8.80617 11.8321 9.28038 11.8571 9.55748 12.1649L11.25 14.0455V7.75001H4.25001ZM20 6.25001C20.4926 6.25001 20.7866 6.24841 20.9973 6.22008C21.0939 6.2071 21.1423 6.19181 21.164 6.18285C21.1691 6.18077 21.1724 6.17916 21.1743 6.17815L21.1768 6.17678L21.1781 6.17434C21.1792 6.1724 21.1808 6.16909 21.1828 6.16404C21.1918 6.14226 21.2071 6.0939 21.2201 5.99734C21.2484 5.78662 21.25 5.49261 21.25 5.00001C21.25 4.5074 21.2484 4.21339 21.2201 4.00267C21.2071 3.90611 21.1918 3.85775 21.1828 3.83597C21.1808 3.83093 21.1792 3.82761 21.1781 3.82568L21.1768 3.82323L21.1743 3.82187C21.1724 3.82086 21.1691 3.81924 21.164 3.81717C21.1423 3.80821 21.0939 3.79291 20.9973 3.77993C20.7866 3.7516 20.4926 3.75001 20 3.75001H4.00001C3.5074 3.75001 3.21339 3.7516 3.00267 3.77993C2.90611 3.79291 2.85775 3.80821 2.83597 3.81717C2.83093 3.81924 2.82761 3.82086 2.82568 3.82187L2.82324 3.82324L2.82187 3.82568C2.82086 3.82761 2.81924 3.83093 2.81717 3.83597C2.80821 3.85775 2.79291 3.90611 2.77993 4.00267C2.7516 4.21339 2.75001 4.5074 2.75001 5.00001C2.75001 5.49261 2.7516 5.78662 2.77993 5.99734C2.79291 6.0939 2.80821 6.14226 2.81717 6.16404C2.81924 6.16909 2.82086 6.1724 2.82187 6.17434L2.82324 6.17677L2.82568 6.17815C2.82761 6.17916 2.83093 6.18077 2.83597 6.18285C2.85775 6.19181 2.90611 6.2071 3.00267 6.22008C3.21339 6.24841 3.5074 6.25001 4.00001 6.25001H20ZM2.82324 6.17677C2.82284 6.17636 2.82297 6.17644 2.82324 6.17677V6.17677Z"
                                                        fill="currentColor"
                                                    />
                                                </svg>
                                            )}
                                            <span className="ms-2">{isGeneratingPDF ? 'Membuat PDF...' : 'Download PDF'}</span>
                                        </button>
                                    </div>
                                </div>
                                <div
                                    className={`${styles.preview_content_wrapper} ${SHOW_ALL_CARDS_FOR_TESTING ? styles.preview_content_wrapper_test : ''}`}
                                >
                                    <div className={styles.preview_all_cards_stack} ref={printRef}>
                                        {previewEntries.map((entry) => {
                                            const previewData = entry.previewData;

                                            return (
                                                <div key={entry.key} className={styles.preview_card_block} data-giftcard-preview-item>
                                                    {entry.label && (
                                                        <div className={styles.preview_card_label}>{entry.label}</div>
                                                    )}
                                                    <div className={styles.preview_card_row}>
                                                        <GiftCardPreviewCard
                                                            previewImageSrc={previewData.previewImageSrc}
                                                            titleWrapperStyle={previewData.titleWrapperStyle}
                                                            titleStyle={previewData.titleStyle}
                                                            contentStyle={previewData.contentStyle}
                                                            previewHeader={previewData.previewHeader}
                                                            previewContent={previewData.previewContent}
                                                            mode="preview"
                                                        />
                                                    </div>
                                                    <div className={styles.capture_source} data-giftcard-capture-wrapper>
                                                        <GiftCardPreviewCard
                                                            previewImageSrc={previewData.previewImageSrc}
                                                            titleWrapperStyle={previewData.titleWrapperStyle}
                                                            titleStyle={previewData.titleStyle}
                                                            contentStyle={previewData.contentStyle}
                                                            previewHeader={previewData.previewHeader}
                                                            previewContent={previewData.previewContent}
                                                            mode="capture"
                                                        />
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}
        </>
    );
};

export default GiftCardPreviewForm;