import React, { useState, useEffect } from "react";
import { View, Text, Button, Input, Image } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import dayjs from "dayjs";

import "./index.scss";
import { DialogCalendarCard } from "@/components/index";
// import { CalendarUI } from "@/components";
import { CommonPopup, GeneralNavbar } from "@/components";
import httpService from "@/services/httpService";
import img from "@/config/images";

export enum TransactionSubType {
  All = "",
  GameActivity = "game_activity",
  Withdrawal = "withdrawal",
  Refund = "refund",
  Compensation = "compensation",
}
export enum TransactionType {
  All = "",
  Income = "income",
  Expense = "expense",
}
interface Option<T> {
  label: string;
  value: T;
}
interface TransactionLoadParams {
  transaction_sub_type: TransactionSubType;
  date_range?: string[];
}
const DownloadBill: React.FC = () => {
  // 获取当前页面的配置
  const currentPage = Taro.getCurrentInstance();
  const pageConfig = currentPage.page?.config;
  const pageTitle = pageConfig?.navigationBarTitleText;
  const [dateRange, setDateRange] = useState({ start: "", end: "" });
  const [transactionSubType, setTransactionSubType] =
    useState<TransactionSubType>(TransactionSubType.All);
  const [dateType, setDateType] = useState("week");
  const [visible, setVisible] = useState(false);
  const [show_download_popup, set_show_download_popup] = useState(false);
  const [isFocus, setIsFocus] = useState(false);
  const [password, setPassword] = useState<string[]>(new Array(6).fill(""));
  useEffect(() => {
    culculateDateRange(dateType);
  }, []);
  const [showFilterPopup, setShowFilterPopup] = useState(false);
  const culculateDateRange = (dateType: string) => {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const day = today.getDate();
    if (dateType === "week") {
      today.setDate(day - 6);
    } else if (dateType === "month") {
      today.setMonth(month - 1);
      today.setDate(day + 1);
    }
    const startYear = today.getFullYear();
    const startMonth = today.getMonth();
    const startDay = today.getDate();
    setDateRange({
      start: `${startYear}-${String(startMonth + 1).padStart(2, "0")}-${String(
        startDay
      ).padStart(2, "0")}`,
      end: `${year}-${String(month + 1).padStart(2, "0")}-${String(
        day
      ).padStart(2, "0")}`,
    });
  };

  const selectDateRange = (range: string) => {
    if (dateType === range) {
      if (range === "custom") {
        setVisible(true);
        return;
      }
      return;
    }
    switch (range) {
      case "week":
        setCurrentTimeValue(new Date());
        setDateType("week");
        culculateDateRange("week");
        break;
      case "month":
        setCurrentTimeValue(new Date());
        setDateType("month");
        culculateDateRange("month");
        break;
      case "custom":
        setDateType("custom");
        setDateRange({ start: "", end: "" });
        break;
    }
  };
  const [currentTimeValue, setCurrentTimeValue] = useState<Date | Date[]>(
    new Date()
  );
  const handleConfirm = (val: Date[]) => {
    setCurrentTimeValue(val);
    const [start, end] = val;
    setDateRange({
      start: dayjs(start).format("YYYY-MM-DD"),
      end: dayjs(end).format("YYYY-MM-DD"),
    });
  };
  const handlePasswordInput = (e: any) => {
    const value = e.detail.value;
    const [one = "", two = "", three = "", four = "", five = "", six = ""] =
      value.split("");
    setPassword([one, two, three, four, five, six]);
    if (value.length === 6) {
      // const timer = setTimeout(() => {
      //   // TODO 校验密码
      //   if (false) {
      //     set_show_download_popup(false);
      //     Taro.showModal({
      //       content: "支付密码错误，请重试",
      //       cancelText: "忘记密码",
      //       confirmText: "重试",
      //       cancelColor: "#000",
      //       confirmColor: "#fff",
      //     }).then((res) => {
      //       if (res.confirm) {
      //         set_show_download_popup(true);
      //       } else if (res.cancel) {
      //         Taro.navigateTo({
      //           url: "/user_pages/validPhone/index"
      //         });
      //       }
      //     }).finally(() => {
      //       clearTimeout(timer);
      //     });
      //   } else {
      //     // TODO 下载账单
      //   }
      // }, 100);
    }
  };
  const transaction_type_options: Option<TransactionSubType>[] = [
    {
      label: "全部",
      value: TransactionSubType.All,
    },
    {
      label: "组织活动",
      value: TransactionSubType.GameActivity,
    },
    {
      label: "提现",
      value: TransactionSubType.Withdrawal,
    },
    {
      label: "退款",
      value: TransactionSubType.Refund,
    },
    {
      label: "企业赔付",
      value: TransactionSubType.Compensation,
    },
  ];
  const [load_transactions_params, set_load_transactions_params] =
    useState<TransactionLoadParams>({
      transaction_sub_type: TransactionSubType.All,
      date_range: [],
    });

  const handleClose = () => {
    setTransactionSubType(load_transactions_params.transaction_sub_type);
    setShowFilterPopup(false);
  };
  const handleTypeConfirm = () => {
    set_load_transactions_params((prev) => {
      return { ...prev, transaction_sub_type: transactionSubType };
    });
    setShowFilterPopup(false);
  };
  const downloadExample = async () => {
    const { start, end } = dateRange;
    if (!start || !end) return;
    try {
      const res = await httpService.post("/parameter/many_key", {
        keys: "bill_example",
      });
      const { bill_example, fileName } = res.data;
      // 调用下载文件接口
      wx.downloadFile({
        url: bill_example, // 文件路径
        success: function (res) {
          // 只有200状态码表示下载成功
          if (res.statusCode === 200) {
            // 下载成功后可以使用res.tempFilePath访问临时文件路径
            console.log("文件下载成功，临时路径为：", res.tempFilePath);
            // 保存文件到本地
            wx.openDocument({
              filePath: res.tempFilePath,
              showMenu: true, // 显示保存菜单
            });
          }
        },
        fail: function (err) {
          console.error("文件下载失败：", err);
        },
      });
    } catch (error) {
      console.error(error);
    }
  };
  const handleDownloadBill = async () => {
    const { start, end } = dateRange;
    if (!start || !end) return;
    try {
      const { transaction_sub_type } = load_transactions_params;
      const date_range = [start, end];
      const res = await httpService.post("/wallet/download_bill", {
        transaction_sub_type,
        date_range,
      });
      const { fileUrl, fileName } = res.data;
      // 调用下载文件接口
      wx.downloadFile({
        url: fileUrl, // 文件路径
        success: function (res) {
          // 只有200状态码表示下载成功
          if (res.statusCode === 200) {
            // 下载成功后可以使用res.tempFilePath访问临时文件路径
            console.log("文件下载成功，临时路径为：", res.tempFilePath);
            // 保存文件到本地
            wx.openDocument({
              filePath: res.tempFilePath,
              showMenu: true, // 显示保存菜单
            });
          }
        },
        fail: function (err) {
          console.error("文件下载失败：", err);
        },
      });
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <View className="download_bill_page">
      {/* 导航栏 */}
      {/* <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="hint_content">
        <Text>最长可导出三个月的账单 </Text>
        <Text className="button_text" onClick={downloadExample}>
          示例文件
        </Text>
        {/* <Text className="button_text">示例文件</Text> */}
      </View>
      <View className="form_container">
        {/* <View className="form_item">
          <Text className="title_text">接收方式</Text>
          <View className="value_content arrow">
            <Text>小程序消息</Text>
          </View>
        </View> */}
        <View
          className="form_item"
          onClick={() => {
            setShowFilterPopup(true);
          }}
        >
          <Text className="title_text">交易类型</Text>
          <View className="value_content arrow">
            <Text>
              {
                transaction_type_options.find(
                  (item) =>
                    item.value === load_transactions_params.transaction_sub_type
                )?.label
              }
            </Text>
          </View>
        </View>
        <View className="form_item">
          <Text className="title_text">账单时间</Text>
          <View className="value_content">
            <View
              className={`option_button ${dateType === "week" ? "active" : ""}`}
              onClick={() => {
                selectDateRange("week");
              }}
            >
              近一周
            </View>
            <View
              className={`option_button ${dateType === "month" ? "active" : ""
                }`}
              onClick={() => {
                selectDateRange("month");
              }}
            >
              近一月
            </View>
            <View
              className={`option_button ${dateType === "custom" ? "active" : ""
                }`}
              onClick={() => {
                selectDateRange("custom");
              }}
            >
              自定义时间
            </View>
          </View>
        </View>
        {dateRange.start && dateRange.end && dateType !== "custom" && (
          <View className="time_box">
            <Text>{dateRange.start}</Text> 至 <Text>{dateRange.end}</Text>
          </View>
        )}
        {dateType === "custom" && (
          <View
            className="form_item"
            onClick={() => {
              setVisible(true);
            }}
          >
            <Text className="title_text">时间范围</Text>
            <View className="value_content arrow">
              <Text>
                {dateRange.start && dateRange.end
                  ? `${dateRange.start} 至 ${dateRange.end}`
                  : "请选择账单时间"}
              </Text>
            </View>
          </View>
        )}
      </View>
      <View className="button_container">
        <Text
          className="button_text"
          onClick={() =>
            Taro.navigateTo({ url: "/user_pages/downloadBillRecords/index" })
          }
        >
          下载记录
        </Text>
        <Button
          className={`download_button ${!dateRange.start ? "disabled" : ""}`}
          onClick={handleDownloadBill}
        >
          下载
        </Button>
      </View>
      {visible && (
        <DialogCalendarCard
          visible={visible}
          searchType={"range"}
          value={currentTimeValue}
          onChange={handleConfirm}
          onClose={() => setVisible(false)}
        />
      )}

      {/* 下载账单输入密码弹窗 */}
      <CommonPopup
        showHeader={true}
        visible={show_download_popup}
        onClose={() => set_show_download_popup(false)}
        title="提现"
        className="withdraw_popup"
        hideFooter={true}
      >
        <View className="popup_content">
          <View className="popup_text">{`支付账单流水文件（文件名）.xlsx`}</View>
          <View className="popup_text">{`文件大小：7KB`}</View>
          <View className="popup_text">{`请输入交易密码`}</View>
          <View className="password_container">
            {password.map((item, index) => (
              <View key={index} className="password_item">
                <Text className="password_text">{item}</Text>
              </View>
            ))}
          </View>
          <Input
            focus={isFocus}
            type="number"
            style={{ width: "0", height: "0", opacity: "0" }}
            value={password.filter((item) => item !== "").join("")}
            maxlength={6}
            onInput={handlePasswordInput}
          />
        </View>
      </CommonPopup>

      {/* 筛选账单弹窗 */}
      <CommonPopup
        showHeader={true}
        visible={showFilterPopup}
        onClose={handleClose}
        onConfirm={handleTypeConfirm}
        title="选择筛选项"
        className="filter_popup"
      >
        <View className="popup_content">
          <View className="form_section">
            <View className="form_item">
              <Text className="form_label">交易类型</Text>
              <View className="options_wrapper">
                {transaction_type_options.map(
                  (option: Option<TransactionSubType>) => (
                    <View
                      className={
                        transactionSubType === option.value
                          ? "option_item active"
                          : "option_item"
                      }
                      key={option.value}
                      onClick={() => {
                        setTransactionSubType(option.value);
                      }}
                    >
                      {option.label}
                    </View>
                  )
                )}
              </View>
            </View>
          </View>
        </View>
      </CommonPopup>
    </View>
  );
};

export default DownloadBill;