"use client"
import { useState, useEffect, useRef, useCallback } from "react"
import Image from "next/image"
import { Minus, Plus, Trash2, Loader2, 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
}

// Session Storage Key
const PENDING_CART_UPDATES_KEY = 'pendingCartUpdates'

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

export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
  const t = useTranslations()
  
  // Local UI State (Instant feedback)
  const [localQuantity, setLocalQuantity] = useState(item.quantity)
  
  // Sync State
  const [isSyncing, setIsSyncing] = useState(false)
  const [syncError, setSyncError] = useState(false)
  
  // Stock limit modal
  const [showStockModal, setShowStockModal] = useState(false)
  
  // Refs
  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)
  
  // Function refs to solve circular dependency
  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()

  // Get available stock
  const availableStock = item.product.stock || 0

  // Initialize from server state
  useEffect(() => {
    setLocalQuantity(item.quantity)
  }, [item.quantity])

  // Save to sessionStorage
  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])

  // Remove from sessionStorage
  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])

  // Exponential backoff retry
  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) // Max 16s
    retryCountRef.current++
    
    retryTimerRef.current = setTimeout(() => {
      syncToServerRef.current?.(quantity)
    }, delay)
  }, [])

  // Update ref
  retrySyncRef.current = retrySync

  // Sync to server
  const syncToServer = useCallback((quantity: number) => {
    // If already syncing, queue this update
    if (isRequestInFlightRef.current) {
      pendingQuantityRef.current = quantity
      return
    }

    // Mark as syncing
    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?.()
          
          // Process queued update if any
          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?.()
            
            // Process queued update if any
            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
            
            // Rollback on error after retries exhausted
            if (retryCountRef.current >= 3) {
              setLocalQuantity(item.quantity)
              clearPendingUpdate()
            }
            
            retrySyncRef.current?.(quantity)
          }
        }
      )
    }
  }, [item.product_id, item.quantity, updateQuantity, removeItem, onUpdate, clearPendingUpdate])

  // Update ref
  syncToServerRef.current = syncToServer

  // Load pending updates from sessionStorage on mount
  useEffect(() => {
    const loadPendingUpdates = () => {
      try {
        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY)
        if (stored) {
          const pending: Record<number, PendingUpdate> = JSON.parse(stored)
          const productPending = pending[item.product_id]
          
          if (productPending && productPending.quantity !== item.quantity) {
            // Apply pending update
            setLocalQuantity(productPending.quantity)
            pendingQuantityRef.current = productPending.quantity
            retryCountRef.current = productPending.retryCount
            
            // Trigger sync after a short delay
            setTimeout(() => syncToServerRef.current?.(productPending.quantity), 500)
          }
        }
      } catch (error) {
        console.error('Failed to load pending updates:', error)
      }
    }

    loadPendingUpdates()
  }, [item.product_id, item.quantity])

  // Debounced sync
  useEffect(() => {
    // Clear existing timers
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current)
    }

    // If local quantity matches server, no sync needed
    if (localQuantity === item.quantity) {
      return
    }

    // Save to sessionStorage immediately
    savePendingUpdate(localQuantity)

    // Debounce the API call
    debounceTimerRef.current = setTimeout(() => {
      syncToServerRef.current?.(localQuantity)
    }, 800)

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

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

  const handleQuantityIncrease = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    
    // Check stock limit
    if (localQuantity >= availableStock) {
      setShowStockModal(true)
      return
    }
    
    // Optimistic update (instant UI feedback)
    setLocalQuantity(prev => prev + 1)
  }

  const handleQuantityDecrease = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    
    if (localQuantity <= 1) {
      handleDelete()
      return
    }
    
    // Optimistic update (instant UI feedback)
    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-4 shadow-none border">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex gap-4 flex-1">
            <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
              <Image src={getImageSrc()} alt={item.product.name} fill className="object-contain" />
            </div>
            <div className="flex flex-col gap-2">
              <h3 className="font-semibold text-base">{item.product.name}</h3>
              <p className="text-sm text-gray-600">{item.seller?.name || "Store"}</p>
              {availableStock <= 5 && (
                <p className="text-xs text-orange-600 font-medium">
                  {t("only_left", { count: availableStock })}
                </p>
              )}
              <Button
                variant="ghost"
                size="sm"
                onClick={handleDelete}
                disabled={isRemoving}
                className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
              >
                <Trash2 className="h-5 w-5" />
              </Button>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
            <div className="space-y-1">
              <p className="text-sm font-semibold">
                {t("unit_price")} <span className="text-primary">{item.price_formatted}</span>
              </p>
              <p className="text-sm font-semibold">
                {t("extra_price")} {item.sub_total_formatted}
              </p>
              {item.discount_formatted && item.discount_formatted !== "0 TMT" && (
                <p className="text-sm font-semibold">{t("discount")} {item.discount_formatted}</p>
              )}
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold">{t("total_price")}</span>
                <span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
                  {(parseFloat(item.product.price_amount || "0") * localQuantity).toFixed(2)} TMT
                </span>
              </div>
            </div>

            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="icon"
                onClick={handleQuantityDecrease}
                className={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`}
              >
                <Minus className="h-4 w-4" />
              </Button>
              
              <div className="w-12 text-center font-semibold relative">
                {localQuantity}
                {isSyncing && (
                  <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-3 text-blue-500" />
                )}
                {syncError && (
                  <span className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full" title="Sync error" />
                )}
              </div>
              
              <Button
                variant="outline"
                size="icon"
                onClick={handleQuantityIncrease}
                disabled={localQuantity >= availableStock}
                className={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
                  localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
                }`}
              >
                <Plus className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* Stock Limit Modal */}
      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex items-center justify-center mb-4">
              <div className="rounded-full bg-orange-100 p-3">
                <AlertTriangle className="h-6 w-6 text-orange-600" />
              </div>
            </div>
            <DialogTitle className="text-center text-xl">
              {t("stock_limit_title")}
            </DialogTitle>
            <DialogDescription className="text-center text-base pt-2">
              {t("stock_limit_message", { 
                product: item.product.name,
                stock: availableStock 
              })}
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-center mt-4">
            <Button
              onClick={() => setShowStockModal(false)}
              className="w-full rounded-xl"
            >
              {t("understood")}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}