import Taro from "@tarojs/taro";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import { useEffect, useState } from "react";
import "./index.less";
import { getUserCouponList } from "../../api/coupon";

type Props = {
  show: boolean;
  orderMoney?: number;
  initialSelectedCouponId?: string;
  onClose: () => void;
  onSelect: (item: any) => void;
};

const toPopupCoupon = (item: any, status: 1 | 3) => {
  return {
    id: String(item?.id ?? ""),
    operationCouponId: String(item?.id ?? ""),
    title: item?.couponName || "",
    couponType: Number(item?.couponType || 0),
    discountAmount: Number(item?.amount || 0),
    conditionAmount: Number(item?.conditionalAmount || 0),
    expireTime: item?.endTime || "",
    status,
    couponDesc: item?.couponDesc || "",
    unusableReason:
      item?.unusableReason ||
      item?.notUsableReason ||
      item?.notUseReason ||
      item?.reason ||
      "",
    stackable: item.stackable,
    effectAndInvalid: item.effectAndInvalid
  };
};

export default function FavoritePopup({
  show,
  orderMoney = 0,
  initialSelectedCouponId = "",
  onClose,
  onSelect
}: Props) {
  const [usableCoupons, setUsableCoupons] = useState<any[]>([]);
  const [unusableCoupons, setUnusableCoupons] = useState<any[]>([]);
  const [visible, setVisible] = useState(false);
  const [animationData, setAnimationData] = useState<any>();
  const [canScroll, setCanScroll] = useState(false);
  const [thumbHeight, setThumbHeight] = useState(0);
  const [thumbTop, setThumbTop] = useState(0);
  const [showScrollbar, setShowScrollbar] = useState(false);
  const [couponCount, setCouponCount] = useState(0);
  const [activeCouponId, setActiveCouponId] = useState("");
  const [expandUnusable, setExpandUnusable] = useState(false);
  const [expandedCouponIds, setExpandedCouponIds] = useState<string[]>([]);

  useEffect(() => {
    if (!show) {
      return;
    }
    setActiveCouponId(initialSelectedCouponId || "");
  }, [show, initialSelectedCouponId]);

  const getList = async () => {
    try {
      const res = await getUserCouponList(orderMoney);
      const payload = res?.data ?? res ?? {};
      const usableListRaw = payload?.usableCouponList || [];
      const notUsableListRaw = payload?.notUsableCouponList || [];
      const usableList = usableListRaw.map((item: any) =>
        toPopupCoupon(item, 1)
      );
      const notUsableList = notUsableListRaw.map((item: any) =>
        toPopupCoupon(item, 3)
      );
      setUsableCoupons(usableList);
      setUnusableCoupons(notUsableList);
      setCouponCount(usableList.length + notUsableList.length);
      setExpandUnusable(false);
    } catch (e) {
      console.error(e);
      setUsableCoupons([]);
      setUnusableCoupons([]);
      setCouponCount(0);
      setExpandUnusable(false);
    }
  };

  const gotoMyCoupon = () => {
    Taro.navigateTo({ url: "/robotaxi/pages/coupon/index" });
  };

  const handleSelectCoupon = (item: any) => {
    const couponKey = item?.operationCouponId || item?.couponId || "";
    setActiveCouponId(couponKey);
    onSelect(item);
  };

  // 可用券是否有可展示的详情内容（叠加规则 / 生效失效说明），两者皆空时不展示「查看详情」入口
  const hasUsableCouponDetail = (item: any) =>
    Boolean(item?.stackable || item?.effectAndInvalid);

  const formatThresholdText = (conditionAmount?: number) => {
    const amount = Number(conditionAmount || 0);
    if (amount > 0) {
      return `满 ${amount} 可用`;
    }
    return "无门槛";
  };

  const formatCouponAmount = (item: any) => {
    const amount = Number(item?.discountAmount || 0);
    // 折扣券接口返回 0.6 表示 6 折，这里转成用户可读文案
    if (Number(item?.couponType) === 1) {
      return `${amount}`.replace(/\.0$/, "");
    }
    return `${amount}`.replace(/\.0$/, "");
  };

  const formatCouponUnit = (item: any) => {
    return Number(item?.couponType) === 1 ? "折" : "元";
  };

  const formatTime = (t?: string, type?: string) => {
    const d = new Date(t);
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    const h = String(d.getHours()).padStart(2, "0");
    const min = String(d.getMinutes()).padStart(2, "0");
    return type == "list"
      ? `${y}年${m}月${day}日 ${h}:${min}`
      : `${y}-${m}-${day}`;
  };

  const resolveUnusableDetailText = (item: any) => {
    if (!item?.unavailable) {
      return "不可用原因：-";
    }
    return `不可用原因：${item?.unavailable}`;
  };

  useEffect(() => {
    if (visible) {
      setTimeout(() => {
        const query = Taro.createSelectorQuery();
        query.select(".coupon-list").boundingClientRect();
        query.select(".coupon-list-inner").boundingClientRect();
        query.exec(res => {
          if (res[0] && res[1]) {
            const wrapperHeight = res[0].height;
            const contentHeight = res[1].height;
            const isOverflow = contentHeight > wrapperHeight;
            setCanScroll(isOverflow);
            if (isOverflow) {
              setShowScrollbar(true);
              const calculatedThumbHeight =
                (wrapperHeight / contentHeight) * wrapperHeight;
              setThumbHeight(Math.max(calculatedThumbHeight, 20));
            } else {
              setShowScrollbar(false);
              setThumbTop(0);
            }
          }
        });
      }, 300);
      return;
    }
    setCanScroll(false);
    setShowScrollbar(false);
    setThumbTop(0);
  }, [
    visible,
    usableCoupons,
    unusableCoupons,
    expandUnusable,
    expandedCouponIds
  ]);

  useEffect(() => {
    if (show && !visible) {
      setVisible(true);
      setExpandedCouponIds([]);
      getList();
      const animation = Taro.createAnimation({
        duration: 300,
        timingFunction: "ease-out"
      });
      animation.translateY(0).step();
      setAnimationData(animation.export());
    } else if (!show && visible) {
      const animation = Taro.createAnimation({
        duration: 300,
        timingFunction: "ease-in"
      });
      animation.translateY("100%").step();
      setAnimationData(animation.export());

      setTimeout(() => {
        setVisible(false);
      }, 300);
    }
  }, [show, visible, orderMoney]);

  if (!visible && !show) return null;

  const hasUnavailableCoupons = unusableCoupons.length > 0;

  return (
    <View className={`coupon-popup ${show ? "show" : ""}`} catchMove>
      <View className="coupon-mask" onClick={onClose}></View>
      <View className="coupon-popup-content" animation={animationData}>
        <View className="coupon-header">
          <Text className="coupon-title">选择优惠券</Text>
          <Image className="close-icon" src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/close-icon.png" onClick={onClose} />
        </View>
        <View className="coupon-list-wrap">
          <View className="coupon-list-head">
            <View className="coupon-list-head-item">
              平台优惠券（{couponCount}张）
            </View>
            {/* <View className="my-coupon-item" onClick={gotoMyCoupon}>
              <Text>我的优惠券</Text>
              <Image className="arrow-icon" src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/coupon-arrow-right.png" />
            </View> */}
          </View>
          <ScrollView
            scrollY={canScroll}
            className="coupon-list"
            showScrollbar={false}
          >
            <View className="coupon-list-inner">
              {usableCoupons.map((item, index) => (
                <View className="coupon-item-wrap" key={item.couponId || index}>
                  <View
                    className="coupon-item"
                    onClick={() => handleSelectCoupon(item)}
                  >
                    <View className="coupon-content">
                      <View className="coupon-price-box">
                        <View className="coupon-price">
                          <Text className="price">
                            {formatCouponAmount(item)}
                          </Text>
                          <Text className="unit">{formatCouponUnit(item)}</Text>
                        </View>
                        <View className="no-threshold">
                          {formatThresholdText(item.conditionAmount)}
                        </View>
                      </View>
                      <View className="coupon-info-box">
                        <View className="coupon-info">
                          <Text className="name">{item.title}</Text>
                          <Text className="time">
                            {formatTime(item.expireTime, "list")}到期
                          </Text>
                          {hasUsableCouponDetail(item) && (
                            <View
                              className="more"
                              onClick={event => {
                                event.stopPropagation();
                                setExpandedCouponIds(prev =>
                                  prev.includes(item.id)
                                    ? prev.filter(id => id !== item.id)
                                    : [...prev, item.id]
                                );
                              }}
                            >
                              <Text className="more-detail">查看详情</Text>
                              <Image
                                className={`more-img ${
                                  expandedCouponIds.includes(item.id)
                                    ? "expanded"
                                    : ""
                                }`}
                                src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/arrow-down-gray.svg"
                              ></Image>
                            </View>
                          )}
                        </View>
                        <View className="select-box">
                          <Image
                            className="select-img"
                            src={
                              activeCouponId === item.operationCouponId
                                ? 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/coupon-item-selected.svg'
                                : 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/coupon-item-unselect.svg'
                            }
                          ></Image>
                        </View>
                      </View>
                    </View>
                  </View>
                  {hasUsableCouponDetail(item) &&
                    expandedCouponIds.includes(item.id) && (
                      <View className="coupon-inline-detail">
                        <View>
                          {item.stackable && (
                            <Text className="coupon-inline-detail-text">
                              {item.stackable}
                            </Text>
                          )}
                        </View>
                        <View>
                          {item.effectAndInvalid && (
                            <Text className="coupon-inline-detail-text">
                              {item.effectAndInvalid}
                            </Text>
                          )}
                        </View>
                      </View>
                    )}
                </View>
              ))}

              {hasUnavailableCoupons && (
                <View className="unavailable-section">
                  <View
                    className="unavailable-toggle"
                    onClick={() => setExpandUnusable(prev => !prev)}
                  >
                    <Text className="unavailable-toggle-text">
                      {expandUnusable
                        ? "收起"
                        : `${unusableCoupons.length}张不可用优惠券`}
                    </Text>
                    <Image
                      className={`unavailable-toggle-arrow ${
                        expandUnusable ? "expanded" : ""
                      }`}
                      src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/coupon-arrow-right.png"
                    />
                  </View>
                  {expandUnusable && (
                    <View className="unavailable-list">
                      {unusableCoupons.map((item, index) => (
                        <View
                          className="coupon-item-wrap"
                          key={item.couponId || index}
                        >
                          <View
                            className="coupon-item"
                            style={{ opacity: 0.5 }}
                          >
                            <View className="coupon-content">
                              <View className="coupon-price-box">
                                <View className="coupon-price">
                                  <Text className="price">
                                    {formatCouponAmount(item)}
                                  </Text>
                                  <Text className="unit">
                                    {formatCouponUnit(item)}
                                  </Text>
                                </View>
                                <View className="no-threshold">
                                  {formatThresholdText(item.conditionAmount)}
                                </View>
                              </View>
                              <View className="coupon-info-box">
                                <View className="coupon-info">
                                  <Text className="name">{item.title}</Text>
                                  <Text className="time">
                                    {formatTime(item.expireTime, "list")}到期
                                  </Text>
                                  <View
                                    className="more"
                                    onClick={event => {
                                      event.stopPropagation();
                                      setExpandedCouponIds(prev =>
                                        prev.includes(item.id)
                                          ? prev.filter(id => id !== item.id)
                                          : [...prev, item.id]
                                      );
                                    }}
                                  >
                                    <Text className="more-detail">
                                      查看详情
                                    </Text>
                                    <Image
                                      className={`more-img ${
                                        expandedCouponIds.includes(item.id)
                                          ? "expanded"
                                          : ""
                                      }`}
                                      src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/arrow-down-gray.svg"
                                    ></Image>
                                  </View>
                                </View>
                                <View className="select-box">
                                  <Image
                                    className="select-img"
                                    src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/coupon-item-unselect.svg"
                                  ></Image>
                                </View>
                              </View>
                            </View>
                          </View>
                          {expandedCouponIds.includes(
                            item?.operationCouponId || item?.couponId || ""
                          ) && (
                            <View className="coupon-inline-detail">
                              <Text className="coupon-inline-detail-text">
                                {resolveUnusableDetailText(item)}
                              </Text>
                            </View>
                          )}
                        </View>
                      ))}
                    </View>
                  )}
                </View>
              )}

              {!usableCoupons.length && !unusableCoupons.length && (
                <View className="empty-tip">暂无优惠券</View>
              )}
            </View>
          </ScrollView>
        </View>
      </View>
    </View>
  );
}