import { useState, useEffect, useRef, useCallback, useMemo } from "react"; import { useQueryClient } from "@tanstack/react-query"; import { motion, AnimatePresence } from "framer-motion"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Sheet, SheetContent, SheetHeader, SheetTitle, } from "@/components/ui/sheet"; import { Timer, Gavel, Users, User, TrendingUp, Zap, ChevronUp, ChevronDown, Leaf, Scale, Info, BarChart3, Pause, Play, CheckCircle, XCircle, TrendingDown, Package, Shield, Eye, AlertTriangle, Crown, Droplets, Trophy, } from "lucide-react"; import { SizeGradePills } from "@/components/size-grades/SizeGradePills"; import { BatchMediaGallery } from "@/components/lots/BatchMediaGallery"; import { supabase } from "@/integrations/supabase/client"; import { useAuth } from "@/contexts/AuthContext"; import { useToast } from "@/hooks/use-toast"; import { fetchLotMediaMap, type LotMediaItem } from "@/lib/lot-media"; import { getLotTypeLabel } from "@/lib/lot-type-label"; import { resolveTopBidResolution } from "@/lib/auction-tie"; import { serverNow } from "@/lib/server-time"; import { toggleBatchPause, startBatchCooling } from "@/lib/batch-pause"; import { useBatchTimer } from "@/lib/use-batch-timer"; import { formatLotLabel } from "@/lib/batch-status"; import { useTimerHeartbeat } from "@/lib/use-timer-heartbeat"; import { CoolingScreen } from "@/components/auction/CoolingScreen"; import { useAdminSettings } from "@/hooks/use-admin-settings"; import { useApprovalGate } from "@/hooks/use-approval-gate"; import { buildPerSizeGradingRows, sortSizeGradesDesc, sumGradingTotals, labelWithPct } from "@/lib/size-grades"; type BatchDetailsState = { quality: { label: string; value: string }[]; grades: any[]; media: LotMediaItem[]; gl: string; moisture: string; }; const emptyBatchDetails: BatchDetailsState = { quality: [], grades: [], media: [], gl: "—", moisture: "—", }; const formatNumericValue = (value: number | string | null | undefined) => { if (value === null || value === undefined || value === "") return "—"; return Number(value).toLocaleString("en-IN", { maximumFractionDigits: 2 }); }; const formatPercentage = (value: number | string | null | undefined) => { if (value === null || value === undefined || value === "") return "—"; return `${formatNumericValue(value)}%`; }; // ─── Shared Components ─── // Resolve a banner background from the batch's stored color (solid, no gradient). // Falls back to the design-system primary color. const BATCH_COLOR_SOLIDS: Record = { green: "hsl(135 70% 28%)", avg_green: "hsl(88 55% 35%)", seconds: "hsl(40 80% 38%)", }; // Light tints for queued/catalog cards — same hue family but pastel. const BATCH_COLOR_LIGHT_TINTS: Record = { green: "hsl(135 55% 94%)", avg_green: "hsl(88 50% 94%)", seconds: "hsl(40 75% 93%)", }; const resolveBatchBackground = (batch: any) => { // Artificial colour: do NOT change colour — fall through to the natural batch_color (or default). return BATCH_COLOR_SOLIDS[batch?.batch_color] || "hsl(var(--primary))"; }; const resolveBatchLightTint = (batch: any): string | undefined => { // Artificial coloured lots stay neutral (no tint). if (batch?.is_artificial_coloured) return undefined; return BATCH_COLOR_LIGHT_TINTS[batch?.batch_color]; }; // Returns the user-facing lot type label. const resolveLotType = (batch: any) => { let label = getLotTypeLabel(batch); if (batch?.is_artificial_coloured && !batch?.is_seeds) label += " (Artificial Coloured)"; return label; }; const resolveLotTypeShort = (batch: any) => { if (batch?.is_seeds) return "Seed"; if (batch?.is_single_graded) return "Graded"; return getLotTypeLabel(batch); }; const LiveBanner = ({ batch, currentBid, seconds, bidCount, isPaused, isCooling, coolingSeconds, uniqueBidders, isOutbid, isLeading, bidFlash, gl, moisture }: any) => { const lotTypeShort = resolveLotTypeShort(batch); const statusRing = isLeading ? "ring-4 ring-emerald-400/80 shadow-[0_0_24px_rgba(16,185,129,0.55)]" : isOutbid ? "ring-4 ring-destructive/70 shadow-[0_0_24px_rgba(239,68,68,0.55)]" : ""; return (
{/* Top row: Lot # · Qty · type chip */}
{batch.lot_seq != null ? `Lot #${batch.lot_seq}` : `Lot ${batch.lot_number}`} · Qty: {Number(batch.quantity_kg).toLocaleString("en-IN")} kg {lotTypeShort} {batch?.is_artificial_coloured && ( Artificial Coloured )}
{isOutbid && ( OUTBID )} {isLeading && ( ★ LEADING )} {isCooling ? ( COOLING ) : isPaused ? ( PAUSED ) : ( LIVE )}
{/* Hero: Current Bid + Timer */}

Current Bid

{/* #2 Enlarged bid price */} ₹{currentBid.toLocaleString("en-IN")} {/* #4 Bid flash animation */} {bidFlash !== null && bidFlash !== undefined && ( +₹{bidFlash} )}

{isCooling ? "Cooling" : "Time Left"}

{isCooling ? ( 00:{String(Math.max(0, coolingSeconds)).padStart(2, "0")} ) : isPaused ? (

--:--

) : ( 00:{String(Math.max(0, seconds)).padStart(2, "0")} )}
{!isPaused && !isCooling && ( )} {/* Secondary: Bags · Base · g/L · Moisture · (Seconds % if seed) */}
{([ { label: "Bags", value: batch.number_of_bags != null ? Number(batch.number_of_bags).toLocaleString("en-IN") : "—" }, { label: "Base", value: `₹${Number(batch.base_price).toLocaleString("en-IN")}` }, { label: "LTR/WT", value: gl ?? "—" }, { label: "Moisture", value: moisture ?? "—" }, ...(batch.is_seeds ? [ { label: "Husk", value: (batch as any).husk_percent != null ? `${Number((batch as any).husk_percent)}%` : "—" }, { label: "Cardamom", value: (batch as any).cardamom_percent != null ? `${Number((batch as any).cardamom_percent)}%` : "—" }, ] : []), ] as { label: string; value: any }[]).map((m) => (

{m.label}

{m.value}

))}
{uniqueBidders ?? 0} bidders {bidCount} bids
); }; const BidHistory = ({ bidHistory, bidCount, userId, uniqueBidders }: any) => { const getBidderName = (bid: any) => { if (bid.user_id === userId) return "You"; return bid.profiles?.firm_name || bid.profiles?.full_name || "Trader"; }; return ( Bid History {bidCount} bids {uniqueBidders ?? 0} bidders {bidHistory.map((bid: any, i: number) => { const isYou = bid.user_id === userId; const isTop = i === 0; return (

{getBidderName(bid)}

+{bid.increment} · {new Date(bid.created_at).toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}

₹{Number(bid.bid_amount).toLocaleString("en-IN")}

); })} {bidHistory.length === 0 && (

No bids yet

)} ); }; const formatGradeCell = (value: number | string | null | undefined) => { if (value === null || value === undefined || value === "") return "—"; const n = Number(value); if (!Number.isFinite(n)) return "—"; return `${n}%`; }; const BatchDetails = ({ batch, details, showDetails, setShowDetails, sellerName, winnerName }: any) => { const sortedGrades = sortSizeGradesDesc(details.grades || []); const totals = sumGradingTotals(sortedGrades as any); return ( {/* Owner & Winner info — compact */} {(sellerName || (batch.status === "sold" && winnerName)) && (
{sellerName && (
Owner: {sellerName}
)} {batch.status === "sold" && winnerName && (
Won by: {winnerName} {batch.transferred_at && ( Transferred )}
)}
)} {/* Size Grades & Quality table */} {sortedGrades.length > 0 ? (
{sortedGrades.map((g: any, idx: number) => ( ))}
Size Clean Mouth Fruit Sick
{g.size_grade} {g.size_percent != null && Number(g.size_percent) > 0 && ( {Number(g.size_percent)}% )} {formatGradeCell(g.clean_percent)} {formatGradeCell(g.mouth_open_percent)} {formatGradeCell(g.fruit_type_percent)} {formatGradeCell(g.sick_percent)}
Total {totals.clean}% {totals.mouth}% {totals.fruit}% {totals.sick}%
) : (

No size grades available

)} ); }; // ─── Admin Controls ─── const AdminControls = ({ batch, isPaused, togglePause, updateBatchStatus, reducePrice, setReducePrice, handleReducePrice, queuedBatches, hasLiveBatch, tradeSummary, bidCount, }: any) => (
{/* Trade Summary */} {tradeSummary && (
Trade Summary

Sold

{tradeSummary.sold}

Queue

{tradeSummary.queued}

Avg ₹/kg

₹{tradeSummary.avgPrice > 0 ? tradeSummary.avgPrice.toFixed(0) : "—"}

Total Value

₹{tradeSummary.totalValue > 0 ? (tradeSummary.totalValue / 1000).toFixed(1) + "K" : "—"}

 )} {/* Admin Action Buttons */} {batch && ( Trade Controls
Reduce Base Price

Current base: ₹{Number(batch.base_price).toLocaleString("en-IN")}/kg

{batch.current_highest_bid > 0 && (

Highest bid: ₹{Number(batch.current_highest_bid).toLocaleString("en-IN")} (stays valid)

)} setReducePrice({ id: batch.id, price: e.target.value })} />
)} {/* Queue */} {queuedBatches.length > 0 && ( Queue ({queuedBatches.length}) {!hasLiveBatch && queuedBatches[0] && Next: {formatLotLabel(queuedBatches[0])}} {queuedBatches.map((b: any) => (

{formatLotLabel(b)}

{b.quantity_kg} kg · Base: ₹{Number(b.base_price).toLocaleString("en-IN")}

))} {hasLiveBatch &&

Close current lot before starting next

} )}
); // ─── Trader Bid Buttons (with merged status chip + keyboard shortcuts) ─── const BidButtons = ({ placing, activeBid, placeBid, currentBid, isPaused, isCooling, coolingSeconds, bidIncrements, hasBids, isLeading, isTied, batch, }: any) => { const increments: number[] = bidIncrements && bidIncrements.length > 0 ? bidIncrements : [2, 4, 6, 8, 10]; // Positional keyboard shortcuts: keys 1..9 map to increments[0..8] useEffect(() => { if (isPaused || placing || (isLeading && !isTied)) return; const handler = (e: KeyboardEvent) => { const target = e.target as HTMLElement | null; if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return; if (e.metaKey || e.ctrlKey || e.altKey) return; const idx = parseInt(e.key, 10); if (Number.isNaN(idx) || idx < 1 || idx > increments.length) return; e.preventDefault(); placeBid(increments[idx - 1]); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [increments, placeBid, isPaused, placing, isLeading, isTied]); // Status chip (merged from former "You're leading / Outbid" card) let statusChip: React.ReactNode = null; if (isTied) { statusChip = ( Tied ); } else if (hasBids) { statusChip = isLeading ? ( Leading · ₹{currentBid.toLocaleString("en-IN")} ) : ( Outbid · ₹{currentBid.toLocaleString("en-IN")} ); } return (
{resolveLotType(batch)} {statusChip}
{isCooling ? (
Cooling… next lot starts in {coolingSeconds}s
) : isPaused ? (
Trade paused by admin
) : isLeading && !isTied ? (
You are leading · wait for someone to outbid you
) : null}
{increments.map((inc: number, idx: number) => ( ))}

Tip: press keys 1–{Math.min(increments.length, 9)} on your keyboard to bid quickly

); }; // ─── Unified Lot List (non-admin) ─── const UnifiedBatchList = ({ liveBatch, queuedBatches, batchDetails }: { liveBatch: any; queuedBatches: any[]; batchDetails: BatchDetailsState }) => { const [selectedBatch, setSelectedBatch] = useState(null); const [sheetDetails, setSheetDetails] = useState(null); const [loadingDetails, setLoadingDetails] = useState(false); // Combine live + queued into one list; live lot excluded if done const allItems = [ ...(liveBatch ? [{ ...liveBatch, _isLive: true }] : []), ...queuedBatches.map((b) => ({ ...b, _isLive: false })), ]; const openDetails = async (b: any) => { setSelectedBatch(b); if (b._isLive && batchDetails) { setSheetDetails({ quality: batchDetails.quality, gl: batchDetails.gl, moisture: batchDetails.moisture, grades: batchDetails.grades, media: batchDetails.media || [], }); setLoadingDetails(false); return; } setLoadingDetails(true); const lotKey = b.lot_id || b.id; const [distRes, lotRes, lotSizeRes, mediaMap] = await Promise.all([ supabase.from("lot_size_distribution").select("*").eq("lot_id", b.id), supabase.from("lots").select("gl, moisture_percent, clean_percent, mouth_open_percent, fruit_type_percent, sick_percent, batch_color, is_artificial_coloured, is_single_graded, single_grade_size, custom_name, is_seeds, husk_percent, cardamom_percent, number_of_bags").eq("id", lotKey).maybeSingle(), ((supabase.from("lot_size_distribution" as any).select("*").eq("lot_id", lotKey) as any)), fetchLotMediaMap([lotKey]), ]); const batchGrades = distRes.data || []; const lotGrades = (lotSizeRes.data as any[]) || []; const lot: any = lotRes.data; const qs = batchGrades[0] || lot || {}; const media = mediaMap[lotKey] || []; const sourceGrades = batchGrades.length > 0 ? batchGrades : lotGrades; const mergedGrades = lot?.is_seeds ? [] : buildPerSizeGradingRows(lot || {}, sourceGrades as any); setSelectedBatch((prev: any) => prev ? { ...prev, batch_color: lot?.batch_color ?? prev.batch_color ?? null, is_artificial_coloured: lot?.is_artificial_coloured ?? prev.is_artificial_coloured ?? false, is_single_graded: lot?.is_single_graded ?? prev.is_single_graded ?? false, single_grade_size: lot?.single_grade_size ?? prev.single_grade_size ?? null, custom_name: lot?.custom_name ?? prev.custom_name ?? null, is_seeds: lot?.is_seeds ?? prev.is_seeds ?? false, husk_percent: lot?.husk_percent ?? prev.husk_percent ?? null, cardamom_percent: lot?.cardamom_percent ?? prev.cardamom_percent ?? null, } : prev); setSheetDetails({ quality: [ { label: "Clean", value: formatPercentage(qs.clean_percent) }, { label: "Mouth Open", value: formatPercentage(qs.mouth_open_percent) }, { label: "Fruit Type", value: formatPercentage(qs.fruit_type_percent) }, { label: "Sick", value: formatPercentage(qs.sick_percent) }, ], gl: formatNumericValue(lot?.gl), moisture: formatPercentage(lot?.moisture_percent), grades: mergedGrades, media, }); setLoadingDetails(false); }; if (allItems.length === 0) return null; return ( <>
Lots {allItems.length} lot{allItems.length !== 1 ? "es" : ""}
{allItems.map((b: any, i: number) => { const queuePos = b._isLive ? null : i - (liveBatch ? 1 : 0) + 1; const tint = b._isLive ? undefined : resolveBatchLightTint(b); return ( openDetails(b)} >
{b._isLive ? : #{queuePos}}

{formatLotLabel(b)}

{b.quantity_kg} kg · {b._isLive ? Bid ₹{Number(b.current_highest_bid || b.base_price).toLocaleString("en-IN")} : Base ₹{Number(b.base_price).toLocaleString("en-IN")}}

{b._isLive ? ( LIVE ) : ( Queued )} ); })}
{/* ── Bottom Sheet ── */} { if (!open) { setSelectedBatch(null); setSheetDetails(null); } }}> {/* Handle */}
{selectedBatch && (
{/* Title row */}

{selectedBatch.lot_seq != null ? `Lot #${selectedBatch.lot_seq}` : selectedBatch.batch_number}

{selectedBatch._isLive && ( LIVE )}

{getLotTypeLabel(selectedBatch)} {selectedBatch.is_artificial_coloured && !selectedBatch.is_seeds ? " · Artificial Coloured" : ""}

{!selectedBatch._isLive && ( queued )}
{/* Top metrics row: Qty / Bags / Base / [Current Bid] / g/L / Moisture */}
{[ { label: "Qty", value: `${selectedBatch.quantity_kg} kg` }, { label: "Bags", value: selectedBatch.number_of_bags != null ? Number(selectedBatch.number_of_bags).toLocaleString("en-IN") : "—" }, { label: "Base", value: `₹${Number(selectedBatch.base_price).toLocaleString("en-IN")}` }, ...(selectedBatch._isLive ? [{ label: "Current", value: `₹${Number(selectedBatch.current_highest_bid || selectedBatch.base_price).toLocaleString("en-IN")}`, highlight: true, }] : []), { label: "LTR/WT", value: sheetDetails?.gl ?? "—" }, { label: "Moisture", value: sheetDetails?.moisture ?? "—" }, ...(selectedBatch.is_seeds ? [ { label: "Husk", value: (selectedBatch as any).husk_percent != null ? `${Number((selectedBatch as any).husk_percent)}%` : "—" }, { label: "Cardamom", value: (selectedBatch as any).cardamom_percent != null ? `${Number((selectedBatch as any).cardamom_percent)}%` : "—" }, ] : []), ].map((m: any) => (

{m.label}

{m.value}

))}
{loadingDetails ? (
) : sheetDetails && ( <> {/* Size × Quality table */} {sheetDetails.grades.length > 0 && (() => { const totals = sumGradingTotals(sheetDetails.grades as any); return (

Size Grades & Quality

{sheetDetails.grades.map((g: any, idx: number) => ( ))}
Size {labelWithPct("Clean", totals.clean)} {labelWithPct("Mouth", totals.mouth)} {labelWithPct("Fruit", totals.fruit)} {labelWithPct("Sick", totals.sick)}
{g.size_percent != null && Number(g.size_percent) > 0 ? `${g.size_grade} (${Number(g.size_percent)}%)` : g.size_grade} {formatPercentage(g.clean_percent)} {formatPercentage(g.mouth_open_percent)} {formatPercentage(g.fruit_type_percent)} {formatPercentage(g.sick_percent)}
); })()} {/* Media */} {sheetDetails.media && sheetDetails.media.length > 0 && (

Photos & Videos

)} )}
)} ); }; // ─── Farmer Status Card ─── const FarmerStatusCard = ({ batch, currentBid }: any) => (
Watching as Farmer
Current Bid ₹{currentBid.toLocaleString("en-IN")}/kg
{batch.seller_id && (

You'll be notified when your lot is sold

)} ); // ─── Tied Bids Winner Picker (Admin) ─── const TiedBidsPicker = ({ batch, tiedBidders, onSelectWinner }: any) => { if (!batch || !tiedBidders || tiedBidders.length <= 1) return null; const topBid = Number(batch.current_highest_bid || batch.base_price); return ( Tied Bids – Select Winner

{tiedBidders.length} traders bid ₹{topBid.toLocaleString("en-IN")}/kg. Pick the winner:

{tiedBidders.map((bidder: any) => (

{bidder.firm_name || bidder.full_name}

Bid: ₹{topBid.toLocaleString("en-IN")}/kg

))}
); }; // ─── Main Component ─── const LiveTrade = () => { const { user, roles, profile } = useAuth(); const { toast } = useToast(); const { settings: adminSettings } = useAdminSettings(); const queryClient = useQueryClient(); const [batch, setBatch] = useState(null); const [allBatches, setAllBatches] = useState([]); const [bidHistory, setBidHistory] = useState([]); const [loading, setLoading] = useState(() => { const cached = queryClient.getQueryData(["live-trade-init"]); return !cached; }); const [activeBid, setActiveBid] = useState(null); const [placing, setPlacing] = useState(false); const [bidCooldown, setBidCooldown] = useState(false); // SINGLE timer source — admin and trader views consume the same hook. const timerState = useBatchTimer(batch, adminSettings.timer_duration_seconds || 15, adminSettings.cooling_delay_seconds || 0); const isCooling = timerState.isCooling; const coolingSeconds = timerState.seconds; const seconds = timerState.isPaused ? -1 : timerState.seconds; const [showDetails, setShowDetails] = useState(true); const [bidCount, setBidCount] = useState(0); const [batchDetails, setBatchDetails] = useState(emptyBatchDetails); const [reducePrice, setReducePrice] = useState<{ id: string; price: string } | null>(null); const [sellerName, setSellerName] = useState(null); const [winnerName, setWinnerName] = useState(null); const [liveSession, setLiveSession] = useState(null); const [tiedBidders, setTiedBidders] = useState([]); const [bidFlash, setBidFlash] = useState(null); const timerRef = useRef | null>(null); const isAdmin = roles?.includes("admin"); const isUnified = roles?.includes("unified"); const isTrader = roles?.includes("trader") || isUnified; const isFarmerOnly = roles?.includes("farmer") && !isTrader && !isAdmin; const { isApproved } = useApprovalGate(); const hasLiveBatch = !!batch; const activeTradeId = liveSession?.id ?? batch?.trade_id ?? null; const queuedBatches = useMemo( () => allBatches .filter((b) => b.status === "queued" && (!activeTradeId || b.trade_id === activeTradeId)) .sort((a, b) => { const sa = a.lot_seq ?? Number.MAX_SAFE_INTEGER; const sb = b.lot_seq ?? Number.MAX_SAFE_INTEGER; if (sa !== sb) return sa - sb; return new Date(a.created_at).getTime() - new Date(b.created_at).getTime(); }), [allBatches, activeTradeId], ); const soldBatches = useMemo( () => allBatches.filter((b) => b.status === "sold" && (!activeTradeId || b.trade_id === activeTradeId)), [allBatches, activeTradeId], ); const tradeSummary = useMemo(() => { if (!activeTradeId) return null; const sessionBatches = allBatches.filter((b) => b.trade_id === activeTradeId); const sold = sessionBatches.filter((b) => b.status === "sold"); const queued = sessionBatches.filter((b) => b.status === "queued"); const totalValue = sold.reduce((s, b) => s + (Number(b.current_highest_bid || b.base_price) * Number(b.quantity_kg)), 0); const totalQty = sold.reduce((s, b) => s + Number(b.quantity_kg), 0); return { sold: sold.length, queued: queued.length, totalValue, avgPrice: totalQty > 0 ? totalValue / totalQty : 0 }; }, [allBatches, activeTradeId]); // Fetch live lot + all relevant lots + session const fetchData = useCallback(async () => { const [batchRes, sessionRes] = await Promise.all([ supabase.from("lots").select("*").eq("status", "live").order("created_at", { ascending: true }).limit(1).maybeSingle(), supabase.from("trade_sessions").select("*").eq("status", "live").limit(1), ]); const activeSession = sessionRes.data?.[0] || null; const activeTradeIdFromBatch = (batchRes.data as any)?.trade_id ?? null; const activeTradeId = activeSession?.id ?? activeTradeIdFromBatch; const { data: relevantBatches = [] } = activeTradeId ? await supabase.from("lots").select("*").eq("trade_id", activeTradeId).order("created_at", { ascending: true }) : { data: [] as any[] }; // Enrich batches with lot-level descriptors (colour, type, single grade) so // queue cards can render the correct light tint and labels. const lotIds = Array.from(new Set((relevantBatches || []).map((b: any) => b.lot_id).filter(Boolean))); const { data: lotsForList } = lotIds.length ? await supabase.from("lots").select("id, batch_color, is_artificial_coloured, is_single_graded, single_grade_size, custom_name, is_seeds").in("id", lotIds) : { data: [] as any[] }; const lotMap = new Map((lotsForList || []).map((l: any) => [l.id, l])); const enrichedBatches = (relevantBatches || []).map((b: any) => { const lot = b.lot_id ? lotMap.get(b.lot_id) : null; return { ...b, batch_color: lot?.batch_color ?? b.batch_color ?? null, is_artificial_coloured: lot?.is_artificial_coloured ?? b.is_artificial_coloured ?? false, is_single_graded: lot?.is_single_graded ?? b.is_single_graded ?? false, single_grade_size: lot?.single_grade_size ?? b.single_grade_size ?? null, custom_name: lot?.custom_name ?? b.custom_name ?? null, is_seeds: lot?.is_seeds ?? b.is_seeds ?? false, }; }); setAllBatches(enrichedBatches); setLiveSession(activeSession); const liveLot: any = batchRes.data; if (liveLot) { const [bidsRes, lotSizeRes, lotMediaMap, sellerRes, winnerRes] = await Promise.all([ supabase.from("bids").select("*, profiles(full_name, firm_name)").eq("lot_id", liveLot.id).order("created_at", { ascending: false }).limit(20), ((supabase.from("lot_size_distribution" as any).select("*").eq("lot_id", liveLot.id) as any)), fetchLotMediaMap([liveLot.id]), liveLot.seller_id ? supabase.from("profiles").select("full_name, firm_name").eq("id", liveLot.seller_id).single() : Promise.resolve({ data: null }), liveLot.highest_bidder_id ? supabase.from("profiles").select("full_name, firm_name").eq("id", liveLot.highest_bidder_id).single() : Promise.resolve({ data: null }), ]); setBidHistory(bidsRes.data || []); setBidCount((bidsRes.data || []).length); setSellerName(sellerRes.data ? (sellerRes.data as any).firm_name || (sellerRes.data as any).full_name || null : null); setWinnerName(winnerRes.data ? (winnerRes.data as any).firm_name || (winnerRes.data as any).full_name || null : null); setBatch(liveLot); const lotGrades = (lotSizeRes.data as any[]) || []; const mergedGrades = buildPerSizeGradingRows(liveLot, lotGrades); setBatchDetails({ quality: [ { label: "Clean", value: formatPercentage(liveLot.clean_percent) }, { label: "Mouth Open", value: formatPercentage(liveLot.mouth_open_percent) }, { label: "Fruit Type", value: formatPercentage(liveLot.fruit_type_percent) }, { label: "Sick", value: formatPercentage(liveLot.sick_percent) }, ], grades: mergedGrades, media: lotMediaMap[liveLot.id] || [], gl: formatNumericValue(liveLot.gl), moisture: formatPercentage(liveLot.moisture_percent), }); // Check for tied bids at the top price const topBid = Number(batchRes.data.current_highest_bid || 0); if (topBid > 0 && !batchRes.data.highest_bidder_id) { const { data: tiedBidsData } = await supabase .from("bids") .select("user_id, profiles(full_name, firm_name)") .eq("lot_id", batchRes.data.id) .eq("bid_amount", topBid); const seen = new Set(); const unique = (tiedBidsData || []).filter((b: any) => { if (seen.has(b.user_id)) return false; seen.add(b.user_id); return true; }).map((b: any) => ({ user_id: b.user_id, full_name: b.profiles?.full_name, firm_name: b.profiles?.firm_name })); setTiedBidders(unique.length > 1 ? unique : []); } else { setTiedBidders([]); } } else { setBatch(null); setBidHistory([]); setBidCount(0); setBatchDetails(emptyBatchDetails); setTiedBidders([]); setSellerName(null); setWinnerName(null); } queryClient.setQueryData(["live-trade-init"], true); setLoading(false); }, [queryClient]); // Restore cached state on mount if available, then refresh in background useEffect(() => { const cached = queryClient.getQueryData(["live-trade-init"]); if (cached) { // Data from previous visit exists in local state via React's fast remount // Just fetch fresh data in background without showing skeleton fetchData(); } else { fetchData(); } }, [fetchData, queryClient]); // Mobile WebViews / backgrounded tabs freeze JS timers AND can drop the // Realtime WebSocket. When the user returns, our local `lot.timer_ends_at` // may be stale — the countdown then ticks against an old anchor and shows a // wrong value (e.g. "10s left" when the server already moved to a new lot). // Fix: on tab-resume, refetch the live lot row ONCE so the timer hook // re-anchors against the fresh server-side `timer_ends_at`. // Cost: at most one REST call per resume event. No new realtime channels, // no polling, no extra heartbeats. useEffect(() => { const onVisible = () => { if (typeof document !== "undefined" && document.visibilityState === "visible") { fetchData(); } }; document.addEventListener("visibilitychange", onVisible); window.addEventListener("pageshow", onVisible); return () => { document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("pageshow", onVisible); }; }, [fetchData]); // Whenever a new server-driven timer begins, refresh the shared clock offset // so countdowns stay aligned across viewers. The actual ticking happens in the // The shared server clock auto-resyncs every 60s. Re-measuring on every // timer_ends_at change introduces ~10–50ms offset jitter that visually // flicks the countdown by ±1s right after a pause/resume, so we don't // force a resync here anymore. // Keep-warm loop removed: it was generating background function traffic from every trader tab. // Single shared heartbeat — same cadence as /admin so every viewer triggers // the same idempotent server-side `check-timer` and no screen ticks alone. useTimerHeartbeat(!!batch && batch.status === "live", 4000); // Realtime: only the active trade/session changes useEffect(() => { if (!activeTradeId) return; const channel = supabase .channel(`live-trade-${activeTradeId}`) .on("postgres_changes", { event: "*", schema: "public", table: "lots", filter: `trade_id=eq.${activeTradeId}` }, (payload) => { if (payload.eventType === "DELETE") { const oldId = (payload.old as any)?.id; setAllBatches((prev) => prev.filter((b) => b.id !== oldId)); setBatch((prev: any) => prev?.id === oldId ? null : prev); return; } const updated = payload.new as any; setAllBatches((prev) => { const idx = prev.findIndex((b) => b.id === updated.id); if (idx >= 0) { const copy = [...prev]; copy[idx] = updated; return copy; } return [...prev, updated].sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()); }); setBatch((prev: any) => { if (!prev && updated.status === "live") { setTimeout(() => fetchData(), 0); return prev; } if (prev && updated.id === prev.id) { if (updated.status !== "live") { setTimeout(() => fetchData(), 0); return null; } return { ...prev, ...updated }; } return prev; }); }) .on("postgres_changes", { event: "*", schema: "public", table: "trade_sessions", filter: `id=eq.${activeTradeId}` }, (payload) => { if (payload.eventType === "DELETE") { setLiveSession(null); return; } const updated = payload.new as any; setLiveSession(updated); if (updated.status !== "live") { setTimeout(() => fetchData(), 0); } }) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [activeTradeId, fetchData]); // Profile cache for live bid feed — avoids repeated DB lookups for the same bidder const profileCacheRef = useRef>(new Map()); // Realtime: bids for current lot useEffect(() => { if (!batch?.id) return; const channel = supabase .channel(`live-trade-bids-${batch.id}`) .on("postgres_changes", { event: "INSERT", schema: "public", table: "bids", filter: `lot_id=eq.${batch.id}` }, async (payload) => { const newBid = payload.new as any; // Use cached profile when available — sub-millisecond UI update let profile = profileCacheRef.current.get(newBid.user_id); if (!profile) { const { data } = await supabase.from("profiles").select("full_name, firm_name").eq("id", newBid.user_id).maybeSingle(); profile = data as any || { full_name: null, firm_name: null }; profileCacheRef.current.set(newBid.user_id, profile); } setBidHistory((prev) => [{ ...newBid, profiles: profile }, ...prev.slice(0, 19)]); setBidCount((c) => c + 1); // Outbid/Leading badges are derived from state (bidHistory + highest_bidder_id), // so they persist as long as the condition holds. // #4 Bid flash const newAmount = Number(newBid.bid_amount); setBatch((prev: any) => { if (!prev) return prev; const currentHighest = Number(prev.current_highest_bid || 0); if (newAmount > currentHighest) { const diff = newAmount - currentHighest; setBidFlash(diff); setTimeout(() => setBidFlash(null), 900); return { ...prev, current_highest_bid: newAmount }; } return prev; }); }) .subscribe(); return () => { supabase.removeChannel(channel); }; }, [batch?.id]); // Auto-queue next lot after sold (admin manual-close fallback only). // Timer-expiry auto-close is handled server-side by check-timer to avoid races. // We immediately enter a COOLING state on the next lot (live + paused with // timer_ends_at = now + coolingDelay). The server-side check-timer then // promotes it to a real auction once cooling elapses — so the cooldown is // visible to every participant and survives admin tab close / navigation. const autoQueueNext = useCallback(async (tradeId: string) => { if (!isAdmin) return; if (!adminSettings.auto_live_enabled) return; const cool = Math.max(0, adminSettings.cooling_delay_seconds || 0); const { data: nextQueued } = await supabase .from("lots") .select("id") .eq("trade_id", tradeId) .eq("status", "queued") .order("created_at", { ascending: true }) .limit(1); if (!nextQueued || nextQueued.length === 0) return; const nextId = nextQueued[0].id; await startBatchCooling({ batchId: nextId, coolingSeconds: cool, timerDurationSeconds: adminSettings.timer_duration_seconds || 15, }); toast({ title: cool > 0 ? `Cooling ${cool}s before next lot…` : "Next lot auto-started" }); }, [toast, adminSettings, isAdmin]); // ─── Admin Actions ─── const updateBatchStatus = async (id: string, status: string) => { if (status === "live") { if (hasLiveBatch) { toast({ title: "Cannot go live", description: "Close the current live lot first", variant: "destructive" }); return; } await supabase.from("lots").update({ status: "live" as any }).eq("id", id); await supabase.rpc("timer_start_live" as never, { p_lot_id: id, p_duration_seconds: adminSettings.timer_duration_seconds || 15 } as never); } else if (status === "sold") { const batchToClose = allBatches.find((b: any) => b.id === id); const resolution = await resolveTopBidResolution( id, Number(batchToClose?.current_highest_bid || 0), batchToClose?.highest_bidder_id, ); if (resolution.state === "tie") { await supabase.rpc("timer_mark_tie_paused" as never, { p_lot_id: id } as never); toast({ title: "Timer paused due to tied highest bid", description: `${resolution.uniqueBidders.length} traders tied at ₹${resolution.topBid.toLocaleString("en-IN")}. Select winner to complete sale.`, variant: "destructive", }); return; } const winnerId = resolution.state === "winner" ? resolution.winnerId : batchToClose?.highest_bidder_id ?? null; await supabase.from("lots").update({ status: "sold" as any, highest_bidder_id: winnerId, }).eq("id", id); await supabase.rpc("timer_clear" as never, { p_lot_id: id } as never); // Notify winner (green) if (winnerId) { await supabase.from("notifications").insert({ user_id: winnerId, title: "You won the trade!", message: `Lot ${batchToClose?.lot_number} — ₹${resolution.topBid.toLocaleString("en-IN")}/kg × ${batchToClose?.quantity_kg}kg`, type: "won", }); } // Notify all losing bidders (red) const { data: allBidders } = await supabase.from("bids").select("user_id").eq("lot_id", id); const allUnique = [...new Set((allBidders || []).map((b: any) => b.user_id))]; const losers = allUnique.filter((uid: string) => uid !== winnerId); if (losers.length > 0) { await supabase.from("notifications").insert( losers.map((uid: string) => ({ user_id: uid, title: "You lost — Lot sold", message: `Lot ${batchToClose?.lot_number} was sold at ₹${resolution.topBid.toLocaleString("en-IN")}/kg`, type: "lost", })) ); } // Notify seller (green) if (batchToClose?.seller_id) { await supabase.from("notifications").insert({ user_id: batchToClose.seller_id, title: "Your lot was sold!", message: `Lot ${batchToClose.lot_number} sold at ₹${resolution.topBid.toLocaleString("en-IN")}/kg`, type: "won", }); } toast({ title: `Lot sold` }); if (batchToClose?.trade_id) autoQueueNext(batchToClose.trade_id); return; } else if (status === "withdrawn") { const batchToWithdraw = allBatches.find((b: any) => b.id === id); await supabase.from("lots").update({ status: "withdrawn" as any }).eq("id", id); await supabase.rpc("timer_clear" as never, { p_lot_id: id } as never); if (batchToWithdraw?.lot_id) { const { data: lot } = await supabase.from("lots").select("status").eq("id", batchToWithdraw.lot_id).maybeSingle(); if (lot?.status === "scheduled") { await supabase.from("lots").update({ status: "graded" }).eq("id", batchToWithdraw.lot_id); } } // Notify all bidders + seller about withdrawal (red) const { data: allBidders } = await supabase.from("bids").select("user_id").eq("lot_id", id); const allUnique = [...new Set((allBidders || []).map((b: any) => b.user_id))]; const notifyIds = batchToWithdraw?.seller_id ? [...new Set([...allUnique, batchToWithdraw.seller_id])] : allUnique; if (notifyIds.length > 0) { await supabase.from("notifications").insert( notifyIds.map((uid: string) => ({ user_id: uid, title: "Lot withdrawn", message: `Lot ${batchToWithdraw?.lot_number} has been withdrawn from trade`, type: "lost", })) ); } toast({ title: `Lot withdrawn` }); if (batchToWithdraw?.trade_id) autoQueueNext(batchToWithdraw.trade_id); return; } else { await supabase.from("lots").update({ status: status as any }).eq("id", id); await supabase.rpc("timer_clear" as never, { p_lot_id: id } as never); } toast({ title: `Lot ${status}` }); }; const togglePause = async (id: string, currentlyPaused: boolean) => { const defaultDuration = adminSettings.timer_duration_seconds || 15; try { await toggleBatchPause({ batchId: id, currentlyPaused, durationSeconds: defaultDuration }); toast({ title: currentlyPaused ? "Trade resumed" : "Trade paused" }); } catch (e: any) { toast({ title: "Action blocked", description: e?.message || "Cannot pause/resume this lot right now.", variant: "destructive" }); } }; const handleReducePrice = async () => { if (!reducePrice || !reducePrice.price || !batch) return; const newPrice = Number(reducePrice.price); await supabase.from("lots").update({ base_price: newPrice } as any).eq("id", reducePrice.id); await supabase.from("price_history").insert({ lot_id: reducePrice.id, old_price: batch.base_price, new_price: newPrice, }); toast({ title: "Base price reduced" }); setReducePrice(null); }; // ─── Trader Bid (tied-bid model) ─── const placeBid = useCallback(async (increment: number) => { if (!batch || placing || bidCooldown) return; setPlacing(true); setBidCooldown(true); setActiveBid(`+${increment}`); const currentPriceSeen = Number(batch.current_highest_bid || 0) > 0 ? Number(batch.current_highest_bid) : Number(batch.base_price); // Optimistic UI: bump local price immediately for instant feedback const optimisticPrice = currentPriceSeen + increment; setBatch((prev: any) => prev && prev.id === batch.id ? { ...prev, current_highest_bid: optimisticPrice } : prev); // Fire-and-forget invoke (no pre-flight session check — supabase-js auto-refreshes) supabase.functions .invoke("place-bid", { body: { lot_id: batch.id, increment, current_price_seen: currentPriceSeen }, }) .then(({ data, error }) => { if (error || data?.error) { const msg = data?.error || error?.message; toast({ title: "Bid failed", description: msg, variant: "destructive" }); } else if (data?.is_tied) { toast({ title: `Bid placed: ₹${data.bid_amount.toLocaleString("en-IN")} (${data.tied_bidders} tied)` }); } }) .finally(() => setPlacing(false)); // Quick reset of the visual flash so users can tap again fast setTimeout(() => setActiveBid(null), 150); // 1.5s rate-limit guard — matches server-side check setTimeout(() => setBidCooldown(false), 1500); }, [batch, placing, bidCooldown, toast]); // ─── Admin: Select winner from tied bids ─── const selectWinner = useCallback(async (winnerId: string) => { if (!batch) return; const topBid = Number(batch.current_highest_bid); await supabase.from("lots").update({ highest_bidder_id: winnerId, status: "sold" as any, }).eq("id", batch.id); await supabase.rpc("timer_clear" as never, { p_lot_id: batch.id } as never); // Notify winner (green — tied won) await supabase.from("notifications").insert({ user_id: winnerId, title: "Tied bid — You won!", message: `Lot ${batch.lot_number} awarded to you at ₹${topBid.toLocaleString("en-IN")}/kg`, type: "won", }); // Notify tied losers (red) const tiedLoserIds = tiedBidders.filter((b: any) => b.user_id !== winnerId).map((b: any) => b.user_id); if (tiedLoserIds.length > 0) { await supabase.from("notifications").insert( tiedLoserIds.map((uid: string) => ({ user_id: uid, title: "Tied bid — You lost", message: `Lot ${batch.lot_number} was awarded to another bidder at ₹${topBid.toLocaleString("en-IN")}/kg`, type: "lost", })) ); } // Notify all other losing bidders const { data: allBidders } = await supabase.from("bids").select("user_id").eq("lot_id", batch.id); const allUnique = [...new Set((allBidders || []).map((b: any) => b.user_id))]; const otherLosers = allUnique.filter((uid: string) => uid !== winnerId && !tiedLoserIds.includes(uid)); if (otherLosers.length > 0) { await supabase.from("notifications").insert( otherLosers.map((uid: string) => ({ user_id: uid, title: "You lost — Lot sold", message: `Lot ${batch.lot_number} was sold at ₹${topBid.toLocaleString("en-IN")}/kg`, type: "lost", })) ); } // Notify seller (green) if (batch.seller_id) { await supabase.from("notifications").insert({ user_id: batch.seller_id, title: "Your lot was sold!", message: `Lot ${batch.lot_number} sold at ₹${topBid.toLocaleString("en-IN")}/kg`, type: "won", }); } toast({ title: "Winner selected & lot sold" }); setTiedBidders([]); autoQueueNext(batch.trade_id); }, [batch, toast, autoQueueNext, tiedBidders]); const currentBid = batch ? Number(batch.current_highest_bid || batch.base_price) : 0; const isPaused = batch?.is_paused === true; const isTied = tiedBidders.length > 1; const isLeading = !isTied && batch?.highest_bidder_id === user?.id; const userHasBidOnCurrent = !!user && bidHistory.some((b: any) => b.user_id === user.id); const isOutbid = userHasBidOnCurrent && !isLeading && !isTied; // ─── Loading ─── if (loading) { return
; } // ─── No Live Lot ─── if (!batch) { return (

Live Trade

{isAdmin ? "Manage & control live trades" : "Real-time trade room"}

{/* Admin: show queue and controls even when no lot is live */} {isAdmin && liveSession && queuedBatches.length > 0 && (
{tradeSummary && ( )}
)} {!liveSession && (

No active trade session

{isAdmin ? "Start a trade session from the Admin Dashboard" : "Check the schedule for upcoming trades"}

)} {liveSession && queuedBatches.length === 0 && (

No more lots available

There are no more lots queued for this session.

{isAdmin ? "Add a new lot to the queue — a cooling period will start automatically." : "Waiting for the admin to add the next lot."}

)} {/* Non-admin: session live with queued lots but none yet started — show cooling banner */} {!isAdmin && liveSession && queuedBatches.length > 0 && ( <>

Cooling Period

{queuedBatches.length} lot{queuedBatches.length > 1 ? "es" : ""} in queue · Next lot starting shortly

)}
); } // ─── Live Lot Active ─── return (
{isCooling ? ( <> {/* Inline trade result for participating traders — replaces /bid-result page */} {isTrader && !isAdmin && userHasBidOnCurrent && batch && (
{isLeading ? : }

{isLeading ? "You Won!" : "Better Luck Next Time"}

{batch.lot_seq != null ? `Lot #${batch.lot_seq}` : `Lot ${batch.lot_number || ""}`} · Hammer ₹{Number(batch.current_highest_bid || batch.base_price).toLocaleString("en-IN")}/kg

{isLeading ? "Winner" : "Not Won"} )} {/* Shared cooling screen — replaces live card during inter-lot gap */} {/* Keep queue/list visible so users can preview what's coming next */} {!isAdmin && ( )} ) : ( <> {/* Sticky top: live banner + role-specific bid/control panel */}
b.user_id)).size} isOutbid={isOutbid && isTrader && !isAdmin} isLeading={isLeading && isTrader && !isAdmin} bidFlash={bidFlash} gl={batchDetails.gl} moisture={batchDetails.moisture} /> {isAdmin && ( <> )} {isTrader && !isAdmin && !isUnified && batch.seller_id === user?.id && (

This is your own lot

You cannot bid on batches you submitted. Watch the trade unfold below.

 )} {isTrader && !isAdmin && (isUnified || batch.seller_id !== user?.id) && ( <> {profile?.is_blocked && (

Account has been blocked by Admin

Please contact the admin for further details.

 )} {isTied && isPaused && !profile?.is_blocked && (

Timer paused due to tied highest bid

{tiedBidders.length} traders tied at ₹{currentBid.toLocaleString("en-IN")}. Admin will select the winner to complete the sale.

 )} {!profile?.is_blocked && ( toast({ title: "Account pending approval", description: "Contact admin to approve your account before bidding.", variant: "destructive" })} currentBid={currentBid} isPaused={isPaused || isCooling || !isApproved} isCooling={isCooling} coolingSeconds={coolingSeconds} bidIncrements={adminSettings.bid_increments} hasBids={!!batch.highest_bidder_id} isLeading={isLeading} isTied={isTied} batch={batch} /> )} )} {isFarmerOnly && ( )}
{/* Scrollable details below the sticky header */} {((isTrader && !isAdmin && (isUnified || batch.seller_id !== user?.id)) || isFarmerOnly || isAdmin) && ( )} {isAdmin && ( b.user_id)).size} /> )} {!isAdmin && ( )} )}
); }; export default LiveTrade;