"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { updateCartItemQuantity, removeCartItem } from "@/lib/api/cart";
import type { CartItem } from "@/types/api";

export function CartItemRow({ item }: { item: CartItem }) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  function changeQuantity(nextQuantity: number) {
    startTransition(async () => {
      if (nextQuantity <= 0) {
        await removeCartItem(item.uuid);
      } else {
        await updateCartItemQuantity(item.uuid, nextQuantity);
      }
      router.refresh();
    });
  }

  return (
    <div className={`flex items-center gap-3 py-3 ${isPending ? "opacity-50" : ""}`}>
      <div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-muted">
        {item.product.image_url && (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={item.product.image_url} alt="" className="h-full w-full object-cover" />
        )}
      </div>
      <div className="flex flex-1 flex-col gap-1">
        <span className="text-sm font-medium">{item.product.name}</span>
        <span className="text-xs text-muted-foreground">{item.product.price.toLocaleString("fa-IR")} تومان</span>
      </div>
      <div className="flex items-center gap-2 rounded-full border border-border px-2 py-1">
        <button
          type="button"
          disabled={isPending}
          onClick={() => changeQuantity(item.quantity - 1)}
          className="flex h-6 w-6 items-center justify-center text-sm"
          aria-label="کاهش تعداد"
        >
          −
        </button>
        <span className="w-5 text-center text-sm">{item.quantity}</span>
        <button
          type="button"
          disabled={isPending}
          onClick={() => changeQuantity(item.quantity + 1)}
          className="flex h-6 w-6 items-center justify-center text-sm"
          aria-label="افزایش تعداد"
        >
          +
        </button>
      </div>
      <span className="w-20 shrink-0 text-end text-sm font-semibold">{item.line_total.toLocaleString("fa-IR")}</span>
    </div>
  );
}