import {useEffect, useState} from "react";
import {Image, Divider, Badge} from "@nutui/nutui-react-taro";
import {ArrowLeft, Headphones, Share, Cart} from "@nutui/icons-react-taro";
import Taro, {useShareAppMessage} from "@tarojs/taro";
import {RichText, View} from '@tarojs/components'
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {getShopGoods} from "@/api/shop/shopGoods";
import {listShopGoodsSpec} from "@/api/shop/shopGoodsSpec";
import {ShopGoodsSpec} from "@/api/shop/shopGoodsSpec/model";
import {listShopGoodsSku} from "@/api/shop/shopGoodsSku";
import {ShopGoodsSku} from "@/api/shop/shopGoodsSku/model";
import {Swiper} from '@nutui/nutui-react-taro'
import navTo, {wxParse} from "@/utils/common";
import SpecSelector from "@/components/SpecSelector";
import "./index.scss";
import {useCart} from "@/hooks/useCart";

const GoodsDetail = () => {
  const [goods, setGoods] = useState<ShopGoods | null>(null);
  const [files, setFiles] = useState<any[]>([]);
  const [specs, setSpecs] = useState<ShopGoodsSpec[]>([]);
  const [skus, setSkus] = useState<ShopGoodsSku[]>([]);
  const [showSpecSelector, setShowSpecSelector] = useState(false);
  const [specAction, setSpecAction] = useState<'cart' | 'buy'>('cart');
  // const [selectedSku, setSelectedSku] = useState<ShopGoodsSku | null>(null);
  const [loading, setLoading] = useState(false);
  const router = Taro.getCurrentInstance().router;
  const goodsId = router?.params?.id;

  // 使用购物车Hook
  const {cartCount, addToCart} = useCart();

  // 处理加入购物车
  const handleAddToCart = () => {
    if (!goods) return;

    if (!Taro.getStorageSync('UserId')) {
      return Taro.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
    }

    // 如果有规格，显示规格选择器
    if (specs.length > 0) {
      setSpecAction('cart');
      setShowSpecSelector(true);
      return;
    }

    // 没有规格，直接加入购物车
    addToCart({
      goodsId: goods.goodsId!,
      name: goods.name || '',
      price: goods.price || '0',
      image: goods.image || ''
    });
  };

  // 处理立即购买
  const handleBuyNow = () => {
    if (!goods) return;

    if (!Taro.getStorageSync('UserId')) {
      return Taro.showToast({
        title: '请先登录',
        icon: 'none',
        duration: 2000
      });
    }

    // 如果有规格，显示规格选择器
    if (specs.length > 0) {
      setSpecAction('buy');
      setShowSpecSelector(true);
      return;
    }

    // 没有规格，直接购买
    navTo(`/shop/orderConfirm/index?goodsId=${goods?.goodsId}`, true);
  };

  // 规格选择确认回调
  const handleSpecConfirm = (sku: ShopGoodsSku, quantity: number, action?: 'cart' | 'buy') => {
    // setSelectedSku(sku);
    setShowSpecSelector(false);

    if (action === 'cart') {
      // 加入购物车
      addToCart({
        goodsId: goods!.goodsId!,
        skuId: sku.id,
        name: goods!.name || '',
        price: sku.price || goods!.price || '0',
        image: goods!.image || '',
        specInfo: sku.sku, // sku字段包含规格信息
      }, quantity);
    } else if (action === 'buy') {
      // 立即购买
      const orderData = {
        goodsId: goods!.goodsId!,
        skuId: sku.id,
        quantity,
        price: sku.price || goods!.price || '0'
      };
      navTo(`/shop/orderConfirm/index?orderData=${encodeURIComponent(JSON.stringify(orderData))}`, true);
    } else {
      // 默认情况：如果action未定义，默认为立即购买
      const orderData = {
        goodsId: goods!.goodsId!,
        skuId: sku.id,
        quantity,
        price: sku.price || goods!.price || '0'
      };
      navTo(`/shop/orderConfirm/index?orderData=${encodeURIComponent(JSON.stringify(orderData))}`, true);
    }
  };

  useEffect(() => {
    if (goodsId) {
      setLoading(true);

      // 加载商品详情
      getShopGoods(Number(goodsId))
        .then((res) => {
          // 处理富文本内容，去掉图片间距
          if (res.content) {
            res.content = wxParse(res.content);
          }
          setGoods(res);
          if (res.files) {
            const arr = JSON.parse(res.files);
            arr.length > 0 && setFiles(arr);
          }
        })
        .catch((error) => {
          console.error("Failed to fetch goods detail:", error);
        })
        .finally(() => {
          setLoading(false);
        });

      // 加载商品规格
      listShopGoodsSpec({goodsId: Number(goodsId)} as any)
        .then((data) => {
          setSpecs(data || []);
        })
        .catch((error) => {
          console.error("Failed to fetch goods specs:", error);
        });

      // 加载商品SKU
      listShopGoodsSku({goodsId: Number(goodsId)} as any)
        .then((data) => {
          setSkus(data || []);
        })
        .catch((error) => {
          console.error("Failed to fetch goods skus:", error);
        });
    }
  }, [goodsId]);

  // 分享给好友
  useShareAppMessage(() => {
    return {
      title: goods?.name || '精选商品',
      path: `/shop/goodsDetail/index?id=${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
        });
      }
    };
  });

  if (!goods || loading) {
    return <div>加载中...</div>;
  }

  return (
    <div className={"py-0"}>
      <div
        className={
          "fixed z-10 bg-white flex justify-center items-center font-bold shadow-sm opacity-70"
        }
        style={{
          borderRadius: "100%",
          width: "32px",
          height: "32px",
          top: "50px",
          left: "10px",
        }}
        onClick={() => Taro.navigateBack()}
      >
        <ArrowLeft size={14}/>
      </div>
      <div className={
        "fixed z-10 bg-white flex justify-center items-center font-bold shadow-sm opacity-90"
      }
           style={{
             borderRadius: "100%",
             width: "32px",
             height: "32px",
             top: "50px",
             right: "110px",
           }}
           onClick={() => Taro.switchTab({url: `/pages/cart/cart`})}>
        <Badge value={cartCount} top="-2" right="2">
          <div style={{display: 'flex', alignItems: 'center'}}>
            <Cart size={16}/>
          </div>
        </Badge>
      </div>
      {
        files.length > 0 && (
          <Swiper defaultValue={0} indicator height={'350px'}>
            {files.map((item) => (
              <Swiper.Item key={item}>
                <Image width="100%" height={'100%'} src={item.url} mode={'scaleToFill'} lazyLoad={false}/>
              </Swiper.Item>
            ))}
          </Swiper>
        )
      }
      {
        files.length == 0 && (
          <Image
            src={goods.image}
            mode={"scaleToFill"}
            radius="10px 10px 0 0"
            height="300"
          />
        )
      }
      <div
        className={"flex flex-col justify-between items-center rounded-lg px-2"}
      >
        <div
          className={
            "flex flex-col rounded-lg bg-white shadow-sm w-full mt-2"
          }
        >
          <div className={"flex flex-col p-2 rounded-lg"}>
            <>
              <div className={'flex justify-between'}>
                <div className={'flex text-red-500 text-xl items-baseline'}>
                  <span className={'text-xs'}>￥</span>
                  <span className={'font-bold text-2xl'}>{goods.price}</span>
                </div>
                <span className={"text-gray-400 text-xs"}>已售 {goods.sales}</span>
              </div>
              <div className={'flex justify-between items-center'}>
                <div className={'goods-info'}>
                  <div className={"car-no text-lg"}>
                    {goods.name}
                  </div>
                  <div className={"flex justify-between text-xs py-1"}>
                <span className={"text-orange-500"}>
                  {goods.comments}
                </span>
                  </div>
                </div>
                <button
                  className={'flex flex-col  justify-center items-center text-gray-500 px-1 gap-1 text-nowrap whitespace-nowrap'}
                  open-type="share"><Share
                  size={20}/>
                  <span className={'text-xs'}>分享</span>
                </button>
              </div>
            </>
          </div>
        </div>
        <div className={"mt-2 py-2"}>
          <Divider>商品详情</Divider>
          <RichText nodes={goods.content || '内容详情'}/>
        </div>
      </div>
      {/*底部购买按钮*/}
      <div className={'fixed bg-white w-full bottom-0 left-0 pt-4 pb-10'}>
        <View className={'btn-bar flex justify-between items-center'}>
          <div className={'flex justify-center items-center mx-4'}>
            <button open-type="contact" className={'flex items-center'}>
              <Headphones size={18} style={{marginRight: '4px'}}/>咨询
            </button>
          </div>
          <div className={'buy-btn mx-4'}>
            <div className={'cart-add px-4 text-sm'}
                 onClick={() => handleAddToCart()}>加入购物车
            </div>
            <div className={'cart-buy pl-4 pr-5 text-sm'}
                 onClick={() => handleBuyNow()}>立即购买
            </div>
          </div>
        </View>
      </div>

      {/* 规格选择器 */}
      {showSpecSelector && (
        <SpecSelector
          goods={goods!}
          specs={specs}
          skus={skus}
          action={specAction}
          onConfirm={handleSpecConfirm}
          onClose={() => setShowSpecSelector(false)}
        />
      )}
    </div>
  );
};

export default GoodsDetail;