src/components/Community.tsx

@@ -81,12 +81,6 @@ export default function Community() {
   const [tradeCardDetails, setTradeCardDetails] = useState<Map<string, Card>>(new Map());
   const [processingTradeId, setProcessingTradeId] = useState<string | null>(null);
   const [selectedTrade, setSelectedTrade] = useState<Trade | null>(null);
-  const [counterOfferData, setCounterOfferData] = useState<{
-    receiverId: string;
-    receiverUsername: string;
-    receiverCollection: CollectionItem[];
-    initialOffer?: { senderCards: Card[]; receiverCards: Card[] };
-  } | null>(null);
 
   // Profile state
   const [username, setUsername] = useState('');
@@ -318,37 +312,6 @@ export default function Community() {
     });
   };
 
-  const handleCounterOffer = async (trade: Trade, senderCards: Card[], receiverCards: Card[]) => {
-    try {
-      // Decline the original trade
-      await declineTrade(trade.id);
-
-      // Load the sender's collection for the counter-offer
-      const collectionMap = await getUserCollection(trade.sender_id);
-      const cardIds = Array.from(collectionMap.keys());
-      const cards = await getCardsByIds(cardIds);
-      const senderCollection = cards.map((card) => ({
-        card,
-        quantity: collectionMap.get(card.id) || 0,
-      }));
-
-      // Set up counter-offer data (swap sender and receiver)
-      setCounterOfferData({
-        receiverId: trade.sender_id,
-        receiverUsername: trade.sender?.username || 'User',
-        receiverCollection: senderCollection,
-        initialOffer: {
-          senderCards: receiverCards, // What you want to give back
-          receiverCards: senderCards, // What you want to receive
-        },
-      });
-
-      await loadTradesData();
-    } catch (error) {
-      console.error('Error setting up counter-offer:', error);
-      toast.error('Failed to set up counter-offer');
-    }
-  };
 
   // ============ PROFILE FUNCTIONS ============
   const loadProfile = async () => {
@@ -840,7 +803,8 @@ export default function Community() {
                     pending: 'text-yellow-400',
                   };
 
-                  const canViewDetails = !isSender && trade.status === 'pending';
+                  // Both users can view details for pending trades
+                  const canViewDetails = trade.status === 'pending';
 
                   return (
                     <div
@@ -871,7 +835,7 @@ export default function Community() {
 
                       {canViewDetails && (
                         <p className="text-xs text-blue-400 text-center pt-1">
-                          Tap to view details
+                          {isSender ? 'Tap to view/edit' : 'Tap to view details'}
                         </p>
                       )}
 
@@ -950,21 +914,9 @@ export default function Community() {
           onClose={() => setSelectedTrade(null)}
           onAccept={handleAcceptTrade}
           onDecline={handleDeclineTrade}
-          onCounterOffer={handleCounterOffer}
-        />
-      )}
-
-      {/* Counter Offer Creator */}
-      {counterOfferData && (
-        <TradeCreator
-          receiverId={counterOfferData.receiverId}
-          receiverUsername={counterOfferData.receiverUsername}
-          receiverCollection={counterOfferData.receiverCollection}
-          onClose={() => setCounterOfferData(null)}
-          onTradeCreated={() => {
-            setCounterOfferData(null);
+          onTradeUpdated={() => {
+            setSelectedTrade(null);
             loadTradesData();
-            toast.success('Counter offer sent!');
           }}
         />
       )}

src/components/TradeCreator.tsx

@@ -3,7 +3,7 @@ import { X, ArrowLeftRight, ArrowRight, ArrowLeft, Minus, Send, Gift, Loader2, S
 import { useAuth } from '../contexts/AuthContext';
 import { useToast } from '../contexts/ToastContext';
 import { getUserCollection, getCardsByIds } from '../services/api';
-import { createTrade } from '../services/tradesService';
+import { createTrade, updateTrade } from '../services/tradesService';
 import { Card } from '../types';
 
 interface CollectionItem {
@@ -182,6 +182,11 @@ interface TradeCreatorProps {
   receiverCollection: CollectionItem[];
   onClose: () => void;
   onTradeCreated: () => void;
+  editMode?: boolean;
+  existingTradeId?: string;
+  initialSenderCards?: Card[];
+  initialReceiverCards?: Card[];
+  initialMessage?: string;
 }
 
 type MobileStep = 'want' | 'give' | 'review';
@@ -192,13 +197,18 @@ export default function TradeCreator({
   receiverCollection,
   onClose,
   onTradeCreated,
+  editMode = false,
+  existingTradeId,
+  initialSenderCards = [],
+  initialReceiverCards = [],
+  initialMessage = '',
 }: TradeCreatorProps) {
   const { user } = useAuth();
   const toast = useToast();
   const [myCollection, setMyCollection] = useState<CollectionItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState(initialMessage);
 
   const [isGiftMode, setIsGiftMode] = useState(false);
   const [mobileStep, setMobileStep] = useState<MobileStep>('want');
@@ -222,6 +232,57 @@ export default function TradeCreator({
     }
   }, [isGiftMode]);
 
+  // Pre-populate cards in edit mode
+  useEffect(() => {
+    if (!editMode || !myCollection.length || !receiverCollection.length) return;
+    if (initialSenderCards.length === 0 && initialReceiverCards.length === 0) return;
+
+    console.log('Pre-populating cards', {
+      initialSenderCards: initialSenderCards.length,
+      initialReceiverCards: initialReceiverCards.length,
+      myCollection: myCollection.length,
+      receiverCollection: receiverCollection.length
+    });
+
+    // Pre-populate sender cards with their quantities
+    const senderMap = new Map<string, SelectedCard>();
+    initialSenderCards.forEach(card => {
+      const collectionItem = myCollection.find(c => c.card.id === card.id);
+      if (collectionItem) {
+        // Find the quantity from trade items if card has quantity property
+        const quantity = (card as any).quantity || 1;
+        console.log('Adding sender card:', card.name, 'qty:', quantity);
+        senderMap.set(card.id, {
+          card: card,
+          quantity: quantity,
+          maxQuantity: collectionItem.quantity,
+        });
+      } else {
+        console.log('Card not found in my collection:', card.name, card.id);
+      }
+    });
+    setMyOfferedCards(senderMap);
+
+    // Pre-populate receiver cards with their quantities
+    const receiverMap = new Map<string, SelectedCard>();
+    initialReceiverCards.forEach(card => {
+      const collectionItem = receiverCollection.find(c => c.card.id === card.id);
+      if (collectionItem) {
+        // Find the quantity from trade items if card has quantity property
+        const quantity = (card as any).quantity || 1;
+        console.log('Adding receiver card:', card.name, 'qty:', quantity);
+        receiverMap.set(card.id, {
+          card: card,
+          quantity: quantity,
+          maxQuantity: collectionItem.quantity,
+        });
+      } else {
+        console.log('Card not found in their collection:', card.name, card.id);
+      }
+    });
+    setWantedCards(receiverMap);
+  }, [editMode, myCollection, receiverCollection, initialSenderCards, initialReceiverCards]);
+
   const loadMyCollection = async () => {
     if (!user) return;
     setLoading(true);
@@ -324,6 +385,18 @@ export default function TradeCreator({
         quantity: item.quantity,
       }));
 
+      if (editMode && existingTradeId) {
+        // Update existing trade
+        await updateTrade({
+          tradeId: existingTradeId,
+          editorId: user.id,
+          message: message || undefined,
+          senderCards,
+          receiverCards,
+        });
+        toast.success('Trade updated!');
+      } else {
+        // Create new trade
         await createTrade({
           senderId: user.id,
           receiverId,
@@ -331,11 +404,13 @@ export default function TradeCreator({
           senderCards,
           receiverCards,
         });
+        toast.success('Trade offer sent!');
+      }
 
       onTradeCreated();
     } catch (error) {
-      console.error('Error creating trade:', error);
-      toast.error('Failed to create trade');
+      console.error('Error with trade:', error);
+      toast.error(editMode ? 'Failed to update trade' : 'Failed to create trade');
     } finally {
       setSubmitting(false);
     }
@@ -487,12 +562,6 @@ export default function TradeCreator({
                     placeholder="Add a message..."
                     className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   />
-                  {message && (
-                    <div className="mt-2 p-2 bg-gray-900/50 rounded border border-gray-700">
-                      <p className="text-xs text-gray-400 mb-1">Preview:</p>
-                      <p className="text-sm text-gray-200">{message}</p>
-                    </div>
-                  )}
                 </div>
               </div>
             )}
@@ -559,7 +628,7 @@ export default function TradeCreator({
           <div className="flex items-center justify-between p-4 border-b border-gray-700">
             <div className="flex items-center gap-3">
               <ArrowLeftRight size={24} className="text-blue-400" />
-              <h2 className="text-xl font-bold">Trade with {receiverUsername}</h2>
+              <h2 className="text-xl font-bold">{editMode ? 'Edit Trade' : `Trade with ${receiverUsername}`}</h2>
               <label className="flex items-center gap-2 ml-4 cursor-pointer">
                 <div
                   className={`relative w-10 h-5 rounded-full transition-colors ${
@@ -638,23 +707,14 @@ export default function TradeCreator({
               )}
             </div>
 
-            <div className="space-y-2 mb-4">
+            <div className="flex items-center gap-4 mb-4">
               <input
                 type="text"
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 placeholder="Add a message (optional)"
-                className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               />
-              {message && (
-                <div className="p-2 bg-gray-900/50 rounded border border-gray-700">
-                  <p className="text-xs text-gray-400 mb-1">Preview:</p>
-                  <p className="text-sm text-gray-200">{message}</p>
-                </div>
-              )}
-            </div>
-
-            <div className="flex items-center gap-4">
               <button
                 onClick={onClose}
                 className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"

src/components/TradeDetail.tsx

@@ -1,17 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { X, Check, ArrowLeftRight, DollarSign, Loader2, RefreshCcw } from 'lucide-react';
+import { X, Check, ArrowLeftRight, DollarSign, Loader2, Edit, RefreshCcw, History } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { useToast } from '../contexts/ToastContext';
-import { Trade, TradeItem } from '../services/tradesService';
+import { Trade, TradeHistoryEntry, getTradeVersionHistory } from '../services/tradesService';
+import { getUserCollection, getCardsByIds } from '../services/api';
 import { Card } from '../types';
-import { getCardsByIds } from '../services/api';
+import TradeCreator from './TradeCreator';
 
 interface TradeDetailProps {
   trade: Trade;
   onClose: () => void;
   onAccept: (tradeId: string) => Promise<void>;
   onDecline: (tradeId: string) => Promise<void>;
-  onCounterOffer: (trade: Trade, senderCards: Card[], receiverCards: Card[]) => void;
+  onTradeUpdated: () => void;
 }
 
 interface TradeCardItem {
@@ -19,6 +20,11 @@ interface TradeCardItem {
   quantity: number;
 }
 
+interface CollectionItem {
+  card: Card;
+  quantity: number;
+}
+
 function calculateTotalPrice(items: TradeCardItem[]): number {
   return items.reduce((total, { card, quantity }) => {
     const price = card.prices?.usd ? parseFloat(card.prices.usd) : 0;
@@ -31,7 +37,7 @@ export default function TradeDetail({
   onClose,
   onAccept,
   onDecline,
-  onCounterOffer,
+  onTradeUpdated,
 }: TradeDetailProps) {
   const { user } = useAuth();
   const toast = useToast();
@@ -39,6 +45,10 @@ export default function TradeDetail({
   const [processing, setProcessing] = useState(false);
   const [senderCards, setSenderCards] = useState<TradeCardItem[]>([]);
   const [receiverCards, setReceiverCards] = useState<TradeCardItem[]>([]);
+  const [showHistory, setShowHistory] = useState(false);
+  const [history, setHistory] = useState<TradeHistoryEntry[]>([]);
+  const [showEditMode, setShowEditMode] = useState(false);
+  const [editReceiverCollection, setEditReceiverCollection] = useState<CollectionItem[]>([]);
 
   const isSender = trade.sender_id === user?.id;
   const isReceiver = trade.receiver_id === user?.id;
@@ -46,6 +56,7 @@ export default function TradeDetail({
 
   useEffect(() => {
     loadTradeCards();
+    loadTradeHistory();
   }, [trade]);
 
   const loadTradeCards = async () => {
@@ -86,6 +97,15 @@ export default function TradeDetail({
     }
   };
 
+  const loadTradeHistory = async () => {
+    try {
+      const historyData = await getTradeVersionHistory(trade.id);
+      setHistory(historyData);
+    } catch (error) {
+      console.error('Error loading trade history:', error);
+    }
+  };
+
   const handleAccept = async () => {
     setProcessing(true);
     try {
@@ -110,11 +130,43 @@ export default function TradeDetail({
     }
   };
 
-  const handleCounterOffer = () => {
-    const senderCardsList = senderCards.map(item => item.card);
-    const receiverCardsList = receiverCards.map(item => item.card);
-    onCounterOffer(trade, senderCardsList, receiverCardsList);
-    onClose();
+  const handleEdit = async () => {
+    try {
+      // Load the other user's collection for editing
+      const otherUserId = isSender ? trade.receiver_id : trade.sender_id;
+      const collectionMap = await getUserCollection(otherUserId);
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+      const collection = cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      }));
+
+      setEditReceiverCollection(collection);
+      setShowEditMode(true);
+    } catch (error) {
+      console.error('Error loading collection for edit:', error);
+      toast.error('Failed to load collection');
+    }
+  };
+
+  const handleCounterOffer = async () => {
+    try {
+      // For counter-offer, load sender's collection and swap the cards
+      const collectionMap = await getUserCollection(trade.sender_id);
+      const cardIds = Array.from(collectionMap.keys());
+      const cards = await getCardsByIds(cardIds);
+      const collection = cards.map((card) => ({
+        card,
+        quantity: collectionMap.get(card.id) || 0,
+      }));
+
+      setEditReceiverCollection(collection);
+      setShowEditMode('counter');
+    } catch (error) {
+      console.error('Error loading collection for counter-offer:', error);
+      toast.error('Failed to load collection');
+    }
   };
 
   const senderPrice = calculateTotalPrice(senderCards);
@@ -125,6 +177,40 @@ export default function TradeDetail({
   const yourPrice = isSender ? senderPrice : receiverPrice;
   const theirPrice = isSender ? receiverPrice : senderPrice;
 
+  // For edit mode, determine initial cards based on mode
+  // Include quantity in the card object so TradeCreator can preserve it
+  const isCounterOffer = showEditMode === 'counter';
+  const editInitialSenderCards = isCounterOffer
+    ? theirCards.map(c => ({ ...c.card, quantity: c.quantity }))
+    : yourCards.map(c => ({ ...c.card, quantity: c.quantity }));
+  const editInitialReceiverCards = isCounterOffer
+    ? yourCards.map(c => ({ ...c.card, quantity: c.quantity }))
+    : theirCards.map(c => ({ ...c.card, quantity: c.quantity }));
+
+  if (showEditMode) {
+    return (
+      <TradeCreator
+        receiverId={isSender ? trade.receiver_id : trade.sender_id}
+        receiverUsername={otherUser?.username || 'User'}
+        receiverCollection={editReceiverCollection}
+        onClose={() => {
+          setShowEditMode(false);
+          onClose();
+        }}
+        onTradeCreated={() => {
+          setShowEditMode(false);
+          onTradeUpdated();
+          onClose();
+        }}
+        editMode={true}
+        existingTradeId={trade.id}
+        initialSenderCards={editInitialSenderCards}
+        initialReceiverCards={editInitialReceiverCards}
+        initialMessage={trade.message || ''}
+      />
+    );
+  }
+
   return (
     <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-end md:items-center justify-center p-0 md:p-4">
       <div className="bg-gray-900 w-full md:max-w-4xl md:rounded-2xl flex flex-col max-h-screen md:max-h-[90vh]">
@@ -133,7 +219,7 @@ export default function TradeDetail({
           <div className="flex items-center gap-2">
             <ArrowLeftRight size={20} className="text-blue-400" />
             <div>
-              <h2 className="text-lg font-bold">Trade Details</h2>
+              <h2 className="text-lg font-bold">Trade Details {trade.version > 1 && `(v${trade.version})`}</h2>
               <p className="text-sm text-gray-400">
                 {isSender ? 'To' : 'From'}: {otherUser?.username}
               </p>
@@ -154,6 +240,7 @@ export default function TradeDetail({
               <Loader2 className="animate-spin text-blue-500" size={48} />
             </div>
           ) : (
+            <div className="space-y-4">
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                 {/* Your Side */}
                 <div className="space-y-3">
@@ -233,11 +320,10 @@ export default function TradeDetail({
                   )}
                 </div>
               </div>
-          )}
 
               {/* Message */}
               {trade.message && (
-            <div className="mt-4 p-3 bg-gray-800 rounded-lg">
+                <div className="p-3 bg-gray-800 rounded-lg">
                   <p className="text-sm text-gray-400 mb-1">Message:</p>
                   <p className="text-sm">{trade.message}</p>
                 </div>
@@ -245,22 +331,57 @@ export default function TradeDetail({
 
               {/* Price Difference */}
               {!loading && (senderPrice > 0 || receiverPrice > 0) && (
-            <div className="mt-4 p-3 bg-gray-800 rounded-lg">
+                <div className="p-3 bg-gray-800 rounded-lg">
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-gray-400">Value Difference:</span>
                     <span className={Math.abs(senderPrice - receiverPrice) > 5 ? 'text-yellow-400' : 'text-gray-300'}>
                       ${Math.abs(senderPrice - receiverPrice).toFixed(2)}
-                  {senderPrice > receiverPrice ? ' in your favor' : senderPrice < receiverPrice ? ' in their favor' : ' (balanced)'}
+                      {senderPrice > receiverPrice ? ' in sender favor' : senderPrice < receiverPrice ? ' in receiver favor' : ' (balanced)'}
                     </span>
                   </div>
                 </div>
               )}
+
+              {/* History */}
+              {history.length > 0 && (
+                <div>
+                  <button
+                    onClick={() => setShowHistory(!showHistory)}
+                    className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300"
+                  >
+                    <History size={16} />
+                    {showHistory ? 'Hide' : 'Show'} History ({history.length} {history.length === 1 ? 'version' : 'versions'})
+                  </button>
+
+                  {showHistory && (
+                    <div className="mt-3 space-y-2">
+                      {history.map((entry) => (
+                        <div key={entry.id} className="p-3 bg-gray-800 rounded-lg text-sm">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-semibold text-purple-400">Version {entry.version}</span>
+                            <span className="text-gray-400 text-xs">
+                              Edited by {entry.editor?.username} • {new Date(entry.created_at).toLocaleDateString()}
+                            </span>
+                          </div>
+                          {entry.message && (
+                            <p className="text-gray-300 text-xs">{entry.message}</p>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Actions - Only for pending trades */}
         {trade.status === 'pending' && !loading && (
           <div className="border-t border-gray-800 p-4 space-y-2">
-            {isReceiver ? (
+            {/* Only the user who DIDN'T make the last edit can respond */}
+            {trade.editor_id && trade.editor_id !== user?.id ? (
+              /* User receives the last edit - can accept/decline/counter */
               <>
                 <div className="flex gap-2">
                   <button
@@ -289,16 +410,66 @@ export default function TradeDetail({
                 <button
                   onClick={handleCounterOffer}
                   disabled={processing}
-                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 rounded-lg font-medium transition"
                 >
                   <RefreshCcw size={18} />
                   Make Counter Offer
                 </button>
               </>
-            ) : (
+            ) : trade.editor_id === user?.id ? (
+              /* User made the last edit - waiting for response */
               <p className="text-center text-gray-400 text-sm py-2">
                 Waiting for {otherUser?.username} to respond...
               </p>
+            ) : (
+              /* No editor yet (version 1) - original flow */
+              <>
+                {isSender ? (
+                  <button
+                    onClick={handleEdit}
+                    disabled={processing}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                  >
+                    <Edit size={18} />
+                    Edit Trade Offer
+                  </button>
+                ) : (
+                  <>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleAccept}
+                        disabled={processing}
+                        className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                      >
+                        {processing ? (
+                          <Loader2 className="animate-spin" size={18} />
+                        ) : (
+                          <>
+                            <Check size={18} />
+                            Accept Trade
+                          </>
+                        )}
+                      </button>
+                      <button
+                        onClick={handleDecline}
+                        disabled={processing}
+                        className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-600 hover:bg-red-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                      >
+                        <X size={18} />
+                        Decline
+                      </button>
+                    </div>
+                    <button
+                      onClick={handleCounterOffer}
+                      disabled={processing}
+                      className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                    >
+                      <RefreshCcw size={18} />
+                      Make Counter Offer
+                    </button>
+                  </>
+                )}
+              </>
             )}
           </div>
         )}

src/services/tradesService.ts

@@ -16,11 +16,32 @@ export interface Trade {
   message: string | null;
   created_at: string | null;
   updated_at: string | null;
+  version: number;
+  editor_id: string | null;
   sender?: { username: string | null };
   receiver?: { username: string | null };
   items?: TradeItem[];
 }
 
+export interface TradeHistoryEntry {
+  id: string;
+  trade_id: string;
+  version: number;
+  editor_id: string;
+  message: string | null;
+  created_at: string;
+  editor?: { username: string | null };
+  items?: TradeHistoryItem[];
+}
+
+export interface TradeHistoryItem {
+  id: string;
+  history_id: string;
+  owner_id: string;
+  card_id: string;
+  quantity: number;
+}
+
 export interface CreateTradeParams {
   senderId: string;
   receiverId: string;
@@ -29,6 +50,14 @@ export interface CreateTradeParams {
   receiverCards: { cardId: string; quantity: number }[];
 }
 
+export interface UpdateTradeParams {
+  tradeId: string;
+  editorId: string;
+  message?: string;
+  senderCards: { cardId: string; quantity: number }[];
+  receiverCards: { cardId: string; quantity: number }[];
+}
+
 // Get all trades for a user
 export async function getTrades(userId: string): Promise<Trade[]> {
   const { data, error } = await supabase
@@ -182,3 +211,111 @@ export async function getTradeHistory(userId: string): Promise<Trade[]> {
   if (error) throw error;
   return data as Trade[];
 }
+
+// Update an existing trade (for edits and counter-offers)
+export async function updateTrade(params: UpdateTradeParams): Promise<Trade> {
+  const { tradeId, editorId, message, senderCards, receiverCards } = params;
+
+  // Get current trade info
+  const { data: currentTrade, error: tradeError } = await supabase
+    .from('trades')
+    .select('version, sender_id, receiver_id')
+    .eq('id', tradeId)
+    .single();
+
+  if (tradeError) throw tradeError;
+
+  const newVersion = (currentTrade.version || 1) + 1;
+
+  // Save current state to history before updating
+  const { data: historyEntry, error: historyError } = await supabase
+    .from('trade_history')
+    .insert({
+      trade_id: tradeId,
+      version: currentTrade.version || 1,
+      editor_id: editorId,
+      message: message || null,
+    })
+    .select()
+    .single();
+
+  if (historyError) throw historyError;
+
+  // Save current items to history
+  const { data: currentItems } = await supabase
+    .from('trade_items')
+    .select('*')
+    .eq('trade_id', tradeId);
+
+  if (currentItems && currentItems.length > 0) {
+    const historyItems = currentItems.map(item => ({
+      history_id: historyEntry.id,
+      owner_id: item.owner_id,
+      card_id: item.card_id,
+      quantity: item.quantity,
+    }));
+
+    await supabase.from('trade_history_items').insert(historyItems);
+  }
+
+  // Update the trade
+  const { data: updatedTrade, error: updateError } = await supabase
+    .from('trades')
+    .update({
+      message,
+      version: newVersion,
+      editor_id: editorId,
+      updated_at: new Date().toISOString(),
+    })
+    .eq('id', tradeId)
+    .select()
+    .single();
+
+  if (updateError) throw updateError;
+
+  // Delete existing items
+  await supabase.from('trade_items').delete().eq('trade_id', tradeId);
+
+  // Add new items
+  const senderItems = senderCards.map((card) => ({
+    trade_id: tradeId,
+    owner_id: currentTrade.sender_id,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  const receiverItems = receiverCards.map((card) => ({
+    trade_id: tradeId,
+    owner_id: currentTrade.receiver_id,
+    card_id: card.cardId,
+    quantity: card.quantity,
+  }));
+
+  const allItems = [...senderItems, ...receiverItems];
+
+  if (allItems.length > 0) {
+    const { error: itemsError } = await supabase
+      .from('trade_items')
+      .insert(allItems);
+
+    if (itemsError) throw itemsError;
+  }
+
+  return updatedTrade;
+}
+
+// Get version history for a trade
+export async function getTradeVersionHistory(tradeId: string): Promise<TradeHistoryEntry[]> {
+  const { data, error } = await supabase
+    .from('trade_history')
+    .select(`
+      *,
+      editor:profiles!trade_history_editor_id_fkey(username),
+      items:trade_history_items(*)
+    `)
+    .eq('trade_id', tradeId)
+    .order('version', { ascending: true });
+
+  if (error) throw error;
+  return data as TradeHistoryEntry[];
+}