import React from 'react';
import { t } from '@/i18n';
import Taro from '@tarojs/taro';
// Taro mini-program component (WeChat / Alipay)

/**
 * E1. 小程序核心页面 - 支付成功页
 *
 * 支付成功庆祝动画 + 订单信息卡片 + 跳转按钮
 */

const PaymentSuccessPage: React.FC = () => {
  const params = Taro.getCurrentInstance().router?.params || {};
  const couponName = params.couponName ? decodeURIComponent(params.couponName) : '--';
  const amount = params.amount || '--';
  const orderId = params.orderId || '--';
  const payTime = new Date().toLocaleString('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit',
  });

  const orderInfo = [
    { label: t('payment_success_coupon_name'), value: couponName },
    { label: t('payment_success_pay_amount'), value: amount.startsWith('¥') ? amount : `¥${amount}` },
    { label: t('payment_success_order_no'), value: orderId },
    { label: t('payment_success_pay_time'), value: payTime },
  ];

  const handleViewCoupon = () => {
    Taro.reLaunch({ url: '/pages/my-coupons/index' });
  };

  const handleContinue = () => {
    Taro.reLaunch({ url: '/pages/home/index' });
  };

  return (
    <view className="success-page">
      {/* Success Icon */}
      <view className="success-hero">
        <view className="success-circle">
          <text className="success-check">✓</text>
        </view>
        <text className="success-title">{t('payment_success_title')}</text>
        <text className="success-hint">{t('payment_success_hint')}</text>
      </view>

      {/* Order Info Card */}
      <view className="order-card">
        {orderInfo.map((item, i) => (
          <view key={i} className="order-row">
            <text className="order-label">{item.label}</text>
            <text className="order-value">{item.value}</text>
          </view>
        ))}
      </view>

      {/* Action Buttons */}
      <view className="action-buttons">
        <view className="btn-primary" onClick={handleViewCoupon}>
          <text className="btn-primary-text">{t('payment_success_view_coupon')}</text>
        </view>
        <view className="btn-outline" onClick={handleContinue}>
          <text className="btn-outline-text">{t('payment_success_continue')}</text>
        </view>
      </view>
    </view>
  );
};

export default PaymentSuccessPage;

/*
CSS (index.scss):

.success-page { background: #F8F9FC; min-height: 100vh; padding: 0 32rpx; }

.success-hero {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 120rpx; padding-bottom: 48rpx;
}
.success-circle {
  width: 160rpx; height: 160rpx; border-radius: 50%;
  background: linear-gradient(135deg, #00C48C, #00E6A0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16rpx 40rpx rgba(0,196,140,0.3);
}
.success-check { color: white; font-size: 72rpx; font-weight: 700; }
.success-title {
  font-size: 40rpx; font-weight: 700; color: #141723;
  margin-top: 32rpx;
}
.success-hint {
  font-size: 26rpx; color: #5C6478; margin-top: 12rpx;
  text-align: center;
}

.order-card {
  background: white; border-radius: 16rpx; padding: 28rpx;
  border: 1rpx solid #F1F3F8; margin-bottom: 40rpx;
}
.order-row {
  display: flex; justify-content: space-between;
  padding: 16rpx 0; border-bottom: 1rpx solid #F1F3F8;
}
.order-row:last-child { border-bottom: none; }
.order-label { font-size: 26rpx; color: #5C6478; }
.order-value { font-size: 26rpx; color: #141723; font-weight: 500; }

.action-buttons {
  display: flex; flex-direction: column; gap: 20rpx;
  padding: 0 16rpx;
}
.btn-primary {
  height: 96rpx; border-radius: 16rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  display: flex; align-items: center; justify-content: center;
}
.btn-primary-text { color: white; font-size: 30rpx; font-weight: 600; }
.btn-outline {
  height: 96rpx; border-radius: 16rpx;
  background: white; border: 2rpx solid #6C5CE7;
  display: flex; align-items: center; justify-content: center;
}
.btn-outline-text { color: #6C5CE7; font-size: 30rpx; font-weight: 600; }
*/
