"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUpRight, ArrowDownLeft } from "lucide-react"

const trades = [
  {
    id: 1,
    pair: "DFN/USD",
    type: "buy",
    amount: "10 DFN",
    price: "$1,000.00",
    date: "2024-12-28 14:32",
    status: "completed",
  },
  {
    id: 2,
    pair: "DFN/XAU",
    type: "sell",
    amount: "5 DFN",
    price: "0.0118 XAU",
    date: "2024-12-27 10:15",
    status: "completed",
  },
  {
    id: 3,
    pair: "DFN/BTC",
    type: "buy",
    amount: "20 DFN",
    price: "0.0222 BTC",
    date: "2024-12-26 09:45",
    status: "completed",
  },
  {
    id: 4,
    pair: "DFN/USD",
    type: "buy",
    amount: "30 DFN",
    price: "$3,000.00",
    date: "2024-12-25 16:20",
    status: "completed",
  },
  {
    id: 5,
    pair: "DFN/XAU",
    type: "buy",
    amount: "30 DFN",
    price: "0.0708 XAU",
    date: "2024-12-24 11:05",
    status: "completed",
  },
]

export default function TradingActivityComponent() {
  return (
    <>
      {/* Trading Stats - Added gradient backgrounds with different colors */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Total Trades - Green */}
        <Card className="bg-gradient-to-br from-green-900 to-green-800 border-green-700 hover:border-green-500 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-green-200">Total Trades</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-300">42</div>
            <p className="text-xs text-green-300/80 mt-1">Lifetime trades</p>
          </CardContent>
        </Card>

        {/* Win Rate - Cyan */}
        <Card className="bg-gradient-to-br from-cyan-900 to-cyan-800 border-cyan-700 hover:border-cyan-500 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-cyan-200">Win Rate</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-cyan-300">68.5%</div>
            <p className="text-xs text-cyan-300/80 mt-1">Profitable trades</p>
          </CardContent>
        </Card>
      </div>

      {/* Recent Trades Table - Enhanced styling with colorful row backgrounds */}
      <Card className="bg-gradient-to-br from-slate-800 to-slate-900 border-slate-700 mt-6">
        <CardHeader>
          <CardTitle className="text-white">Recent Trading Activity</CardTitle>
          <CardDescription className="text-slate-400">Your latest trades</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-slate-700">
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Pair</th>
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Type</th>
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Amount</th>
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Price</th>
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Date</th>
                  <th className="text-left py-3 px-4 text-slate-300 font-semibold">Status</th>
                </tr>
              </thead>
              <tbody>
                {trades.map((trade) => (
                  <tr
                    key={trade.id}
                    className={`border-b border-slate-700/50 hover:bg-slate-700/50 transition-colors ${trade.type === "buy" ? "bg-green-900/10" : "bg-red-900/10"}`}
                  >
                    <td className="py-3 px-4 text-white font-semibold">{trade.pair}</td>
                    <td className="py-3 px-4">
                      {trade.type === "buy" ? (
                        <span className="flex items-center text-green-400 font-semibold">
                          <ArrowDownLeft className="h-4 w-4 mr-1" /> Buy
                        </span>
                      ) : (
                        <span className="flex items-center text-red-400 font-semibold">
                          <ArrowUpRight className="h-4 w-4 mr-1" /> Sell
                        </span>
                      )}
                    </td>
                    <td className="py-3 px-4 text-white">{trade.amount}</td>
                    <td className="py-3 px-4 text-amber-400 font-semibold">{trade.price}</td>
                    <td className="py-3 px-4 text-slate-400">{trade.date}</td>
                    <td className="py-3 px-4">
                      <Badge className="bg-green-500/20 text-green-400 border-green-500/50 font-semibold">
                        {trade.status}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </>
  )
}