"use client";

import { IMAGE_BASE_URL, staticIconUrl } from "@/components/main/BaseUrl";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";

type ShopListCardProps = {
  shop: {
    _id: string;
    name: string;
    logo?: string | null;
    status: string;
    has_physical_location?: boolean;
    productCount?: number;
    activeProductCount?: number;
    soldCount?: number;
  };
};

const STATUS_TEXT_COLOR: Record<string, string> = {
  active: "text-green-600",
  pending_review: "text-amber-600",
  draft: "text-neutral-400",
  inactive: "text-red-500",
  rejected: "text-red-500",
};

export default function ShopListCard({ shop }: ShopListCardProps) {
  const { t } = useTranslation("common");
  const router = useRouter();

  return (
    <button
      type="button"
      onClick={() => router.push(`/shops/${shop._id}`)}
      className="gentle-transition flex w-full items-center gap-3 rounded-[28px] border border-neutral-200 p-3 text-right active:scale-[0.99] dark:border-neutral-700"
    >
      <span className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800">
        {shop.logo ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={IMAGE_BASE_URL + shop.logo}
            alt={shop.name}
            className="h-full w-full object-cover"
          />
        ) : (
          <Image
            src={staticIconUrl("/images/icons/vuesax/bold/shop.svg")}
            width={28}
            height={28}
            alt=""
            className="dark:invert"
          />
        )}
      </span>

      <span 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">{shop.name}</span>
          <span
            className={cn(
              "shrink-0 text-xs font-semibold",
              STATUS_TEXT_COLOR[shop.status] || STATUS_TEXT_COLOR.draft
            )}
          >
            {t(`shops.status.${shop.status}`)}
          </span>
        </div>
        <div className="flex w-full items-center justify-between">
          {typeof shop.activeProductCount === "number" && (
            <span className="text-xs text-neutral-500 dark:text-neutral-400">
              {t("shops.activeProductsLabel", { count: shop.activeProductCount })}
            </span>
          )}
          {typeof shop.soldCount === "number" && (
            <span className="text-xs text-neutral-500 dark:text-neutral-400">
              {t("shops.soldCountLabel", { count: shop.soldCount })}
            </span>
          )}
        </div>
        <div className="flex w-full items-center justify-between">
          <span className="text-xs font-semibold text-sky-500">
            {shop.has_physical_location ? t("shops.inPerson") : t("shops.onlineOnly")}
          </span>
          {typeof shop.productCount === "number" && (
            <span className="text-xs text-neutral-500 dark:text-neutral-400">
              {t("shops.itemsCount", { count: shop.productCount })}
            </span>
          )}
        </div>
      </span>
    </button>
  );
}
