"use client";

import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { CheckCircle2, CircleOff, CreditCard, Flag, Send } from "lucide-react";

const SAR_ICON = "/Riyal.svg";

import {
  firstNonEmptyText,
  firstPositiveNumber,
  formatAuctionResultDate,
  getAuctionWinnerName,
  getAuctionWinnerPaddle,
  normalizeAuctionResultValue,
  resolveAuctionResultKind,
} from "./auctionResultUtils";
import type { AuctionItem } from "../types";

type ResultRow = {
  label: string;
  value: string;
};

export default function AuctionResultCard({
  item,
  auctionStatus,
  closeReason,
  canBuyPaddle: canBuyPaddleFromParent,
  paddlePrice,
  buyingPaddle,
  onBuyPaddleClick,
  canSendOffer: canSendOfferFromParent,
  onSendOfferClick,
  isLoggedIn,
  onLoginClick,
  offerDeadline,
  showPreviousOffersLink,
  previousOffersHref,
  paddleNumberBesideOffer,
}: {
  item: AuctionItem;
  auctionStatus?: string | null;
  currentPrice?: number | null;
  highestBidder?: { id: string; name: string } | null;
  closeReason?: string | null;
  canBuyPaddle?: boolean;
  paddlePrice?: string | number;
  buyingPaddle?: boolean;
  onBuyPaddleClick?: () => void;
  canSendOffer?: boolean;
  onSendOfferClick?: () => void;
  isLoggedIn?: boolean;
  onLoginClick?: () => void;
  offerDeadline?: string | null;
  showPreviousOffersLink?: boolean;
  previousOffersHref?: string | null;
  paddleNumberBesideOffer?: string | null;
}) {
  const t = useTranslations("SINGLE_AUCTION.SIDEBAR");
  const paddleHintBesideOffer = (
    paddleNumberBesideOffer != null ? String(paddleNumberBesideOffer).trim() : ""
  );

  const fmt = (n: number) => {
    if (Number.isNaN(n)) return "—";
    return n.toLocaleString("en-EG");
  };
  const lang = useLocale();
  const isAr = lang === "ar";
  const canBuyPaddle =
    canBuyPaddleFromParent !== undefined
      ? Boolean(canBuyPaddleFromParent)
      : Boolean(item.can_buy_paddle);
  const canSendOffer =
    canSendOfferFromParent !== undefined
      ? Boolean(canSendOfferFromParent)
      : Boolean(item?.can_send_offer);
  const paddlePriceNumber = Number(paddlePrice ?? (item as any)?.paddle_price ?? 0);
  const buyPaddleLabel =
    Number.isFinite(paddlePriceNumber) && paddlePriceNumber > 0
      ? t("buy_paddle_with_price", {
        value: fmt(paddlePriceNumber),
        currency: t("currency_label"),
      })
      : t("buy_paddle");

  const sellerName = firstNonEmptyText(
    item?.owner_name,
    item?.owner?.name,
    item?.created_by?.stable_name,
    item?.created_by?.name,
  );

  const buyerName = getAuctionWinnerName(item);
  const winnerPaddle = getAuctionWinnerPaddle(item);
  const normalizedStatus = normalizeAuctionResultValue(item?.status);
  const resultKind = resolveAuctionResultKind({
    item,
    auctionStatus,
    closeReason,
    buyerName,
  });
  const offerAlreadySent =
    resultKind === "unsold" &&
    Boolean(item?.paddle_number) &&
    !canBuyPaddle &&
    !canSendOffer;

  const showOfferActions =
    !isLoggedIn ||
    Boolean(
      (canBuyPaddle && onBuyPaddleClick) ||
      (canSendOffer && onSendOfferClick),
    );

  if (!resultKind) {
    if (!showOfferActions) return null;
    return (
      <section className="bg-white rounded-[28px] p-5 sm:p-6 border border-[#0F5132]/10 shadow-[0_20px_40px_rgba(15,81,50,0.10)]">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <h3 className="text-xl font-extrabold text-slate-900">
            {t("result_title")}
          </h3>
        </div>

        <div className="my-5 h-px bg-slate-200" />

        <div className="flex flex-wrap items-center justify-center gap-2">
          {!isLoggedIn ? (
            <div className="inline-flex items-center gap-2 flex-wrap justify-center">
              <button
                type="button"
                onClick={onLoginClick ?? onSendOfferClick}
                className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap border-2 border-[#0F5132] bg-white text-[#0F5132] hover:bg-emerald-50 transition-colors cursor-pointer shadow-sm"
              >
                <Send className="h-4 w-4 shrink-0" />
                {isAr ? "تقديم عرض" : "Send offer"}
              </button>
              {paddleHintBesideOffer ? (
                <span className="text-xs sm:text-sm font-bold text-slate-600 whitespace-nowrap">
                  {isAr
                    ? `رقم مضربك هو : ${paddleHintBesideOffer}`
                    : `Your paddle number: ${paddleHintBesideOffer}`}
                </span>
              ) : null}
            </div>
          ) : null}

          {isLoggedIn && canBuyPaddle && onBuyPaddleClick ? (
            <button
              type="button"
              onClick={onBuyPaddleClick}
              disabled={buyingPaddle}
              className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer shadow-sm disabled:cursor-not-allowed disabled:opacity-60"
            >
              <CreditCard className="h-4 w-4 shrink-0" />
              {buyingPaddle
                ? isAr
                  ? "جاري الشراء..."
                  : "Buying..."
                : buyPaddleLabel}
            </button>
          ) : null}

          {isLoggedIn && !canBuyPaddle && canSendOffer && onSendOfferClick ? (
            <div className="inline-flex items-center gap-2 flex-wrap justify-center">
              <button
                type="button"
                onClick={onSendOfferClick}
                className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap border-2 border-[#0F5132] bg-white text-[#0F5132] hover:bg-emerald-50 transition-colors cursor-pointer shadow-sm"
              >
                <Send className="h-4 w-4 shrink-0" />
                {isAr ? "تقديم عرض" : "Send offer"}
              </button>
              {paddleHintBesideOffer ? (
                <span className="text-xs sm:text-sm font-bold text-slate-600 whitespace-nowrap">
                  {isAr
                    ? `رقم مضربك هو : ${paddleHintBesideOffer}`
                    : `Your paddle number: ${paddleHintBesideOffer}`}
                </span>
              ) : null}
            </div>
          ) : null}
        </div>
      </section>
    );
  }
  const soldDateValue = formatAuctionResultDate(
    item?.purchase_date ??
    item?.sold_at ??
    item?.last_bid?.purchasing_date ??
    item?.closed_at ??
    item?.updated_at ??
    item?.auction_end_time ??
    item?.auction_end_datetime ??
    item?.auction_end_date,
  );

  const withdrawnDateValue = formatAuctionResultDate(
    item?.withdrawn_at ??
    item?.closed_at ??
    item?.updated_at ??
    item?.auction_end_time ??
    item?.auction_end_datetime ??
    item?.auction_end_date,
  );

  const unsoldAuctionDateValue = formatAuctionResultDate(
    item?.auction_end_time ??
    item?.auction_end_datetime ??
    item?.auction_end_date ??
    item?.closed_at ??
    item?.updated_at,
  );

  const formattedOfferDeadline = formatAuctionResultDate(offerDeadline);

  const rows: ResultRow[] =
    resultKind === "sold"
      ? [
        sellerName ? { label: t("seller_name"), value: sellerName } : null,
        buyerName ? { label: t("buyer_name"), value: buyerName } : null,
        winnerPaddle
          ? { label: t("paddle_number"), value: winnerPaddle }
          : null,
        soldDateValue
          ? { label: t("purchase_date"), value: soldDateValue }
          : null,
      ].filter((row): row is ResultRow => row !== null)
      : resultKind === "withdrawn"
        ? [
          sellerName ? { label: t("seller_name"), value: sellerName } : null,
          withdrawnDateValue
            ? { label: t("withdraw_date"), value: withdrawnDateValue }
            : null,
        ].filter((row): row is ResultRow => row !== null)
        : [
          sellerName ? { label: t("seller_name"), value: sellerName } : null,
          unsoldAuctionDateValue
            ? { label: t("purchase_date"), value: unsoldAuctionDateValue }
            : null,
        ].filter((row): row is ResultRow => row !== null);

  const statusMeta =
    resultKind === "sold"
      ? {
        label:
          normalizedStatus === "sold" || normalizedStatus === "completed"
            ? t("status_sold_short")
            : t("status_sold"),
        banner: t("congrats_buyer"),
        note: t("closed_success_message"),
        priceLabel: t("final_price"),
        badgeClass:
          "border-emerald-200 bg-emerald-50 text-emerald-700 shadow-emerald-100/60",
        bannerClass: "bg-[#1B7A50] text-white",
        priceClass: "text-[#14a44d]",
        Icon: CheckCircle2,
      }
      : resultKind === "withdrawn"
        ? {
          label: t("status_withdrawn_short"),
          banner: t("withdrawn_message"),
          note: t("withdrawn_note"),
          priceLabel: t("last_price_reached"),
          badgeClass:
            "border-sky-200 bg-sky-50 text-sky-700 shadow-sky-100/60",
          bannerClass: "bg-sky-700 text-white",
          priceClass: "text-slate-700",
          Icon: Flag,
        }
        : {
          label: t("status_unsold_short"),
          banner: t("unsold_message"),
          note: t("closed_last_price_message"),
          priceLabel: t("last_price_reached"),
          badgeClass:
            "border-amber-200 bg-amber-50 text-amber-700 shadow-amber-100/60",
          bannerClass: "bg-amber-500 text-white",
          priceClass: "text-slate-700",
          Icon: CircleOff,
        };

  const soldFinalAmount = item?.winning_bid?.amount || "_";

  const hasPrimaryUnsoldAction =
    resultKind === "unsold" &&
    (!isLoggedIn ||
      (canBuyPaddle && Boolean(onBuyPaddleClick)) ||
      (canSendOffer && Boolean(onSendOfferClick)) ||
      Boolean(showPreviousOffersLink && previousOffersHref) ||
      Boolean(formattedOfferDeadline));

  const canShowSoldWithoutRows =
    resultKind === "sold" && soldFinalAmount != null;

  if (
    !rows.length &&
    !hasPrimaryUnsoldAction &&
    !canShowSoldWithoutRows
  ) {
    return null;
  }
  const isLive = auctionStatus === "active";
  return (
    <section className="bg-white rounded-[28px] p-5 sm:p-6 border border-[#0F5132]/10 shadow-[0_20px_40px_rgba(15,81,50,0.10)]">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <h3 className="text-xl font-extrabold text-slate-900">
          {t("result_title")}
        </h3>

        {isLive ? (
          <span className="inline-flex text-xs items-center gap-1.5 rounded-full bg-red-500 px-4 py-2 text-sm font-extrabold text-white shadow-sm">
            <span className="h-1.5 w-1.5 text-xs rounded-full bg-white animate-pulse" />
            {isAr ? "مباشر" : "Live"}
          </span>
        ) : offerAlreadySent ? (
          <span className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-extrabold border border-blue-200 bg-blue-100 text-blue-700 shadow-sm">
            <Send className="h-4 w-4" />
            {isAr ? "تم تقديم عرض" : "Offer sent"}
          </span>
        ) : (
          <span
            className={`inline-flex items-center gap-2 text-xs rounded-full px-4 py-2 text-sm font-extrabold border shadow-sm ${statusMeta.badgeClass}`}
          >
            {statusMeta.Icon ? (
              <statusMeta.Icon className="h-4 w-4 shrink-0" aria-hidden />
            ) : null}
            {statusMeta.label}
          </span>
        )}
      </div>

      <div className="my-5 h-px bg-slate-200" />
      {item.is_owner && (
        <div className="text-sm font-medium text-slate-600">
          {isAr ? "أنت صاحب هذا المزاد" : "You are the owner of this auction"}
        </div>
      )}
      {resultKind === "unsold" &&
        (!isLoggedIn ||
          (canBuyPaddle && onBuyPaddleClick) ||
          (canSendOffer && onSendOfferClick) ||
          (showPreviousOffersLink && previousOffersHref)) ? (
        <div className="flex flex-wrap items-center justify-center gap-2">
          {!isLoggedIn ? (
            <div className="inline-flex items-center gap-2 flex-wrap justify-center">
              <button
                type="button"
                onClick={onLoginClick ?? onSendOfferClick}
                className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap border-2 border-[#0F5132] bg-white text-[#0F5132] hover:bg-emerald-50 transition-colors cursor-pointer shadow-sm"
              >
                <Send className="h-4 w-4 shrink-0" />
                {isAr ? "تقديم عرض" : "Send offer"}
              </button>
              {paddleHintBesideOffer ? (
                <span className="text-xs sm:text-sm font-bold text-slate-600 whitespace-nowrap">
                  {isAr
                    ? `رقم مضربك هو : ${paddleHintBesideOffer}`
                    : `Your paddle number: ${paddleHintBesideOffer}`}
                </span>
              ) : null}
            </div>
          ) : null}

          {isLoggedIn && canBuyPaddle && onBuyPaddleClick ? (
            <button
              type="button"
              onClick={onBuyPaddleClick}
              disabled={buyingPaddle}
              className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap bg-blue-600 text-white hover:bg-blue-700 transition-colors cursor-pointer shadow-sm disabled:cursor-not-allowed disabled:opacity-60"
            >
              <CreditCard className="h-4 w-4 shrink-0" />
              {buyingPaddle
                ? isAr
                  ? "جاري الشراء..."
                  : "Buying..."
                : buyPaddleLabel}
            </button>
          ) : null}

          {isLoggedIn && !canBuyPaddle && canSendOffer && onSendOfferClick ? (
            <div className="inline-flex items-center gap-2 flex-wrap justify-center">
              <button
                type="button"
                onClick={onSendOfferClick}
                className="inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full text-xs sm:text-sm font-extrabold whitespace-nowrap border-2 border-[#0F5132] bg-white text-[#0F5132] hover:bg-emerald-50 transition-colors cursor-pointer shadow-sm"
              >
                <Send className="h-4 w-4 shrink-0" />
                {isAr ? "تقديم عرض" : "Send offer"}
              </button>
              {paddleHintBesideOffer ? (
                <span className="text-xs sm:text-sm font-bold text-slate-600 whitespace-nowrap">
                  {isAr
                    ? `رقم مضربك هو : ${paddleHintBesideOffer}`
                    : `Your paddle number: ${paddleHintBesideOffer}`}
                </span>
              ) : null}
            </div>
          ) : null}

          {isLoggedIn &&
            resultKind === "unsold" &&
            item.paddle_number &&
            !canBuyPaddle &&
            !canSendOffer ? (
            <div className="w-full rounded-2xl border border-blue-200 bg-blue-100 px-4 py-3 text-center text-sm font-bold text-blue-700">
              {isAr
                ? `تم تقديم عرض بمضرب: ${item.paddle_number}`
                : `Offer sent with paddle: ${item.paddle_number}`}
            </div>
          ) : null}

          {showPreviousOffersLink &&
            previousOffersHref &&
            !canSendOffer &&
            !canBuyPaddle &&
            item.paddle_number ? (
            <Link
              href={previousOffersHref}
              className="inline-flex w-full min-w-[200px] flex-1 basis-full items-center justify-center gap-2 rounded-full bg-slate-800 px-4 py-2.5 text-center text-sm font-extrabold text-white shadow-sm transition hover:bg-slate-900 sm:basis-auto sm:flex-initial"
            >
              <Send className="h-4 w-4 shrink-0" />
              {t("view_previous_offers")}
            </Link>
          ) : null}
        </div>
      ) : resultKind === "unsold" && canSendOffer && onSendOfferClick ? (
        <div className="inline-flex w-full flex-wrap items-center justify-center gap-2">
          <button
            type="button"
            onClick={onSendOfferClick}
            className="inline-flex w-full sm:w-auto items-center justify-center gap-1.5 rounded-full border-2 border-[#0F5132] bg-white px-4 py-2.5 text-sm font-extrabold text-[#0F5132] shadow-sm transition hover:bg-emerald-50"
          >
            {isAr ? "تقديم عرض" : "Send offer"}
          </button>
          {paddleHintBesideOffer ? (
            <span className="text-xs sm:text-sm font-bold text-slate-600 whitespace-nowrap text-center w-full sm:w-auto">
              {isAr
                ? `رقم مضربك هو : ${paddleHintBesideOffer}`
                : `Your paddle number: ${paddleHintBesideOffer}`}
            </span>
          ) : null}
        </div>
      ) : offerAlreadySent ? (
        <div className="rounded-2xl border border-blue-200 bg-blue-100 px-4 py-3 text-center text-sm font-bold text-blue-700">
          {isAr
            ? `تم تقديم عرض بمضرب: ${item.paddle_number}`
            : `Offer sent with paddle: ${item.paddle_number}`}
        </div>
      ) : (
        <div
          className={`rounded-2xl px-4 py-3 text-center text-md font-extrabold shadow-sm ${statusMeta.bannerClass}`}
        >
          {statusMeta.banner}
        </div>
      )}

      {resultKind === "unsold" && formattedOfferDeadline ? (
        <div className="mt-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-center text-sm font-semibold text-amber-900">
          {t("offer_deadline_label")} {formattedOfferDeadline}
        </div>
      ) : null}

      {rows.length > 0 ? (
        <div className="mt-4 space-y-3">
          {rows.map((row) => (
            <div
              key={row.label}
              className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-[#f7f7f7] px-4 py-2"
            >
              <div className="text-sm font-bold text-slate-500">
                {row.label}
              </div>
              <div className="text-base sm:text-lg font-extrabold text-slate-900 text-start">
                {row.value}
              </div>
            </div>
          ))}
        </div>
      ) : null}

      <div className="mt-4 rounded-[24px] border border-slate-200 bg-[#f5f5f5] px-4 py-6 text-center">
        <div className="text-sm font-bold text-slate-500">
          {resultKind === "sold"
            ? statusMeta.priceLabel
            : item.auction_state === "upcoming"
              ? isAr
                ? "السعر بدأ المزاد"
                : "Starting price"
              : item.auction_state === "ended"
                ? isAr
                  ? " أخر سعر  مزاد"
                  : "Highest price"
                : isAr
                  ? " أخر سعر  مزاد"
                  : "Price"}
        </div>

        <div
          className={`mt-3 flex items-end justify-center gap-2 ${statusMeta.priceClass}`}
        >
          <span className="text-3xl text-primary sm:text-4xl font-black tracking-tight">
            {fmt(
              Number(
                resultKind === "sold" && soldFinalAmount != null
                  ? soldFinalAmount
                  : item.auction_state === "upcoming"
                    ? (item.starting_price ?? 0)
                    : (item.final_bid_amount ?? 0),
              ),
            )}
          </span>
          <img src={SAR_ICON} className="w-5 h-5" alt={isAr ? "ريال" : "SAR"} />
        </div>
        {statusMeta.note ? (
          <p className="mt-3 text-xs text-slate-500 leading-relaxed text-center px-1">
            {statusMeta.note}
          </p>
        ) : null}
      </div>
    </section>
  );
}