"use client";
import ProductinBag from "@/app/components/user-dashboard/bag-item";
import CartSummary from "@/app/components/user-dashboard/cart-summary";
import { useEffect, useState } from "react";
interface Product {
  id: string;
  slug: string;
  main_item_image: {
    image_url: string;
  };
  design_house: {
    name: string;
  };
  product_name: string;
  price: number;
  quantity: number;
}
export default function UserBag() {
  const [products, setProducts] = useState<Product[]>([]);
  const [totalItem, setTotalItem] = useState(0);
  const [totalPrice, setTotalPrice] = useState(0);
  useEffect(() => {
    getProductList();
  }, []);

  async function getProductList() {
    try {
      const response = await fetch('/api/cart/list', {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!response.ok) {
        throw new Error(`Error: ${response.status} - ${response.statusText}`);
      }

      const data = await response.json();
      console.log("response-category", data.data);
      
      const cartItems = data.data || [];
      setProducts(cartItems);
      setTotalItem(cartItems.length);
      
      // Calculate total price from cart items (price * quantity)
      const calculatedTotal = cartItems.reduce((sum: number, item: Product) => {
        const itemPrice = Number(item.price) || 0;
        const itemQuantity = Number(item.quantity) || 1;
        return sum + (itemPrice * itemQuantity);
      }, 0);
      setTotalPrice(calculatedTotal);

      return data;
    } catch (error) {
      console.error("Error fetching category list:", error);
    }
  }

  return (
    <div className="flex w-full flex-1 flex-col gap-4">
      <div className="flex w-full flex-col">
        <div className="flex flex-col">
          <h1 className="med">My bag</h1>
          <p>{totalItem} items{totalItem > 0 && ` - $${totalPrice}`}</p>
        </div>
        <div className="mt-2 flex w-full flex-col justify-between gap-5 align-top lg:flex-row">
          <div className="flex w-full flex-col gap-2 lg:w-[50%]">
            {products &&
              products.map((index, product: any) => (
                <ProductinBag key={`${product}_${index}`} bagItem={product} />
              ))}
          </div>
          <div className="flex-inline w-full lg:w-[50%] lg:max-w-[500px]">
            <CartSummary />
          </div>
        </div>
      </div>
    </div>
  );
}