import {
  ArrowDownLeft,
  ArrowUpRight,
  CreditCard,
  DollarSign,
  RefreshCw,
  Wallet,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { mockTransactions, walletBalance } from "@/lib/mock-data"

const typeLabels: Record<string, string> = {
  topup: "充值",
  payment: "支付",
  income: "收入",
  withdrawal: "提现",
  refund: "退款",
}

const typeIcons: Record<string, typeof ArrowUpRight> = {
  topup: ArrowDownLeft,
  payment: ArrowUpRight,
  income: ArrowDownLeft,
  withdrawal: ArrowUpRight,
  refund: ArrowDownLeft,
}

export default function WalletPage() {
  return (
    <div className="max-w-2xl space-y-6">
      <h1 className="text-2xl font-bold">钱包</h1>

      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">账户余额</p>
              <p className="text-3xl font-bold mt-1">¥{walletBalance.toFixed(2)}</p>
            </div>
            <Wallet className="h-10 w-10 text-muted-foreground" />
          </div>
          <div className="flex gap-2 mt-4">
            <Button>
              <DollarSign className="mr-1 h-4 w-4" />
              充值
            </Button>
            <Button variant="outline">
              <CreditCard className="mr-1 h-4 w-4" />
              提现
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">快捷充值</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-3 gap-2">
            {[50, 100, 200, 500, 1000, 2000].map((amount) => (
              <Button key={`amount-${amount}`} variant="outline" className="h-12">
                ¥{amount}
              </Button>
            ))}
          </div>
          <Separator />
          <div className="flex gap-2">
            <Input placeholder="自定义金额" type="number" />
            <Button>充值</Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-base">交易记录</CardTitle>
          <Button variant="ghost" size="sm">
            <RefreshCw className="mr-1 h-3.5 w-3.5" />
            刷新
          </Button>
        </CardHeader>
        <CardContent className="space-y-3">
          {mockTransactions.map((tx) => {
            const Icon = typeIcons[tx.type]
            const isIncome = tx.amount > 0
            return (
              <div key={tx.id} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                    <Icon className="h-4 w-4" />
                  </div>
                  <div>
                    <p className="text-sm font-medium">{tx.description}</p>
                    <p className="text-xs text-muted-foreground">
                      {new Date(tx.createdAt).toLocaleString("zh-CN")}
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  <p className={`text-sm font-medium ${isIncome ? "text-green-600" : ""}`}>
                    {isIncome ? "+" : ""}¥{Math.abs(tx.amount).toFixed(2)}
                  </p>
                  <Badge variant="outline" className="text-[10px]">
                    {typeLabels[tx.type]}
                  </Badge>
                </div>
              </div>
            )
          })}
        </CardContent>
      </Card>
    </div>
  )
}