import {useEffect, useState} from "react";
import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro';
import {
  NavBar,
  Checkbox,
  Image,
  InputNumber,
  Button,
  Empty,
  Divider
} from '@nutui/nutui-react-taro';
import {ArrowLeft, Del, Shopping} from '@nutui/icons-react-taro';
import {View} from '@tarojs/components';
import {CartItem, useCart} from "@/hooks/useCart";

function Cart() {
  const [statusBarHeight, setStatusBarHeight] = useState<number>(0);
  const [selectedItems, setSelectedItems] = useState<number[]>([]);
  const [isAllSelected, setIsAllSelected] = useState(false);

  const {
    cartItems,
    cartCount,
    updateQuantity,
    removeFromCart,
    clearCart
  } = useCart();

  useShareTimeline(() => {
    return {
      title: '购物车 - 网宿小店'
    };
  });

  useShareAppMessage(() => {
    return {
      title: '购物车 - 网宿小店',
      success: function (res) {
        console.log('分享成功', res);
      },
      fail: function (res) {
        console.log('分享失败', res);
      }
    };
  });

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setStatusBarHeight(res.statusBarHeight || 0);
      },
    });

    // 设置导航栏背景色
    Taro.setNavigationBarColor({
      backgroundColor: '#ffffff',
      frontColor: 'black',
    });
  }, []);

  // 处理单个商品选择
  const handleItemSelect = (goodsId: number, checked: boolean) => {
    if (checked) {
      setSelectedItems([...selectedItems, goodsId]);
    } else {
      setSelectedItems(selectedItems.filter(id => id !== goodsId));
      setIsAllSelected(false);
    }
  };

  // 处理全选
  const handleSelectAll = (checked: boolean) => {
    setIsAllSelected(checked);
    if (checked) {
      setSelectedItems(cartItems.map((item: CartItem) => item.goodsId));
    } else {
      setSelectedItems([]);
    }
  };

  // 更新商品数量
  const handleQuantityChange = (goodsId: number, value: number) => {
    updateQuantity(goodsId, value);
  };

  // 删除商品
  const handleRemoveItem = (goodsId: number) => {
    Taro.showModal({
      title: '确认删除',
      content: '确定要删除这个商品吗？',
      success: (res) => {
        if (res.confirm) {
          removeFromCart(goodsId);
          setSelectedItems(selectedItems.filter(id => id !== goodsId));
        }
      }
    });
  };

  // 计算选中商品的总价
  const getSelectedTotalPrice = () => {
    return cartItems
      .filter((item: CartItem) => selectedItems.includes(item.goodsId))
      .reduce((total: number, item: CartItem) => total + (parseFloat(item.price) * item.quantity), 0)
      .toFixed(2);
  };

  // 去结算
  const handleCheckout = () => {
    if (selectedItems.length === 0) {
      Taro.showToast({
        title: '请选择要结算的商品',
        icon: 'none'
      });
      return;
    }

    // 获取选中的商品
    const selectedCartItems = cartItems.filter((item: CartItem) =>
      selectedItems.includes(item.goodsId)
    );

    // 将选中的商品信息存储到本地，供结算页面使用
    Taro.setStorageSync('checkout_items', JSON.stringify(selectedCartItems));

    // 跳转到购物车结算页面
    Taro.navigateTo({
      url: '/shop/orderConfirmCart/index'
    });
  };

  // 检查是否全选
  useEffect(() => {
    if (cartItems.length > 0 && selectedItems.length === cartItems.length) {
      setIsAllSelected(true);
    } else {
      setIsAllSelected(false);
    }
  }, [selectedItems, cartItems]);

  return (
    <>

      <View style={{backgroundColor: '#f6f6f6', height: `${statusBarHeight}px`}}
           className="fixed z-10 top-0 w-full"></View>
      <NavBar
        fixed={true}
        style={{marginTop: `${statusBarHeight}px`}}
        left={<ArrowLeft onClick={() => Taro.navigateBack()}/>}
        right={
          cartItems.length > 0 && (
            <Button
              size="small"
              type="primary"
              fill="none"
              onClick={() => {
                Taro.showModal({
                  title: '确认清空',
                  content: '确定要清空购物车吗？',
                  success: (res) => {
                    if (res.confirm) {
                      clearCart();
                      setSelectedItems([]);
                    }
                  }
                });
              }}
            >
            </Button>
          )
        }
      >
        <span className="text-lg">购物车({cartCount})</span>
      </NavBar>

      {/* 购物车内容 */}
      <View className="pt-24">
        {cartItems.length === 0 ? (
          // 空购物车
          <View className="flex flex-col items-center justify-center h-96">
            <Empty
              image={<Shopping size={80}/>}
              description="购物车空空如也"
            >
              <Button
                type="primary"
                size="small"
                onClick={() => Taro.switchTab({url: '/pages/index/index'})}
              >
                去逛逛
              </Button>
            </Empty>
          </View>
        ) : (
          <>
            {/* 商品列表 */}
            <View className="bg-white">
              {cartItems.map((item: CartItem, index: number) => (
                <View key={item.goodsId}>
                  <View className="bg-white px-4 py-3 flex items-center gap-3">
                    {/* 选择框 */}
                    <Checkbox
                      checked={selectedItems.includes(item.goodsId)}
                      onChange={(checked) => handleItemSelect(item.goodsId, checked)}
                    />

                    {/* 商品图片 */}
                    <Image
                      src={item.image}
                      width="80"
                      height="80"
                      lazyLoad={false}
                      radius="8"
                      className="flex-shrink-0"
                    />

                    {/* 商品信息 */}
                    <View className="flex-1 min-w-0">
                      <View className="text-lg font-bold text-gray-900 truncate mb-1">
                        {item.name}
                      </View>
                      <View className="flex items-center justify-between">
                        <View className={'flex text-red-500 text-xl items-baseline'}>
                          <span className={'text-xs'}>￥</span>
                          <span className={'font-bold text-lg'}>{item.price}</span>
                        </View>
                        <View className="flex items-center gap-2">
                          <InputNumber
                            value={item.quantity}
                            min={1}
                            max={99}
                            onChange={(value) => handleQuantityChange(item.goodsId, Number(value))}
                            className="w-24"
                          />
                          <Del className={'text-red-500'} size={16} onClick={() => handleRemoveItem(item.goodsId)}/>
                        </View>
                      </View>
                    </View>
                  </View>
                  {index < cartItems.length - 1 && <Divider/>}
                </View>
              ))}
            </View>

            {/* 底部结算栏 */}
            <View
              className="fixed z-50 bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 safe-area-bottom">
              <View className="flex items-center justify-between">
                <View className="flex items-center gap-3">
                  <Checkbox
                    checked={isAllSelected}
                    onChange={handleSelectAll}
                  >
                    全选
                  </Checkbox>
                  <View className="text-sm text-gray-600">
                    已选 {selectedItems.length} 件
                  </View>
                </View>

                <View className="flex items-center gap-4">
                  <View className="text-right">
                    <View className="text-xs text-gray-500">合计:</View>
                    <div className={'flex text-red-500 text-xl items-baseline'}>
                      <span className={'text-xs'}>￥</span>
                      <span className={'font-bold text-lg'}>{getSelectedTotalPrice()}</span>
                    </div>
                  </View>
                  <Button
                    type="primary"
                    size="large"
                    disabled={selectedItems.length === 0}
                    onClick={handleCheckout}
                    className="px-6"
                  >
                    结算({selectedItems.length})
                  </Button>
                </View>
              </View>
            </View>

            {/* 底部安全区域占位 */}
            <View className="h-20"></View>
          </>
        )}
      </View>
    </>
  );
}

export default Cart;