import CurrencySymbol from "./CurrencySymbol";

type ProductPricingModalProps = {
    show: boolean;
    product: any;
    selectedVariation: any;
    selectedPriceItem: any;
    setSelectedVariation: (value: any) => void;
    setSelectedPriceItem: (value: any) => void;
    onClose: () => void;
    onConfirm: () => void;
};

export default function ProductPricingModal({
                                                show,
                                                product,
                                                selectedVariation,
                                                selectedPriceItem,
                                                setSelectedVariation,
                                                setSelectedPriceItem,
                                                onClose,
                                                onConfirm,
                                            }: ProductPricingModalProps) {
    if (!show || !product?.variations?.some((v: any) => v.has_price_list === 1)) {
        return null;
    }

    return (
        <div
            onClick={onClose}
            className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
        >
            <div
                onClick={(e) => e.stopPropagation()}
                className="bg-white rounded-[20px] w-full max-w-[580px] shadow-2xl max-h-[90vh] flex flex-col overflow-hidden"
            >
                <div className="shrink-0 bg-white px-6 pt-6 pb-4 border-b border-[#F3F4F6] relative">
                    <button
                        type="button"
                        onClick={(e) => {
                            e.stopPropagation();
                            onClose();
                        }}
                        className="cursor-pointer absolute right-6 top-6 z-10"
                    >
                        <img src="/icons/right-arrow.svg" alt="إغلاق" />
                    </button>

                    <h2 className="text-[18px] font-book text-basic-color text-center">
                        اختر العرض الأنسب لك
                    </h2>
                </div>

                <div className="flex-1 overflow-y-auto px-6 py-5">
                    <div className="flex flex-col gap-4">
                        {product.variations.map((variation: any) => (
                            <div key={variation.id}>
                                {variation.has_price_list === 1 && variation.price_list
                                    ? variation.price_list.map((priceItem: any) => (
                                        <div
                                            key={priceItem.id}
                                            className={`border-2 rounded-xl p-4 hover:bg-pink-50 transition-all cursor-pointer mb-3 ${
                                                selectedVariation?.id === variation.id &&
                                                selectedPriceItem?.id === priceItem.id
                                                    ? "border-[#FF2B77]"
                                                    : "border-[#F1F2F9]"
                                            }`}
                                            onClick={() => {
                                                setSelectedVariation(variation);
                                                setSelectedPriceItem(priceItem);
                                            }}
                                        >
                                            <div className="flex items-center gap-4">
                                                <div className="flex-1">
                                                    <div className="flex items-center justify-between mb-2">
                                                        <h3 className="font-semibold text-lg text-gray-800">
                                                            {priceItem.min_qty} – {priceItem.max_qty} صورة
                                                        </h3>

                                                        <div className="text-left">
                                                            <p className="text-lg font-bold text-pink-500 inline-flex items-center gap-1">
                                                                <span>{priceItem?.price}</span>
                                                                <CurrencySymbol currency={priceItem?.currency} />
                                                                <span>/ صورة</span>
                                                            </p>
                                                        </div>
                                                    </div>

                                                    <div className="mt-2 text-xs text-gray-400">
                                                        {variation.name} • {variation.width}" ×{" "}
                                                        {variation.height}"
                                                    </div>

                                                    <div className="flex items-center gap-4 mt-3 text-xs text-[#5B5F74]">
                                                        <div className="flex items-center gap-1">
                                                            <img
                                                                src="/icons/new1.svg"
                                                                alt="بدون معاينة"
                                                                className="w-4 h-4"
                                                            />
                                                            <span>بدون معاينة</span>
                                                        </div>

                                                        <div className="flex items-center gap-1">
                                                            <img
                                                                src="/icons/new2.svg"
                                                                alt="بدون تحرير"
                                                                className="w-4 h-4"
                                                            />
                                                            <span>بدون تحرير</span>
                                                        </div>

                                                        <div className="flex items-center gap-1">
                                                            <img
                                                                src="/icons/new3.svg"
                                                                alt="تحميل سريع"
                                                                className="w-4 h-4"
                                                            />
                                                            <span>تحميل سريع</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    ))
                                    : null}
                            </div>
                        ))}
                    </div>
                </div>

                <div className="shrink-0 bg-white px-6 py-4 border-t border-[#F3F4F6]">
                    <button
                        onClick={onConfirm}
                        disabled={!selectedVariation || !selectedPriceItem}
                        className="bg-[#FF2B77] disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium w-full px-6 py-3 rounded-[12px] hover:bg-[#FF2B77]/90 transition-colors"
                    >
                        تأكيد الاختيار
                    </button>
                </div>
            </div>
        </div>
    );
}