import React, { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '@/store/themeConfigSlice';
import { SaveProduct } from '@/utils/saveProduct';
import { coloredToast } from '@/lib/toast';
import Swal from 'sweetalert2';
import { useRouter } from 'next/router';
import Link from 'next/link';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { logActivity } from '@/utils/activityLogger';
import CloudinaryScript from '@/components/CloudinaryScript';

// Dynamic import menghindari stale Turbopack chunk saat navigasi list → edit
const Product = dynamic(() => import('@/components/Products/Fragments/Product'), { ssr: false });
const CategoryForm = dynamic(() => import('@/components/Products/Fragments/Category'), { ssr: false });
const ProductVariation = dynamic(() => import('@/components/Products/Fragments/ProductVariation'), { ssr: false });
const TagForm = dynamic(() => import('@/components/Products/Fragments/Tag'), { ssr: false });
const ImageForm = dynamic(() => import('@/components/Products/Fragments/Image'), { ssr: false });
const LayoutPreview = dynamic(() => import('@/components/Products/Fragments/LayoutPreview'), { ssr: false });
const VideoThumbnailForm = dynamic(() => import('@/components/Products/Fragments/VideoThumbnail'), { ssr: false });
const VideoForm = dynamic(() => import('@/components/Products/Fragments/Video'), { ssr: false });
const Product3DForm = dynamic(() => import('@/components/Products/Fragments/Viewer3D'), { ssr: false });

interface ProductProps {
    prod: any;
}

const EditProduct: React.FC<ProductProps> = ({ prod }) => {
    const router = useRouter();
    const [userName, setUserName] = useState('');
    const [EditedUserName, setEditeduserName] = useState('');
    const [userId, setUserId] = useState('');

    useEffect(() => {
        const editName = localStorage.getItem('user_name');
        if (editName) {
            setEditeduserName(editName);
        }

        const savedId = localStorage.getItem('user');
        if (savedId) {
            setUserId(savedId);
        }
    }, []);

    useEffect(() => {
        setUserName(prod.product_input_by);
    }, [prod]);

    const [detail, setDetail] = useState({
        product_title: prod.product_title,
        product_sort_description: prod.product_sort_description,
        product_meta_description: prod.product_meta_description,
        product_is_purchasable: prod.product_is_purchasable ?? true,
        product_is_new: prod.product_is_new ?? false,
        product_is_pre_order: prod.product_is_pre_order ?? false,
        product_is_coming_soon: prod.product_is_coming_soon ?? false,
        product_is_sni: prod.product_is_sni ?? false,
        product_show_in_page: prod.product_show_in_page ?? true,
        product_is_searchable: prod.product_is_searchable ?? true,
        product_pre_order_text: prod.product_pre_order_text || '',
        product_sold_count: prod.product_sold_count,
        product_search_count: prod.product_search_count || 0,
        product_view_count: prod.product_view_count || 0,
        product_similar: prod.product_similar || [],
        product_link: prod.product_link || '',
        product_wedding_text_preview: prod.product_wedding_text_preview || '',
    });

    const [product, setProduct] = useState<any>({
        product_sku: prod.product_sku,
        product_qty: prod.product_qty,
        product_gold_weight: prod.product_gold_weight,
        product_reg_price: prod.product_reg_price,
        product_sale_price: prod.product_sale_price,
        product_details: prod.product_details,
        product_items: prod.product_items,
    });

    const [categories, setCategories] = useState<any>(prod.product_categories);
    const [tags, setTags] = useState<any>(prod.product_tags);

    const [productStatus, setProductStatus] = useState(prod.product_status);

    const [images, setImages] = useState<any>(prod.product_images);
    const [videoThumbnail, setVideoThumbnail] = useState<any>(prod.product_video_thumbnail || '');
    const [productVideo, setProductVideo] = useState<any>({
        mp4: prod.product_video?.mp4 || '',
        webm: prod.product_video?.webm || '',
    });
    const [useVideoAsThumbnail, setUseVideoAsThumbnail] = useState(() => {
        const currentThumbnail = String(prod.product_video_thumbnail || '').trim();
        const mp4Source = String(prod.product_video?.mp4 || '').trim();
        const webmSource = String(prod.product_video?.webm || '').trim();
        const videoSource = mp4Source || webmSource;
        return Boolean(currentThumbnail && videoSource);
    });

    const [product3D, setProduct3D] = useState<any>({
        src: prod.product_3d_viewer?.src || '',
        env: prod.product_3d_viewer?.env || '',
        poster: prod.product_3d_viewer?.poster || '',
    });

    const [isLoading, setIsLoading] = useState(false);
    const [isMounted, setIsMounted] = useState(false);
    const [showLastChange, setshowLastChange] = useState<any>(false);
    const [isLastChange, setIsLastChange] = useState<any>(prod.product_show_last_change);

    useEffect(() => {
        if (categories.includes('last chance')) {
            setshowLastChange(true);
        } else {
            setshowLastChange(false);
        }
    }, [categories]);

    const getVideoThumbnailSource = () => {
        const mp4Source = String(productVideo?.mp4 || '').trim();
        const webmSource = String(productVideo?.webm || '').trim();
        return mp4Source || webmSource || '';
    };

    useEffect(() => {
        if (useVideoAsThumbnail) {
            setVideoThumbnail(getVideoThumbnailSource());
        }
    }, [useVideoAsThumbnail, productVideo.mp4, productVideo.webm]);

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setPageTitle('Edit Product'));
        setIsMounted(true);
    }, []);

    const saveProduct = async () => {
        setIsLoading(true);
        const videoThumbnailSource = getVideoThumbnailSource();

        if (useVideoAsThumbnail && !videoThumbnailSource) {
            coloredToast('warning', 'Isi URL video mp4 atau webm terlebih dahulu.');
            setIsLoading(false);
            return;
        }

        const isDraftToPublish = prod.product_status === 'draft' && productStatus === 'publish';
        let resetSalePrice = true;
        
        if (isDraftToPublish) {
            const productSalePrice = Number(product.product_sale_price) || 0;
            const hasVariationSale =
                Array.isArray(product.product_items) && product.product_items.some((it: any) => Number(it.sale_price) > 0);

            // Hanya tampilkan konfirmasi jika memang ada sale price yang berpotensi dihapus
            if (productSalePrice > 0 || hasVariationSale) {
                const result = await Swal.fire({
                    title: 'Reset harga sale?',
                    text: 'Saat publish dari Draft, nilai Sale Price pada produk dan variation akan diubah  menjadi 0. Lanjutkan?',
                    icon: 'warning',
                    showCancelButton: true,
                    showDenyButton: true,
                    confirmButtonColor: '#3085d6',
                    denyButtonColor: '#f59e0b',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, Reset Sale Price',
                    denyButtonText: 'Keep Sale Price',
                    cancelButtonText: 'Cancel',
                });

                if (result.isDismissed) {
                    setIsLoading(false);
                    return;
                }

                resetSalePrice = result.isConfirmed;
            }
        }

        const productForm = {
            product_sku: product.product_sku,
            product_title: detail.product_title,
            product_images: images.filter((img: string) => img !== '' && img),
            product_video_thumbnail: useVideoAsThumbnail ? videoThumbnailSource : videoThumbnail,
            product_sort_description: detail.product_sort_description,
            product_meta_description: detail.product_meta_description,
            product_is_new: detail.product_is_new,
            product_is_purchasable: detail.product_is_purchasable,
            product_is_coming_soon: detail.product_is_coming_soon,
            product_is_pre_order: detail.product_is_pre_order,
            product_is_sni: detail.product_is_sni,
            product_show_in_page: detail.product_show_in_page ?? true,
            product_is_searchable: detail.product_is_searchable ?? true,
            product_pre_order_text: detail.product_pre_order_text,
            product_status: productStatus,
            product_reg_price: parseInt(product.product_reg_price),
            product_sale_price: parseInt(product.product_sale_price),
            product_sold_count: detail.product_sold_count,
            product_search_count: detail.product_search_count,
            product_view_count: detail.product_view_count,
            product_qty: product.product_qty,
            product_gold_weight: product.product_gold_weight,
            product_details: product.product_details,
            product_items: product.product_items,
            reset_sale_price: resetSalePrice,
            product_variation_default_image: (() => {
                const defaultItem = product.product_items?.find((i: any) => i.is_default_image);
                if (!defaultItem?.image) return '';
                return Array.isArray(defaultItem.image) ? defaultItem.image[0] : defaultItem.image;
            })(),
            product_categories: categories,
            product_tags: tags,
            product_video: productVideo,
            product_3d_viewer: product3D,
            product_similar: detail.product_similar,
            product_show_last_change: isLastChange,
            product_input_by: userName,
            product_edited_by: EditedUserName === userName ? userName : EditedUserName,
            product_link: detail.product_link,
            product_wedding_text_preview: detail.product_wedding_text_preview,
        };

        const validationSave = SaveProduct(productForm);
        if (validationSave.status === false) {
            setIsLoading(false);
            return;
        }
        // Logic to handle form submission

        try {
            const api_url = process.env.API_URL;
            const payload = {
                data: validationSave.productForm,
            };

            // login credential
            const response = await fetch(`${api_url}api/products/update/${prod.id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
                credentials: 'include', // Include this option
            });

            if (!response.ok) {
                const res = await response.json();

                await logActivity({
                    location: 'Edit Products',
                    description: `Gagal mengubah Produk - ${detail.product_title} '}`,
                });

                if (Array.isArray(res)) {
                    const combinedMessage = res.map((item) => item.message).join('\n\n');
                    coloredToast('warning', combinedMessage);
                } else {
                    coloredToast('warning', res.message);
                }
                setIsLoading(false);
                return;
            }

            const updatedFields: string[] = [];

            Object.keys(productForm).forEach((key) => {
                const oldValue = prod[key as keyof typeof prod];
                const newValue = productForm[key as keyof typeof productForm];

                const isValueChanged = (oldVal: any, newVal: any): boolean => {
                    if (oldVal == null && newVal == null) return false;

                    if (oldVal == null || newVal == null) return true;

                    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
                        if (oldVal.length !== newVal.length) return true;
                        return !oldVal.every((val, index) => {
                            if (typeof val === 'object' && val !== null) {
                                return JSON.stringify(val) === JSON.stringify(newVal[index]);
                            }
                            return val === newVal[index];
                        });
                    }

                    if (typeof oldVal === 'object' && typeof newVal === 'object' && !Array.isArray(oldVal) && !Array.isArray(newVal)) {
                        return JSON.stringify(oldVal) !== JSON.stringify(newVal);
                    }

                    return oldVal !== newVal;
                };

                const formatValueForLog = (value: any): string => {
                    if (value == null) return 'null/undefined';
                    if (Array.isArray(value)) {
                        if (value.length === 0) return '[]';
                        if (typeof value[0] === 'object' && value[0] !== null) {
                            return (
                                '[ ' +
                                value
                                    .map((item: any) => {
                                        if (item && typeof item === 'object') {
                                            const sku = item.sku_variation || '-';
                                            const reg = item.reg_price !== undefined ? item.reg_price : '-';
                                            const sale = item.sale_price !== undefined ? item.sale_price : '-';
                                            const qty = item.qty !== undefined ? item.qty : '-';
                                            return `sku: ${sku}, reg: ${reg}, sale: ${sale}, qty: ${qty}`;
                                        }
                                        return JSON.stringify(item);
                                    })
                                    .join(' | ') +
                                ' ]'
                            );
                        }
                        return `[${value.join(', ')}]`;
                    }
                    if (typeof value === 'object') {
                        if (value.sku_variation) {
                            const sku = value.sku_variation || '-';
                            const reg = value.reg_price !== undefined ? value.reg_price : '-';
                            const sale = value.sale_price !== undefined ? value.sale_price : '-';
                            const qty = value.qty !== undefined ? value.qty : '-';
                            return `sku: ${sku}, reg: ${reg}, sale: ${sale}, qty: ${qty}`;
                        }
                        return JSON.stringify(value);
                    }
                    if (typeof value === 'string' && value.length > 50) {
                        return `"${value.substring(0, 50)}..."`;
                    }
                    if (typeof value === 'string') {
                        return `"${value}"`;
                    }
                    return String(value);
                };

                if (isValueChanged(oldValue, newValue)) {
                    const fieldName = key.charAt(0).toUpperCase() + key.slice(1);
                    const oldFormatted = formatValueForLog(oldValue);
                    const newFormatted = formatValueForLog(newValue);
                    updatedFields.push(`${fieldName}: ${oldFormatted} → ${newFormatted}`);
                }
            });

            const changesDescription =
                updatedFields.length > 0
                    ? `Berhasil mengubah Produk - ${detail.product_title}.\nPerubahan:\n${updatedFields.map((change, index) => `${index + 1}. ${change}`).join('\n')}`
                    : `Berhasil mengubah Produk - ${detail.product_title}. Tidak ada perubahan yang dilakukan.`;

            await logActivity({
                location: 'Edit Products',
                description: changesDescription,
            });

            coloredToast('success', 'product updated successfully');
            router.push('/products');
        } catch (error) {
            console.error(error);
            coloredToast('danger', 'something went wrong');
        }

        setIsLoading(false);
    };

    return (
        <>
            <CloudinaryScript />
            {isMounted && (
                <>
                    <div className="mb-3">
                        <ul className="flex space-x-2 rtl:space-x-reverse">
                            <li>
                                <Link href="/products" className="text-primary hover:underline">
                                    Products
                                </Link>
                            </li>
                            <li className="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                                <span>edit</span>
                            </li>
                        </ul>
                    </div>
                    <div className="flex flex-col gap-2.5 xl:flex-row">
                        <div className="panel flex-1 overflow-x-auto px-0 py-6 ltr:xl:mr-6 rtl:xl:ml-6">
                            <Product detail={detail} setDetail={setDetail} showLastChange={showLastChange} setIsLastChange={setIsLastChange} isLastChange={isLastChange} />
                            <hr className="my-6 border-white-light dark:border-[#1b2e4b]" />
                            <div className="mt-8 px-4">
                                <ProductVariation product={product} setProduct={setProduct} />
                            </div>
                        </div>
                        <div className="mt-6 w-full xl:mt-0 xl:w-96">
                        <div className="panel mb-4">
                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-1">
                                    <button type="button" disabled={isLoading} className="btn btn-success w-full gap-2" onClick={saveProduct}>
                                        {isLoading ? (
                                            <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-l-transparent align-middle ltr:mr-4 rtl:ml-4"></span>
                                        ) : (
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 shrink-0 ltr:mr-2 rtl:ml-2">
                                                <path
                                                    d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 11.6585 22 11.4878 21.9848 11.3142C21.9142 10.5049 21.586 9.71257 21.0637 9.09034C20.9516 8.95687 20.828 8.83317 20.5806 8.58578L15.4142 3.41944C15.1668 3.17206 15.0431 3.04835 14.9097 2.93631C14.2874 2.414 13.4951 2.08581 12.6858 2.01515C12.5122 2 12.3415 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355Z"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                />
                                                <path
                                                    d="M17 22V21C17 19.1144 17 18.1716 16.4142 17.5858C15.8284 17 14.8856 17 13 17H11C9.11438 17 8.17157 17 7.58579 17.5858C7 18.1716 7 19.1144 7 21V22"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                />
                                                <path opacity="0.5" d="M7 8H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                            </svg>
                                        )}
                                        Save
                                    </button>
                                </div>
                            </div>
                            <div className="panel mb-5">
                                <div className="text-lg">Product Status : </div>
                                <div className="mt-4 flex items-center">
                                    <select name="product-status" value={productStatus} className="form-select" id="product-status" onChange={(e) => setProductStatus(e.target.value)}>
                                        <option value="publish">Published</option>
                                        <option value="draft">Draft</option>
                                        <option value="archived">Archived</option>
                                    </select>
                                </div>
                            </div>
                            <div className="panel mb-5">
                                <CategoryForm categories={categories} setCategories={setCategories} isLastChange={isLastChange} setIsLastChange={setIsLastChange} />
                            </div>
                            <div className="panel mb-5">
                                <TagForm tags={tags} setTags={setTags} />
                            </div>
                            <div className="panel mb-5">
                                <DndProvider backend={HTML5Backend}>
                                    <ImageForm images={images} setImages={setImages} />
                                </DndProvider>
                            </div>
                            <div className="panel mb-5">
                                <LayoutPreview
                                    images={images}
                                    productItems={product.product_items ?? []}
                                    productRegPrice={Number(product.product_reg_price) || 0}
                                    productSalePrice={Number(product.product_sale_price) || 0}
                                    productSoldCount={detail.product_sold_count}
                                    productTitle={detail.product_title }
                                />
                            </div>
                            <div className="panel mb-5">
                                <div className="mb-4">
                                    <label className="flex cursor-pointer items-center gap-2">
                                        <input
                                            type="checkbox"
                                            className="form-checkbox"
                                            checked={useVideoAsThumbnail}
                                            onChange={(e) => {
                                                const checked = e.target.checked;
                                                setUseVideoAsThumbnail(checked);
                                                if (!checked) {
                                                    setVideoThumbnail('');
                                                }
                                            }}
                                        />
                                        <span>Jadikan thumbnail dari video (mp4/webm)</span>
                                    </label>
                                </div>
                                <VideoThumbnailForm videoThumbnail={useVideoAsThumbnail ? getVideoThumbnailSource() : ''} setVideoThumbnail={setVideoThumbnail} readonly />
                            </div>
                            <div className="panel mb-5">
                                <VideoForm productVideo={productVideo} setProductVideo={setProductVideo} />
                            </div>
                            <div className="panel mb-5">
                                <Product3DForm product3D={product3D} setProduct3D={setProduct3D} />
                            </div>

                            <div className="panel">
                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-1">
                                    <button type="button" disabled={isLoading} className="btn btn-success w-full gap-2" onClick={saveProduct}>
                                        {isLoading ? (
                                            <span className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-white border-l-transparent align-middle ltr:mr-4 rtl:ml-4"></span>
                                        ) : (
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 shrink-0 ltr:mr-2 rtl:ml-2">
                                                <path
                                                    d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 11.6585 22 11.4878 21.9848 11.3142C21.9142 10.5049 21.586 9.71257 21.0637 9.09034C20.9516 8.95687 20.828 8.83317 20.5806 8.58578L15.4142 3.41944C15.1668 3.17206 15.0431 3.04835 14.9097 2.93631C14.2874 2.414 13.4951 2.08581 12.6858 2.01515C12.5122 2 12.3415 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355Z"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                />
                                                <path
                                                    d="M17 22V21C17 19.1144 17 18.1716 16.4142 17.5858C15.8284 17 14.8856 17 13 17H11C9.11438 17 8.17157 17 7.58579 17.5858C7 18.1716 7 19.1144 7 21V22"
                                                    stroke="currentColor"
                                                    strokeWidth="1.5"
                                                />
                                                <path opacity="0.5" d="M7 8H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                                            </svg>
                                        )}
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="mt-4 w-1/2 text-white">
                        <div className="flex flex-row">
                            <div className="basis-1/2">Input by : {prod.product_input_by}</div>
                            <div className="basis-1/2">Edited by : {prod.product_edited_by}</div>
                        </div>
                        <div className="flex flex-row ">
                            <div className="basis-1/2">Created At: {new Date(prod.createdAt).toLocaleString('id-ID')}</div>
                            <div className="basis-1/2">Updated At: {new Date(prod.updatedAt).toLocaleString('id-ID')}</div>
                        </div>
                    </div>
                </>
            )}
        </>
    );
};

export default EditProduct;

export const getServerSideProps = async (context: any) => {
    try {
        const { params } = context;
        const { product } = params;

        const api_url = process.env.API_URL;

        const response = await fetch(`${api_url}api/products/${product}`);

        if (!response.ok) {
            return {
                notFound: true,
            };
        }
        const data = await response.json();

        return {
            props: {
                prod: data,
            },
        };
    } catch (err) {
        return {
            notFound: true,
        };
    }
};