import { View, Text } from '@tarojs/components'
import Taro, { useLoad, useRouter, navigateTo } from '@tarojs/taro'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Navbar, NavbarPresets } from '@/components/ui/navbar'

export default function PaySuccessPage() {
  const router = useRouter()
  const {
    totalPrice = '0',
    passengerCount = '0',
    orderId = ''
  } = router.params

  useLoad(() => {
    console.log('支付成功页面加载，订单ID:', orderId)
  })

  // 查看订单
  const handleViewOrder = () => {
    navigateTo({
      url: '/pages/orders/orders'
    })
  }

  // 返回首页
  const handleBackToHome = () => {
    navigateTo({
      url: '/pages/home/index'
    })
  }

  return (
    <View className="min-h-screen bg-gradient-to-b from-primary to-primary-dark">
      {/* 导航栏 */}
      <Navbar
        title="支付成功"
        leftIcon="i-heroicons-arrow-left-20-solid"
        onClickLeft={() => Taro.navigateBack()}
        {...NavbarPresets.transparent}
      />

      <View className="p-8 text-center pt-20">
        {/* 成功图标 */}
        <View className="flex flex-col items-center justify-center mb-8">
          <View className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center mb-6">
            <Text className="text-6xl text-white">✅</Text>
          </View>
          <Text className="text-white text-3xl font-bold mb-2">支付成功！</Text>
          <Text className="text-white/80 text-sm">感谢您的信任与支持</Text>
        </View>

        {/* 支付信息 */}
        <Card className="mb-6 bg-white/95 backdrop-blur-sm border-white/40">
          <CardContent className="p-6">
            <View className="space-y-4">
              <View className="flex justify-between items-center">
                <Text className="text-sm text-gray-600">支付金额</Text>
                <Text className="text-lg font-bold text-gray-900">¥{totalPrice}</Text>
              </View>
              <View className="flex justify-between items-center">
                <Text className="text-sm text-gray-600">购票数量</Text>
                <Text className="text-lg font-bold text-gray-900">{passengerCount}张</Text>
              </View>
            </View>
          </CardContent>
        </Card>

        {/* 操作按钮 */}
        <View className="flex gap-4">
          <Button
            variant="outline"
            size="lg"
            onClick={handleBackToHome}
            className="flex-1 bg-white text-primary border-primary hover:bg-primary/5"
          >
            返回首页
          </Button>
          <Button
            variant="default"
            size="lg"
            onClick={handleViewOrder}
            className="flex-1 bg-white text-primary border-white hover:bg-primary hover:text-white"
          >
            查看订单
          </Button>
        </View>
      </View>
    </View>
  )
}