import Image from "next/image";
import { effects } from "../constants/effects";

type ProductBottomControlsProps = {
    visibleImagesLength: number;
    product: any;
    productId: string | number;

    frames: any[];
    selectedFrame: number | null;
    setSelectedFrame: (value: number | null) => void;

    selectedVariation: any;
    setSelectedVariation: (value: any) => void;

    selectedPriceItem: any;
    setSelectedPriceItem: (value: any) => void;

    showEffectsBar: boolean;
    setShowEffectsBar: (value: boolean) => void;

    showColorBar: boolean;
    setShowColorBar: (value: boolean) => void;

    colorsArray: any;
    backgroundColor: string;
    setBackgroundColor: (value: string) => void;

    selectedEffect: string;
    setSelectedEffect: (value: string) => void;

    fetchedImages: any[];
    uploadedImages: any[];

    handleOpenUpload: () => void;
    saveImageAttributes: (imageId: number, frameId?: number | null) => Promise<void>;
    getDisplayedImages: () => any[];

    setShowPricingModal: (value: boolean) => void;
};

export default function ProductBottomControls({
                                                  visibleImagesLength,
                                                  product,
                                                  productId,

                                                  frames,
                                                  selectedFrame,
                                                  setSelectedFrame,

                                                  selectedVariation,
                                                  setSelectedVariation,

                                                  selectedPriceItem,
                                                  setSelectedPriceItem,

                                                  showEffectsBar,
                                                  setShowEffectsBar,

                                                  showColorBar,
                                                  setShowColorBar,

                                                  colorsArray,
                                                  backgroundColor,
                                                  setBackgroundColor,

                                                  selectedEffect,
                                                  setSelectedEffect,

                                                  fetchedImages,
                                                  uploadedImages,

                                                  handleOpenUpload,
                                                  saveImageAttributes,
                                                  getDisplayedImages,

                                                  setShowPricingModal,
                                              }: ProductBottomControlsProps) {
    if (visibleImagesLength <= 0) return null;

    return (
        <div className="fixed bottom-[-11px] bg-white content-ltr rounded-2xl shadow-lg flex flex-col items-center justify-center px-3 py-2 mb-16 font-bold gap-3 max-w-[calc(100vw-16px)] overflow-hidden">
            <div
                className="w-full overflow-x-auto overscroll-x-contain touch-pan-x"
                style={{ WebkitOverflowScrolling: "touch" }}
            >
                <div className="flex items-center gap-2 justify-start min-w-max px-1">
                    {Number(productId) !== 6 && (
                        <label
                            className="flex flex-col items-center text-pink-500 cursor-pointer"
                            onClick={handleOpenUpload}
                        >
                            <div className="bg-pink-100 p-3 rounded-[16px] mb-2">
                                <Image src="/icons/plus.svg" alt="plus" width={24} height={24} />
                            </div>
                            <span className="text-xs">إضافة صور</span>
                        </label>
                    )}

                    {Number(productId) === 8 && frames.length > 0 && (
                        <div className="flex items-start gap-3 overflow-hidden">
                            {frames.map((frame) => (
                                <div key={frame.id} className="flex flex-col items-center">
                                    <button
                                        onClick={async (e) => {
                                            e.stopPropagation();

                                            const newFrameId = frame.id;
                                            setSelectedFrame(newFrameId);

                                            const imgsToSave = getDisplayedImages().filter(
                                                (img: any) =>
                                                    img?.uploadStatus !== "pending" &&
                                                    img?.uploadStatus !== "uploading" &&
                                                    img?.uploadStatus !== "failed"
                                            );

                                            await Promise.all(
                                                imgsToSave.map((img: any) =>
                                                    saveImageAttributes(Number(img.id), newFrameId)
                                                )
                                            );
                                        }}
                                        className={`cursor-pointer w-14 h-14 rounded-lg border-2 overflow-hidden transition-all ${
                                            selectedFrame === frame.id
                                                ? "border-pink-500 scale-105"
                                                : "border-gray-200"
                                        }`}
                                    >
                                        <img
                                            src={frame.image}
                                            alt="frame"
                                            className="w-full h-full object-contain"
                                        />
                                    </button>

                                    <span className="text-xs mt-1 text-gray-600">
                  {frame.title}
                </span>
                                </div>
                            ))}
                        </div>
                    )}

                    {product?.variations?.length > 0 && (
                        <div className="relative">
                            <div className="flex flex-col w-full">
                                {product.variations.some((v: any) => v.has_price_list === 1) && (
                                    <div className="w-full flex justify-end mb-2">
                                        <button
                                            type="button"
                                            onClick={(e) => {
                                                e.stopPropagation();

                                                if (!selectedVariation) {
                                                    const firstWithPrice = product.variations.find(
                                                        (v: any) => v.has_price_list === 1
                                                    );

                                                    if (firstWithPrice) setSelectedVariation(firstWithPrice);
                                                }

                                                setShowPricingModal(true);
                                            }}
                                            className="cursor-pointer text-primary text-[12px] font-semibold hover:underline"
                                        >
                                            اضغط هنا للحصول على قائمة الاسعار
                                        </button>
                                    </div>
                                )}

                                <div className="flex items-start gap-3">
                                    {product.variations.map((variation: any) => (
                                        <button
                                            key={variation.id}
                                            type="button"
                                            onClick={() => {
                                                setSelectedVariation(variation);
                                                setSelectedPriceItem(null);
                                            }}
                                            className={`cursor-pointer border-2 rounded-xl p-3 transition-all ${
                                                Number(selectedVariation?.id) === Number(variation.id)
                                                    ? "border-[#FF2B77]"
                                                    : "border-[#F1F2F9]"
                                            }`}
                                        >
                                            <img
                                                src={variation.image}
                                                alt={variation.name}
                                                className="w-20 h-20 object-contain"
                                            />

                                            <div className="text-sm font-bold mt-2">
                                                {variation.width} × {variation.height} cm
                                            </div>

                                            <div className="text-xs font-bold text-gray-700">
                                                {variation.name}
                                            </div>
                                        </button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    )}

                    {(Number(productId) === 1 ||
                        Number(productId) === 4 ||
                        Number(productId) === 5 ||
                        Number(productId) === 6) && (
                        <button
                            className="flex flex-col items-center text-gray-600 cursor-pointer"
                            onClick={() => {
                                setShowEffectsBar(true);
                                setShowColorBar(false);
                            }}
                        >
                            <div className="border border-[#F1F2F9] p-3 rounded-[16px] mb-2">
                                <Image src="/icons/brush.svg" alt="brush" width={24} height={24} />
                            </div>
                            <span className="text-xs">تأثيرات</span>
                        </button>
                    )}

                    {Number(productId) === 4 && (
                        <button
                            className="flex flex-col items-center text-gray-600 cursor-pointer"
                            onClick={() => {
                                setShowColorBar(true);
                                setShowEffectsBar(false);
                            }}
                        >
                            <div className="border border-[#F1F2F9] p-3 rounded-[16px] mb-2">
                                <Image src="/icons/flag.svg" alt="flag" width={24} height={24} />
                            </div>
                            <span className="text-xs">لون المنتج</span>
                        </button>
                    )}
                </div>
            </div>

            {showColorBar && (
                <div className="flex flex-col w-full gap-3">
                    <div className="flex justify-between items-center px-2">
                        <button
                            onClick={() => {
                                setShowColorBar(false);
                                (fetchedImages.length > 0
                                        ? fetchedImages
                                        : uploadedImages.filter((img) => img.uploadStatus !== "failed")
                                ).forEach((img) => saveImageAttributes(img.id));
                            }}
                            className="text-xs text-[#FF2B77] font-book px-3 py-1 rounded-[7px] cursor-pointer"
                            style={{ backgroundColor: "rgba(255, 43, 119, 0.25)" }}
                        >
                            تم
                        </button>

                        <span className="text-secondary text-[13px] font-book">
              اختيار لون المنتج
            </span>
                    </div>

                    <div className="flex items-center justify-between w-full gap-3 px-4 mb-3">
                        {colorsArray?.data?.map((c: any) => (
                            <button
                                key={c.id}
                                onClick={() => setBackgroundColor(c.color_code)}
                                className={`w-[50px] h-[50px] rounded-full border-2 cursor-pointer ${
                                    backgroundColor === c.color_code
                                        ? "border-pink-500 scale-110"
                                        : "border-[#DDD]"
                                } transition-all`}
                                style={{ backgroundColor: c.color_code }}
                            />
                        ))}
                    </div>
                </div>
            )}

            {showEffectsBar && (
                <div className="flex flex-col w-full gap-3 px-2">
                    <div className="flex justify-between items-center px-2">
                        <button
                            onClick={() => {
                                setShowEffectsBar(false);
                                (fetchedImages.length > 0
                                        ? fetchedImages
                                        : uploadedImages.filter((img) => img.uploadStatus !== "failed")
                                ).forEach((img) => saveImageAttributes(img.id));
                            }}
                            className="text-xs text-[#FF2B77] font-book px-3 py-1 rounded-[7px] cursor-pointer"
                            style={{ backgroundColor: "rgba(255, 43, 119, 0.25)" }}
                        >
                            تم
                        </button>

                        <span className="text-secondary text-[13px] font-book">
              اختيار الثيم
            </span>
                    </div>

                    <div className="flex items-center content-ltr justify-between w-full gap-3 px-4">
                        {[
                            { id: "normal", label: "طبيعي", icon: "/icons/theme-normal.svg" },
                            { id: "bright", label: "مشرق", icon: "/icons/theme-bright.svg" },
                            { id: "dark", label: "مظلم", icon: "/icons/theme-dark.svg" },
                            { id: "dramatic", label: "درامي", icon: "/icons/theme-dramatic.svg" },
                            { id: "silver", label: "فضي", icon: "/icons/theme-silver.svg" },
                        ].map((t) => (
                            <button
                                key={t.id}
                                onClick={() => setSelectedEffect(t.id)}
                                className={`flex flex-col items-center text-xs cursor-pointer ${
                                    selectedEffect === t.id ? "text-pink-500" : "text-gray-600"
                                }`}
                            >
                                <div
                                    className={`w-[50px] h-[50px] flex items-center justify-center border overflow-hidden ${
                                        selectedEffect === t.id
                                            ? "border-pink-400 bg-pink-50"
                                            : "border-[#F1F2F9]"
                                    }`}
                                >
                                    <Image
                                        src={t.icon}
                                        alt={t.label}
                                        width={0}
                                        height={0}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                {t.label}
                            </button>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}