"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Plus, Settings, QrCode, BarChart4, CreditCard, Users, Gift } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function PaymentCodePage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("codes")

  // 模拟数据
  const paymentCodes = [
    { id: 1, name: "社群会员付款码", amount: "19.9", status: "active", totalPayments: 156, totalAmount: 3104.4 },
    { id: 2, name: "课程付款码", amount: "99", status: "active", totalPayments: 78, totalAmount: 7722 },
    { id: 3, name: "咨询服务付款码", amount: "199", status: "active", totalPayments: 45, totalAmount: 8955 },
    { id: 4, name: "产品购买付款码", amount: "299", status: "active", totalPayments: 32, totalAmount: 9568 },
  ]

  const statistics = {
    today: { payments: 24, amount: 2568, customers: 22 },
    week: { payments: 156, amount: 15420, customers: 142 },
    month: { payments: 311, amount: 29845, customers: 289 },
  }

  const distributions = [
    { id: 1, name: "分销返利规则1", type: "percentage", value: "10%", totalDistributed: 1245.6 },
    { id: 2, name: "分销返利规则2", type: "fixed", value: "5元", totalDistributed: 890 },
  ]

  const redPackets = [
    { id: 1, name: "新客红包", amount: "5", totalSent: 156, totalAmount: 780 },
    { id: 2, name: "推广红包", amount: "10", totalSent: 89, totalAmount: 890 },
  ]

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 头部 */}
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between h-14 px-4">
          <div className="flex items-center">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">付款码获客</h1>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" onClick={() => router.push("/scenarios/payment/settings")}>
              <Settings className="h-5 w-5" />
            </Button>
          </div>
        </div>
      </header>

      {/* 统计卡片 */}
      <div className="p-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-medium">数据概览</h2>
              <Badge variant="outline" className="text-blue-500 bg-blue-50">
                今日
              </Badge>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center">
                <p className="text-sm text-gray-500">支付笔数</p>
                <p className="text-xl font-semibold">{statistics.today.payments}</p>
              </div>
              <div className="text-center">
                <p className="text-sm text-gray-500">支付金额</p>
                <p className="text-xl font-semibold">¥{statistics.today.amount}</p>
              </div>
              <div className="text-center">
                <p className="text-sm text-gray-500">新增客户</p>
                <p className="text-xl font-semibold">{statistics.today.customers}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 标签页 */}
      <div className="flex-1 px-4 pb-20">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid grid-cols-4 mb-4">
            <TabsTrigger value="codes" className="text-xs">
              <QrCode className="h-4 w-4 mr-1" />
              付款码
            </TabsTrigger>
            <TabsTrigger value="stats" className="text-xs">
              <BarChart4 className="h-4 w-4 mr-1" />
              数据统计
            </TabsTrigger>
            <TabsTrigger value="distribution" className="text-xs">
              <Users className="h-4 w-4 mr-1" />
              分销返利
            </TabsTrigger>
            <TabsTrigger value="redpacket" className="text-xs">
              <Gift className="h-4 w-4 mr-1" />
              红包池
            </TabsTrigger>
          </TabsList>

          {/* 付款码列表 */}
          <TabsContent value="codes" className="space-y-4">
            <div className="flex justify-end">
              <Button onClick={() => router.push("/scenarios/payment/new")} size="sm">
                <Plus className="h-4 w-4 mr-1" />
                新建付款码
              </Button>
            </div>

            {paymentCodes.map((code) => (
              <Card key={code.id} className="overflow-hidden">
                <CardContent className="p-0">
                  <div className="flex items-center p-4 border-b">
                    <div className="bg-blue-100 rounded-full p-2 mr-3">
                      <CreditCard className="h-5 w-5 text-blue-500" />
                    </div>
                    <div className="flex-1">
                      <h3 className="font-medium">{code.name}</h3>
                      <p className="text-sm text-gray-500">金额: ¥{code.amount}</p>
                    </div>
                    <Badge variant={code.status === "active" ? "success" : "secondary"}>
                      {code.status === "active" ? "启用中" : "已停用"}
                    </Badge>
                  </div>
                  <div className="grid grid-cols-2 divide-x">
                    <div className="p-3 text-center">
                      <p className="text-sm text-gray-500">支付笔数</p>
                      <p className="font-semibold">{code.totalPayments}</p>
                    </div>
                    <div className="p-3 text-center">
                      <p className="text-sm text-gray-500">支付金额</p>
                      <p className="font-semibold">¥{code.totalAmount}</p>
                    </div>
                  </div>
                  <div className="p-3 border-t">
                    <Button
                      variant="ghost"
                      className="w-full text-blue-500"
                      onClick={() => router.push(`/scenarios/payment/${code.id}`)}
                    >
                      查看详情
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>

          {/* 数据统计 */}
          <TabsContent value="stats" className="space-y-4">
            <Card>
              <CardContent className="p-4">
                <h3 className="font-medium mb-3">支付数据统计</h3>
                <div className="space-y-4">
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">今日支付笔数</span>
                    <span className="font-medium">{statistics.today.payments}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">今日支付金额</span>
                    <span className="font-medium">¥{statistics.today.amount}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">今日新增客户</span>
                    <span className="font-medium">{statistics.today.customers}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">本周支付笔数</span>
                    <span className="font-medium">{statistics.week.payments}</span>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">本周支付金额</span>
                    <span className="font-medium">¥{statistics.week.amount}</span>
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <span className="text-gray-500">本月支付金额</span>
                    <span className="font-medium">¥{statistics.month.amount}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="flex justify-center">
              <Button variant="outline" onClick={() => router.push("/scenarios/payment/stats")}>
                查看详细统计
              </Button>
            </div>
          </TabsContent>

          {/* 分销返利 */}
          <TabsContent value="distribution" className="space-y-4">
            <div className="flex justify-end">
              <Button onClick={() => router.push("/scenarios/payment/distribution/new")} size="sm">
                <Plus className="h-4 w-4 mr-1" />
                新建分销规则
              </Button>
            </div>

            {distributions.map((rule) => (
              <Card key={rule.id}>
                <CardContent className="p-4">
                  <div className="flex justify-between items-center mb-3">
                    <h3 className="font-medium">{rule.name}</h3>
                    <Badge variant="outline">{rule.type === "percentage" ? "比例" : "固定金额"}</Badge>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">返利值</span>
                    <span className="font-medium">{rule.value}</span>
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <span className="text-gray-500">已发放金额</span>
                    <span className="font-medium">¥{rule.totalDistributed}</span>
                  </div>
                  <div className="mt-3">
                    <Button
                      variant="ghost"
                      className="w-full text-blue-500"
                      onClick={() => router.push(`/scenarios/payment/distribution/${rule.id}`)}
                    >
                      查看详情
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>

          {/* 红包池 */}
          <TabsContent value="redpacket" className="space-y-4">
            <div className="flex justify-end">
              <Button onClick={() => router.push("/scenarios/payment/redpacket/new")} size="sm">
                <Plus className="h-4 w-4 mr-1" />
                新建红包
              </Button>
            </div>

            {redPackets.map((packet) => (
              <Card key={packet.id}>
                <CardContent className="p-4">
                  <div className="flex justify-between items-center mb-3">
                    <h3 className="font-medium">{packet.name}</h3>
                    <Badge variant="outline" className="text-red-500 bg-red-50">
                      ¥{packet.amount}
                    </Badge>
                  </div>
                  <div className="flex justify-between items-center py-2 border-b">
                    <span className="text-gray-500">已发放数量</span>
                    <span className="font-medium">{packet.totalSent}</span>
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <span className="text-gray-500">已发放金额</span>
                    <span className="font-medium">¥{packet.totalAmount}</span>
                  </div>
                  <div className="mt-3">
                    <Button
                      variant="ghost"
                      className="w-full text-blue-500"
                      onClick={() => router.push(`/scenarios/payment/redpacket/${packet.id}`)}
                    >
                      查看详情
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}