"use client";

import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";

type SellerOrder = {
  _id: string;
  order_number?: string;
  quantity: number;
  total_amount: number;
  status: string;
  createdAt: string;
  shipping_method?: string | null;
  tracking_code?: string | null;
  buyerAddressSnapshot?: { first_name?: string | null; last_name?: string | null } | null;
  listing?: { title: string; images: string[]; primaryImageIndex: number } | string;
  shop?: { name: string } | string;
};

const STATUS_COLOR: Record<string, string> = {
  pending_payment: "text-[#BFAF19]",
  on_hold: "text-[#BFAF19]",
  failed: "text-[#BA4141]",
  processing: "text-[#3D7EFF]",
  shipped: "text-[#3D7EFF]",
  ready_for_pickup: "text-[#3D7EFF]",
  completed: "text-[#008D0E]",
  cancelled: "text-[#BA4141]",
  refunded: "text-[#BA4141]",
};

export default function SellerOrderItem({ order }: { order: SellerOrder }) {
  const { t } = useTranslation("common");
  const router = useRouter();
  const listing = typeof order.listing === "object" ? order.listing : null;
  const shopName = typeof order.shop === "object" ? order.shop?.name : "";
  const primaryImage =
    listing?.images?.[listing.primaryImageIndex] || listing?.images?.[0];
  const buyerName = [
    order.buyerAddressSnapshot?.first_name,
    order.buyerAddressSnapshot?.last_name,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div
      className="mb-4 block w-full cursor-pointer rounded-3xl border border-border-primary-light p-4 font-semibold"
      onClick={() => router.push(`/shops/orders/${order._id}`)}
    >
      <div className="flex w-full items-center justify-between max-[350px]:flex-col max-sm:gap-5">
        <div className="flex min-w-0 items-center gap-2">
          {primaryImage ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={IMAGE_BASE_URL + primaryImage}
              alt={listing?.title || ""}
              className="h-12 w-12 shrink-0 rounded-xl object-cover"
            />
          ) : (
            <span className="h-12 w-12 shrink-0 rounded-xl bg-neutral-200 dark:bg-neutral-800" />
          )}
          <div className="min-w-0">
            <p className="truncate text-sm">{listing?.title}</p>
            <p className="text-xs text-neutral-500">{buyerName}</p>
            {shopName && (
              <p className="text-[11px] text-neutral-400">{shopName}</p>
            )}
            <p className="text-xs text-neutral-500">
              {order.total_amount.toLocaleString()} {t("settings.toman")}
            </p>
          </div>
        </div>
        <div className="flex flex-col items-end max-sm:items-center max-sm:text-[11px]">
          <span>{order.createdAt}</span>
          <div className="mt-3 flex items-center gap-1 max-[350px]:mt-0">
            <span>{t("settings.status")}: </span>
            <span className={STATUS_COLOR[order.status] || ""}>
              {t(`shops.orderStatus.${order.status}`)}
            </span>
          </div>
          {order.shipping_method && (
            <span className="mt-1 text-[11px] text-neutral-500">
              {t(`shops.shippingMethods.${order.shipping_method}`)}
              {order.tracking_code ? `: ${order.tracking_code}` : ""}
            </span>
          )}
          {order.order_number && (
            <span className="mt-1 text-[11px] text-neutral-400">
              {t("shops.orderNumberLabel")}: {order.order_number}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}
