"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Copy, Download, Upload } from "lucide-react"

const walletAddresses = [
  {
    name: "Primary Wallet",
    address: "0x742d35Cc6634C0532925a3b844Bc3e7e1d6cA2f7",
    balance: "$1612903.225",
    tokens: "16129 DFN",
  },
]

export default function WalletComponent() {
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
  }

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Overall Floating Balance - Orange */}
        <Card className="bg-gradient-to-br from-orange-900 to-orange-800 border-orange-700 hover:border-orange-500 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-orange-200">Overall Floating Balance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-orange-300">$1,612,903.23</div>
            <p className="text-xs text-orange-300/80 mt-1">Total balance available</p>
          </CardContent>
        </Card>

        {/* Received XAU Boxes - Rose */}
        <Card className="bg-gradient-to-br from-rose-900 to-rose-800 border-rose-700 hover:border-rose-500 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-rose-200">Received XAU Boxes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-rose-300">33,333</div>
            <p className="text-xs text-rose-300/80 mt-1">Gold boxes received</p>
          </CardContent>
        </Card>

        {/* Withdrawal Balance - Indigo */}
        <Card className="bg-gradient-to-br from-indigo-900 to-indigo-800 border-indigo-700 hover:border-indigo-500 transition-colors">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium text-indigo-200">Withdrawal Balance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-indigo-300">Nil</div>
            <p className="text-xs text-indigo-300/80 mt-1">Source: XAU-USD</p>
          </CardContent>
        </Card>
      </div>

      {/* Wallet Addresses - Enhanced with gradient styling */}
      <Card className="bg-gradient-to-br from-slate-800 to-slate-900 border-slate-700 mt-6">
        <CardHeader>
          <CardTitle className="text-white">Your Wallets</CardTitle>
          <CardDescription className="text-slate-400">Manage your wallet addresses</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {walletAddresses.map((wallet, idx) => (
            <div
              key={idx}
              className="p-4 bg-gradient-to-r from-violet-900/30 to-blue-900/30 rounded-lg border border-violet-600/50 hover:border-violet-500 transition-colors"
            >
              <div className="flex justify-between items-start mb-3">
                <div>
                  <p className="font-semibold text-white">{wallet.name}</p>
                  <p className="text-xs text-slate-300 mt-1 font-mono break-all">{wallet.address}</p>
                </div>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-violet-600 text-violet-300 hover:bg-violet-700/30 bg-transparent"
                  onClick={() => copyToClipboard(wallet.address)}
                >
                  <Copy className="h-3 w-3" />
                </Button>
              </div>
              <div className="flex justify-between items-center pt-3 border-t border-violet-600/30">
                <div>
                  <p className="text-sm text-slate-400">Balance</p>
                  <p className="font-semibold text-white">{wallet.balance}</p>
                  <p className="text-xs text-amber-400">{wallet.tokens}</p>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-black font-semibold"
                  >
                    <Upload className="h-3 w-3 mr-1" /> Deposit
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="border-indigo-600 text-indigo-300 hover:bg-indigo-700/30 bg-transparent"
                  >
                    <Download className="h-3 w-3 mr-1" /> Withdraw
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Transaction History - Added colorful transaction rows */}
      <Card className="bg-gradient-to-br from-slate-800 to-slate-900 border-slate-700 mt-6">
        <CardHeader>
          <CardTitle className="text-white">Recent Transactions</CardTitle>
          <CardDescription className="text-slate-400">Wallet activity</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {[
              {
                type: "Deposit",
                amount: "+$5,000.00",
                date: "2024-12-20",
                status: "Completed",
                bgColor: "from-green-900/20 to-green-800/20",
              },
              {
                type: "Purchase",
                amount: "-$2,500.00",
                date: "2024-12-18",
                status: "Completed",
                bgColor: "from-rose-900/20 to-rose-800/20",
              },
              {
                type: "Deposit",
                amount: "+$4,500.00",
                date: "2024-12-15",
                status: "Completed",
                bgColor: "from-blue-900/20 to-blue-800/20",
              },
            ].map((txn, idx) => (
              <div
                key={idx}
                className={`flex justify-between items-center p-3 bg-gradient-to-r ${txn.bgColor} rounded-lg hover:opacity-80 transition-opacity border ${txn.amount.startsWith("+") ? "border-green-600/50" : "border-rose-600/50"}`}
              >
                <div>
                  <p className="font-semibold text-white">{txn.type}</p>
                  <p className="text-xs text-slate-400">{txn.date}</p>
                </div>
                <div className="text-right">
                  <p className={`font-semibold ${txn.amount.startsWith("+") ? "text-green-400" : "text-red-400"}`}>
                    {txn.amount}
                  </p>
                  <p className="text-xs text-slate-400">{txn.status}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </>
  )
}