import Taro, { useShareAppMessage } from "@tarojs/taro";
import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { View } from "@tarojs/components";
import dayjs from "dayjs";
import { Icon } from "@/components";
import { Button, Calendar, SafeArea } from "@nutui/nutui-react-taro";
import { useEffect, useState } from "react";
import { business } from "@/services";
import { globalStore } from "@/store/global-store";
import { exportExpenseStatisticsExcel } from "@/utils/functions";

interface PageProps extends CommonComponent {
  expenseRecordId?: string;
}

export default hocAuth(function Page(props: PageProps) {
  const { shareOptions, userRoleVO } = props;
  const { setLoading } = globalStore((state: any) => state);

  useShareAppMessage((res) => {
    console.log("useShareAppMessage1", res, shareOptions);
    // 如果是按钮触发的转发，使用默认配置
    if (res.from === "button") {
      return shareOptions;
    }
    // 页面转发使用设置的配置
    return {};
  });

  const [show, setShow] = useState(false);
  const [currentDate, setCurrentDate] = useState<string[]>([
    //这个月的开始时间
    dayjs().startOf("month").format("YYYY-MM-DD"),
    //这个月的结束时间
    dayjs().endOf("month").format("YYYY-MM-DD"),
  ]);
  const [expenseRecordList, setExpenseRecordList] =
    useState<BusinessAPI.ExpenseRecordVO[]>();
  const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set()); // 展开的日期
  const [summaryExpanded, setSummaryExpanded] = useState(false); // 汇总概览展开状态

  useEffect(() => {
    if (currentDate) {
      loadExpenseData(currentDate).then();
    }
  }, [currentDate]);

  // 数据加载完成后默认展开所有日期
  // useEffect(() => {
  //   if (expenseRecordList && expenseRecordList.length > 0) {
  //     const allDates = new Set(
  //       expenseRecordList.map((record) => record.recordDate).filter(Boolean),
  //     );
  //     setExpandedDays(allDates as any);
  //   }
  // }, [expenseRecordList]);

  const loadExpenseData = async (currentDate: string[]) => {
    try {
      setLoading(true);
      const {
        data: { data: expenseRecordList, success },
      } = await business.expenseRecord.listExpenseRecord({
        expenseRecordListQry: {
          startDate: currentDate[0], // 使用今天的日期
          endDate: currentDate[1],
        },
      });

      if (success) {
        setExpenseRecordList(expenseRecordList || []);
      }
    } catch (error) {
      console.error("加载费用数据失败:", error);
    } finally {
      setLoading(false);
    }
  };

  // 计算统计数据
  const calculateStatistics = () => {
    if (!expenseRecordList || expenseRecordList.length === 0) {
      return {
        totalVehicles: 0,
        totalProvision: 0,
        totalExpense: 0,
        dailyProfit: 0,
        dealerStatistics: new Map<
          string,
          { vehicleCount: number; totalAmount: number }
        >(),
        costCategoryStatistics: new Map<string, number>(),
      };
    }

    const totalVehicles = expenseRecordList.reduce((sum, record) => {
      return sum + (record.expenseProvisionList?.length || 0);
    }, 0);

    const totalProvision = expenseRecordList.reduce((sum, record) => {
      return sum + (record.totalProvision || 0);
    }, 0);

    const totalExpense = expenseRecordList.reduce((sum, record) => {
      return sum + (record.totalExpense || 0);
    }, 0);

    const dailyProfit = totalProvision - totalExpense;

    // 计提方统计（按客户/计提方分组）
    const dealerStatistics = new Map<
      string,
      { vehicleCount: number; totalAmount: number }
    >();
    expenseRecordList.forEach((record) => {
      record.expenseProvisionList?.forEach((provision) => {
        const dealerName = provision.dealerName || "未分组客户";
        const current = dealerStatistics.get(dealerName) || {
          vehicleCount: 0,
          totalAmount: 0,
        };
        dealerStatistics.set(dealerName, {
          vehicleCount: current.vehicleCount + 1,
          totalAmount: current.totalAmount + (provision.provisionAmount || 0),
        });
      });
    });

    // 费用分类汇总（按费用类型分组）
    const costCategoryStatistics = new Map<string, number>();
    expenseRecordList.forEach((record) => {
      record.expenseCostList?.forEach((cost) => {
        const costName = cost.costName || "未知费用";
        const currentAmount = costCategoryStatistics.get(costName) || 0;
        costCategoryStatistics.set(
          costName,
          currentAmount + (cost.expenseAmount || 0),
        );
      });
    });

    return {
      totalVehicles,
      totalProvision,
      totalExpense,
      dailyProfit,
      dealerStatistics,
      costCategoryStatistics,
    };
  };

  // 切换日期展开状态
  const toggleDayExpansion = (recordDate: string) => {
    setExpandedDays((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(recordDate)) {
        newSet.delete(recordDate);
      } else {
        newSet.add(recordDate);
      }
      return newSet;
    });
  };

  // 获取某天的费用统计
  const getDayCostStatistics = (record: BusinessAPI.ExpenseRecordVO) => {
    const costMap = new Map<string, number>();

    // 统计每种费用类型的金额
    record.expenseCostList?.forEach((cost) => {
      const currentAmount = costMap.get(cost.costName || "") || 0;
      costMap.set(
        cost.costName || "",
        currentAmount + (cost.expenseAmount || 0),
      );
    });

    return costMap;
  };

  // 导出费用统计数据
  const exportStatistics = async () => {
    if (!expenseRecordList || expenseRecordList.length === 0) {
      Taro.showToast({
        title: "暂无数据可导出",
        icon: "none",
      });
      return;
    }

    try {
      setLoading(true);

      const stats = calculateStatistics();
      const startDate = currentDate[0];
      const endDate = currentDate[1];

      // 使用工具函数导出Excel
      await exportExpenseStatisticsExcel({
        title: "费用统计报表",
        startDate,
        endDate,
        statistics: stats,
        recordList: expenseRecordList,
        fileName: `费用统计_${dayjs(startDate).format("YYYYMMDD")}_${dayjs(endDate).format("YYYYMMDD")}.xlsx`,
        sheetName: "费用统计",
      });
    } catch (error) {
      console.error("导出失败:", error);
    } finally {
      setLoading(false);
    }
  };

  // 渲染计提明细
  const renderProvisionDetails = (record: BusinessAPI.ExpenseRecordVO) => {
    const provisionList = record.expenseProvisionList || [];

    if (provisionList.length === 0) {
      return (
        <View className="p-2.5 text-center text-sm text-gray-500">
          当日无计提记录
        </View>
      );
    }

    // 按客户分组统计
    const dealerGroups = provisionList.reduce(
      (groups, provision) => {
        const dealerName = provision.dealerName || "未分组客户";
        if (!groups[dealerName]) {
          groups[dealerName] = [];
        }
        groups[dealerName].push(provision);
        return groups;
      },
      {} as Record<string, BusinessAPI.ExpenseProvision[]>,
    );

    return (
      <View className="border-b border-gray-100 bg-white p-2.5">
        <View className="mb-3 text-xs font-medium tracking-wider text-blue-600 uppercase">
          计提明细 ({provisionList.length}车次)
        </View>
        <View className="space-y-3">
          {Object.entries(dealerGroups).map(([dealerName, provisions]) => {
            const totalAmount = provisions.reduce(
              (sum, p) => sum + (p.provisionAmount || 0),
              0,
            );
            return (
              <View
                key={dealerName}
                className="rounded-lg border border-blue-100 bg-blue-50 p-3"
              >
                <View className="mb-2 flex items-center justify-between">
                  <View className="flex items-center">
                    <View className="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-xs font-medium text-blue-600">
                      {provisions.length}
                    </View>
                    <View className="text-sm font-medium text-blue-900">
                      {dealerName}
                    </View>
                  </View>
                  <View className="text-sm font-medium text-blue-700">
                    ¥{totalAmount.toLocaleString()}
                  </View>
                </View>
                <View className="flex flex-wrap gap-2">
                  {provisions.map((provision) => (
                    <View
                      key={provision.expenseProvisionId}
                      className="rounded border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600"
                    >
                      {provision.vehicleNo || "未分配"}: ¥
                      {provision.provisionAmount?.toLocaleString()}
                    </View>
                  ))}
                </View>
              </View>
            );
          })}
        </View>
      </View>
    );
  };

  // 渲染费用明细
  const renderCostDetails = (record: BusinessAPI.ExpenseRecordVO) => {
    const costStatistics = getDayCostStatistics(record);

    if (costStatistics.size === 0) {
      return (
        <View className="bg-gray-50 p-2.5 text-center text-sm text-gray-500">
          当日无费用记录
        </View>
      );
    }

    return (
      <View className="bg-white p-2.5">
        <View className="mb-3 text-xs font-medium tracking-wider text-orange-600 uppercase">
          费用明细
        </View>
        <View className="flex flex-wrap gap-3">
          {Array.from(costStatistics.entries()).map(([costName, amount]) => (
            <View
              key={costName}
              className="min-w-[45%] flex-1 items-center justify-between rounded-lg border border-orange-200 bg-orange-50 p-3"
            >
              <View className="min-w-0 flex-1">
                <View className="truncate text-sm font-medium text-gray-900">
                  {costName}
                </View>
                <View className="mt-1 text-xs text-gray-500">
                  ¥{amount.toFixed(2)}
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    );
  };

  return (
    <>
      <View className={"flex flex-1 flex-col gap-2.5 p-2.5"}>
        <View className="overflow-hidden rounded-md bg-white">
          <View className="bg-gray-50">
            <View
              className={`flex h-10 w-full items-center rounded-md border-4 border-gray-300`}
            >
              <View
                className={
                  "flex flex-1 flex-row items-center justify-between px-5"
                }
                style={{
                  color: "var(--nutui-color-title, #1a1a1a)",
                }}
                onClick={() => {
                  setShow(true);
                }}
              >
                <View className={"text-sm"}>
                  {currentDate
                    ? dayjs(currentDate[0]).format("YYYY年MM月DD日") +
                      " ~ " +
                      dayjs(currentDate[1]).format("YYYY年MM月DD日")
                    : "请选择录入花销时间"}
                </View>
                <Icon name={"chevron-down"} />
              </View>
            </View>
          </View>
        </View>

        <View className="overflow-hidden rounded-md bg-white shadow-md">
          <View className={"flex flex-col gap-2.5 p-2.5"}>
            {/* 头部 - 可点击展开/收起 */}
            <View
              className="flex cursor-pointer items-center justify-between"
              onClick={() => setSummaryExpanded(!summaryExpanded)}
            >
              <View className="font-medium text-gray-900">时间段汇总概览</View>
              <View className="flex items-center space-x-2">
                <View className="text-xs text-gray-500">
                  {currentDate
                    ? dayjs(currentDate[0]).format("YYYY年MM月DD日") +
                      " ~ " +
                      dayjs(currentDate[1]).format("YYYY年MM月DD日")
                    : ""}
                </View>
                <Icon
                  name={summaryExpanded ? "chevron-up" : "chevron-down"}
                  size={16}
                  className="text-gray-500"
                />
              </View>
            </View>

            {/* 基础统计 - 始终显示 */}
            <View className="space-y-2">
              <View className="flex justify-between">
                <View className="text-sm text-gray-600">总车次</View>
                <View className="text-sm font-medium">
                  {calculateStatistics().totalVehicles}车
                </View>
              </View>
              <View className="flex justify-between">
                <View className="text-sm text-gray-600">计提总额</View>
                <View className="text-sm font-medium">
                  ¥{calculateStatistics().totalProvision.toLocaleString()}
                </View>
              </View>
              <View className="flex justify-between">
                <View className="text-sm text-gray-600">费用总额</View>
                <View className="text-sm font-medium">
                  ¥{calculateStatistics().totalExpense.toLocaleString()}
                </View>
              </View>
              <View className="flex justify-between">
                <View className="text-sm text-gray-600">日常利润</View>
                <View className={"flex flex-row items-center"}>
                  <View
                    className={`text-sm font-medium ${calculateStatistics().dailyProfit >= 0 ? "text-green-600" : "text-red-600"}`}
                  >
                    ¥{calculateStatistics().dailyProfit.toLocaleString()}
                  </View>
                  <Icon
                    name={
                      calculateStatistics().dailyProfit >= 0
                        ? "arrow-up"
                        : "arrow-down"
                    }
                    color={
                      calculateStatistics().dailyProfit >= 0 ? "green" : "red"
                    }
                    className="ml-1"
                    size={16}
                  />
                </View>
              </View>
            </View>

            {/* 展开的详细统计 */}
            {summaryExpanded && (
              <View className="space-y-4 border-t border-gray-200 pt-4">
                {/* 计提方统计 */}
                <View>
                  <View className="mb-3 text-sm font-medium text-blue-600">
                    计提方统计
                  </View>
                  <View className="space-y-2">
                    {Array.from(
                      calculateStatistics().dealerStatistics.entries(),
                    ).map(([dealerName, stats]) => (
                      <View
                        key={dealerName}
                        className="flex items-center justify-between rounded-lg border border-blue-100 bg-blue-50 p-3"
                      >
                        <View className="flex items-center">
                          <View className="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-xs font-medium text-blue-600">
                            {stats.vehicleCount}
                          </View>
                          <View className="text-sm font-medium text-blue-900">
                            {dealerName}
                          </View>
                        </View>
                        <View className="text-sm font-medium text-blue-700">
                          ¥{stats.totalAmount.toLocaleString()}
                        </View>
                      </View>
                    ))}
                    {calculateStatistics().dealerStatistics.size === 0 && (
                      <View className="py-2 text-center text-sm text-gray-500">
                        暂无计提数据
                      </View>
                    )}
                  </View>
                </View>

                {/* 费用分类汇总 */}
                <View>
                  <View className="mb-3 text-sm font-medium text-orange-600">
                    费用分类汇总
                  </View>
                  <View className="flex flex-wrap gap-3">
                    {Array.from(
                      calculateStatistics().costCategoryStatistics.entries(),
                    ).map(([costName, amount]) => (
                      <View
                        key={costName}
                        className="min-w-[45%] flex-1 items-center justify-between rounded-lg border border-orange-200 bg-orange-50 p-3"
                      >
                        <View className="min-w-0 flex-1">
                          <View className="truncate text-sm font-medium text-gray-900">
                            {costName}
                          </View>
                        </View>
                        <View className="ml-2 text-sm font-medium text-orange-700">
                          ¥{amount.toFixed(0)}
                        </View>
                      </View>
                    ))}
                    {calculateStatistics().costCategoryStatistics.size ===
                      0 && (
                      <View className="w-full py-2 text-center text-sm text-gray-500">
                        暂无费用数据
                      </View>
                    )}
                  </View>
                </View>
              </View>
            )}
          </View>
        </View>

        <View className="overflow-hidden rounded-md bg-white shadow-md">
          <View className="border-b border-gray-100 p-2.5">
            <View className="text-neutral-darkest text-base font-medium">
              每日花销明细
            </View>
          </View>
          {expenseRecordList && expenseRecordList.length > 0 ? (
            expenseRecordList.map((record) => {
              const isExpanded = expandedDays.has(record.recordDate || "");
              const vehicleCount = record.expenseProvisionList?.length || 0;
              const dayProfit =
                (record.totalProvision || 0) - (record.totalExpense || 0);

              return (
                <View
                  key={record.recordDate}
                  className="border-b border-gray-100 last:border-b-0"
                >
                  {/* 日期头部 - 可点击展开 */}
                  <View
                    className="cursor-pointer bg-gray-50 p-2.5 hover:bg-gray-100"
                    onClick={() => toggleDayExpansion(record.recordDate || "")}
                  >
                    {/* 第一行：日期 */}
                    <View className="mb-2 flex items-center justify-between">
                      <View className="flex items-center space-x-2">
                        <View className="text-sm font-medium text-gray-900">
                          {dayjs(record.recordDate).format("YYYY年MM月DD日")}
                        </View>
                      </View>
                      <View className="flex items-center space-x-2">
                        <View
                          className={`text-sm font-medium ${dayProfit >= 0 ? "text-green-600" : "text-red-600"}`}
                        >
                          ¥{dayProfit.toLocaleString()}
                        </View>
                        <Icon
                          name={isExpanded ? "chevron-up" : "chevron-down"}
                          size={16}
                          className="text-gray-500"
                        />
                      </View>
                    </View>

                    {/* 第二行：统计数据 */}
                    <View className="flex items-center justify-between text-xs">
                      <View className="flex items-center space-x-6">
                        <View className="text-gray-600">
                          <View className="font-medium">车次</View>
                          <View>{vehicleCount}车</View>
                        </View>
                        <View className="text-blue-600">
                          <View className="font-medium">计提</View>
                          <View>
                            ¥{(record.totalProvision || 0).toLocaleString()}
                          </View>
                        </View>
                        <View className="text-orange-600">
                          <View className="font-medium">费用</View>
                          <View>
                            ¥{(record.totalExpense || 0).toLocaleString()}
                          </View>
                        </View>
                      </View>

                      {userRoleVO.slug === "boss" && (
                        <Button
                          icon={<Icon name="plus" size={12} color={"white"} />}
                          size={"mini"}
                          type={"primary"}
                          onClick={(e) => {
                            e.stopPropagation();
                            Taro.navigateTo({
                              url: `/pages/expenses/create?date=${record.recordDate}`,
                            });
                          }}
                        >
                          录入
                        </Button>
                      )}
                    </View>
                  </View>

                  {/* 展开的明细内容 */}
                  {isExpanded && (
                    <View className="max-h-96 overflow-y-auto">
                      {renderProvisionDetails(record)}
                      {renderCostDetails(record)}
                    </View>
                  )}
                </View>
              );
            })
          ) : (
            <View className="p-8 text-center">
              <View className="text-sm text-gray-500">暂无数据</View>
              <View className="mt-2 text-xs text-gray-400">
                请选择其他时间范围
              </View>
            </View>
          )}
        </View>
      </View>

      <View className="sticky bottom-0 z-10 bg-white">
        <View className="flex justify-between gap-2 border-t border-gray-200 p-2.5">
          {/* 返回 */}
          <View className="flex-1">
            <Button
              size={"large"}
              block
              type={"default"}
              onClick={() => {
                Taro.navigateBack();
              }}
            >
              返回
            </Button>
          </View>

          {/* 导出按钮 */}
          <View className="flex-1">
            <Button
              icon={<Icon name="download" size={12} color={"white"} />}
              size={"large"}
              block
              type={"warning"}
              onClick={exportStatistics}
            >
              导出统计
            </Button>
          </View>

          {userRoleVO.slug === "boss" && (
            <View className="flex-1">
              <Button
                icon={<Icon name="plus" size={12} color={"white"} />}
                size={"large"}
                block
                type={"primary"}
                onClick={() => {
                  Taro.navigateTo({
                    url: "/pages/expenses/create",
                  });
                }}
              >
                花销录入
              </Button>
            </View>
          )}
        </View>
        <SafeArea position="bottom" />
      </View>

      <Calendar
        visible={show}
        defaultValue={currentDate}
        type="range"
        startDate={"2025-01-01"}
        onClose={() => setShow(false)}
        onConfirm={(data) => {
          setCurrentDate([
            dayjs(data[0][3]).format("YYYY-MM-DD"),
            dayjs(data[1][3]).format("YYYY-MM-DD"),
          ]);
        }}
      />
    </>
  );
});
