"use client"; import DynamicButton from "@/components/button"; import { useEffect, useState } from "react"; import { useLocale, useTranslations } from "next-intl"; import Link from "next/link"; import { AuctionStatus, AuctionType as SocketAuctionType, } from "@/lib/socket/types"; import { getMinIncrement } from "@/lib/auction/biddingRules"; import ShareModal from "@/components/ShareModal"; import { useToggleFavorite } from "@/lib/clientQueries"; import { useSession } from "@/auth/session-provider"; import { useSetAtom } from "jotai"; import { loginModalAtom } from "@/components/state/loginAtom"; import { useAppToast } from "@/app/[lang]/providers"; import { Heart } from "lucide-react"; import axios from "axios"; import AuctionUnifiedTimer from "@/components/count/AuctionUnifiedTimer"; import AuctionResultCard from "./AuctionResultCard"; import { getAuctionOfferDeadline, getAuctionWinnerName, resolveAuctionResultKind, } from "./auctionResultUtils"; import type { AuctionItem } from "../types"; import { getAuctionStatusLabel } from "../AuctionClient"; import { badgeClass } from "./AuctionMeta"; import { formatPaddleDisplay } from "@/lib/utils"; import { API_BASE_URL } from "@/lib/axios"; const SAR_ICON = "/Riyal.svg"; const API_URL = API_BASE_URL; export default function SidebarSection({ item, onBidClick, postBidInfoOpen, hideBidButton, deadlineText, canBuyPaddle, paddlePrice, onBuyPaddleClick, buyingPaddle, isOwner, isDashboard, onOwnerWithdraw, onOwnerEnterMarket, showOwnerEnterMarket, liveBidders, currentBidOverride, auctionType, auctionStatus, highestBidder, endTimeMs, closeAtMs, reserveTriggered, closeReason, canSendOffer, onSendOfferClick, hidePricePanel, hidePaddlePurchaseCard, /** When set (e.g. group room id), "previous offers" dashboard link uses this instead of `item.id`. */ purchaseOffersAuctionId, /** Annual single + group room: show next to «تقديم عرض» when user has a paddle. */ paddleNumberBesideOffer, }: { item: AuctionItem; onBidClick: () => void; postBidInfoOpen?: boolean; hideBidButton?: boolean; /** Hides the starting/final price highlight box (e.g. annual single item page). */ hidePricePanel?: boolean; /** Hides the standalone paddle fee card (annual single uses modal + group strip instead). */ hidePaddlePurchaseCard?: boolean; deadlineText?: string; canBuyPaddle?: boolean; paddlePrice?: string | number; onBuyPaddleClick?: () => void; buyingPaddle?: boolean; isOwner?: boolean; isDashboard?: boolean; onOwnerWithdraw?: () => void; onOwnerEnterMarket?: () => void; showOwnerEnterMarket?: boolean; liveBidders?: { name: string; paddle: string | number; amount: number }[]; currentBidOverride?: number; auctionType?: SocketAuctionType; auctionStatus?: AuctionStatus; highestBidder?: { id: string; name: string; paddleNumber?: string | number | null; } | null; endTimeMs?: number | null; closeAtMs?: number | null; reserveTriggered?: boolean; closeReason?: string | null; canSendOffer?: boolean; onSendOfferClick?: () => void; purchaseOffersAuctionId?: string | null; paddleNumberBesideOffer?: string | null; }) { const t = useTranslations("SINGLE_AUCTION.SIDEBAR"); const tAuction = useTranslations("AUCTION"); const session = useSession(); const setLoginModal = useSetAtom(loginModalAtom); const toast = useAppToast(); const toggleFavoriteMutation = useToggleFavorite(); const [shareOpen, setShareOpen] = useState(false); const shareUrl = typeof window !== "undefined" ? window.location.href : `/auctions/${encodeURIComponent(String(item?.id ?? ""))}`; const fmt = (n: number) => { if (isNaN(n)) return "—"; return n.toLocaleString("en-EG"); }; const commissionPctRawFromItem = item?.fees_setting?.buyer_commission_percentage ?? item?.buyer_commission_percentage ?? item?.buyer_commission ?? item?.commission_percentage ?? item?.commissionPercentage ?? null; const [commissionPctFromConfig, setCommissionPctFromConfig] = useState< number | null >(null); useEffect(() => { if (commissionPctRawFromItem != null) return; const animalType: "horse" | "camel" | null = item?.horse ? "horse" : item?.camel ? "camel" : item?.animal_type === "horse" ? "horse" : item?.animal_type === "camel" ? "camel" : null; if (!animalType) return; if (!API_URL) return; let cancelled = false; axios .get(`${API_URL}/user/config/reference-data`, { params: { animal_type: animalType, fees_setting: 1, }, headers: { Accept: "application/json", }, }) .then((res) => { if (cancelled) return; const pct = Number( res?.data?.data?.fees_setting?.buyer_commission_percentage ?? NaN, ); if (Number.isFinite(pct)) setCommissionPctFromConfig(pct); }) .catch(() => { // ignore }); return () => { cancelled = true; }; }, [commissionPctRawFromItem, item]); const commissionPctNum = Number( commissionPctRawFromItem ?? commissionPctFromConfig ?? 5, ); const commissionPct = Number.isFinite(commissionPctNum) ? commissionPctNum : 5; const effectiveStatus: AuctionStatus = auctionStatus || (item?.auction_state as AuctionStatus) || "upcoming"; const owner = item?.created_by?.stable_name || item?.created_by?.name || ""; const shouldHideOwnerInfo = !owner; const isGroupAuction = Boolean(item?.is_group); const ownerCountry = item?.created_by?.country as string | undefined; const ownerState = item?.created_by?.state as string | undefined; const shouldShowOwnerLocation = !isGroupAuction && !shouldHideOwnerInfo && Boolean(ownerCountry || ownerState); const openingPrice = Number(item?.starting_price || 0); const marketEntryPrice = Number(item?.market_entry_price || 0); // Auction dates - API uses auction_start_time / auction_end_time const auctionStartDate = item?.auction_start_time || item?.auction_start_datetime || item?.auction_start_date || item?.start_date || item?.started_at || null; const auctionEndDate = item?.auction_end_time || item?.auction_end_datetime || item?.auction_end_date || item?.end_date || item?.ended_at || null; const locale = useLocale(); const isArUi = locale === "ar"; // Helper: parse various date string formats into timestamp (ms) const parseDateToMs = (dateStr: string | null): number | null => { if (!dateStr) return null; try { let normalized = String(dateStr).trim(); const m = normalized.match( /^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})(?::(\d{2}))?$/, ); if (m) { normalized = `${m[1]}T${m[2]}:${m[3] ?? "00"}`; } const d = new Date(normalized); const ms = d.getTime(); if (isNaN(ms)) return null; return ms; } catch { return null; } }; const startMs = parseDateToMs(auctionStartDate); const endMs = parseDateToMs(auctionEndDate); // نوع المزاد لتطبيق منطق 24 ساعة للمزادات المباشرة عند غياب وقت النهاية const rawAuctionType = String( auctionType || item?.auction_type || "", ).toLowerCase(); const isLiveAuction = rawAuctionType.includes("live"); const timerMeta = (() => { const now = Date.now(); if ( effectiveStatus === "ended" || effectiveStatus === "withdrawn" || effectiveStatus === "closed" ) { return { target: null as number | null, label: null as string | null }; } if (reserveTriggered && closeAtMs && closeAtMs > now) { return { target: closeAtMs, label: tAuction("live_timer_label"), }; } if (effectiveStatus === "upcoming" && startMs && startMs > now) { return { target: startMs, label: isArUi ? "العد التنازلي لبدء المزاد" : "Auction starts in", }; } const effectiveEndMs = endTimeMs ?? endMs ?? (isLiveAuction && startMs ? startMs + 24 * 60 * 60 * 1000 : null); if ( effectiveStatus === "active" && effectiveEndMs && effectiveEndMs > now ) { return { target: effectiveEndMs, label: isLiveAuction ? tAuction("live_timer_label") : tAuction("electronic_timer_label"), }; } if (endMs && endMs > now) { return { target: endMs, label: tAuction("electronic_timer_label"), }; } return { target: null as number | null, label: null as string | null }; })(); const formatDate = (dateStr: string | null) => { if (!dateStr) return "—"; try { // Normalize "YYYY-MM-DD HH:mm" or "YYYY-MM-DD HH:mm:ss" to ISO format let normalized = String(dateStr).trim(); const m = normalized.match( /^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})(?::(\d{2}))?$/, ); if (m) { normalized = `${m[1]}T${m[2]}:${m[3] ?? "00"}`; } const d = new Date(normalized); if (isNaN(d.getTime())) return dateStr; return d.toLocaleDateString(isArUi ? "ar-SA-u-nu-latn" : "en-SA", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }); } catch { return dateStr; } }; const formatDateParts = (dateStr: string | null) => { if (!dateStr) return { date: "—", time: "" }; try { let normalized = String(dateStr).trim(); const m = normalized.match( /^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})(?::(\d{2}))?$/, ); if (m) { normalized = `${m[1]}T${m[2]}:${m[3] ?? "00"}`; } const d = new Date(normalized); if (isNaN(d.getTime())) return { date: String(dateStr), time: "" }; const localeTag = isArUi ? "ar-SA-u-nu-latn" : "en-SA"; const date = new Intl.DateTimeFormat(localeTag, { year: "numeric", month: "short", day: "numeric", }).format(d); const time = new Intl.DateTimeFormat(localeTag, { hour: "2-digit", minute: "2-digit", }).format(d); return { date, time }; } catch { return { date: String(dateStr), time: "" }; } }; const rawBid = typeof currentBidOverride === "number" ? currentBidOverride : Number( item?.current_bid ?? item?.current_price ?? item?.highest_bid ?? 0, ); // If no bids yet (rawBid is 0), show starting_price (openingPrice) instead const currentBid = rawBid > 0 ? rawBid : openingPrice; const minIncrement = getMinIncrement(currentBid, marketEntryPrice); const submittedOfferAmount = (() => { const info = (item as any)?.info_final_bid as | { final_bid_amount?: unknown; lowest_offer_value?: unknown } | undefined; const finalBid = Number( info?.final_bid_amount ?? item?.final_bid_amount ?? 0, ); const lowestOffer = Number(info?.lowest_offer_value ?? 0); const paddlePrice = Number((item as any)?.paddle_price ?? 0); // Prefer non-zero final bid, then lowest offer, then paddle price. if (Number.isFinite(finalBid) && finalBid > 0) return finalBid; if (Number.isFinite(lowestOffer) && lowestOffer > 0) return lowestOffer; if (Number.isFinite(paddlePrice) && paddlePrice > 0) return paddlePrice; return 0; })(); const displayPaddleNumber = formatPaddleDisplay(item?.paddle_number); const resolvedWinnerName = highestBidder?.name || getAuctionWinnerName(item, highestBidder); const resolvedWinnerPaddle = highestBidder?.paddleNumber ?? item?.winner_paddle_number ?? item?.highest_bidder_paddle_number ?? null; const liveLeadingPaddleRaw = liveBidders?.[0]?.paddle; const liveLeadingPaddle = liveLeadingPaddleRaw != null && liveLeadingPaddleRaw !== "" && liveLeadingPaddleRaw !== 0 ? liveLeadingPaddleRaw : null; const highestPaddleRaw = highestBidder?.paddleNumber; const highestPaddleOk = highestPaddleRaw != null && String(highestPaddleRaw).trim() !== "" && highestPaddleRaw !== 0; /** Socket `bid:created` keeps highestBidder in sync; list head is fallback if paddle missing on party. */ const participatingPaddleDisplay = highestPaddleOk ? highestPaddleRaw : liveLeadingPaddle; const groupRoomFinalBidRaw = ( item as { info_final_bid?: { final_bid_amount?: unknown } } )?.info_final_bid?.final_bid_amount; const groupRoomFinalBidNum = Number(groupRoomFinalBidRaw); const useGroupRoomFinalBid = Boolean(purchaseOffersAuctionId) && effectiveStatus !== "upcoming" && effectiveStatus !== "active" && groupRoomFinalBidRaw != null && String(groupRoomFinalBidRaw).trim() !== "" && Number.isFinite(groupRoomFinalBidNum); const resultItem: AuctionItem = { ...item, auction_state: effectiveStatus, status: resolvedWinnerName && effectiveStatus !== "active" && effectiveStatus !== "upcoming" ? "sold" : item?.status, winner_name: resolvedWinnerName ?? item?.winner_name, highest_bidder_name: resolvedWinnerName ?? item?.highest_bidder_name, winner_paddle_number: resolvedWinnerPaddle ?? item?.winner_paddle_number, highest_bidder_paddle_number: resolvedWinnerPaddle ?? item?.highest_bidder_paddle_number, final_bid_amount: useGroupRoomFinalBid ? groupRoomFinalBidNum : effectiveStatus !== "upcoming" && currentBid > 0 ? currentBid : item?.final_bid_amount, final_price: effectiveStatus !== "upcoming" && currentBid > 0 ? currentBid : item?.final_price, }; const resultBuyerName = getAuctionWinnerName(resultItem, highestBidder); const resultKind = resolveAuctionResultKind({ item: resultItem, auctionStatus: effectiveStatus, closeReason, buyerName: resultBuyerName, }); const shouldShowAuctionResult = effectiveStatus !== "active" && effectiveStatus !== "upcoming"; /** Annual / group-room sidebar passes `purchaseOffersAuctionId`; show نتيجة المزاد instead of blocking on `is_group`. */ const allowAuctionResultCard = !isGroupAuction || Boolean(purchaseOffersAuctionId); const showResultCard = allowAuctionResultCard && shouldShowAuctionResult && (resultKind !== null || Boolean(resultItem?.can_send_offer) || Boolean(resultItem?.can_buy_paddle) || Boolean(canSendOffer) || Boolean(canBuyPaddle)); const hideLiveBiddersForSoldResult = showResultCard && resultKind === "sold"; const offerDeadline = getAuctionOfferDeadline(item); const previousOffersHref = `/${locale}/dashboard?tab=purchase-offers-buyer&auction_id=${encodeURIComponent( String(purchaseOffersAuctionId ?? item?.id ?? ""), )}&animal_type=${encodeURIComponent(String(item?.animal_type ?? ""))}`; const showPreviousOffersLink = resultKind === "unsold" && !canSendOffer && !isOwner && !canBuyPaddle && Boolean(session); const offerSubmissionBlocked = Boolean( effectiveStatus === "active" || effectiveStatus === "upcoming", ); const paddlePriceNumber = Number(paddlePrice ?? (item as any)?.paddle_price ?? 0); const buyPaddleCtaLabel = Number.isFinite(paddlePriceNumber) && paddlePriceNumber > 0 ? t("buy_paddle_with_price", { value: fmt(paddlePriceNumber), currency: t("currency_label"), }) : t("buy_paddle"); const primaryActionLabel = canBuyPaddle ? t("bid_now") : effectiveStatus === "active" ? t("bid_now") : isArUi ? "تقديم عرض" : "Send offer"; const showPaddlePurchaseCard = !hidePaddlePurchaseCard && !displayPaddleNumber && Boolean(canBuyPaddle && onBuyPaddleClick && !isOwner); const utilityCardHasTopSpacing = Boolean( (isDashboard && isOwner) || postBidInfoOpen, ); const [isFavorite, setIsFavorite] = useState(() => { const v = item?.is_favorite ?? item?.isFavorite; return Boolean(v); }); const [favAnimating, setFavAnimating] = useState(false); const toggleFavorite = async () => { const token = session?.access_token; if (!token) { toast.warning(tAuction("not_active")); setLoginModal(true); return; } const next = !isFavorite; setIsFavorite(next); setFavAnimating(true); setTimeout(() => setFavAnimating(false), 400); if (next) { toast.success(tAuction("favorite_added")); } else { toast.info(tAuction("favorite_removed")); } try { await toggleFavoriteMutation.mutateAsync({ id: String(item?.id ?? ""), type: "auction", }); } catch { setIsFavorite(!next); } }; const utilityCard = ( <> {isDashboard && isOwner && (
{t("owner_actions_title")}
{!!showOwnerEnterMarket && ( )} {item?.auction_state !== "unsold" && item.status !== "withdrawn" && ( )}
)} {postBidInfoOpen && (
{t("bid_recorded_title")}
{t.rich("bid_recorded_text", { time: () => ( {deadlineText} ), })}
)}
); return ( ); }