import { useMemo, useState } from 'react';
import styles from './CouponVoucherPreview.module.css';
import {
    buildVoucherPreviewData,
    CouponPreviewState,
    formatCouponAmountLabel,
    formatMinPurchaseLabel,
    formatValidRange,
    VoucherPreviewData,
} from '@/utils/couponVoucherPreview';

interface CouponVoucherPreviewProps {
    couponForm: {
        coupon_name: string;
        coupon_title: string;
        coupon_type: string;
        coupon_amount: number;
        coupon_min_purchase: number;
        coupon_is_highlight: boolean;
        coupon_free_item_name?: string;
        coupon_free_item_products?: string[];
        coupon_start_date?: Date | string | null;
        coupon_end_date?: Date | string | null;
    };
}

function VoucherAmount({ voucher }: { voucher: VoucherPreviewData }) {
    if (voucher.type === 'percentage') {
        return (
            <div className={styles.card_amount}>
                <span className={styles.amount_discount}>DISC</span>
                <span className={styles.amount_label}>{voucher.amount_label}</span>
            </div>
        );
    } else if (voucher.type === 'fixed') {
        const label = String(voucher.amount_label || '');
        const value = label.replace(/^(IDR|Rp)\s*/i, '').trim();
        return (
            <div className={styles.card_amount}>
                <span className={styles.amount_currency}>IDR</span>
                <span className={styles.amount_value}>
                    <b>{value}</b>
                </span>
            </div>
        );
    } else {
        return (
            <div className={styles.card_amount}>
                <span className={styles.amount_label}>{voucher.amount_label}</span>
            </div>
        );
    }
}

function VoucherCard({ voucher, couponForm }: { voucher: VoucherPreviewData, couponForm: any }) {
    const isHighlightCard = voucher.is_highlight && voucher.has_matching_products;
    const validRangeLabel = formatValidRange(voucher.valid_from, voucher.valid_until);
    const minPurchaseLabel = formatMinPurchaseLabel(voucher.min_purchase);

    return (
        <div
            className={`${styles.card} ${isHighlightCard ? styles.card_blue : styles.card_purple} ${
                !voucher.eligible && !isHighlightCard ? styles.card_disabled : ''
            }`}
        >
            <div className={styles.card_inner}>
                <VoucherAmount voucher={voucher} />
                <div className={styles.card_body}>
                    <div className={styles.code_description}>
                        <div className={styles.code_description_title}>
                            {couponForm.coupon_title}
                        </div>
                        <div className={styles.code_details}>
                            {minPurchaseLabel ? (
                                <div className={styles.min_purchase}>{minPurchaseLabel}</div>
                            ) : null}
                            {validRangeLabel ? (
                                <div className={styles.valid_thru}>{validRangeLabel}</div>
                            ) : null}
                        </div>
                    </div>
                    <div className={styles.code_container}>
                        <div className={styles.code_title}>Code:</div>
                        <div className={styles.code}>{voucher.code}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const CouponVoucherPreview: React.FC<CouponVoucherPreviewProps> = ({ couponForm }) => {
    const [previewState, setPreviewState] = useState<CouponPreviewState>('eligible');

    const voucher = useMemo(
        () => buildVoucherPreviewData(couponForm, previewState),
        [couponForm, previewState]
    );

    if (couponForm.coupon_type === 'free_item') {
        return (
            <div className={styles.preview_scope}>
                <div className={styles.wrapper}>
                    <p className={styles.section_title}>Available Voucher</p>
                    <p className={styles.free_item_note}>
                        Kupon <strong>free item</strong> tidak ditampilkan sebagai card di cart user.
                        Free item promotion muncul di bar terpisah di bawah promo code.
                        {couponForm.coupon_free_item_products?.length ? (
                            <>
                                {' '}
                                Pool: <strong>{couponForm.coupon_free_item_products.length} produk</strong>
                                {couponForm.coupon_free_item_name ? (
                                    <>
                                        {' '}
                                        (pertama: <strong>{couponForm.coupon_free_item_name}</strong>)
                                    </>
                                ) : null}
                            </>
                        ) : couponForm.coupon_free_item_name ? (
                            <>
                                {' '}
                                Item: <strong>{couponForm.coupon_free_item_name}</strong>
                            </>
                        ) : null}
                    </p>
                </div>
            </div>
        );
    }

    if (!voucher) {
        return null;
    }

    return (
        <div className={styles.preview_scope}>
            <div className={styles.wrapper}>
                
                <p className={styles.section_title}>Available Voucher</p>
                <div className={styles.list}>
                    <VoucherCard voucher={voucher} couponForm={couponForm} />
                </div>
                
            </div>
        </div>
    );
};

export default CouponVoucherPreview;