"use client";

import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import { cn } from "@/lib/utils";
import { IShopProductListing } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

type ShopProductListRowProps = {
  listing: IShopProductListing;
  shopId: string;
};

const STATUS_TEXT_COLOR: Record<string, string> = {
  active: "text-green-600",
  pending_shop_approval: "text-amber-600",
  inactive: "text-red-500",
};

function cheapestPrice(listing: IShopProductListing): number | null {
  if (!listing.variants || listing.variants.length === 0) return null;
  return Math.min(...listing.variants.map((v) => v.discount_price || v.price));
}

function totalStock(listing: IShopProductListing): number {
  return listing.variants?.reduce((sum, v) => sum + (v.stock || 0), 0) ?? 0;
}

function isInStock(listing: IShopProductListing): boolean {
  return listing.variants?.some((v) => v.stock > 0) ?? false;
}

function leafCategory(listing: IShopProductListing): string | null {
  return listing.sub_sub_category || listing.sub_category || listing.category || null;
}

export default function ShopProductListRow({ listing, shopId }: ShopProductListRowProps) {
  const { t } = useTranslation("common");
  const primaryImage =
    listing.images?.[listing.primaryImageIndex] || listing.images?.[0];
  const price = cheapestPrice(listing);
  const stockCount = totalStock(listing);
  const inStock = isInStock(listing);
  const category = leafCategory(listing);

  return (
    <Link
      href={`/shops/${shopId}/products/${listing._id}`}
      className="gentle-transition flex items-center gap-3 rounded-[28px] border border-neutral-200 p-3 active:scale-[0.99] dark:border-neutral-700"
    >
      <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800">
        {primaryImage && (
          <Image
            src={IMAGE_BASE_URL + primaryImage}
            alt={listing.title}
            fill
            className="object-cover"
            sizes="80px"
            unoptimized
          />
        )}
      </div>

      <div className="flex min-w-0 flex-1 flex-col items-end gap-1.5 text-right">
        <div className="flex w-full items-center justify-between">
          <span className="line-clamp-1 text-base font-bold">{listing.title}</span>
          <span className="shrink-0 text-xs text-neutral-500 dark:text-neutral-400">
            {t("shops.stockCountLabel", { count: stockCount })}
          </span>
        </div>
        <div className="flex w-full items-center justify-between">
          {price != null && (
            <span className="text-xs text-neutral-700 dark:text-neutral-300">
              {t("shops.priceLabel", { amount: price.toLocaleString() })}
            </span>
          )}
          <span
            className={cn(
              "shrink-0 text-xs font-semibold",
              STATUS_TEXT_COLOR[listing.status] || STATUS_TEXT_COLOR.pending_shop_approval
            )}
          >
            {t(`shops.status.${listing.status}`)}
          </span>
        </div>
        <div className="flex w-full items-center justify-between">
          {category && (
            <span className="line-clamp-1 shrink-0 text-xs font-semibold text-red-500">
              {category}
            </span>
          )}
          <span
            className={cn(
              "shrink-0 text-xs font-semibold",
              inStock ? "text-green-600" : "text-red-500"
            )}
          >
            {inStock ? t("shops.inStock") : t("shops.outOfStock")}
          </span>
        </div>
      </div>
    </Link>
  );
}
