import { View, Text, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { getWithdrawConfig, getWithdrawStats, applyWithdraw } from '@/api/shop/shopWithdrawRecord';
import PayModal from '@/components/business/PayModal';

import './index.scss';

definePageConfig({
  navigationBarTitleText: '提现',
});

export default function WithdrawPage() {
  const [config, setConfig] = useState<any>({});
  const [stats, setStats] = useState<any>({});
  const [amount, setAmount] = useState('');
  const [showPayModal, setShowPayModal] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    loadConfig();
    loadStats();
  }, []);

  const loadConfig = async () => {
    try {
      const res: any = await getWithdrawConfig();
      if (res.code === 200 || res.code === 0) {
        setConfig(res.data || {});
      }
    } catch (error) {
      console.error('加载配置失败', error);
    }
  };

  const loadStats = async () => {
    try {
      const res: any = await getWithdrawStats();
      if (res.code === 200 || res.code === 0) {
        setStats(res.data || {});
      }
    } catch (error) {
      console.error('加载统计失败', error);
    }
  };

  // 从配置或默认值读取
  const minAmount = config.withdraw_min_amount || '10';
  const maxAmount = config.withdraw_max_amount || '200';
  const dailyLimit = config.withdraw_daily_limit || '2000';
  const dailyCount = config.withdraw_daily_count || 3;
  const timeStart = config.withdraw_time_start || '';
  const timeEnd = config.withdraw_time_end || '';
  const feeRate = config.withdraw_fee_rate || '0';
  const arrivalTime = config.arrival_time || '';

  const handleWithdraw = () => {
    if (!amount || parseFloat(amount) <= 0) {
      Taro.showToast({ title: '请输入提现金额', icon: 'none' });
      return;
    }

    const amountNum = parseFloat(amount);
    if (amountNum < parseFloat(minAmount)) {
      Taro.showToast({ title: `最低提现金额为${minAmount}元`, icon: 'none' });
      return;
    }

    if (amountNum > parseFloat(maxAmount)) {
      Taro.showToast({ title: `单次最大提现金额为${maxAmount}元`, icon: 'none' });
      return;
    }

    setShowPayModal(true);
  };

  const handlePayConfirm = async (payType: number) => {
    setShowPayModal(false);
    if (payType !== 0) return;

    setSubmitting(true);
    try {
      const res: any = await applyWithdraw({ amount: parseFloat(amount) });
      if (res.code === 200 || res.code === 0) {
        Taro.showToast({ title: '提现申请已提交', icon: 'success' });
        setTimeout(() => {
          Taro.navigateBack();
        }, 1500);
      } else {
        Taro.showToast({ title: res.message || '提交失败', icon: 'none' });
      }
    } catch (error) {
      console.error('提现申请失败', error);
      Taro.showToast({ title: '提交失败', icon: 'none' });
    } finally {
      setSubmitting(false);
    }
  };

  const handleAllWithdraw = () => {
    const available = stats.withdrawingTotal || stats.balance || '0.00';
    setAmount(available);
  };

  const availableBalance = stats.withdrawingTotal || stats.balance || '0.00';

  return (
    <View className="withdraw-page">
      {/* 余额卡片 */}
      <View className="balance-card">
        <View className="balance-header">
          <Text className="balance-label">可提现余额（元）</Text>
        </View>
        <View className="balance-amount-row">
          <Text className="currency-symbol-lg">¥</Text>
          <Text className="balance-number">{availableBalance}</Text>
        </View>
        <View className="balance-tips">
          <Text className="balance-tip-text">佣金已结算，可申请提现</Text>
        </View>
      </View>

      {/* 提现输入 */}
      <View className="withdraw-card">
        <View className="card-title">提现金额</View>
        <View className="amount-input-wrap">
          <Text className="currency-symbol">¥</Text>
          <Input
            className="amount-input"
            type="digit"
            placeholder={`最低 ${minAmount} 元`}
            value={amount}
            onInput={(e) => setAmount(e.detail.value)}
          />
          <Text
            className="all-withdraw"
            onClick={handleAllWithdraw}
          >
            全部提现
          </Text>
        </View>
        {feeRate && parseFloat(feeRate) > 0 ? (
          <View className="fee-tips">
            <Text className="fee-icon">⚠️</Text>
            <Text>本次提现将收取 {feeRate}% 手续费</Text>
          </View>
        ) : (
          <View className="fee-tips fee-free">
            <Text className="fee-icon">✅</Text>
            <Text>当前免收提现手续费</Text>
          </View>
        )}
      </View>

      {/* ====== 提现规则展示（核心审核项）====== */}
      <View className="rules-section">
        {/* 标题栏 */}
        <View className="rules-header">
          <Text className="rules-header-icon">📋</Text>
          <Text className="rules-header-title">提现规则说明</Text>
        </View>

        {/* 规则网格 - 两列布局更醒目 */}
        <View className="rules-grid">
          <View className="rule-cell">
            <Text className="rule-cell-label">最低提现</Text>
            <Text className="rule-cell-value">{minAmount} 元起</Text>
          </View>
          <View className="rule-cell">
            <Text className="rule-cell-label">单次限额</Text>
            <Text className="rule-cell-value">{maxAmount} 元/次</Text>
          </View>
          <View className="rule-cell">
            <Text className="rule-cell-label">每日限额</Text>
            <Text className="rule-cell-value">{dailyLimit} 元/天</Text>
          </View>
          <View className="rule-cell">
            <Text className="rule-cell-label">每日次数</Text>
            <Text className="rule-cell-value">{dailyCount} 次/天</Text>
          </View>
          <View className="rule-cell">
            <Text className="rule-cell-label">提现时间</Text>
            <Text className="rule-cell-value">{timeStart && timeEnd ? `${timeStart}-${timeEnd}` : '全天可提'}</Text>
          </View>
          <View className="rule-cell">
            <Text className="rule-cell-label">到账时间</Text>
            <Text className="rule-cell-value">{arrivalTime || '1-3个工作日'}</Text>
          </View>
          <View className="rule-cell rule-cell-wide">
            <Text className="rule-cell-label">手续费</Text>
            <Text className="rule-cell-value">
              {feeRate && parseFloat(feeRate) > 0 ? `${feeRate}%` : '免手续费'}
            </Text>
          </View>
        </View>

        {/* 详细规则文字 */}
        <View className="rules-detail">
          <View className="detail-item">
            <Text className="detail-bullet">●</Text>
            <Text className="detail-text">提现金额范围为 ¥{minAmount} ~ ¥{maxAmount}，超出范围无法提交</Text>
          </View>
          <View className="detail-item">
            <Text className="detail-bullet">●</Text>
            <Text className="detail-text">每日最多可提现 {dailyCount} 次，累计不超过 ¥{dailyLimit}</Text>
          </View>
          {timeStart && timeEnd ? (
            <View className="detail-item">
              <Text className="detail-bullet">●</Text>
              <Text className="detail-text">仅在每日 {timeStart} 至 {timeEnd} 期间可发起提现申请</Text>
            </View>
          ) : (
            <View className="detail-item">
              <Text className="detail-bullet">●</Text>
              <Text className="detail-text">支持全天 24 小时发起提现申请</Text>
            </View>
          )}
          <View className="detail-item">
            <Text className="detail-bullet">●</Text>
            <Text className="detail-text">提现申请提交后将在 {arrivalTime || '1-3个工作日'} 内审核到账，遇国家法定节假日顺延</Text>
          </View>
          {feeRate && parseFloat(feeRate) > 0 ? (
            <View className="detail-item">
              <Text className="detail-bullet">●</Text>
              <Text className="detail-text">每笔提现将收取 {feeRate}% 的服务手续费，从提现金额中直接扣除</Text>
            </View>
          ) : (
            <View className="detail-item">
              <Text className="detail-bullet">●</Text>
              <Text className="detail-text">当前活动期间免收提现手续费，全额到账</Text>
            </View>
          )}
          <View className="detail-item">
            <Text className="detail-bullet">●</Text>
            <Text className="detail-text">提现金额将原路退回至您的支付账户，请确保账户状态正常</Text>
          </View>
        </View>
      </View>

      {/* 底部按钮 */}
      <View className="bottom-area">
        <View
          className={`submit-btn ${amount && !submitting ? '' : 'disabled'}`}
          onClick={handleWithdraw}
        >
          {submitting ? '提交中...' : '确认提现'}
        </View>
        <View className="submit-disclaimer">
          <Text className="disclaimer-text">提交即表示您已阅读并同意以上提现规则</Text>
        </View>
      </View>

      <PayModal
        visible={showPayModal}
        amount={parseFloat(amount) || 0}
        onConfirm={handlePayConfirm}
        onClose={() => setShowPayModal(false)}
      />
    </View>
  );
}