'use client'

import React, { createContext, useContext, useReducer, useEffect, useCallback, useState } from 'react'
import axios from 'axios'
import { ProductType } from '@/type/ProductType'

import { BaseURL } from '@/utils/BaseUrl'

interface CartItem extends ProductType {
  quantity: number
  selectedSize: string
  selectedColor: string
}

interface CartState {
  cartArray: CartItem[]
}

type CartAction =
  | { type: 'ADD_TO_CART'; payload: CartItem }
  | { type: 'REMOVE_FROM_CART'; payload: string }
  | { type: 'UPDATE_CART'; payload: { itemId: string; quantity: number; selectedSize: string; selectedColor: string } }
  | { type: 'LOAD_CART'; payload: CartItem[] }
  | { type: 'CLEAR_CART' }

interface CartContextProps {
  cartState: CartState
  addToCart: (item: CartItem) => void
  removeFromCart: (itemId: string) => void
  updateCart: (itemId: string, quantity: number, selectedSize: string, selectedColor: string) => void
  loadCart: (items: CartItem[]) => void
  clearCart: () => void
  refreshCart: () => Promise<void>
  loading: boolean
}

const CartContext = createContext<CartContextProps | undefined>(undefined)

const cartReducer = (state: CartState, action: CartAction): CartState => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return { ...state, cartArray: [...state.cartArray, action.payload] }
    case 'REMOVE_FROM_CART':
      return { ...state, cartArray: state.cartArray.filter((item) => item.id !== action.payload) }
    case 'UPDATE_CART':
      return {
        ...state,
        cartArray: state.cartArray.map((item) =>
          item.id === action.payload.itemId
            ? { ...item, quantity: action.payload.quantity, selectedSize: action.payload.selectedSize, selectedColor: action.payload.selectedColor }
            : item
        ),
      }
    case 'LOAD_CART':
      return { ...state, cartArray: action.payload }
    case 'CLEAR_CART':
      return { ...state, cartArray: [] }
    default:
      return state
  }
}

// Helper functions for localStorage
const CART_KEY = 'guestCart' // Using same key for all users now

const saveCartToLocalStorage = (cart: CartItem[]) => {
  try {
    localStorage.setItem(CART_KEY, JSON.stringify(cart))
  } catch (error) {
    console.error('Error saving cart to localStorage:', error)
  }
}

const loadCartFromLocalStorage = (): CartItem[] => {
  try {
    const cart = localStorage.getItem(CART_KEY)
    return cart ? JSON.parse(cart) : []
  } catch (error) {
    console.error('Error loading cart from localStorage:', error)
    return []
  }
}

const clearCartFromLocalStorage = () => {
  try {
    localStorage.removeItem(CART_KEY)
    console.log("✅ localStorage cleared");
  } catch (error) {
    console.error('Error clearing cart from localStorage:', error)
  }
}

export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [cartState, dispatch] = useReducer(cartReducer, { cartArray: [] })
  const [loading, setLoading] = useState(true)

  const refreshCart = useCallback(async () => {
    // Load from localStorage for ALL users (both logged-in and guest)
    const cart = loadCartFromLocalStorage()
    dispatch({ type: 'LOAD_CART', payload: cart })
    setLoading(false)
  }, [])

  // Load cart initially
  useEffect(() => {
    refreshCart()
  }, [refreshCart])

  // Sync cart to localStorage for ALL users whenever cartState changes
  useEffect(() => {
    if (!loading) {
      saveCartToLocalStorage(cartState.cartArray)
    }
  }, [cartState.cartArray, loading])

  const addToCart = (item: CartItem) => dispatch({ type: 'ADD_TO_CART', payload: item })
  const removeFromCart = (itemId: string) => dispatch({ type: 'REMOVE_FROM_CART', payload: itemId })
  const updateCart = (itemId: string, quantity: number, selectedSize: string, selectedColor: string) =>
    dispatch({ type: 'UPDATE_CART', payload: { itemId, quantity, selectedSize, selectedColor } })
  const loadCart = (items: CartItem[]) => dispatch({ type: 'LOAD_CART', payload: items })
  const clearCart = () => {
    console.log("🗑️ Clearing cart - Redux store and localStorage");
    dispatch({ type: 'CLEAR_CART' })
    clearCartFromLocalStorage()
    console.log("✅ Cart cleared - cartArray should be empty now");
  }

  return (
    <CartContext.Provider value={{ cartState, addToCart, removeFromCart, updateCart, loadCart, clearCart, refreshCart, loading }}>
      {children}
    </CartContext.Provider>
  )
}

export const useCart = () => {
  const context = useContext(CartContext)
  if (!context) throw new Error('useCart must be used within a CartProvider')
  return context
}
