"use client";
import { useState, useEffect, useRef, useCallback } from "react";
import Image from "next/image";
import { Minus, Plus, Trash2, AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks";
import { useTranslations } from "next-intl";
import type { CartItem } from "@/lib/types/api";

interface CartItemCardProps {
  item: CartItem;
  onUpdate?: () => void;
}

const PENDING_CART_UPDATES_KEY = "pendingCartUpdates";

interface PendingUpdate {
  quantity: number;
  timestamp: number;
  retryCount: number;
}

export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
  const t = useTranslations();

  const [localQuantity, setLocalQuantity] = useState(item.quantity);
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncError, setSyncError] = useState(false);
  const [showStockModal, setShowStockModal] = useState(false);

  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
  const isRequestInFlightRef = useRef(false);
  const pendingQuantityRef = useRef<number | null>(null);
  const retryCountRef = useRef(0);
  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
  const isInitializedRef = useRef(false);

  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);

  const { mutate: updateQuantity } = useUpdateCartItemQuantity();
  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart();

  const availableStock = item.product.stock || 0;

  useEffect(() => {
    setLocalQuantity(item.quantity);
    if (!isInitializedRef.current) {
      isInitializedRef.current = true;
    }
  }, [item.quantity]);

  const savePendingUpdate = useCallback(
    (quantity: number) => {
      try {
        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
        const pending: Record<number, PendingUpdate> = stored
          ? JSON.parse(stored)
          : {};

        pending[item.product_id] = {
          quantity,
          timestamp: Date.now(),
          retryCount: retryCountRef.current,
        };

        sessionStorage.setItem(
          PENDING_CART_UPDATES_KEY,
          JSON.stringify(pending),
        );
      } catch (error) {
        console.error("Failed to save pending update:", error);
      }
    },
    [item.product_id],
  );

  const clearPendingUpdate = useCallback(() => {
    try {
      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
      if (stored) {
        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
        delete pending[item.product_id];

        if (Object.keys(pending).length === 0) {
          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY);
        } else {
          sessionStorage.setItem(
            PENDING_CART_UPDATES_KEY,
            JSON.stringify(pending),
          );
        }
      }
    } catch (error) {
      console.error("Failed to clear pending update:", error);
    }
  }, [item.product_id]);

  const retrySync = useCallback((quantity: number) => {
    const maxRetries = 4;
    const retryCount = retryCountRef.current;

    if (retryCount >= maxRetries) {
      setSyncError(true);
      setIsSyncing(false);
      return;
    }

    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000);
    retryCountRef.current++;

    retryTimerRef.current = setTimeout(() => {
      syncToServerRef.current?.(quantity);
    }, delay);
  }, []);

  retrySyncRef.current = retrySync;

  const syncToServer = useCallback(
    (quantity: number) => {
      if (isRequestInFlightRef.current) {
        pendingQuantityRef.current = quantity;
        return;
      }

      isRequestInFlightRef.current = true;
      setIsSyncing(true);
      setSyncError(false);

      if (quantity <= 0) {
        removeItem(item.product_id, {
          onSuccess: () => {
            isRequestInFlightRef.current = false;
            setIsSyncing(false);
            retryCountRef.current = 0;
            clearPendingUpdate();
            onUpdate?.();

            if (pendingQuantityRef.current !== null) {
              const nextQuantity = pendingQuantityRef.current;
              pendingQuantityRef.current = null;
              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
            }
          },
          onError: (error) => {
            console.error("Remove failed:", error);
            isRequestInFlightRef.current = false;
            retrySyncRef.current?.(quantity);
          },
        });
      } else {
        updateQuantity(
          { productId: item.product_id, quantity },
          {
            onSuccess: () => {
              isRequestInFlightRef.current = false;
              setIsSyncing(false);
              retryCountRef.current = 0;
              clearPendingUpdate();
              onUpdate?.();

              if (pendingQuantityRef.current !== null) {
                const nextQuantity = pendingQuantityRef.current;
                pendingQuantityRef.current = null;
                setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
              }
            },
            onError: (error) => {
              console.error("Update failed:", error);
              isRequestInFlightRef.current = false;

              if (retryCountRef.current >= 3) {
                setLocalQuantity(item.quantity);
                clearPendingUpdate();
              }

              retrySyncRef.current?.(quantity);
            },
          },
        );
      }
    },
    [
      item.product_id,
      item.quantity,
      updateQuantity,
      removeItem,
      onUpdate,
      clearPendingUpdate,
    ],
  );

  syncToServerRef.current = syncToServer;

  useEffect(() => {
    if (!isInitializedRef.current) {
      return;
    }

    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    if (localQuantity === item.quantity) {
      return;
    }

    if (localQuantity <= 0 && item.quantity > 0) {
      // Delete operation
    } else if (localQuantity <= 0) {
      return;
    }

    savePendingUpdate(localQuantity);

    debounceTimerRef.current = setTimeout(() => {
      syncToServerRef.current?.(localQuantity);
    }, 800);

    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }
    };
  }, [localQuantity, item.quantity, savePendingUpdate]);

  useEffect(() => {
    return () => {
      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
    };
  }, []);

  const handleQuantityIncrease = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (localQuantity >= availableStock) {
      setShowStockModal(true);
      return;
    }

    setLocalQuantity((prev) => prev + 1);
  };

  const handleQuantityDecrease = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (localQuantity <= 1) {
      handleDelete();
      return;
    }

    setLocalQuantity((prev) => prev - 1);
  };

  const handleDelete = () => {
    setLocalQuantity(0);
    clearPendingUpdate();
  };

  const getImageSrc = () => {
    if (item.product.image) return item.product.image;
    if (item.product.images && item.product.images.length > 0)
      return item.product.images[0];
    return "/placeholder.svg";
  };

  return (
    <>
      <Card className="p-6 shadow-sm border border-gray-200 rounded-2xl hover:shadow-md transition-shadow duration-200">
        <div className="flex flex-col sm:flex-row gap-6">
          {/* Product Image & Info */}
          <div className="flex gap-4 flex-1">
            <div className="relative w-[100px] h-[133px] rounded-xl border border-gray-200 overflow-hidden shrink-0 bg-gray-50">
              <Image
                src={getImageSrc()}
                alt={item.product.name}
                fill
                className="object-contain p-2"
              />
            </div>

            <div className="flex flex-col gap-2">
              <h3 className="font-bold text-base text-gray-900 line-clamp-2">
                {item.product.name}
              </h3>
              {/* <p className="text-sm text-gray-500 font-medium">
                {item.seller?.name || "Store"}
              </p> */}

              {/* {availableStock <= 5 && (
                <div className="flex items-center gap-1.5">
                  <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
                  <p className="text-xs text-amber-600 font-semibold">
                    {t("only_left", { count: availableStock })}
                  </p>
                </div>
              )} */}

              <Button
                variant="ghost"
                size="sm"
                onClick={handleDelete}
                disabled={isRemoving}
                className="w-fit cursor-pointer p-0 h-auto hover:bg-transparent text-gray-600 hover:text-red-500 transition-colors group"
              >
                <Trash2 className="h-5 w-5 group-hover:scale-110 transition-transform" />
              </Button>
            </div>
          </div>

          {/* Price & Quantity */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-6 justify-between">
            <div className="space-y-2">
              <p className="text-sm font-medium text-gray-600">
                {t("unit_price")}{" "}
                <span className="text-gray-900 font-bold">
                  {item.price_formatted}
                </span>
              </p>

              {item.discount_formatted &&
                item.discount_formatted !== "0 TMT" && (
                  <p className="text-sm font-medium text-emerald-600">
                    {t("discount")} {item.discount_formatted}
                  </p>
                )}

              <div className="flex items-center gap-2">
                <span className="text-sm font-medium text-gray-600">
                  {t("total_price")}
                </span>
                <span className="bg-emerald-500 text-white px-4 py-1.5 rounded-[10px] font-bold text-base shadow-sm">
                  {(
                    parseFloat(item.product.price_amount || "0") * localQuantity
                  ).toFixed(2)}{" "}
                  TMT
                </span>
              </div>
            </div>

            {/* Quantity Controls */}
            <div className="flex items-center gap-3">
              <Button
                variant="outline"
                size="icon"
                onClick={handleQuantityDecrease}
                disabled={isSyncing}
                className={`cursor-pointer rounded-[10px] h-10 w-10 border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 ${
                  isSyncing ? "opacity-50" : ""
                }`}
              >
                <Minus className="h-4 w-4 text-gray-700" />
              </Button>

              <div className="min-w-[48px] text-center font-bold text-lg relative">
                {isSyncing ? (
                  <div className="flex items-center justify-center">
                    <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-900 rounded-full animate-spin" />
                  </div>
                ) : (
                  localQuantity
                )}
                {syncError && (
                  <span
                    className="absolute -top-1 -right-2 h-2.5 w-2.5 bg-red-500 rounded-full border-2 border-white shadow-sm"
                    title="Sync error"
                  />
                )}
              </div>

              <Button
                variant="outline"
                size="icon"
                onClick={handleQuantityIncrease}
                disabled={isSyncing || localQuantity >= availableStock}
                className={`rounded-[10px] h-10 w-10 cursor-pointer border-2 transition-all duration-200 ${
                  localQuantity >= availableStock
                    ? "opacity-30 cursor-not-allowed border-gray-200"
                    : "border-gray-900 bg-gray-900 hover:bg-gray-800"
                } ${isSyncing ? "opacity-50" : ""}`}
              >
                <Plus
                  className={`h-4 w-4 ${localQuantity >= availableStock ? "text-gray-400" : "text-white"}`}
                />
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* Stock Limit Modal */}
      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
        <DialogContent className="sm:max-w-md rounded-3xl border-gray-200">
          <DialogHeader>
            <div className="flex items-center justify-center mb-4">
              <div className="rounded-full bg-amber-100 p-4">
                <AlertTriangle className="h-7 w-7 text-amber-600" />
              </div>
            </div>
            <DialogTitle className="text-center text-2xl font-bold text-gray-900">
              {t("stock_limit_title")}
            </DialogTitle>
            <DialogDescription className="text-center text-base pt-3 text-gray-600 leading-relaxed">
              {t("stock_limit_message", {
                product: item.product.name,
                stock: availableStock,
              })}
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-center mt-6">
            <Button
              onClick={() => setShowStockModal(false)}
              className="w-full h-12 rounded-2xl cursor-pointer bg-gray-900 hover:bg-gray-800 font-semibold shadow-md"
            >
              {t("understood")}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}