"use client";

import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Heart, Trash2, ShoppingCart, ArrowRight, AlertTriangle } from "lucide-react";
import { useTranslations } from "next-intl";
import toast from "react-hot-toast";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

import useFavourites from "@/hooks/use-favourites";
import { useAppDispatch } from "@/store/hooks";
import { useSelector } from "react-redux";
import { setCartOpen, getCartProducts, addToCart } from "@/store/slices/cart-slice";
import { getWishlist } from "@/store/slices/wishlist-slice";
import { config } from "@/lib/config";
import AuthModal from "@/components/auth/auth-modal";
import StarRating from "@/components/react-stars";
import { formatCurrency } from "@/lib/utils";

export default function FavouritesPage() {
    const t = useTranslations("favourites");
    const tProducts = useTranslations("products");
    const { favourites, count, removeFavourite, clearAll } = useFavourites();
    const dispatch = useAppDispatch();

    const pathname = usePathname();
    const locale = pathname?.split("/")[1] || "ar";

    const { isAuthenticated } = useSelector((state: any) => state.auth);
    const [showAuthModal, setShowAuthModal] = useState(false);
    const [addingId, setAddingId] = useState<number | null>(null);

    /** Add to Cart from Wishlist */
    const handleAddToCart = async (item: any) => {
        if (!config.checkout.allowGuestCheckout && !isAuthenticated) {
            setShowAuthModal(true);
            return;
        }

        const productId = item.id;

        try {
            setAddingId(productId);
            await dispatch(addToCart({ productId, productQTY: 1 })).unwrap();
            toast.success(t("addedToCart"));
            dispatch(getCartProducts());
            dispatch(getWishlist());
            dispatch(setCartOpen(true));
        } catch (error: any) {
            const message = typeof error === "string" ? error : error?.message;
            toast.error(message || tProducts("failed-to-add-to-cart"));
        } finally {
            setAddingId(null);
        }
    };

    /** Remove single */
    const handleRemove = (id: number) => {
        removeFavourite(id);
        toast(t("productRemoved"), { icon: "💔" });
    };

    const [showClearDialog, setShowClearDialog] = useState(false);
    const [isClearing, setIsClearing] = useState(false);

    /** Clear all — called after user confirms in dialog */
    const handleClearAllConfirmed = async () => {
        setIsClearing(true);
        try {
            await clearAll();
            toast.success(t("allCleared"));
            setShowClearDialog(false);
        } catch {
            toast.error(t("clearError") || "Failed to clear wishlist");
        } finally {
            setIsClearing(false);
        }
    };

    /* ── Empty State ── */
    if (count === 0) {
        return (
            <div className="min-h-[60vh] flex flex-col items-center justify-center gap-6 px-4">
                <div className="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center">
                    <Heart className="w-12 h-12 text-gray-300" />
                </div>
                <div className="text-center space-y-2">
                    <h1 className="text-2xl font-bold text-gray-900 font-cairo">
                        {t("emptyTitle")}
                    </h1>
                    <p className="text-gray-500 font-cairo max-w-md">
                        {t("emptySubtitle")}
                    </p>
                </div>
                <Link
                    href={`/${locale}/home`}
                    className="inline-flex items-center gap-2 px-6 py-3 bg-black text-white rounded-lg font-cairo font-medium hover:bg-gray-800 transition-colors"
                >
                    {t("startShopping")}
                    <ArrowRight className="w-4 h-4 rtl:rotate-180" />
                </Link>
            </div>
        );
    }

    return (
        <div className="w-full px-6 lg:px-10 py-8">
            {/* Page Header */}
            <div className="flex items-center justify-between mb-8">
                <div>
                    <h1 className="text-2xl md:text-3xl font-bold text-gray-900 font-cairo">
                        {t("title")}
                    </h1>
                    <p className="text-gray-500 font-cairo mt-1">
                        {t("productCount", { count })}
                    </p>
                </div>
                <button
                    onClick={() => setShowClearDialog(true)}
                    className="flex items-center gap-2 px-4 py-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors font-cairo text-sm"
                    disabled={isClearing}
                >
                    <Trash2 className="w-4 h-4" />
                    {t("clearAll")}
                </button>
            </div>

            {/* Favourites Grid — full width, responsive */}
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 w-full">
                {favourites.map((item) => (
                    <div
                        key={item.id}
                        className="relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow group font-[family-name:var(--font-cairo)]"
                    >
                        {/* Remove button — direction-safe: top inline-start corner */}
                        <button
                            onClick={() => handleRemove(item.id)}
                            className="absolute top-2 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-white/80 backdrop-blur-sm shadow-sm hover:bg-red-50 hover:text-red-500 transition-colors"
                            style={{ insetInlineStart: '8px' }}
                            aria-label={t("removeFromFavourites")}
                        >
                            <Trash2 className="w-4 h-4" />
                        </button>

                        {/* NO heart icon on favourites page — it's redundant here */}

                        {/* Product Image */}
                        <Link href={`/${locale}/product/${item.id}`}>
                            <div className="relative w-full aspect-square bg-gray-50 overflow-hidden rounded-t-2xl">
                                {item.imageUrl ? (
                                    <Image
                                        src={item.imageUrl}
                                        alt={item.name}
                                        fill
                                        sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 16vw"
                                        className="object-contain bg-white group-hover:scale-105 transition-transform duration-300 p-2"
                                    />
                                ) : (
                                    <div className="w-full h-full flex items-center justify-center">
                                        <Heart className="w-10 h-10 text-gray-200" />
                                    </div>
                                )}
                            </div>
                        </Link>

                        {/* Product Info — mirrors ProductCard layout */}
                        <div className="px-3 pt-3 pb-2 flex flex-col gap-1">
                            {/* Row 1: Brand + Category badge */}
                            <div className="flex items-center gap-2">
                                <Link href={`/${locale}/product/${item.id}`} className="min-w-0 flex-1">
                                    <p className="text-[14px] text-gray-800 line-clamp-1 leading-snug font-semibold">
                                        {item.brand || tProducts("brand-fallback")}
                                        <Image
                                            src="/icons svg/Twitter_Verified_Badge.svg.png"
                                            alt={tProducts("verified")}
                                            width={16}
                                            height={16}
                                            className="w-4 h-4 inline-block ms-1 align-middle flex-shrink-0"
                                            style={{ display: "inline-block" }}
                                        />
                                    </p>
                                </Link>
                            </div>

                            {/* Row 2: Product Name as description */}
                            <p className="text-[12px] text-gray-500 line-clamp-1 leading-relaxed">
                                {item.name}
                            </p>

                            {/* Row 3: Price + Stars/Discount */}
                            <div className="flex items-end justify-between mt-1">
                                {/* Price — always LTR */}
                                <div className="flex items-baseline gap-2" dir="ltr">
                                    <span className="text-[18px] font-bold text-gray-900">
                                        {formatCurrency(item.price, locale)}
                                    </span>
                                    {item.oldPrice && item.oldPrice > item.price && (
                                        <span className="text-gray-400 line-through text-[14px]">
                                            {item.oldPrice}
                                        </span>
                                    )}
                                </div>

                                {/* Stars + Discount */}
                                <div className="flex flex-col items-end gap-1">
                                    <StarRating rating={5} inline className="inline-flex" size={16} />
                                    {Number(item.discount) > 0 && (
                                        <span
                                            style={{
                                                backgroundColor: "#ef4444",
                                                color: "#ffffff",
                                                display: "inline-flex",
                                                alignItems: "center",
                                                justifyContent: "center",
                                                borderRadius: "9999px",
                                                padding: "2px 5px",
                                                fontSize: "12px",
                                                fontWeight: 700,
                                                minWidth: "40px",
                                            }}
                                        >
                                            {item.discount}%
                                        </span>
                                    )}
                                </div>
                            </div>

                            {/* Stock Status */}
                            {item.inStock === false && (
                                <span className="text-xs text-red-500 font-medium">
                                    {t("outOfStock")}
                                </span>
                            )}

                            {/* Add to Cart Button */}
                            <button
                                onClick={() => handleAddToCart(item)}
                                disabled={addingId === item.id || item.inStock === false}
                                className="w-full flex items-center justify-center gap-2 py-2 mt-1 bg-black text-white rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                <ShoppingCart className="w-4 h-4" />
                                {addingId === item.id
                                    ? "..."
                                    : t("addToCart")}
                            </button>
                        </div>
                    </div>
                ))}
            </div>

            {/* Auth Modal */}
            <AuthModal
                isOpen={showAuthModal}
                onOpenChange={setShowAuthModal}
                onAuthenticated={() => setShowAuthModal(false)}
            />

            {/* Clear All Confirmation Dialog */}
            <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
                <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                        <div className="flex items-center gap-3 mb-1">
                            <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                                <AlertTriangle className="w-5 h-5 text-red-500" />
                            </div>
                            <DialogTitle className="font-cairo text-lg">
                                {t("confirmClearAllTitle") || "Delete All Items"}
                            </DialogTitle>
                        </div>
                        <DialogDescription className="font-cairo text-gray-500 mt-2">
                            {t("confirmClearAllDesc") || t("confirmClearAll") || "Are you sure you want to remove all items from your wishlist? This action cannot be undone."}
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter className="flex gap-2 sm:flex-row flex-col-reverse mt-4">
                        <Button
                            variant="outline"
                            onClick={() => setShowClearDialog(false)}
                            className="font-cairo flex-1"
                            disabled={isClearing}
                        >
                            {t("cancel") || "Cancel"}
                        </Button>
                        <Button
                            onClick={handleClearAllConfirmed}
                            className="bg-red-500 hover:bg-red-600 text-white font-cairo flex-1"
                            disabled={isClearing}
                        >
                            {isClearing ? "..." : (t("clearAll") || "Delete All")}
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
}