import React, { useState, useEffect } from 'react';
import { t } from '@/i18n';
import Taro from '@tarojs/taro';
import { getCouponDetail } from '../../services/coupon';
import type { CouponItem } from '../../services/coupon';
// Taro mini-program component (WeChat / Alipay)

/**
 * E2. 小程序核心页面 - 持有券详情
 *
 * QR code card (gradient bg) + coupon info + action buttons + usage rules
 * 支持转赠 / 出售操作
 */

const usageRules = [
  t('my_coupon_use_in_store'),
  t('my_coupon_use_in_time'),
  t('my_coupon_one_per_visit'),
  t('my_coupon_no_cash'),
];

const MyCouponDetailPage: React.FC = () => {
  const [coupon, setCoupon] = useState<CouponItem | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const params = Taro.getCurrentInstance().router?.params;
    const id = params?.id;
    if (!id) {
      setLoading(false);
      return;
    }
    getCouponDetail(id)
      .then((data) => setCoupon(data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const handleTransfer = () => {
    if (!coupon) return;
    Taro.navigateTo({ url: `/pages/transfer/index?couponId=${coupon.id}&couponName=${encodeURIComponent(coupon.name)}` });
  };

  const handleSell = () => {
    Taro.showModal({
      title: t('my_coupon_sell'),
      content: t('my_coupon_sell_in_app'),
      showCancel: false,
      confirmText: t('confirm'),
    });
  };

  if (loading) {
    return (
      <view className="coupon-detail-page" style={{ display: 'flex', justifyContent: 'center', paddingTop: '200rpx' }}>
        <text style={{ color: '#A0A8BE', fontSize: '28rpx' }}>{t('loading') || '加载中...'}</text>
      </view>
    );
  }

  if (!coupon) {
    return (
      <view className="coupon-detail-page" style={{ display: 'flex', justifyContent: 'center', paddingTop: '200rpx' }}>
        <text style={{ color: '#A0A8BE', fontSize: '28rpx' }}>{t('empty') || '未找到券信息'}</text>
      </view>
    );
  }

  const infoRows = [
    { label: t('coupon_face_value'), value: `¥${coupon.faceValue.toFixed(2)}` },
    { label: t('my_coupon_purchase_price'), value: `¥${coupon.currentPrice.toFixed(2)}` },
    { label: t('coupon_valid_until'), value: coupon.expiryDate ? coupon.expiryDate.split('T')[0].replace(/-/g, '/') : '--' },
    { label: t('my_coupon_order_no'), value: coupon.id },
    { label: t('my_coupon_resell_count'), value: coupon.isTransferable ? t('my_coupon_transfer') : '--' },
  ];

  return (
    <view className="coupon-detail-page">
      {/* QR Code Card */}
      <view className="qr-card">
        <view className="qr-header">
          <view className="qr-brand-row">
            <text className="qr-brand">{coupon.brandName || coupon.category}</text>
            <view className="qr-status">
              <text className="qr-status-text">{t('my_coupon_active')}</text>
            </view>
          </view>
          <text className="qr-name">{coupon.name}</text>
        </view>

        <view className="qr-code-area">
          <view className="qr-placeholder">
            <text className="qr-placeholder-text">QR CODE</text>
          </view>
        </view>

        <text className="qr-code-text">GNX-{coupon.id.slice(0, 8).toUpperCase()}</text>
        <text className="qr-hint">{t('my_coupon_show_qr_hint')}</text>
      </view>

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

      {/* Action Buttons */}
      <view className="action-row">
        <view className="action-btn action-btn-secondary" onClick={handleTransfer}>
          <text className="action-btn-secondary-text">{t('my_coupon_transfer')}</text>
        </view>
        <view className="action-btn action-btn-outline" onClick={handleSell}>
          <text className="action-btn-outline-text">{t('my_coupon_sell')}</text>
        </view>
      </view>

      {/* Usage Rules */}
      <view className="rules-card">
        <text className="rules-title">{t('my_coupon_usage_note')}</text>
        {usageRules.map((rule, i) => (
          <view key={i} className="rule-item">
            <text className="rule-dot">•</text>
            <text className="rule-text">{rule}</text>
          </view>
        ))}
      </view>
    </view>
  );
};

export default MyCouponDetailPage;

/*
CSS (index.scss):

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

.qr-card {
  margin-top: 24rpx; padding: 32rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 24rpx;
  display: flex; flex-direction: column; align-items: center;
}
.qr-header { width: 100%; margin-bottom: 24rpx; }
.qr-brand-row {
  display: flex; align-items: center; justify-content: space-between;
}
.qr-brand { font-size: 26rpx; color: rgba(255,255,255,0.8); }
.qr-status {
  padding: 4rpx 16rpx; background: rgba(0,196,140,0.2);
  border: 1rpx solid rgba(0,196,140,0.5); border-radius: 999rpx;
}
.qr-status-text { font-size: 22rpx; color: #00E6A0; font-weight: 600; }
.qr-name {
  font-size: 32rpx; font-weight: 600; color: white; margin-top: 8rpx;
}

.qr-code-area {
  width: 360rpx; height: 360rpx;
  background: white; border-radius: 16rpx;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20rpx;
}
.qr-placeholder {
  width: 280rpx; height: 280rpx;
  border: 4rpx dashed #E4E7F0; border-radius: 8rpx;
  display: flex; align-items: center; justify-content: center;
}
.qr-placeholder-text { font-size: 28rpx; color: #A0A8BE; font-weight: 600; }

.qr-code-text {
  font-size: 28rpx; color: white; font-weight: 600;
  font-family: 'Menlo', 'Courier New', monospace;
  letter-spacing: 2rpx; margin-bottom: 8rpx;
}
.qr-hint { font-size: 22rpx; color: rgba(255,255,255,0.7); }

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

.action-row {
  display: flex; gap: 20rpx; margin-top: 20rpx;
}
.action-btn { flex: 1; height: 88rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
.action-btn-secondary { background: #F3F1FF; }
.action-btn-secondary-text { color: #6C5CE7; font-size: 28rpx; font-weight: 600; }
.action-btn-outline { background: white; border: 2rpx solid #F1F3F8; }
.action-btn-outline-text { color: #5C6478; font-size: 28rpx; font-weight: 600; }

.rules-card {
  background: white; border-radius: 16rpx; padding: 24rpx;
  border: 1rpx solid #F1F3F8; margin-top: 20rpx;
}
.rules-title { font-size: 28rpx; font-weight: 600; color: #141723; margin-bottom: 16rpx; }
.rule-item { display: flex; align-items: flex-start; margin-bottom: 12rpx; }
.rule-dot { color: #A0A8BE; margin-right: 12rpx; font-size: 24rpx; }
.rule-text { font-size: 24rpx; color: #5C6478; line-height: 1.5; }
*/
