import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import { t } from '@/i18n';
import { getKycStatus, submitKyc } from '../../services/user';
import type { KycStatus } from '../../services/user';
// Taro mini-program component

/**
 * P2. KYC 身份认证
 *
 * 当前认证等级 + 3级认证卡片
 */

interface KycTier {
  level: string;
  levelNum: number;
  titleKey: string;
  descKey: string;
  featureKey: string;
  limitKey: string;
  icon: string;
}

const tiers: KycTier[] = [
  {
    level: 'L1',
    levelNum: 1,
    titleKey: 'kyc_l1_title',
    descKey: 'kyc_l1_desc',
    featureKey: 'kyc_l1_feature',
    limitKey: 'kyc_l1_limit',
    icon: '\u2705',
  },
  {
    level: 'L2',
    levelNum: 2,
    titleKey: 'kyc_l2_title',
    descKey: 'kyc_l2_desc',
    featureKey: 'kyc_l2_feature',
    limitKey: 'kyc_l2_limit',
    icon: '\uD83D\uDD12',
  },
  {
    level: 'L3',
    levelNum: 3,
    titleKey: 'kyc_l3_title',
    descKey: 'kyc_l3_desc',
    featureKey: 'kyc_l3_feature',
    limitKey: 'kyc_l3_limit',
    icon: '\uD83D\uDD12',
  },
];

const KycPage: React.FC = () => {
  const [kycStatus, setKycStatus] = useState<KycStatus | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getKycStatus()
      .then((data) => setKycStatus(data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const currentLevel = kycStatus?.level ?? 1;

  const getTierStatus = (tier: KycTier): 'completed' | 'pending' | 'locked' => {
    if (tier.levelNum <= currentLevel) return 'completed';
    if (kycStatus?.status === 'pending' && tier.levelNum === currentLevel + 1) return 'pending';
    return 'locked';
  };

  const handleVerify = (tier: KycTier) => {
    if (tier.levelNum <= currentLevel) return;

    Taro.showModal({
      title: t('kyc_go_verify'),
      content: t('kyc_verify_in_app'),
      showCancel: true,
      confirmText: t('confirm'),
      cancelText: t('cancel'),
      success: (res) => {
        if (res.confirm) {
          submitKyc({ level: tier.levelNum, documents: {} })
            .then(() => {
              Taro.showToast({ title: t('kyc_submitted') || '已提交', icon: 'success' });
            })
            .catch(() => {});
        }
      },
    });
  };

  const currentTierTitleKey = tiers.find((t) => t.levelNum === currentLevel)?.titleKey || 'kyc_l1_title';
  const currentTierLimitKey = tiers.find((t) => t.levelNum === currentLevel)?.limitKey || 'kyc_l1_limit';

  return (
    <view className="kyc-page">
      {/* Current Level Card */}
      <view className="kyc-current-card">
        <view className="kyc-current-top">
          <text className="kyc-shield-icon">{'\uD83D\uDEE1\uFE0F'}</text>
          <text className="kyc-current-label">{t('kyc_current_level')}</text>
        </view>
        <text className="kyc-current-title">{loading ? '...' : t(currentTierTitleKey)}</text>
        <view className="kyc-current-limit">
          <text className="kyc-limit-label">{t('kyc_daily_limit')}</text>
          <text className="kyc-limit-value">{loading ? '...' : (kycStatus?.dailyLimit ? `$${kycStatus.dailyLimit}` : t(currentTierLimitKey))}</text>
        </view>
      </view>

      {/* Tier Cards */}
      <view className="kyc-tiers">
        {tiers.map((tier) => {
          const status = getTierStatus(tier);
          return (
            <view
              key={tier.level}
              className={`kyc-tier-card ${status === 'completed' ? 'kyc-tier-completed' : 'kyc-tier-locked'}`}
            >
              <view className="kyc-tier-header">
                <view className="kyc-tier-icon-row">
                  <text className="kyc-tier-icon">{status === 'completed' ? '\u2705' : tier.icon}</text>
                  <text className="kyc-tier-title">{t(tier.titleKey)}</text>
                </view>
                {status === 'completed' && (
                  <view className="kyc-completed-badge">
                    <text className="kyc-completed-text">{t('kyc_completed')}</text>
                  </view>
                )}
                {status === 'pending' && (
                  <view className="kyc-completed-badge" style={{ background: '#FFF8E6' }}>
                    <text className="kyc-completed-text" style={{ color: '#FF9500' }}>{t('kyc_pending') || '审核中'}</text>
                  </view>
                )}
              </view>

              <text className="kyc-tier-desc">{t(tier.descKey)}</text>

              <view className="kyc-tier-features">
                <view className="kyc-feature-row">
                  <text className="kyc-feature-dot">•</text>
                  <text className="kyc-feature-text">{t(tier.featureKey)}</text>
                </view>
                <view className="kyc-feature-row">
                  <text className="kyc-feature-dot">•</text>
                  <text className="kyc-feature-text">{t('kyc_daily_limit')}: {t(tier.limitKey)}</text>
                </view>
              </view>

              {status === 'locked' && (
                <view className="kyc-verify-btn" onClick={() => handleVerify(tier)}>
                  <text className="kyc-verify-text">{t('kyc_go_verify')}</text>
                </view>
              )}
            </view>
          );
        })}
      </view>
    </view>
  );
};

export default KycPage;

/*
CSS:

.kyc-page { background: #F8F9FC; min-height: 100vh; padding-bottom: 60rpx; }

.kyc-current-card {
  margin: 32rpx; padding: 36rpx 32rpx;
  background: linear-gradient(135deg, #6C5CE7, #4834D4);
  border-radius: 24rpx;
}
.kyc-current-top {
  display: flex; align-items: center; margin-bottom: 16rpx;
}
.kyc-shield-icon { font-size: 36rpx; margin-right: 10rpx; }
.kyc-current-label { font-size: 24rpx; color: rgba(255,255,255,0.7); }
.kyc-current-title {
  display: block; font-size: 40rpx; font-weight: 700; color: white;
  margin-bottom: 20rpx;
}
.kyc-current-limit {
  display: flex; align-items: center;
  padding-top: 20rpx; border-top: 1rpx solid rgba(255,255,255,0.2);
}
.kyc-limit-label { font-size: 24rpx; color: rgba(255,255,255,0.6); margin-right: 12rpx; }
.kyc-limit-value { font-size: 30rpx; font-weight: 600; color: white; }

.kyc-tiers { padding: 0 32rpx; }

.kyc-tier-card {
  background: white; border-radius: 20rpx; padding: 28rpx;
  margin-bottom: 20rpx; border: 2rpx solid #F1F3F8;
}
.kyc-tier-completed { border-color: #00C48C; }
.kyc-tier-locked { border-color: #F1F3F8; }

.kyc-tier-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12rpx;
}
.kyc-tier-icon-row { display: flex; align-items: center; }
.kyc-tier-icon { font-size: 32rpx; margin-right: 12rpx; }
.kyc-tier-title { font-size: 30rpx; font-weight: 600; color: #141723; }

.kyc-completed-badge {
  padding: 6rpx 16rpx; background: #E6FAF3; border-radius: 999rpx;
}
.kyc-completed-text { font-size: 22rpx; color: #00C48C; font-weight: 500; }

.kyc-tier-desc { font-size: 24rpx; color: #5C6478; margin-bottom: 16rpx; }

.kyc-tier-features { margin-bottom: 16rpx; }
.kyc-feature-row { display: flex; align-items: flex-start; margin-bottom: 8rpx; }
.kyc-feature-dot { color: #A0A8BE; margin-right: 10rpx; font-size: 24rpx; }
.kyc-feature-text { font-size: 24rpx; color: #5C6478; }

.kyc-verify-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 18rpx 0; border: 2rpx solid #6C5CE7;
  border-radius: 12rpx; margin-top: 8rpx;
}
.kyc-verify-text { font-size: 28rpx; color: #6C5CE7; font-weight: 500; }
*/
