import {useEffect, useState} from "react";
import {Image} from '@nutui/nutui-react-taro'
import {Share} from '@nutui/icons-react-taro'
import {View, Text} from '@tarojs/components';
import Taro, {useShareAppMessage, useShareTimeline} from "@tarojs/taro";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {pageShopGoods} from "@/api/shop/shopGoods";
import './BestSellers.scss'


const BestSellers = () => {
  const [list, setList] = useState<ShopGoods[]>([])
  const [goods, setGoods] = useState<ShopGoods>()

  const reload = () => {
    pageShopGoods({}).then(res => {
      setList(res?.list || []);
    })
  }

  const handleShare = (item: ShopGoods) => {
    setGoods(item);
    Taro.showActionSheet({
      itemList: ['分享给好友', '分享到朋友圈'],
      success: (res) => {
        if (res.tapIndex === 0) {
          Taro.showShareMenu({
            withShareTicket: true,
            success: () => {
              Taro.showToast({
                title: '请点击右上角分享给好友',
                icon: 'none',
                duration: 2000
              });
            }
          });
        } else if (res.tapIndex === 1) {
          Taro.showToast({
            title: '请点击右上角分享到朋友圈',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail: (err) => {
        console.log('显示分享菜单失败', err);
      }
    });
  }

  useEffect(() => {
    reload()
  }, [])

  useShareAppMessage(() => {
    return {
      title: goods?.name || '精选商品',
      path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
      imageUrl: goods?.image,
      success: function (res: any) {
        console.log('分享成功', res);
        Taro.showToast({ title: '分享成功', icon: 'success', duration: 2000 });
      },
      fail: function (res: any) {
        console.log('分享失败', res);
        Taro.showToast({ title: '分享失败', icon: 'none', duration: 2000 });
      }
    };
  });

  useShareTimeline(() => {
    return {
      title: `${goods?.name || '精选商品'} - 南南佐顿门窗`,
      path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
      imageUrl: goods?.image
    };
  });

  return (
    <View className="bestsellers-list">
      {list?.map((item, index) => (
        <View
          key={index}
          className="bestsellers-item"
          onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}
        >
          {/* 左侧商品图 */}
          <View className="bestsellers-item__img-wrap">
            <Image
              src={item.image}
              mode="aspectFill"
              lazyLoad={false}
              className="bestsellers-item__img"
            />
          </View>

          {/* 右侧信息区 */}
          <View className="bestsellers-item__info">
            <Text className="text-base font-semibold text-gray-900 leading-snug">{item.name}</Text>

            <View className="bestsellers-item__tags">
              <Text className="text-sm text-amber-500 bg-amber-50 px-2 rounded">{item.comments}</Text>
              <Text className="text-sm text-gray-400">已售 {item.sales}</Text>
            </View>

            <View className="bestsellers-item__bottom">
              {/* 价格 */}
              <View className="bestsellers-item__price-wrap">
                <Text className="text-15 font-semibold text-red-500">￥</Text>
                <Text className="text-28 font-extrabold text-red-500 leading-none">{item.price}</Text>
              </View>

              {/* 操作按钮 */}
              <View className="bestsellers-item__actions">
                <View
                  className="bestsellers-item__share-btn"
                  onClick={(e) => { e.stopPropagation(); handleShare(item) }}
                >
                  <Share size={18} color="#9ca3af" />
                </View>
                <View className="bestsellers-item__buy-btn">
                  <Text className="text-base font-semibold text-white">购买</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      ))}

      {list.length === 0 && (
        <View className="bestsellers-empty">
          <Text className="text-base text-gray-400">暂无热销商品</Text>
        </View>
      )}
    </View>
  )
}
export default BestSellers
