import { View, Text, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';
import { getBenefitPackageList } from '@/api/shop/shopMemberBenefit';
import EmptyState from '@/components/common/EmptyState';
import './index.scss';

definePageConfig({
  navigationBarTitleText: '会员权益包',
});

export default function BenefitPackagesPage() {
  const [list, setList] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

  const loadList = async () => {
    try {
      const res = await getBenefitPackageList();
      if (res.code === 200) setList(res.data || []);
    } finally {
      setLoading(false);
    }
  };

  const handleExchange = (pkg: any) => {
    Taro.navigateTo({
      url: `/pages/user/benefit-exchange-confirm/index?id=${pkg.id}`,
    });
  };

  const handleHistory = () => {
    Taro.navigateTo({ url: '/pages/user/benefit-exchange-list/index' });
  };

  return (
    <View className="benefit-page">
      {/* 顶部提示 */}
      <View className="top-banner">
        <Text className="banner-title">专属会员权益</Text>
        <Text className="banner-sub">成为会员，即可申请兑换以下权益包</Text>
        <Text className="history-link" onClick={handleHistory}>
          兑换记录 &gt;
        </Text>
      </View>

      <ScrollView className="pkg-list" scrollY>
        {!loading && list.length === 0 && (
          <EmptyState description="暂无可用权益包" />
        )}
        {list.map((pkg) => (
          <View key={pkg.id} className="pkg-card">
            {pkg.coverImage && (
              <Image className="pkg-cover" src={pkg.coverImage} mode="aspectFill" />
            )}
            <View className="pkg-body">
              <View className="pkg-header">
                <Text className="pkg-name">{pkg.name}</Text>
                {pkg.tag && <Text className="pkg-tag">{pkg.tag}</Text>}
              </View>
              {pkg.description && (
                <Text className="pkg-desc">{pkg.description}</Text>
              )}
              <View className="pkg-footer">
                <View className="pkg-cost">
                  {pkg.pointsCost > 0 && (
                    <Text className="cost-points">{pkg.pointsCost}积分</Text>
                  )}
                  {pkg.balanceCost > 0 && (
                    <Text className="cost-balance">¥{pkg.balanceCost}</Text>
                  )}
                  {pkg.pointsCost === 0 && pkg.balanceCost === 0 && (
                    <Text className="cost-free">免费</Text>
                  )}
                </View>
                <View className="pkg-stock">
                  {pkg.stock === -1
                    ? '不限库存'
                    : `剩余 ${pkg.stock} 件`}
                </View>
                <View
                  className={`exchange-btn ${pkg.stock === 0 ? 'disabled' : ''}`}
                  onClick={() => pkg.stock !== 0 && handleExchange(pkg)}
                >
                  {pkg.stock === 0 ? '已兑完' : '立即兑换'}
                </View>
              </View>
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}