"use client";

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

type BuyerOrder = {
  _id: string;
  order_number?: string;
  total_amount: number;
  status: string;
  createdAt: string;
  shipping_method?: string | null;
  tracking_code?: string | null;
  shop?: { name: string } | string;
  listing?: { title: string; images: string[]; primaryImageIndex: number } | 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 BuyerOrderItem({ order }: { order: BuyerOrder }) {
  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];

  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">{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.tracking_code && (
            <span className="mt-1 text-[11px] text-neutral-500">
              {order.tracking_code}
            </span>
          )}
          {order.order_number && (
            <span className="mt-1 text-[11px] text-neutral-400">
              {t("shops.orderNumberLabel")}: {order.order_number}
            </span>
          )}
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              router.push(`/shops/orders/${order._id}?autoDownload=1`);
            }}
            className="mt-2 flex items-center gap-1 text-[11px] text-[#0095f6]"
          >
            <BoldIcon name="document-download" size={14} tinted className="text-current" />
            {t("shops.downloadInvoice")}
          </button>
        </div>
      </div>
    </div>
  );
}
