"use client";

import { useLocale, useTranslations } from "next-intl";
import Money from "@/components/ui/Money";
import { getAuctionStatusLabel } from "../AuctionClient";
export const badgeClass = (status: string | undefined) => {
  if (status === "accepted") return "bg-emerald-100 text-emerald-700";
  if (status === "pending") return "bg-amber-100 text-amber-700";
  if (status === "rejected") return "bg-red-100 text-red-700";

  if (status === "upcoming") return "bg-amber-100 text-amber-700";
  if (status === "live") return "bg-emerald-100 text-emerald-700";
  if (status === "closed") return "bg-slate-100 text-slate-700";
  return "bg-slate-100 text-slate-700";
};
export default function AuctionMetaSection({ item }: { item: any }) {
  const t = useTranslations("SINGLE_AUCTION.META");
  const status = item?.status || "—";
  const auctionState = item?.auction_state || "—";
  const uniqueId = item?.unique_id || "—";
  const country = item?.country || "—";
  const state = item?.state || "—";
  const startingPrice = item?.starting_price
    ? Number(item.starting_price)
    : null;
  const marketEntryPrice = item?.market_entry_price
    ? Number(item.market_entry_price)
    : null;
  const canEditStatus = !!item?.can_edit_status;
  const canEditDetails = !!item?.can_edit_details;

  const fmt = (value: number | null) => {
    if (value === null || Number.isNaN(value)) return "—";
    return value.toLocaleString("ar-EG");
  };

  const locale = useLocale();
  return (
    <section className="bg-white rounded-2xl p-5 shadow space-y-4">
      <div className="flex flex-wrap items-center gap-3 justify-between">
        <div>
          <div className="text-xs text-slate-500">{t("auction_number")}</div>
          <div className="font-extrabold text-lg text-[#0F5132]">
            {uniqueId}
          </div>
        </div>

        <div className="flex flex-wrap gap-2 text-xs">
          <span
            className={`px-3 py-1 rounded-full font-semibold ${badgeClass(
              auctionState,
            )}`}
          >
            {getAuctionStatusLabel(auctionState, locale)}
          </span>
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-4 text-sm text-slate-700">
        <div className="p-3 rounded-xl bg-slate-50">
          <div className="text-slate-500 mb-1">{t("location_label")}</div>
          <div className="font-bold">
            {country} • {state}
          </div>
        </div>

        <div className="grid sm:grid-cols-1 gap-3">
          <div className="p-3 rounded-xl bg-slate-50">
            <div className="text-slate-500 mb-1">
              {t("starting_price_label")}
            </div>
            <div className="font-extrabold text-[#0F5132]">
              {startingPrice == null ? "—" : <Money value={startingPrice} />}
            </div>
          </div>
         
        </div>
      </div>

      <div className="grid sm:grid-cols-2 gap-3 text-xs text-slate-700">
        <div className="p-3 rounded-xl border bg-slate-50/60">
          <div className="font-semibold mb-1">{t("status_permissions")}</div>
          <div>
            {canEditStatus ? t("can_edit_status") : t("cannot_edit_status")}
          </div>
        </div>
        <div className="p-3 rounded-xl border bg-slate-50/60">
          <div className="font-semibold mb-1">{t("details_permissions")}</div>
          <div>
            {canEditDetails ? t("can_edit_details") : t("cannot_edit_details")}
          </div>
        </div>
      </div>
    </section>
  );
}