import { View, Text, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { getWithdrawStats, getMyWithdrawList } from '@/api/shop/shopWithdrawRecord';
import EmptyState from '@/components/common/EmptyState';
import { Loading } from '@nutui/nutui-react-taro';

import './index.scss';

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

export default function WithdrawListPage() {
  const [stats, setStats] = useState<any>({});
  const [list, setList] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [activeTab, setActiveTab] = useState(-1); // -1全部/0待审核/1通过/4完成

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

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

  const loadList = async (isRefresh = false) => {
    if (loading) return;
    setLoading(true);

    try {
      const currentPage = isRefresh ? 1 : page;
      const params: any = {
        page: currentPage,
        limit: 20
      };
      
      if (activeTab >= 0) {
        params.status = activeTab;
      }

      const res = await getMyWithdrawList(params);

      if (res.code === 200) {
        const newList = res.data.list || [];
        setList(isRefresh ? newList : [...list, ...newList]);
        setPage(currentPage + 1);
        setHasMore(newList.length >= 20);
      }
    } catch (error) {
      console.error('加载列表失败', error);
    } finally {
      setLoading(false);
    }
  };

  const handleTabChange = (tab: number) => {
    setActiveTab(tab);
    setPage(1);
    setHasMore(true);
    loadList(true);
  };

  const getStatusText = (status: number) => {
    const map: Record<number, string> = {
      0: '待审核',
      1: '审核通过',
      2: '审核拒绝',
      3: '打款中',
      4: '已完成',
      5: '已取消'
    };
    return map[status] || '未知';
  };

  const getStatusClass = (status: number) => {
    if (status === 4) return 'status-success';
    if (status === 2 || status === 5) return 'status-fail';
    return 'status-pending';
  };

  return (
    <View className="withdraw-list-page">
      {/* 统计区域 */}
      <View className="stats-card">
        <View className="stats-item">
          <Text className="stats-label">提现中(元)</Text>
          <Text className="stats-value">{stats.withdrawingTotal || '0.00'}</Text>
        </View>
        <View className="stats-item">
          <Text className="stats-label">今日提现(元)</Text>
          <Text className="stats-value">{stats.todayTotal || '0.00'}</Text>
        </View>
      </View>

      {/* 标签页 */}
      <View className="tab-bar">
        <View
          className={`tab-item ${activeTab === -1 ? 'active' : ''}`}
          onClick={() => handleTabChange(-1)}
        >
          全部
        </View>
        <View
          className={`tab-item ${activeTab === 0 ? 'active' : ''}`}
          onClick={() => handleTabChange(0)}
        >
          待审核
        </View>
        <View
          className={`tab-item ${activeTab === 4 ? 'active' : ''}`}
          onClick={() => handleTabChange(4)}
        >
          已完成
        </View>
      </View>

      {/* 列表 */}
      <ScrollView
        className="withdraw-scroll"
        scrollY
        onScrollToLower={() => hasMore && loadList()}
      >
        {list.length === 0 && !loading ? (
          <EmptyState description="暂无提现记录" />
        ) : (
          list.map((item) => (
            <View key={item.id} className="withdraw-item">
              <View className="withdraw-header">
                <Text className="withdraw-amount">¥{item.withdrawAmount}</Text>
                <Text className={`status-tag ${getStatusClass(item.status)}`}>
                  {getStatusText(item.status)}
                </Text>
              </View>
              <View className="withdraw-info">
                <Text className="info-text">
                  实际到账: ¥{item.actualAmount}
                </Text>
                {item.fee > 0 && (
                  <Text className="info-text">
                    手续费: ¥{item.fee}
                  </Text>
                )}
              </View>
              <Text className="withdraw-time">{item.createTime}</Text>
              {item.auditRemark && (
                <Text className="audit-remark">
                  备注: {item.auditRemark}
                </Text>
              )}
            </View>
          ))
        )}
        {loading && <Loading>加载中...</Loading>}
      </ScrollView>
    </View>
  );
}