487 lines
19 KiB
TypeScript
487 lines
19 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { X, Check, ArrowLeftRight, DollarSign, Loader2, Edit, RefreshCcw, History, AlertTriangle } from 'lucide-react';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useToast } from '../contexts/ToastContext';
|
|
import { Trade, TradeHistoryEntry, getTradeVersionHistory } from '../services/tradesService';
|
|
import { getUserCollection, getCardsByIds } from '../services/api';
|
|
import { Card } from '../types';
|
|
import TradeCreator from './TradeCreator';
|
|
|
|
interface TradeDetailProps {
|
|
trade: Trade;
|
|
onClose: () => void;
|
|
onAccept: (tradeId: string) => Promise<void>;
|
|
onDecline: (tradeId: string) => Promise<void>;
|
|
onTradeUpdated: () => void;
|
|
}
|
|
|
|
interface TradeCardItem {
|
|
card: Card;
|
|
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;
|
|
return total + (price * quantity);
|
|
}, 0);
|
|
}
|
|
|
|
export default function TradeDetail({
|
|
trade,
|
|
onClose,
|
|
onAccept,
|
|
onDecline,
|
|
onTradeUpdated,
|
|
}: 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 [showHistory, setShowHistory] = useState(false);
|
|
const [history, setHistory] = useState<TradeHistoryEntry[]>([]);
|
|
const [showEditMode, setShowEditMode] = useState(false);
|
|
const [editReceiverCollection, setEditReceiverCollection] = useState<CollectionItem[]>([]);
|
|
|
|
const isUser1 = trade.user1_id === user?.id;
|
|
const isUser2 = trade.user2_id === user?.id;
|
|
const otherUser = isUser1 ? trade.user2 : trade.user1;
|
|
const myUserId = user?.id || '';
|
|
const otherUserId = isUser1 ? trade.user2_id : trade.user1_id;
|
|
|
|
useEffect(() => {
|
|
loadTradeCards();
|
|
loadTradeHistory();
|
|
}, [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 myItems: TradeCardItem[] = [];
|
|
const theirItems: TradeCardItem[] = [];
|
|
|
|
trade.items?.forEach(item => {
|
|
const card = cardMap.get(item.card_id);
|
|
if (!card) return;
|
|
|
|
if (item.owner_id === myUserId) {
|
|
myItems.push({ card, quantity: item.quantity });
|
|
} else {
|
|
theirItems.push({ card, quantity: item.quantity });
|
|
}
|
|
});
|
|
|
|
setSenderCards(myItems);
|
|
setReceiverCards(theirItems);
|
|
} catch (error) {
|
|
console.error('Error loading trade cards:', error);
|
|
toast.error('Failed to load trade details');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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 {
|
|
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 handleEdit = async () => {
|
|
try {
|
|
// Load the other user's collection for editing
|
|
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');
|
|
}
|
|
};
|
|
|
|
// In the symmetric model, counter-offer is the same as edit
|
|
const handleCounterOffer = handleEdit;
|
|
|
|
// senderCards = myCards, receiverCards = theirCards (already calculated correctly)
|
|
const yourCards = senderCards;
|
|
const theirCards = receiverCards;
|
|
const yourPrice = calculateTotalPrice(yourCards);
|
|
const theirPrice = calculateTotalPrice(theirCards);
|
|
|
|
// For edit mode, pre-populate with current cards
|
|
// In the symmetric model, both edit and counter-offer use the same perspective:
|
|
// - Your cards (what you're offering)
|
|
// - Their cards (what you want)
|
|
// Include quantity in the card object so TradeCreator can preserve it
|
|
const editInitialSenderCards = yourCards.map(c => ({ ...c.card, quantity: c.quantity }));
|
|
const editInitialReceiverCards = theirCards.map(c => ({ ...c.card, quantity: c.quantity }));
|
|
|
|
if (showEditMode) {
|
|
return (
|
|
<TradeCreator
|
|
receiverId={otherUserId}
|
|
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]">
|
|
{/* 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 {trade.version > 1 && `(v${trade.version})`}</h2>
|
|
<p className="text-sm text-gray-400">
|
|
With: {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="space-y-4">
|
|
{/* Invalid Trade Warning */}
|
|
{trade.status === 'pending' && !trade.is_valid && (
|
|
<div className="bg-red-900/30 border border-red-600 rounded-lg p-3 flex items-start gap-2">
|
|
<AlertTriangle size={20} className="text-red-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-red-400 text-sm">Trade No Longer Valid</h4>
|
|
<p className="text-red-200 text-xs mt-1">
|
|
One or more cards in this trade are no longer available in the required quantities. This trade cannot be accepted until it is updated.
|
|
</p>
|
|
</div>
|
|
</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">
|
|
You Give
|
|
</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">
|
|
You Receive
|
|
</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="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 && (yourPrice > 0 || theirPrice > 0) && (
|
|
<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(yourPrice - theirPrice) > 5 ? 'text-yellow-400' : 'text-gray-300'}>
|
|
${Math.abs(yourPrice - theirPrice).toFixed(2)}
|
|
{yourPrice > theirPrice ? ' in your favor' : yourPrice < theirPrice ? ' in their 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">
|
|
{/* 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
|
|
onClick={handleAccept}
|
|
disabled={processing || !trade.is_valid}
|
|
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 disabled:cursor-not-allowed rounded-lg font-medium transition"
|
|
title={!trade.is_valid ? 'This trade is no longer valid' : ''}
|
|
>
|
|
{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>
|
|
</>
|
|
) : trade.editor_id === user?.id ? (
|
|
/* User made the last edit - can still edit while waiting for response */
|
|
<>
|
|
<p className="text-center text-gray-400 text-sm py-2">
|
|
Waiting for {otherUser?.username} to respond...
|
|
</p>
|
|
<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} />
|
|
Modify Your Offer
|
|
</button>
|
|
</>
|
|
) : (
|
|
/* No editor yet (initial trade) */
|
|
<>
|
|
{isUser1 ? (
|
|
/* User1 (initiator) can edit their initial offer */
|
|
<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>
|
|
) : (
|
|
/* User2 (partner) can accept/decline/counter */
|
|
<>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={handleAccept}
|
|
disabled={processing || !trade.is_valid}
|
|
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 disabled:cursor-not-allowed rounded-lg font-medium transition"
|
|
title={!trade.is_valid ? 'This trade is no longer valid' : ''}
|
|
>
|
|
{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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|