postshop-frontend/app/[locale]/cart/page.tsx

"use client";
import { useState, useEffect, useMemo } from "react";
import { Card } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import CartItemCard from "../../../features/cart/components/CartItemCard";
import CartItemSkeleton from "../../../features/cart/components/CartItemSkeleton";
import OrderSummary from "../../../features/cart/components/OrderSummary";
import OrderSummarySkeleton from "../../../features/cart/components/OrderSummarySkeleton";
import {
  useCart,
  useCreateOrder,
  useRegions,
  usePaymentTypes,
  useOrderDeliveries,
} from "@/lib/hooks";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import type { PaymentType, OrderDelivery } from "@/lib/types/api";
import EmptyCart from "@/features/cart/components/EmptyCart";
import ErrorPage from "@/components/ErrorPage";

export default function CartPage() {
  const [isClient, setIsClient] = useState(false);
  const [paymentType, setPaymentType] = useState<PaymentType | null>(null);
  const [selectedOrderDelivery, setSelectedOrderDelivery] = useState<OrderDelivery | null>(null);
  const [selectedRegion, setSelectedRegion] = useState<string>("");
  const [selectedProvince, setSelectedProvince] = useState<number | null>(null);
  const [notes, setNote] = useState<string>("");
  const [phone, setPhone] = useState<string>("+993 "); 
  const [name, setName] = useState<string>("");
  const [lastName, setLastName] = useState<string>("");
  const router = useRouter();
  const t = useTranslations();

  const { data: cartResponse, isLoading: cartLoading, isError } = useCart();
  const { data: provinces = [], isLoading: provincesLoading } = useRegions();
  const { data: paymentTypes = [], isLoading: paymentTypesLoading } =
    usePaymentTypes();
  const { data: orderDeliveries = [], isLoading: deliveriesLoading } = useOrderDeliveries();
  const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder();

  const cartItems = cartResponse?.data || [];
  const isLoading = cartLoading || provincesLoading || paymentTypesLoading || deliveriesLoading;

  useEffect(() => {
    setIsClient(true);
  }, []);

  const handleRegionChange = (region: string) => {
    setSelectedRegion(region);
    setSelectedProvince(null);
    setSelectedOrderDelivery(null);
  };

  const regionGroups = useMemo(() => {
    return provinces.reduce((acc, province) => {
      if (!acc[province.region]) {
        acc[province.region] = [];
      }
      acc[province.region].push(province);
      return acc;
    }, {} as Record<string, typeof provinces>);
  }, [provinces]);

  const availableRegions = useMemo(
    () => Object.keys(regionGroups),
    [regionGroups]
  );

  const itemsBySeller = useMemo(() => {
    return cartItems.reduce((acc, item) => {
      const sellerId = item.product.channel?.[0]?.id || 0;
      const sellerName = item.product.channel?.[0]?.name || "Unknown Seller";

      if (!acc[sellerId]) {
        acc[sellerId] = {
          seller: { id: sellerId, name: sellerName },
          items: [],
        };
      }
      acc[sellerId].items.push(item);
      return acc;
    }, {} as Record<number, { seller: { id: number; name: string }; items: typeof cartItems }>);
  }, [cartItems]);

  const totalAmount = useMemo(() => {
    const productsTotal = cartItems.reduce((sum, item) => {
      const price = parseFloat(item.product.price_amount || "0");
      return sum + price * item.product_quantity;
    }, 0);
    return productsTotal;
  }, [cartItems]);

  const finalTotal = useMemo(() => {
    const shippingPrice = selectedOrderDelivery?.price || 0;
    return totalAmount + shippingPrice;
  }, [totalAmount, selectedOrderDelivery]);

  const formatPhoneForBackend = (phoneNumber: string): string => {
   
    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
  };

  const handleCompleteOrder = () => {
  if (!selectedRegion || !selectedProvince || !paymentType || !phone || !name || !selectedOrderDelivery) {
    console.warn("Missing required fields for order");
    return;
  }

  const phoneDigits = formatPhoneForBackend(phone);
  if (phoneDigits.length !== 8) {
    console.warn("Phone number must be exactly 8 digits");
    return;
  }

  const selectedProvinceData = provinces.find((p) => p.id === selectedProvince);
  if (!selectedProvinceData) return;

  createOrder(
    {
      customer_name: `${name} ${lastName}`.trim(),
      customer_phone: phoneDigits, 
      customer_address: selectedProvinceData.name,
      shipping_method: selectedOrderDelivery.name,
      shipping_price: selectedOrderDelivery.price,
      payment_type_id: paymentType.id,
      region: selectedRegion,
      notes: notes || undefined,
    },
    {
      onSuccess: () => {
        router.push(`/orders`);
      },
    }
  );
};

  if (!isClient) return null;

  if (isLoading) {
    return (
      <div className="mx-auto px-2 md:px-4 lg:px-6 mb-18">
        <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4 md:mb-6 pt-3">
          {t("cart")}
        </h1>

        <div className="flex flex-col md:flex-row gap-6">
          <div className="flex-1">
            <Card className="p-4 md:p-6 rounded-xl">
              <div className="space-y-4">
                {Array.from({ length: 3 }).map((_, i) => (
                  <CartItemSkeleton key={i} />
                ))}
              </div>
            </Card>
          </div>
          <OrderSummarySkeleton />
        </div>
      </div>
    );
  }
  
  if (isError ) {
    return <ErrorPage />;
  }
  if (cartItems.length === 0) {
    return <EmptyCart />;
  }

  return (
    <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 mb-18">
      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4 md:mb-6 pt-3">
        {t("cart")}
      </h1>

      <div className="flex flex-col md:flex-row gap-6">
        <div className="flex-1">
          <Card className="p-4 md:p-6 rounded-xl">
            {Object.entries(itemsBySeller).map(
              ([sellerId, { seller, items }]) => (
                <div key={sellerId} className="mb-6">
                  <p className="text-base font-semibold mb-3">{seller.name}</p>
                  <div className="space-y-4">
                    {items.map((item) => {
                      const price = parseFloat(
                        item.product.price_amount || "0"
                      );
                      const quantity = item.product_quantity;
                      const total = price * quantity;

                      return (
                        <CartItemCard
                          key={item.id}
                          item={{
                            ...item,
                            quantity: quantity,
                            price: price,
                            total: total,
                            seller: seller,
                            price_formatted: `${item.product.price_amount} TMT`,
                            sub_total_formatted: `${item.product.price_amount} TMT`,
                            total_formatted: `${total.toFixed(2)} TMT`,
                            discount_formatted: "0 TMT",
                            product: {
                              ...item.product,
                              image:
                                item.product.media?.[0]?.images_800x800 ||
                                item.product.media?.[0]?.thumbnail,
                              images:
                                item.product.media?.map(
                                  (m) => m.images_800x800 || m.thumbnail
                                ) || [],
                            },
                          }}
                        />
                      );
                    })}
                  </div>
                  {Object.entries(itemsBySeller).length > 1 && (
                    <Separator className="mt-4" />
                  )}
                </div>
              )
            )}
          </Card>
        </div>

        <OrderSummary
          order={{
            id: 1,
            billing: {
              body: [
                {
                  title: t("products"),
                  value: `${totalAmount.toFixed(2)} TMT`,
                },
                ...(selectedOrderDelivery
                  ? [
                      {
                        title: t("shipping_method"),
                        value: `${selectedOrderDelivery.price.toFixed(2)} TMT`,
                      },
                    ]
                  : []),
              ],
              footer: {
                title: t("total_price"),
                value: `${finalTotal.toFixed(2)} TMT`,
              },
            },
          }}
          paymentType={paymentType}
          orderDeliveries={orderDeliveries}
          selectedOrderDelivery={selectedOrderDelivery}
          onOrderDeliveryChange={setSelectedOrderDelivery}
          selectedRegion={selectedRegion}
          selectedProvince={selectedProvince}
          notes={notes}
          regionGroups={regionGroups}
          availableRegions={availableRegions}
          paymentTypes={paymentTypes}
          phone={phone}
          name={name}
          lastName={lastName}
          onPhoneChange={setPhone}
          onNameChange={setName}
          onLastNameChange={setLastName}
          onPaymentTypeChange={setPaymentType}
          onRegionChange={handleRegionChange}
          onProvinceChange={setSelectedProvince}
          onNoteChange={setNote}
          onCompleteOrder={handleCompleteOrder}
          isLoading={isCreatingOrder}
        />
      </div>
    </div>
  );
}