import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';
import ProductCategorySelector from '@/components/Shared/ProductCategorySelector';
import FreeItemProductSelector from './FreeItemProductSelector';
import { CategoryRewardDetailFields, CategoryRewardGroupsPanel, createEmptyGroup } from './CategoryRewardForm';
import NumberFormatter from '@/lib/ribuan';
import { useEffect, useState } from 'react';
import Checkbox from '@mui/material/Checkbox';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Tooltip from '@mui/material/Tooltip';
import InfoIcon from '@mui/icons-material/Info';

interface FreeItemValue {
    productId: string;
    active: boolean;
}

interface PromotionCase {
    id: number;
    value: number;
    case_type: string;
    promo_value: string | string[] | FreeItemValue[];
    max_discount?: number | string;
}

interface Promotion {
    promotion_type: string;
    promotion_name: string;
    promotion_start: Date;
    promotion_end: Date;
    promotion_is_active: boolean;
    promotion_case: PromotionCase[];
    promotion_category: string;
    promotion_include_categories: [];
    promotion_exclude_categories: [];
    promotion_included_products: [];
    promotion_excluded_products: [];
    promotion_unique_users: [];
    promotion_merge_free_items?: boolean;
    promotion_stacking_mode?: string;
    promotion_merch_scope?: string;
    promotion_reward_groups?: any[];
    promotion_member_only?: boolean;
}

interface PromotionProps {
    promotion: Promotion;
    setPromotion: React.Dispatch<React.SetStateAction<Promotion>>;
    isUpdate?: boolean;
}

const PromotionForm: React.FC<PromotionProps> = ({ promotion, setPromotion, isUpdate = false }) => {
    const [freeItemProducts, setFreeItemProducts] = useState<{ [key: number]: any[] }>({});
    const isMemberOnly = Boolean(promotion.promotion_member_only);

    const fetchFreeItemProducts = async (promoValue: string | string[] | FreeItemValue[], caseId: number) => {
        if (!promoValue || (Array.isArray(promoValue) && promoValue.length === 0)) {
            setFreeItemProducts((prev) => {
                const newState = { ...prev };
                delete newState[caseId];
                return newState;
            });
            return;
        }

        try {
            let productIdArray: string[] = [];
            // Check if it's array of objects (new format)
            if (Array.isArray(promoValue) && promoValue.length > 0 && typeof promoValue[0] === 'object' && 'productId' in promoValue[0]) {
                productIdArray = (promoValue as FreeItemValue[]).map((item) => item.productId);
            } else if (Array.isArray(promoValue)) {
                productIdArray = promoValue as string[];
            } else {
                try {
                    productIdArray = JSON.parse(promoValue as string);
                } catch {
                    productIdArray = (promoValue as string)
                        .split(',')
                        .map((id) => id.trim())
                        .filter((id) => id);
                }
            }

            if (productIdArray.length === 0) {
                setFreeItemProducts((prev) => {
                    const newState = { ...prev };
                    delete newState[caseId];
                    return newState;
                });
                return;
            }

            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/product-list`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ products: productIdArray }),
                credentials: 'include',
            });

            if (!response.ok) {
                return;
            }

            const data = await response.json();
            const products = Array.isArray(data) ? data : [];

            setFreeItemProducts((prev) => ({
                ...prev,
                [caseId]: products,
            }));
        } catch (error) {
            console.error('Error fetching free item products:', error);
        }
    };

    useEffect(() => {
        promotion.promotion_case.forEach((item: any) => {
            if (item.case_type === 'free_item' && item.promo_value) {
                fetchFreeItemProducts(item.promo_value, item.id);
            }
        });
    }, [promotion.promotion_case]);

    const handleChange = (e: any) => {
        setPromotion((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };

    const changeIsActive = (e: any) => {
        setPromotion((prev) => {
            return {
                ...prev,
                promotion_is_active: e.target.checked,
            };
        });
    };

    const changeMemberOnly = (e: any) => {
        // OFF = universal (semua boleh), ON = member only (wajib login, seperti coupon)
        setPromotion((prev: Promotion) => ({
            ...prev,
            promotion_member_only: Boolean(e.target.checked),
        }));
    };

    const addItem = () => {
        setPromotion((prev: any) => {
            const maxId = prev.promotion_case.reduce((max: number, character: any) => {
                return character.id > max ? character.id : max;
            }, 0);

            return {
                ...prev,
                promotion_case: [
                    ...prev.promotion_case,
                    {
                        id: maxId + 1,
                        value: 0,
                        case_type: '',
                        promo_value: '',
                    },
                ],
            };
        });
    };

    const removeItem = (itemToRemove: any = null) => {
        if (itemToRemove) {
            setPromotion((prev: any) => {
                return {
                    ...prev,
                    promotion_case: prev.promotion_case.filter((item: any) => item.id !== itemToRemove.id),
                };
            });
        }
    };

    const changeValueDiscount = (type: string, value: string | string[] | FreeItemValue[] | number, id: number) => {
        const updatedPromotion = {
            ...promotion,
            promotion_case: promotion.promotion_case.map((item) => {
                if (item.id !== id) return item;

                const updatedItem: PromotionCase = { ...item };

                if (type === 'value') {
                    updatedItem.value = Number(value) || 0;
                } else if (type === 'case_type') {
                    updatedItem.case_type = String(value);
                    if (value !== 'free_item') {
                        updatedItem.promo_value = '';
                    }
                    if (value !== 'percentage_discount') {
                        updatedItem.max_discount = '';
                    }
                } else if (type === 'max_discount') {
                    updatedItem.max_discount = value === '' || value == null ? '' : Number(value) || 0;
                } else {
                    updatedItem.promo_value = value as string | string[] | FreeItemValue[];
                }

                return updatedItem;
            }),
        };

        setPromotion(updatedPromotion);
    };

    const handleFreeItemProductChange = (productIds: string[], caseId: number) => {


        const freeItemValues: FreeItemValue[] = productIds.map((productId) => ({
            productId,
            active: true,
        }));
        changeValueDiscount('promo_value', freeItemValues, caseId);
        fetchFreeItemProducts(productIds, caseId);
    };

    const changeType = (e: any) => {
        const nextType = e.target.value;
        setPromotion((prev) => ({
            ...prev,
            promotion_type: nextType,
            promotion_category: '',
            promotion_include_categories: [],
            promotion_exclude_categories: [],
            promotion_included_products: [],
            promotion_excluded_products: [],
            promotion_case: [],
            promotion_merge_free_items: false,
            promotion_stacking_mode: 'prefer_discount',
            promotion_merch_scope: 'per_order',
            exit_intent_only: false,
            exit_require_login: false,
            promotion_reward_groups: nextType === 'category_reward' ? [createEmptyGroup()] : [],
        }));
        setFreeItemProducts({});
    };

    const isMultiProduct = promotion.promotion_type === 'category_reward';
    const hasPercentCase = promotion.promotion_case.some(
        (c) => c.case_type === 'percentage_discount'
    );

    const rows = Object.entries(freeItemProducts).flatMap(([caseId, products]: [string, any[]]) => {
        const caseItem = promotion.promotion_case.find((item: any) => item.id.toString() === caseId);
        const promoValue = caseItem?.promo_value;

        return products.map((product: any) => {
            const productId = (product._id || product.id).toString();
            let isActive = true;

            // Check if promo_value is array of objects
            if (Array.isArray(promoValue) && promoValue.length > 0 && typeof promoValue[0] === 'object' && 'productId' in promoValue[0]) {
                const freeItem = (promoValue as FreeItemValue[]).find((item) => item.productId === productId);
                isActive = freeItem?.active ?? true;
            }

            return {
                id: caseItem?.id,
                productId: productId,
                name: product.product_title || '-',
                qty: product.product_qty || 0,
                active: isActive,
            };
        });
    });

    // Handler agar hanya item yang dichecklist yang aktif untuk ditampilkan, tapi semua tetap tersimpan ke database.
    const handleActiveFreeItem = (e: any, caseId: number, productId: string) => {
        setPromotion((prev) => ({
            ...prev,
            promotion_case: prev.promotion_case.map((item) => {
                if (item.id === caseId && item.case_type === 'free_item') {
                    // Convert promo_value to array of objects if needed
                    let freeItemList: FreeItemValue[] = [];

                    if (Array.isArray(item.promo_value)) {
                        if (item.promo_value.length > 0 && typeof item.promo_value[0] === 'object' && 'productId' in item.promo_value[0]) {
                            // Already in new format
                            freeItemList = item.promo_value as FreeItemValue[];
                        } else {
                            // Old format (array of strings), convert to new format
                            freeItemList = (item.promo_value as string[]).map((pid) => ({ productId: pid, active: true }));
                        }
                    } else if (typeof item.promo_value === 'string') {
                        // Old string format, convert
                        const productIds = item.promo_value
                            .split(',')
                            .map((id) => id.trim())
                            .filter((id) => id);
                        freeItemList = productIds.map((pid) => ({ productId: pid, active: true }));
                    }

                    // Update active status for specific product
                    freeItemList = freeItemList.map((freeItem) => (freeItem.productId === productId ? { ...freeItem, active: e.target.checked } : freeItem));

                    return { ...item, promo_value: freeItemList };
                }
                return item;
            }),
        }));
    };

    return (
        <div className="panel flex-1 px-0 py-6 ltr:xl:mr-6 rtl:xl:ml-6">
            <div className="flex flex-wrap justify-between px-4">
                <div className="mb-4 w-full lg:w-1/2 lg:max-w-fit">
                    <div className="text-lg">Detail Promotion : </div>

                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionTitle" className="mb-0 flex-1  ltr:mr-2 rtl:ml-2">
                            Title
                        </label>
                        <input type="text" id="promotionTitle" name="promotion_name" value={promotion.promotion_name} onChange={handleChange} className="form-input w-2/3  lg:w-[250px]" />
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionType" className="mb-0 flex-1  ltr:mr-2 rtl:ml-2">
                            Type
                        </label>
                        <select name="promotion_type" id="promotionType" value={promotion.promotion_type} onChange={changeType} className="form-input w-2/3  lg:w-[250px]">
                            <option value="">select promotion type</option>
                            <option value="birthday">Birthday</option>
                            <option value="qty_of_cart">Qty of Cart</option>
                            <option value="subtotal_of_cart">Subtotal of Cart</option>
                            <option value="category_reward">Multi Product Promotion</option>
                        </select>
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionStart" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            Start Date
                        </label>
                        <Flatpickr
                            options={{
                                enableTime: true,
                                dateFormat: 'Y-m-d H:i',
                                position: 'auto left',
                                time_24hr: true,
                            }}
                            value={
                                Array.isArray(promotion.promotion_start)
                                    ? promotion.promotion_start[0] || undefined
                                    : promotion.promotion_start || undefined
                            }
                            className="form-input w-2/3  lg:w-[250px]"
                            placeholder="yyyy-mm-dd"
                            onChange={(dates) =>
                                setPromotion((prev: any) => ({
                                    ...prev,
                                    promotion_start: Array.isArray(dates) && dates[0] ? dates[0] : prev.promotion_start,
                                }))
                            }
                        />
                    </div>
                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionEnd" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            End Date
                        </label>
                        <Flatpickr
                            options={{
                                enableTime: true,
                                dateFormat: 'Y-m-d H:i',
                                position: 'auto left',
                                time_24hr: true,
                            }}
                            value={
                                Array.isArray(promotion.promotion_end)
                                    ? promotion.promotion_end[0] || undefined
                                    : promotion.promotion_end || undefined
                            }
                            className="form-input w-2/3  lg:w-[250px]"
                            placeholder="yyyy-mm-dd"
                            onChange={(dates) =>
                                setPromotion((prev: any) => ({
                                    ...prev,
                                    promotion_end: Array.isArray(dates) && dates[0] ? dates[0] : prev.promotion_end,
                                }))
                            }
                        />
                    </div>

                    <div className="mt-4 flex items-center">
                        <label htmlFor="promotionIsActive" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                            Is Active ?
                        </label>
                        <label className="relative h-6 w-12">
                            <input
                                type="checkbox"
                                onChange={changeIsActive}
                                checked={promotion.promotion_is_active}
                                className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                                id="promotion_is_active"
                            />
                            <span className="outline_checkbox bg-icon block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:bg-[url(/assets/images/close.svg)] before:bg-center before:bg-no-repeat before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary peer-checked:before:bg-[url(/assets/images/checked.svg)] dark:border-white-dark dark:before:bg-white-dark"></span>
                        </label>
                    </div>

                    <div className="mt-4 flex items-center justify-between">
                        <div className="flex items-center justify-start w-[280px] gap-2">
                            <label htmlFor="member_only" className="mb-0 ">
                                Member Only?
                            </label>
                            <Tooltip
                                title="Off = semua user; On = wajib login (seperti coupon)"
                                placement="right-start"
                                style={{ fontSize: '14px' }}
                            >
                                <InfoIcon className="text-gray-400" />
                            </Tooltip>
                        </div>
                        <label className="relative h-6 w-12">
                            <input
                                type="checkbox"
                                onChange={changeMemberOnly}
                                checked={isMemberOnly}
                                className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                                id="member_only"
                            />
                            <span className="outline_checkbox bg-icon block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:bg-[url(/assets/images/close.svg)] before:bg-center before:bg-no-repeat before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary peer-checked:before:bg-[url(/assets/images/checked.svg)] dark:border-white-dark dark:before:bg-white-dark"></span>
                        </label>
                    </div>

                    {isMultiProduct && (
                        <CategoryRewardDetailFields promotion={promotion} setPromotion={setPromotion} isUpdate={isUpdate} />
                    )}

                    {promotion.promotion_type && !isMultiProduct && (
                        <div className="mb-4 w-full ">
                            <ProductCategorySelector
                                includeCategories={promotion.promotion_include_categories || []}
                                excludeCategories={promotion.promotion_exclude_categories || []}
                                includedProducts={promotion.promotion_included_products || []}
                                excludedProducts={promotion.promotion_excluded_products || []}
                                onIncludeCategoriesChange={(categories) => {
                                    setPromotion((prev: any) => ({
                                        ...prev,
                                        promotion_include_categories: categories,
                                    }));
                                }}
                                onExcludeCategoriesChange={(categories) => {
                                    setPromotion((prev: any) => ({
                                        ...prev,
                                        promotion_exclude_categories: categories,
                                    }));
                                }}
                                onIncludedProductsChange={(products) => {
                                    setPromotion((prev: any) => ({
                                        ...prev,
                                        promotion_included_products: products,
                                    }));
                                }}
                                onExcludedProductsChange={(products) => {
                                    setPromotion((prev: any) => ({
                                        ...prev,
                                        promotion_excluded_products: products,
                                    }));
                                }}
                                isUpdate={isUpdate}
                            />
                        </div>
                    )}
                </div>
                {isMultiProduct && (
                    <CategoryRewardGroupsPanel promotion={promotion} setPromotion={setPromotion} isUpdate={isUpdate} />
                )}
                {promotion.promotion_type && !isMultiProduct && (
                    <div className="mb-4 w-full lg:w-1/2 ">
                        <div className="text-lg">Promotion Cases : </div>
                        <div className="mb-8 mt-2 table w-full">
                            <table>
                                <thead>
                                    <tr>
                                        <th className="w-1">
                                            Min{' '}
                                            {promotion.promotion_type === 'qty_of_cart'
                                                ? 'Qty'
                                                : promotion.promotion_type === 'subtotal_of_cart' ||
                                                    promotion.promotion_type === 'birthday'
                                                    ? 'Subtotal'
                                                    : 'Value'}
                                        </th>
                                        <th className="w-1">Type</th>
                                        <th className="w-1">Promo Value</th>
                                        {hasPercentCase && (
                                            <th className="w-1">Maximum Discount</th>
                                        )}
                                        <th className="w-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {promotion.promotion_case.length <= 0 && (
                                        <tr>
                                            <td colSpan={hasPercentCase ? 4 : 3} className="!text-center font-semibold">
                                                No Case Available
                                            </td>
                                        </tr>
                                    )}
                                    {promotion.promotion_case.map((item: any) => {
                                        const isPercent = item.case_type === 'percentage_discount';
                                        const showRp =
                                            item.case_type === 'extra_discount' || item.case_type === 'birthday_extra';

                                        return (
                                            <tr className="align-top" key={item.id}>
                                                <td>
                                                    {promotion.promotion_type === 'subtotal_of_cart' ||
                                                        promotion.promotion_type === 'birthday' ? (
                                                        <NumberFormatter
                                                            className="form-input w-full"
                                                            placeholder="Value"
                                                            value={Number(item.value) || 0}
                                                            onChange={(value: any) => changeValueDiscount('value', value.toString(), item.id)}
                                                        />
                                                    ) : (
                                                        <input
                                                            type="number"
                                                            className="form-input w-full"
                                                            placeholder="Value"
                                                            min={0}
                                                            value={item.value ?? ''}
                                                            onChange={(e) => changeValueDiscount('value', e.target.value, item.id)}
                                                        />
                                                    )}
                                                </td>
                                                <td>
                                                    <select
                                                        name="case_type"
                                                        id="case_type"
                                                        value={item.case_type}
                                                        onChange={(e) => changeValueDiscount('case_type', e.target.value, item.id)}
                                                        className="form-input w-full"
                                                    >
                                                        {promotion.promotion_type === 'birthday' ? (
                                                            <>
                                                                <option value="">select case type</option>
                                                                <option value="birthday_extra">Birthday Discount</option>
                                                                <option value="percentage_discount">Percentage Discount</option>
                                                                <option value="free_item">Free Item</option>
                                                            </>
                                                        ) : (
                                                            <>
                                                                <option value="">select case type</option>
                                                                <option value="extra_discount">Extra Discount</option>
                                                                <option value="percentage_discount">Percentage Discount</option>
                                                                <option value="free_item">Free Item</option>
                                                            </>
                                                        )}
                                                    </select>
                                                </td>
                                                <td>
                                                    {item.case_type === 'free_item' ? (
                                                        <div className="custom-select">
                                                            <FreeItemProductSelector
                                                                productId={
                                                                    Array.isArray(item.promo_value) &&
                                                                        item.promo_value.length > 0 &&
                                                                        typeof item.promo_value[0] === 'object' &&
                                                                        'productId' in item.promo_value[0]
                                                                        ? (item.promo_value as FreeItemValue[]).map((fi) => fi.productId)
                                                                        : Array.isArray(item.promo_value)
                                                                            ? (item.promo_value as string[])
                                                                            : item.promo_value || ''
                                                                }
                                                                onProductChange={(productIds: string[]) => handleFreeItemProductChange(productIds, item.id)}
                                                                isUpdate={isUpdate}
                                                            />
                                                        </div>
                                                    ) : (
                                                        <div className="flex w-full overflow-hidden rounded border border-[#e0e6ed] dark:border-[#17263c]">
                                                            {showRp && (
                                                                <span className="flex shrink-0 items-center border-r border-[#e0e6ed] bg-[#f1f2f3] px-3 text-sm text-white-dark dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                                                    Rp.
                                                                </span>
                                                            )}
                                                            <NumberFormatter
                                                                className="form-input w-full !rounded-none !border-0"
                                                                placeholder={isPercent ? '10' : showRp ? '50000' : 'Promo Value'}
                                                                max={isPercent ? 100 : undefined}
                                                                min={0}
                                                                value={
                                                                    Number(
                                                                        typeof item.promo_value === 'string' || typeof item.promo_value === 'number'
                                                                            ? item.promo_value
                                                                            : 0
                                                                    ) || 0
                                                                }
                                                                onChange={(value: any) =>
                                                                    changeValueDiscount(
                                                                        'promo_value',
                                                                        (isPercent ? Math.min(Number(value) || 0, 100) : value).toString(),
                                                                        item.id
                                                                    )
                                                                }
                                                            />
                                                            {isPercent && (
                                                                <span className="flex shrink-0 items-center border-l border-[#e0e6ed] bg-[#f1f2f3] px-3 text-sm text-white-dark dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                                                    %
                                                                </span>
                                                            )}
                                                        </div>
                                                    )}
                                                </td>
                                                {hasPercentCase && (
                                                    <td>
                                                        {isPercent ? (
                                                            <div className="flex w-full overflow-hidden rounded border border-[#e0e6ed] dark:border-[#17263c]">
                                                                <span className="flex shrink-0 items-center border-r border-[#e0e6ed] bg-[#f1f2f3] px-3 text-sm text-white-dark dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                                                    Rp.
                                                                </span>
                                                                <NumberFormatter
                                                                    className="form-input w-full !rounded-none !border-0"
                                                                    placeholder="e.g. 100000"
                                                                    min={0}
                                                                    value={Number(item.max_discount) || 0}
                                                                    onChange={(value: any) =>
                                                                        changeValueDiscount(
                                                                            'max_discount',
                                                                            value,
                                                                            item.id
                                                                        )
                                                                    }
                                                                />
                                                            </div>
                                                        ) : null}
                                                    </td>
                                                )}
                                                <td>
                                                    <button type="button" onClick={() => removeItem(item)}>
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            width="20"
                                                            height="20"
                                                            viewBox="0 0 24 24"
                                                            fill="none"
                                                            stroke="currentColor"
                                                            strokeWidth="1.5"
                                                            strokeLinecap="round"
                                                            strokeLinejoin="round"
                                                        >
                                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                                        </svg>
                                                    </button>
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                            <div className="m-4">
                                <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => addItem()}>
                                    Add Case
                                </button>
                            </div>
                        </div>

                        {Object.keys(freeItemProducts).length > 0 && (
                            <TableContainer component={Paper} className="promotions-free-item-table">
                                <Table sx={{ minWidth: 650 }} size="small" aria-label="free item product">
                                    <TableHead>
                                        <TableRow>
                                            <TableCell>Active</TableCell>
                                            <TableCell>Name</TableCell>
                                            <TableCell>Qty</TableCell>
                                        </TableRow>
                                    </TableHead>
                                    <TableBody>
                                        {rows.map((items) => (
                                            <TableRow key={`${items.id}-${items.productId}`} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                                                <TableCell component="th" scope="row">
                                                    <Checkbox size="small" checked={items.active} onChange={(e) => items.id && handleActiveFreeItem(e, items.id, items.productId)} />
                                                </TableCell>
                                                <TableCell>{items.name}</TableCell>
                                                <TableCell>{items.qty}</TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            </TableContainer>
                        )}
                        {promotion.promotion_type && promotion.promotion_case?.some((item: any) => item.case_type === 'free_item') && promotion.promotion_case.length > 1 && (
                            <div className="mt-4 flex w-1/2 items-start">
                                <label htmlFor="promotionMergeFreeItems" className="mb-0 w-full ltr:mr-2 rtl:ml-2">
                                    Merge Free Items ? <br></br>
                                    <p className="w-2/3 text-xs text-gray-400">
                                        {promotion.promotion_merge_free_items ?? true ? 'Gabungkan semua hadiah dari aturan yang memenuhi syarat' : 'Hanya hadiah dari aturan dengan nilai tertinggi'}
                                    </p>
                                </label>
                                <div className="flex flex-col items-start">
                                    <label className="relative h-6 w-12">
                                        <input
                                            type="checkbox"
                                            onChange={(e) =>
                                                setPromotion((prev: any) => ({
                                                    ...prev,
                                                    promotion_merge_free_items: e.target.checked,
                                                }))
                                            }
                                            checked={promotion.promotion_merge_free_items ?? true}
                                            className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                                            id="promotion_merge_free_items"
                                        />
                                        <span className="outline_checkbox bg-icon block h-full rounded-full border-2 border-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-[#ebedf2] before:bg-[url(/assets/images/close.svg)] before:bg-center before:bg-no-repeat before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:left-7 peer-checked:before:bg-primary peer-checked:before:bg-[url(/assets/images/checked.svg)] dark:border-white-dark dark:before:bg-white-dark"></span>
                                    </label>
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};
export default PromotionForm;