add trade detail view and counter offer functionality

src/components/Community.tsx

@@ -26,6 +26,7 @@ import {
 import { getUserCollection, getCardsByIds } from '../services/api';
 import { Card } from '../types';
 import TradeCreator from './TradeCreator';
+import TradeDetail from './TradeDetail';
 import ConfirmModal from './ConfirmModal';
 
 interface UserProfile {
@@ -79,6 +80,13 @@ export default function Community() {
   const [tradeHistory, setTradeHistory] = useState<Trade[]>([]);
   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('');
@@ -310,6 +318,38 @@ 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 () => {
     if (!user) return;
@@ -348,15 +388,34 @@ export default function Community() {
   };
 
   // ============ RENDER HELPERS ============
+  const calculateTradeItemsPrice = (items: TradeItem[] | undefined, ownerId: string): number => {
+    const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
+    return ownerItems.reduce((total, item) => {
+      const card = tradeCardDetails.get(item.card_id);
+      const price = card?.prices?.usd ? parseFloat(card.prices.usd) : 0;
+      return total + (price * item.quantity);
+    }, 0);
+  };
+
   const renderTradeItems = (items: TradeItem[] | undefined, ownerId: string, label: string) => {
     const ownerItems = items?.filter((i) => i.owner_id === ownerId) || [];
+    const totalPrice = calculateTradeItemsPrice(items, ownerId);
+
     if (ownerItems.length === 0) {
-      return <p className="text-gray-500 text-xs">{label}: Gift</p>;
+      return (
+        <div>
+          <p className="text-gray-400 text-xs mb-1">{label}:</p>
+          <p className="text-gray-500 text-xs">Gift</p>
+        </div>
+      );
     }
 
     return (
       <div>
-        <p className="text-gray-400 text-xs mb-1">{label}:</p>
+        <div className="flex items-center justify-between mb-1">
+          <p className="text-gray-400 text-xs">{label}:</p>
+          <p className="text-green-400 text-xs font-semibold">${totalPrice.toFixed(2)}</p>
+        </div>
         <div className="flex flex-wrap gap-1">
           {ownerItems.map((item) => {
             const card = tradeCardDetails.get(item.card_id);
@@ -781,8 +840,16 @@ export default function Community() {
                     pending: 'text-yellow-400',
                   };
 
+                  const canViewDetails = !isSender && trade.status === 'pending';
+
                   return (
-                    <div key={trade.id} className="bg-gray-800 rounded-lg p-3 space-y-2">
+                    <div
+                      key={trade.id}
+                      className={`bg-gray-800 rounded-lg p-3 space-y-2 ${
+                        canViewDetails ? 'cursor-pointer hover:bg-gray-750 transition-colors' : ''
+                      }`}
+                      onClick={() => canViewDetails && setSelectedTrade(trade)}
+                    >
                       {/* Header */}
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-2 min-w-0">
@@ -802,36 +869,22 @@ export default function Community() {
                         {renderTradeItems(trade.items, trade.receiver_id, isSender ? 'Get' : 'Send')}
                       </div>
 
-                      {/* Actions */}
+                      {canViewDetails && (
-                      {tradesSubTab === 'pending' && (
+                        <p className="text-xs text-blue-400 text-center pt-1">
-                        <div className="flex gap-2 pt-2 border-t border-gray-700">
+                          Tap to view details
-                          {isSender ? (
+                        </p>
-                            <button
+                      )}
-                              onClick={() => handleCancelTrade(trade.id)}
+
-                              disabled={processingTradeId === trade.id}
+                      {/* Actions - Only show quick actions for sender (cancel) */}
-                              className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-gray-700 rounded-lg text-sm"
+                      {tradesSubTab === 'pending' && isSender && (
-                            >
+                        <div className="flex gap-2 pt-2 border-t border-gray-700" onClick={(e) => e.stopPropagation()}>
-                              <X size={14} /> Cancel
+                          <button
-                            </button>
+                            onClick={() => handleCancelTrade(trade.id)}
-                          ) : (
+                            disabled={processingTradeId === trade.id}
-                            <>
+                            className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-gray-700 rounded-lg text-sm"
-                              <button
+                          >
-                                onClick={() => handleAcceptTrade(trade.id)}
+                            <X size={14} /> Cancel
-                                disabled={processingTradeId === trade.id}
+                          </button>
-                                className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-green-600 rounded-lg text-sm"
-                              >
-                                {processingTradeId === trade.id ? <Loader2 className="animate-spin" size={14} /> : <Check size={14} />}
-                                Accept
-                              </button>
-                              <button
-                                onClick={() => handleDeclineTrade(trade.id)}
-                                disabled={processingTradeId === trade.id}
-                                className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-red-600 rounded-lg text-sm"
-                              >
-                                <X size={14} /> Decline
-                              </button>
-                            </>
-                          )}
                         </div>
                       )}
                     </div>
@@ -890,6 +943,32 @@ export default function Community() {
         )}
       </div>
 
+      {/* Trade Detail Modal */}
+      {selectedTrade && (
+        <TradeDetail
+          trade={selectedTrade}
+          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);
+            loadTradesData();
+            toast.success('Counter offer sent!');
+          }}
+        />
+      )}
+
       {/* Confirm Modal */}
       <ConfirmModal
         isOpen={confirmModal.isOpen}

src/components/TradeDetail.tsx

@@ -0,0 +1,308 @@
+import React, { useState, useEffect } from 'react';
+import { X, Check, ArrowLeftRight, DollarSign, Loader2, RefreshCcw } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { useToast } from '../contexts/ToastContext';
+import { Trade, TradeItem } from '../services/tradesService';
+import { Card } from '../types';
+import { getCardsByIds } from '../services/api';
+
+interface TradeDetailProps {
+  trade: Trade;
+  onClose: () => void;
+  onAccept: (tradeId: string) => Promise<void>;
+  onDecline: (tradeId: string) => Promise<void>;
+  onCounterOffer: (trade: Trade, senderCards: Card[], receiverCards: Card[]) => void;
+}
+
+interface TradeCardItem {
+  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;
+    return total + (price * quantity);
+  }, 0);
+}
+
+export default function TradeDetail({
+  trade,
+  onClose,
+  onAccept,
+  onDecline,
+  onCounterOffer,
+}: TradeDetailProps) {
+  const { user } = useAuth();
+  const toast = useToast();
+  const [loading, setLoading] = useState(true);
+  const [processing, setProcessing] = useState(false);
+  const [senderCards, setSenderCards] = useState<TradeCardItem[]>([]);
+  const [receiverCards, setReceiverCards] = useState<TradeCardItem[]>([]);
+
+  const isSender = trade.sender_id === user?.id;
+  const isReceiver = trade.receiver_id === user?.id;
+  const otherUser = isSender ? trade.receiver : trade.sender;
+
+  useEffect(() => {
+    loadTradeCards();
+  }, [trade]);
+
+  const loadTradeCards = async () => {
+    setLoading(true);
+    try {
+      const allCardIds = trade.items?.map(item => item.card_id) || [];
+      if (allCardIds.length === 0) {
+        setSenderCards([]);
+        setReceiverCards([]);
+        return;
+      }
+
+      const cards = await getCardsByIds(allCardIds);
+      const cardMap = new Map<string, Card>();
+      cards.forEach(card => cardMap.set(card.id, card));
+
+      const senderItems: TradeCardItem[] = [];
+      const receiverItems: TradeCardItem[] = [];
+
+      trade.items?.forEach(item => {
+        const card = cardMap.get(item.card_id);
+        if (!card) return;
+
+        if (item.owner_id === trade.sender_id) {
+          senderItems.push({ card, quantity: item.quantity });
+        } else {
+          receiverItems.push({ card, quantity: item.quantity });
+        }
+      });
+
+      setSenderCards(senderItems);
+      setReceiverCards(receiverItems);
+    } catch (error) {
+      console.error('Error loading trade cards:', error);
+      toast.error('Failed to load trade details');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAccept = async () => {
+    setProcessing(true);
+    try {
+      await onAccept(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error accepting trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleDecline = async () => {
+    setProcessing(true);
+    try {
+      await onDecline(trade.id);
+      onClose();
+    } catch (error) {
+      console.error('Error declining trade:', error);
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  const handleCounterOffer = () => {
+    const senderCardsList = senderCards.map(item => item.card);
+    const receiverCardsList = receiverCards.map(item => item.card);
+    onCounterOffer(trade, senderCardsList, receiverCardsList);
+    onClose();
+  };
+
+  const senderPrice = calculateTotalPrice(senderCards);
+  const receiverPrice = calculateTotalPrice(receiverCards);
+
+  const yourCards = isSender ? senderCards : receiverCards;
+  const theirCards = isSender ? receiverCards : senderCards;
+  const yourPrice = isSender ? senderPrice : receiverPrice;
+  const theirPrice = isSender ? receiverPrice : senderPrice;
+
+  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]">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-800">
+          <div className="flex items-center gap-2">
+            <ArrowLeftRight size={20} className="text-blue-400" />
+            <div>
+              <h2 className="text-lg font-bold">Trade Details</h2>
+              <p className="text-sm text-gray-400">
+                {isSender ? 'To' : 'From'}: {otherUser?.username}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-800 rounded-lg transition"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="animate-spin text-blue-500" size={48} />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {/* Your Side */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-green-400">
+                    {isSender ? 'You Give' : 'You Receive'}
+                  </h3>
+                  <div className="flex items-center gap-1 text-green-400 text-sm">
+                    <DollarSign size={14} />
+                    {yourPrice.toFixed(2)}
+                  </div>
+                </div>
+
+                {yourCards.length === 0 ? (
+                  <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                ) : (
+                  <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                    {yourCards.map((item, idx) => (
+                      <div key={idx} className="relative rounded-lg overflow-hidden">
+                        <img
+                          src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                          alt={item.card.name}
+                          className="w-full h-auto"
+                        />
+                        {item.quantity > 1 && (
+                          <div className="absolute top-1 right-1 bg-green-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                            x{item.quantity}
+                          </div>
+                        )}
+                        {item.card.prices?.usd && (
+                          <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                            ${item.card.prices.usd}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Their Side */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-blue-400">
+                    {isSender ? 'You Receive' : 'They Give'}
+                  </h3>
+                  <div className="flex items-center gap-1 text-blue-400 text-sm">
+                    <DollarSign size={14} />
+                    {theirPrice.toFixed(2)}
+                  </div>
+                </div>
+
+                {theirCards.length === 0 ? (
+                  <p className="text-gray-500 text-center py-8">Gift (no cards)</p>
+                ) : (
+                  <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                    {theirCards.map((item, idx) => (
+                      <div key={idx} className="relative rounded-lg overflow-hidden">
+                        <img
+                          src={item.card.image_uris?.small || item.card.image_uris?.normal}
+                          alt={item.card.name}
+                          className="w-full h-auto"
+                        />
+                        {item.quantity > 1 && (
+                          <div className="absolute top-1 right-1 bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded font-semibold">
+                            x{item.quantity}
+                          </div>
+                        )}
+                        {item.card.prices?.usd && (
+                          <div className="absolute bottom-1 left-1 bg-gray-900/90 text-white text-[10px] px-1 py-0.5 rounded">
+                            ${item.card.prices.usd}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Message */}
+          {trade.message && (
+            <div className="mt-4 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>
+          )}
+
+          {/* Price Difference */}
+          {!loading && (senderPrice > 0 || receiverPrice > 0) && (
+            <div className="mt-4 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)'}
+                </span>
+              </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 ? (
+              <>
+                <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-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded-lg font-medium transition"
+                >
+                  <RefreshCcw size={18} />
+                  Make Counter Offer
+                </button>
+              </>
+            ) : (
+              <p className="text-center text-gray-400 text-sm py-2">
+                Waiting for {otherUser?.username} to respond...
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}