import { useState, useEffect, useRef } from "react";
import { View, Image, Text } from "@tarojs/components";
import { Input } from "@nutui/nutui-react-taro";
import img from "@/config/images";
import { withAuth, GeneralNavbar } from "@/components";
import "./index.scss";
import httpService from "@/services/httpService";
import Taro, { useReachBottom } from "@tarojs/taro";
interface Transaction {
  id: number;
  user_id: number;
  transaction_type: string;
  freeze_action: string | null;
  amount: string;
  description: string;
  create_time: string;
  last_modify_time: string;
  related_id: number;
  type_text: string;
}

interface History {
  id: number;
  keyword: string;
}
interface TransactionLoadParams {
  page: number;
  limit: number;
  keyword: string;
}

const QueryTransactions = () => {
  // 获取当前页面的配置
  const currentPage = Taro.getCurrentInstance();
  const pageConfig = currentPage.page?.config;
  const pageTitle = pageConfig?.navigationBarTitleText;
  const isInitialMount = useRef(true);
  const [loading_transactions, set_loading_transactions] = useState(false);
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [searchHistory, setSearchHistory] = useState<History[]>([]);
  const ref = useRef<any>(null);
  const [keyword, setKeyword] = useState("");
  const [load_transactions_params, set_load_transactions_params] =
    useState<TransactionLoadParams>({
      page: 1,
      limit: 20,
      keyword: "",
    });
  const [totalpages, setTotalpages] = useState(1);
  useEffect(() => {
    getSearchHistory();
  }, []);

  // useEffect(() => {
  //   if (ref?.current) {
  //     ref.current.focus();
  //   }
  // }, [ref.current]);

  useReachBottom(() => {
    if (load_transactions_params.page >= totalpages) return;
    set_load_transactions_params((prev) => {
      return {
        ...prev,
        page: prev.page + 1,
      };
    });
  });

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      if (load_transactions_params.keyword === "") return;
      handleSearch();
    }
  }, [load_transactions_params]);

  // 是否显示清空图标
  const isShowClearIcon =
    load_transactions_params.keyword &&
    load_transactions_params.keyword?.length > 0;

  const getSearchHistory = async () => {
    try {
      const response = await httpService.post("/wallet/search_history", {
        limit: 10,
      });
      if (response && response.data) {
        setSearchHistory(response.data);
      }
    } catch (e) {
      console.error(e);
    }
  };
  /**
   * @description 输入
   * @param value
   */
  const handleChange = (value: string) => {
    setKeyword(value);
  };

  /**
   * @description 点击清空输入内容
   */
  const handleClear = (e) => {
    e.stopPropagation();
    setKeyword("");
    setTransactions([]);
    set_load_transactions_params((prev) => {
      return { ...prev, page: 1, keyword: "" };
    });
  };

  /**
   * @description 点击历史搜索
   * @param value
   */
  const handleHistoryClick = (item: { id: number; keyword: string }) => {
    setKeyword(item?.keyword);
    set_load_transactions_params((prev) => {
      return { ...prev, page: 1, keyword: item?.keyword };
    });
  };

  /**
   * @description 清空历史搜索
   */
  const handleClearHistory = async () => {
    await httpService.post("/wallet/clear_search_history");
    setSearchHistory([]);
  };

  useEffect(() => {
    if (load_transactions_params.keyword === "") return;
    getSearchHistory();
  }, [load_transactions_params.keyword]);

  /**
   * @description 点击搜索
   */
  const handleSearch = async () => {
    // set_loading_transactions(true);
    try {
      const response = await httpService.post("/wallet/transactions", {
        ...load_transactions_params,
      });
      if (response && response.data && response.data.list.length) {
        setTransactions([...transactions, ...response.data.list]);
        setTotalpages(response.data.totalPages);
      } else if (load_transactions_params.page === 1) {
        setTransactions([]);
      }
    } catch (error) {
      setTransactions([]);
      let errorMessage = "加载交易记录失败";
      if (
        error &&
        error.response &&
        error.response.data &&
        error.response.data.message
      ) {
        errorMessage = error.response.data.message;
      } else if (error && error.data && error.data.message) {
        errorMessage = error.data.message;
      }

      Taro.showToast({
        title: errorMessage,
        icon: "error",
        duration: 2000,
      });
    } finally {
      set_loading_transactions(false);
    }
  };

  // 格式化金额显示
  const format_amount = (amount: number | string) => {
    const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
    return numAmount.toFixed(2);
  };

  // 格式化时间显示
  const format_time = (time: string) => {
    time = time.replace(/-/g, "/");
    const date = new Date(time);
    const year = String(date.getFullYear());
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

    return {
      date: `${year}-${month}-${day}`,
      time: `${hours}:${minutes}:${seconds}`,
    };
  };

  // 获取交易类型文字
  const get_transaction_type_text = (transaction: Transaction) => {
    // 如果有描述信息，优先使用描述
    if (transaction.description) {
      return transaction.description;
    }

    const typeMap: { [key: string]: string } = {
      income: "收入",
      expense: "支出",
      freeze: "冻结",
      unfreeze: "解冻",
    };

    let typeText =
      typeMap[transaction.transaction_type] || transaction.transaction_type;

    // 如果有冻结操作，添加到类型文字中
    if (transaction.freeze_action) {
      const freezeMap: { [key: string]: string } = {
        freeze: "冻结",
        unfreeze: "解冻",
      };
      typeText += `(${freezeMap[transaction.freeze_action]})`;
    }

    return typeText;
  };

  const navigateToDetail = (id: number) => {
    Taro.navigateTo({
      url: `/user_pages/billDetail/index?id=${id}`,
    });
  };

  // 获取金额显示（带符号）
  const get_amount_display = (transaction: Transaction) => {
    const isPositive = transaction.transaction_type === "income";
    const prefix = isPositive ? "+" : "-";
    return `${prefix}${format_amount(transaction.amount)}`;
  };

  return (
    <>
      <View className="listSearchContainer">
        {/* 导航栏 */}
        {/* <View className="custom-navbar">
          <View className="detail-navigator">
            <View
              className="detail-navigator-back"
              onClick={() => {
                Taro.navigateBack();
              }}
            >
              <Image
                className="detail-navigator-back-icon"
                src={img.ICON_NAVIGATOR_BACK}
              />
              <Text>{pageTitle}</Text>
            </View>
          </View>
        </View> */}
        {/* 顶部导航栏 */}
        <GeneralNavbar
          title={pageTitle}
          showBack={true}
          showAvatar={false}
          onBack={() => {
            Taro.navigateBack();
          }}
        />
        {/* 搜索 */}
        <View className="topSearchWrapper">
          <View className="topSearch">
            <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
            <Input
              placeholder="查找"
              value={keyword}
              defaultValue={keyword}
              onChange={handleChange}
              onClear={handleClear}
              onBlur={() => {
                // load_transactions_params.keyword &&
                //   setKeyword(load_transactions_params.keyword);
              }}
              clearable={false}
              ref={ref}
            />
            <View className="searchRight">
              {isShowClearIcon && (
                <Image
                  className="clearIcon icon16"
                  src={img.ICON_LIST_SEARCH_CLEAR}
                  onClick={handleClear}
                />
              )}
              <View className="searchLine" />
              <Text
                className="searchText"
                onClick={() => {
                  isInitialMount.current = false;
                  setTransactions([]);
                  set_load_transactions_params((prev) => {
                    return { ...prev, page: 1, keyword };
                  });
                }}
              >
                搜索
              </Text>
            </View>
          </View>
        </View>
        {/* 查找历史 */}
        {!isShowClearIcon && searchHistory.length > 0 && (
          <View className="historySearch">
            <View className="historySearchTitleWrapper">
              <View className="historySearchTitle">查找历史</View>
              <View className="historySearchClear" onClick={handleClearHistory}>
                <Text>清空</Text>
                <Image
                  className="clearIcon icon16"
                  src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
                />
              </View>
            </View>

            {searchHistory.length && (
              <View className="historySearchList">
                {(searchHistory || [])?.map((item) => {
                  if (!item?.keyword) {
                    return null;
                  }
                  return (
                    <Text
                      className="historySearchItem"
                      onClick={() => handleHistoryClick(item)}
                    >
                      {item?.keyword}
                    </Text>
                  );
                })}
              </View>
            )}
          </View>
        )}

        {/* 交易记录列表 */}
        <View className="transaction_list">
          {loading_transactions ? (
            <View className="loading_state">
              <Text className="loading_text">加载中...</Text>
            </View>
          ) : transactions.length > 0 &&
            load_transactions_params.keyword !== "" ? (
            transactions.map((transaction) => {
              const timeInfo = format_time(transaction.create_time);
              return (
                <View
                  key={transaction.id}
                  className="transaction_item"
                  onClick={() => {
                    navigateToDetail(transaction.id);
                  }}
                >
                  <View className="transaction_left">
                    <Text className="transaction_title">
                      {get_transaction_type_text(transaction)}
                    </Text>
                    <View className="transaction_time">
                      <Text className="transaction_date">{timeInfo.date}</Text>
                      <Text className="transaction_clock">{timeInfo.time}</Text>
                    </View>
                  </View>
                  <View className="transaction_right">
                    <View>
                      <Text
                        className={`type_text_tag ${
                          transaction.type_text === "已提现" ? "success" : ""
                        }`}
                      >
                        {transaction.type_text}
                      </Text>
                      <Text className="transaction_amount">
                        {get_amount_display(transaction)}
                      </Text>
                    </View>
                    <Text className="balance_info">
                      余额 ¥{format_amount(transaction.amount)}
                    </Text>
                  </View>
                </View>
              );
            })
          ) : (
            <View className="empty_state">
              <Text className="empty_text">暂无交易记录</Text>
            </View>
          )}
        </View>
        {transactions.length > 0 && (
          <View className="tips_text">仅支持查找2024年9月1日以后的账单</View>
        )}
      </View>
    </>
  );
};
export default withAuth(QueryTransactions);