"use client";

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import Image from 'next/image';
import { ChevronLeft, Minus, Plus, Heart, Truck, BadgePercent, ChevronDown, ChevronUp } from 'lucide-react';
import DashboardLayout from '@/components/layout/DashboardLayout';
import CartSidebar, { CartItem } from '@/components/grocery/CartSidebar';
import ProductCard from '@/components/grocery/ProductCard';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { logEvent } from '@/utils/analytics';

import { currency, getValidImage } from '@/lib/utils';
import { Modal } from '@/components/ui/modal';
import { Button } from '@/components/ui/button';
import { Icons } from '@/components/icons';
import { parseCookies } from 'nookies';
import { COOKIES_USER_ACCESS_TOKEN } from '@/context/actionTypes';

const ProductDetailPage = () => {
    const { id } = useParams();
    const router = useRouter();
    const searchParams = useSearchParams();
    const restaurantIdFromQuery = searchParams.get('restaurantId');
    const { Toast, userInfo } = useGlobalContext();
    const orange = "hsl(var(--brand-500))";

    const [product, setProduct] = useState<any>(null);
    const [productDetail, setProductDetail] = useState<any>(null);
    const [loading, setLoading] = useState(true);
    const [similarProducts, setSimilarProducts] = useState<any[]>([]);
    const [similarLoading, setSimilarLoading] = useState(false);
    const [cartItems, setCartItems] = useState<CartItem[]>([]);
    const [isCartOpen, setIsCartOpen] = useState(false);
    const [isInitialized, setIsInitialized] = useState(false);
    const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
    const [pendingProduct, setPendingProduct] = useState<any>(null);
    const [showMoreDetails, setShowMoreDetails] = useState(false);
    const [isFav, setIsFav] = useState(false);

    useEffect(() => {
        if (product) {
            setIsFav(product.is_fav);
        }
    }, [product]);

    const toggleFavorite = async () => {
        if (!userInfo) {
            Toast.error("Login Required: Please log in to proceed.");
            return;
        }
        try {
            const payLoad = {
                grocery_item_id: product._id,
                store_id: product.restaurant_id || product.restaurantId || restaurantIdFromQuery,
                status: isFav ? "dislike" : "favourite",
            };
            const apiRes = await apis.Favourite.toggle(payLoad);
            if (apiRes) {
                setIsFav(!isFav);
                Toast.success(
                    isFav
                        ? "Item removed from favourites."
                        : "Item added to favourites."
                );
            }
        } catch (error: any) {
            Toast.error(error?.response?.body?.message || error?.message || "Something went wrong. Please try again later.");
        }
    };

    useEffect(() => {
        const savedCart = localStorage.getItem('groceryCartItems');
        if (savedCart) {
            setCartItems(JSON.parse(savedCart));
        }
        setIsInitialized(true);

        const handleToggle = () => setIsCartOpen(prev => !prev);
        window.addEventListener('toggle-grocery-cart', handleToggle);
        return () => window.removeEventListener('toggle-grocery-cart', handleToggle);
    }, []);

    useEffect(() => {
        if (!isInitialized) return;
        localStorage.setItem('groceryCartItems', JSON.stringify(cartItems));
        window.dispatchEvent(new CustomEvent('grocery-cart-updated', { detail: cartItems.length }));
    }, [cartItems, isInitialized]);

    const fetchSimilarProducts = async (restaurantId: string, categoryId: string) => {
        try {
            setSimilarLoading(true);
            let query = `store_id=${restaurantId}&category_id=${categoryId}`;
            if (userInfo?._id) {
                query += `&customer_id=${userInfo._id}`;
            }
            const response = await apis.Grocery.getSimilarItems(query);
            if (response?.data) {
                // Attach restaurant_id to each similar product
                const productsWithRestaurantId = response.data
                    .filter((item: any) => item._id !== id)
                    .map((item: any) => ({
                        ...item,
                        restaurant_id: item.restaurant_id || restaurantId
                    }));
                setSimilarProducts(productsWithRestaurantId);
            }
        } catch (error) {
            Toast.error(error);
        } finally {
            setSimilarLoading(false);
        }
    };

    const fetchProduct = async () => {
        if (!id) return;
        try {
            setLoading(true);
            const response = await apis.Grocery.getItemDetail(id as string);
            if (response?.data) {
                const productData = {
                    ...response.data,
                    restaurant_id: response.data.store_id || response.data.restaurant_id || restaurantIdFromQuery,
                    total_stock: response.data.stock ?? 0
                };
                setProduct(productData);
                setProductDetail(response.data || null);

                if (productData.category?._id || productData.category_id) {
                    fetchSimilarProducts(
                        productData.restaurant_id,
                        productData.category?._id || productData.category_id
                    );
                }
            } else {
                Toast.error("Product not found!");
                router.back();
            }
        } catch (error) {
            Toast.error(error);
            console.error("FetchProduct error:", error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchProduct();
    }, [id, restaurantIdFromQuery, userInfo]);

    const addToCart = useCallback((prod: any) => {
        const productId = prod._id || prod.id;
        const productRestaurantId = prod.restaurant_id || prod.restaurantId || restaurantIdFromQuery;

        const currentCartRestaurantId = cartItems.length > 0 ? String(cartItems[0].restaurantId) : undefined;
        const incomingRestaurantId = productRestaurantId ? String(productRestaurantId) : undefined;

        if (currentCartRestaurantId && incomingRestaurantId && currentCartRestaurantId !== incomingRestaurantId) {
            setPendingProduct({ ...prod, restaurant_id: incomingRestaurantId });
            setIsConfirmModalOpen(true);
            return;
        }

        const hasDiscount = (prod.is_discount_active !== false) &&
            prod.discounted_price !== undefined &&
            prod.discounted_price !== null &&
            Number(prod.discounted_price) > 0 &&
            Number(prod.discounted_price) < Number(prod.price);

        const effectivePrice = hasDiscount ? Number(prod.discounted_price) : Number(prod.price || prod.base_price || prod.original_price || 0);

        logEvent("add_to_cart", {
            currency: "INR",
            value: effectivePrice,
            items: [{
                item_id: productId,
                item_name: prod.name || prod.title,
                price: effectivePrice,
                quantity: 1,
                item_category: "grocery"
            }]
        });

        setCartItems(prev => {
            const existing = prev.find(item => item.id === productId);
            if (existing) {
                return prev.map(item =>
                    item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
                );
            }

            if (prod.weight && typeof prod.price === 'string' && prod.price.includes(currency)) {
                return [...prev, { ...prod, id: productId, quantity: 1, restaurantId: incomingRestaurantId }];
            }
            return [...prev, {
                id: productId,
                name: prod.name,
                weight: `${prod.quantity || ''} ${prod.unit || ''}`.trim(),
                price: `${currency}${effectivePrice}.00`,
                originalPrice: hasDiscount ? `${currency}${prod.price}.00` : undefined,
                image: getValidImage(prod.imageUrl),
                quantity: 1,
                restaurantId: incomingRestaurantId,
                totalStock: prod.total_stock
            }];
        });
    }, [cartItems, restaurantIdFromQuery]);

    const handleConfirmClearCart = () => {
        if (pendingProduct) {
            const productId = pendingProduct._id || pendingProduct.id;
            const productRestaurantId = pendingProduct.restaurant_id || pendingProduct.restaurantId || restaurantIdFromQuery;
            const incomingRestaurantId = productRestaurantId ? String(productRestaurantId) : undefined;

            if (pendingProduct.weight && typeof pendingProduct.price === 'string' && pendingProduct.price.includes(currency)) {
                setCartItems([{ ...pendingProduct, id: productId, quantity: 1, restaurantId: incomingRestaurantId }]);
            } else {
                setCartItems([{
                    id: productId,
                    name: pendingProduct.name,
                    weight: `${pendingProduct.quantity || ''} ${pendingProduct.unit || ''}`.trim(),
                    price: `${currency}${pendingProduct.price}.00`,
                    image: getValidImage(pendingProduct.imageUrl),
                    quantity: 1,
                    restaurantId: incomingRestaurantId,
                    totalStock: pendingProduct.total_stock
                }]);
            }
            setPendingProduct(null);
        }
        setIsConfirmModalOpen(false);
    };

    const removeFromCart = useCallback((productId: string | number) => {
        setCartItems(prev => {
            const existing = prev.find(item => item.id === productId);
            if (existing && existing.quantity > 1) {
                return prev.map(item =>
                    item.id === productId ? { ...item, quantity: item.quantity - 1 } : item
                );
            }
            return prev.filter(item => item.id !== productId);
        });
    }, []);

    const deleteItem = useCallback((productId: string | number) => {
        setCartItems(prev => prev.filter(item => item.id !== productId));
    }, []);

    const quantityInCart = useMemo(() => {
        if (!product) return 0;
        const productRestaurantId = product.restaurant_id || product.restaurantId || restaurantIdFromQuery;

        if (cartItems.length > 0 && cartItems[0].restaurantId && productRestaurantId && String(cartItems[0].restaurantId) !== String(productRestaurantId)) {
            return 0;
        }

        const item = cartItems.find(item => item.id === product._id);
        return item ? item.quantity : 0;
    }, [cartItems, product, restaurantIdFromQuery]);

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
        );
    }

    if (!product) return null;

    const isOutOfStock = product.total_stock === 0 || product.stock === 0 || product.is_available === false || product.availability_status === 'out_of_stock';

    const hasDiscount = (product?.is_discount_active !== false) &&
        product?.discounted_price !== undefined &&
        product?.discounted_price !== null &&
        Number(product?.discounted_price) > 0 &&
        Number(product?.discounted_price) < Number(product?.price);

    const displayPrice = hasDiscount ? product.discounted_price : product.price;
    const originalPrice = product.price;

    const discountLabel = product?.discount_value
        ? (product?.discount_type === 'percentage' ? `${product.discount_value}% OFF` : `${currency}${product.discount_value} OFF`)
        : (hasDiscount ? `${Math.round(((originalPrice - displayPrice) / originalPrice) * 100)}% OFF` : null);

    return (
        <div className="relative overflow-x-hidden min-h-screen bg-white">
            <div className={`max-w-7xl mx-auto px-4 py-8 transition-all duration-300 ${isCartOpen ? 'mr-[400px]' : ''}`}>
                {/* Breadcrumbs / Back Button */}
                <div className="flex items-center gap-4 mb-8">
                    <button
                        onClick={() => router.back()}
                        className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center hover:bg-gray-50 transition-colors border border-gray-100"
                    >
                        <ChevronLeft className="w-6 h-6 text-gray-600" />
                    </button>
                    <span className="text-gray-500 text-sm">Back to Products</span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-0">
                    {/* Product Image Section */}
                    <div className="space-y-4 md:pr-12 md:border-r border-gray-100">
                        <div className={`relative aspect-square rounded-[2.5rem] overflow-hidden bg-gray-50 border border-gray-100 shadow-sm group ${isOutOfStock ? 'opacity-80' : ''}`}>
                            <Image
                                src={getValidImage(product.imageUrl)}
                                alt={product.name}
                                fill
                                className={`object-cover group-hover:scale-105 transition-transform duration-700 ${isOutOfStock ? 'grayscale opacity-60' : ''}`}
                                priority
                            />
                            {hasDiscount && !isOutOfStock && (
                                <div className="absolute top-6 left-6 bg-red-500 text-white text-xs font-extrabold px-3.5 py-1 rounded-full shadow-lg z-10 uppercase tracking-wider">
                                    {discountLabel}
                                </div>
                            )}
                            <div className="absolute top-6 right-6 flex flex-col gap-3">
                                <button
                                    onClick={toggleFavorite}
                                    className="w-12 h-12 rounded-full bg-white/90 backdrop-blur-md flex items-center justify-center text-gray-600 hover:text-red-500 shadow-lg transition-all active:scale-90"
                                >
                                    {isFav ? <div className="scale-150"><Icons.Heart /></div> : <Heart className="w-6 h-6" />}
                                </button>
                            </div>
                            {isOutOfStock && (
                                <div className="absolute inset-0 flex items-center justify-center bg-black/25 backdrop-blur-[2px]">
                                    <span className="bg-gray-900 text-white px-6 py-2 rounded-full font-bold uppercase tracking-widest shadow-2xl">
                                        Out Of Stock
                                    </span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Product Info Section */}
                    <div className="flex flex-col justify-center space-y-8 md:pl-12">
                        <div className="space-y-2">
                            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 leading-tight">
                                {product.name}
                            </h1>
                        </div>

                        <div className="space-y-2">
                            <div className="flex items-baseline gap-3 flex-wrap">
                                {hasDiscount ? (
                                    <>
                                        <span className="text-3xl font-extrabold text-gray-900">{currency}{displayPrice}.00</span>
                                        <span className="text-xl font-semibold text-gray-400 line-through">{currency}{originalPrice}.00</span>
                                        {discountLabel && (
                                            <span className="bg-red-100 text-red-600 text-xs font-bold px-2.5 py-1 rounded-full uppercase">
                                                {discountLabel}
                                            </span>
                                        )}
                                    </>
                                ) : (
                                    <span className="text-3xl font-extrabold text-gray-900">{currency}{product.price}.00</span>
                                )}
                            </div>
                        </div>

                        <div className="space-y-3">
                            <h3 className="text-base font-bold text-gray-900">Description</h3>
                            <p
                                className="text-gray-600 leading-relaxed text-sm"
                                dangerouslySetInnerHTML={{
                                    __html:
                                        product?.description ||
                                        "No Description Available"
                                }}
                            />

                        </div>

                        <div className="space-y-6 pt-4">
                            <div className="flex items-center gap-6">
                                <div className="flex items-center bg-gray-100 rounded-xl p-1 shadow-inner">
                                    <button
                                        onClick={() => removeFromCart(product._id)}
                                        disabled={quantityInCart === 0}
                                        className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                                    >
                                        <Minus className="w-4 h-4 text-gray-700" />
                                    </button>
                                    <span className="w-12 text-center text-lg font-bold text-gray-900">
                                        {quantityInCart}
                                    </span>
                                    <button
                                        onClick={() => addToCart(product)}
                                        disabled={isOutOfStock || quantityInCart >= product.total_stock}
                                        className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                                    >
                                        <Plus className="w-4 h-4 text-gray-700" />
                                    </button>
                                </div>

                                <button
                                    onClick={() => {
                                        if (quantityInCart === 0) addToCart(product);
                                        setIsCartOpen(true);
                                    }}
                                    disabled={isOutOfStock && quantityInCart === 0}
                                    className="flex-grow md:flex-grow-0 md:px-10 h-12 rounded-xl bg-brand-500 text-white font-bold text-base shadow-lg shadow-brand-200 transition-all active:scale-90 disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed flex items-center justify-center gap-3"
                                >
                                    {quantityInCart > 0 ? "View in Cart" : "Add to Cart"}
                                </button>
                            </div>
                        </div>

                        <div className="pt-6 mt-2 border-t border-gray-100 space-y-4">
                            <div className="space-y-3">
                                <h3 className="text-lg font-bold text-gray-900">Product Details</h3>
                                <div className="space-y-4">
                                    {/* Key fields always visible */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {product.diet_preference && (
                                            <div>
                                                <p className="text-sm font-bold text-gray-900 mb-1">Diet Preference</p>
                                                <p className="text-sm text-gray-600">{product.diet_preference}</p>
                                            </div>
                                        )}
                                    </div>

                                    <div>
                                        <p className="text-sm font-bold text-gray-900 mb-1">Description</p>
                                        <p
                                            className="text-sm text-gray-600 leading-relaxed"
                                            dangerouslySetInnerHTML={{
                                                __html: product?.description || "No Description Available",
                                            }}
                                        />

                                    </div>

                                    {showMoreDetails && (
                                        <div className="space-y-6 animate-in fade-in slide-in-from-top-2 duration-300">
                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                <div>
                                                    <p className="text-sm font-bold text-gray-900 mb-1">Unit</p>
                                                    <p className="text-sm text-gray-600">{product.quantity} {product.unit}</p>
                                                </div>
                                                {product.fssai_license && (
                                                    <div>
                                                        <p className="text-sm font-bold text-gray-900 mb-1">FSSAI License</p>
                                                        <p className="text-sm text-gray-600">{product.fssai_license}</p>
                                                    </div>
                                                )}
                                                {product.key_features && (
                                                    <div className="md:col-span-2">
                                                        <p className="text-sm font-bold text-gray-900 mb-1">Key Features</p>
                                                        <p className="text-sm text-gray-600">{product.key_features}</p>
                                                    </div>
                                                )}
                                                {product.allergen_information && (
                                                    <div className="md:col-span-2">
                                                        <p className="text-sm font-bold text-gray-900 mb-1">Allergens</p>
                                                        <p className="text-sm text-gray-600">{product.allergen_information}</p>
                                                    </div>
                                                )}
                                                {product.shelf_life && (
                                                    <div>
                                                        <p className="text-sm font-bold text-gray-900 mb-1">Shelf Life</p>
                                                        <p className="text-sm text-gray-600">{product.shelf_life}</p>
                                                    </div>
                                                )}
                                                {productDetail?.store && (
                                                    <div>
                                                        <p className="text-sm font-bold text-gray-900 mb-1">Seller</p>
                                                        <p className="text-sm text-gray-600">{productDetail.store.restaurant_name}</p>
                                                        {productDetail.store.address && (
                                                            <p className="text-xs text-gray-400">
                                                                {productDetail.store.address.name}, {productDetail.store.address.city}
                                                            </p>
                                                        )}
                                                    </div>
                                                )}
                                            </div>

                                            <div className="pt-4 border-t border-gray-50">
                                                <p className="text-sm font-bold text-gray-900 mb-2">Disclaimer</p>
                                                <p className="text-xs text-gray-500 leading-relaxed italic">
                                                    Every effort is made to maintain accuracy of all information. However, actual product packaging and materials may contain more and/or different information. It is recommended not to solely rely on the information presented.
                                                </p>
                                            </div>
                                        </div>
                                    )}

                                    <button
                                        onClick={() => setShowMoreDetails(!showMoreDetails)}
                                        className="flex items-center gap-1 text-brand-500 text-sm font-bold hover:text-brand-600 transition-colors pt-2"
                                    >
                                        {showMoreDetails ? (
                                            <> View less details <ChevronUp className="w-4 h-4" /></>
                                        ) : (
                                            <> View more details <ChevronDown className="w-4 h-4" /></>
                                        )}
                                    </button>
                                </div>
                            </div>

                            <div className="pt-8 border-t border-gray-100 space-y-6">
                                <h3 className="text-xl font-bold text-gray-900">Why shop from us?</h3>
                                <div className="grid gap-6">
                                    <div className="flex items-center gap-4">
                                        <div className="w-12 h-12 rounded-2xl bg-brand-50 flex items-center justify-center flex-shrink-0">
                                            <Truck className="w-6 h-6 text-brand-500" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-gray-900 text-sm md:text-base">Superfast Delivery</h4>
                                            <p className="text-sm text-gray-500 leading-relaxed">Get your order delivered to your doorstep at the earliest from stores near you.</p>
                                        </div>
                                    </div>

                                    <div className="flex items-center gap-4">
                                        <div className="w-12 h-12 rounded-2xl bg-brand-50 flex items-center justify-center flex-shrink-0">
                                            <BadgePercent className="w-6 h-6 text-brand-500" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-gray-900 text-sm md:text-base">Best Prices & Offers</h4>
                                            <p className="text-sm text-gray-500 leading-relaxed">Best price destination with offers directly from the manufacturers.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Similar Products Section */}
                {(similarLoading || similarProducts.length > 0) && (
                    <div className="mt-20 space-y-8">
                        <div className="flex items-center justify-between">
                            <h2 className="text-2xl font-bold text-gray-900">Similar Products</h2>
                        </div>

                        {similarLoading ? (
                            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
                                {[...Array(5)].map((_, i) => (
                                    <div key={i} className="space-y-4 animate-pulse">
                                        <div className="aspect-square bg-gray-100 rounded-[2rem]"></div>
                                        <div className="h-4 bg-gray-100 rounded w-3/4"></div>
                                        <div className="h-4 bg-gray-100 rounded w-1/2"></div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
                                {similarProducts.map((item) => (
                                    <ProductCard
                                        key={item._id}
                                        product={item}
                                        quantity={cartItems.find(c => c.id === item._id)?.quantity || 0}
                                        onAdd={addToCart}
                                        onRemove={removeFromCart}
                                    />
                                ))}
                            </div>
                        )}
                    </div>
                )}

            </div>

            <CartSidebar
                isOpen={isCartOpen}
                onClose={() => setIsCartOpen(false)}
                items={cartItems}
                onAdd={addToCart}
                onRemove={removeFromCart}
                onDeleteItem={deleteItem}
                orange={orange}
                onClearCart={() => setCartItems([])}
            />

            <Modal
                title={"Replace cart item?"}
                description={"Your cart contains items from another store. Do you want to discard the selection and add items from this store instead?"}
                isOpen={isConfirmModalOpen}
                onClose={() => setIsConfirmModalOpen(false)}
            >
                <div className="flex justify-end gap-3 mt-4">
                    <Button variant="outline" onClick={() => setIsConfirmModalOpen(false)}>
                        Cancel
                    </Button>
                    <Button
                        className="bg-brand-500 text-white hover:bg-brand-600"
                        onClick={handleConfirmClearCart}
                    >
                        OK
                    </Button>
                </div>
            </Modal>
        </div>
    );
};

export default function ProductDetail() {
    return (
        <DashboardLayout>
            <ProductDetailPage />
        </DashboardLayout>
    );
}