import { Card } from '../components/ui/Card';
import { Avatar } from '../components/ui/Avatar';
import { mockSoldItems } from '../utils/mockData';
import { formatCurrency, formatDate } from '../utils/format';
import { DollarSign, TrendingUp } from 'lucide-react';

export function SoldItemsPage() {
  const totalValue = mockSoldItems.reduce((sum, item) => sum + item.listing.price, 0);
  const totalEarnings = mockSoldItems.reduce((sum, item) => sum + item.salePrice, 0);

  return (
    <div>
      {/* Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
        <Card>
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-primary-50 flex items-center justify-center">
              <DollarSign className="w-6 h-6 text-primary-500" />
            </div>
            <div>
              <p className="text-sm text-gray-500">Total Listing Value</p>
              <p className="text-2xl font-bold text-gray-900">{formatCurrency(totalValue)}</p>
            </div>
          </div>
        </Card>
        <Card>
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-green-500" />
            </div>
            <div>
              <p className="text-sm text-gray-500">Total Earnings</p>
              <p className="text-2xl font-bold text-gray-900">{formatCurrency(totalEarnings)}</p>
            </div>
          </div>
        </Card>
      </div>

      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Sold Items</h1>
          <p className="text-sm text-gray-500 mt-1">Manage your previously sold items and track your earnings</p>
        </div>
        <select className="px-3 py-2 rounded-xl border border-gray-200 text-sm bg-white focus:outline-none">
          <option>Sort: Most Recent</option>
        </select>
      </div>

      {/* Items */}
      <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
        <div className="hidden sm:grid grid-cols-12 gap-4 px-4 py-3 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wider">
          <div className="col-span-4">Item</div>
          <div className="col-span-2">Listing Price</div>
          <div className="col-span-2">Sale Price</div>
          <div className="col-span-2">Buyer</div>
          <div className="col-span-2">Date</div>
        </div>
        {mockSoldItems.map((item, i) => (
          <div key={i} className="grid grid-cols-12 gap-4 items-center px-4 py-4 border-t border-gray-50 hover:bg-gray-50 transition-colors">
            <div className="col-span-4 flex items-center gap-3">
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-50 to-pink-50 flex items-center justify-center flex-shrink-0">
                <span className="text-xl">
                  {item.listing.category === 'FURNITURE' ? '\uD83E\uDE91' : item.listing.category === 'ELECTRONICS' ? '\uD83C\uDFA7' : item.listing.category === 'CLOTHING' ? '\uD83D\uDC55' : '\u2615'}
                </span>
              </div>
              <span className="text-sm font-medium text-gray-900 truncate">{item.listing.title}</span>
            </div>
            <div className="col-span-2 text-sm text-gray-500">{formatCurrency(item.listing.price)}</div>
            <div className="col-span-2 text-sm font-semibold text-green-600">{formatCurrency(item.salePrice)}</div>
            <div className="col-span-2 flex items-center gap-2">
              <Avatar name={item.buyer.fullName} size="sm" />
              <span className="text-sm text-gray-600 truncate">{item.buyer.fullName}</span>
            </div>
            <div className="col-span-2 text-sm text-gray-400">{formatDate(item.date)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
