import React, { useState } from "react";
import { View, Text, Button, Image } from "@tarojs/components";
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import dayjs from "dayjs";
import orderService, {
  GameOrderRes,
  OrderStatus,
} from "@/services/orderService";
import {
  payOrder,
  delay,
  calculateDistance,
  getCurrentLocation,
} from "@/utils";
import detailService, { GameData } from "@/services/detailService";
import { withAuth } from "@/components";
import img from "@/config/images";
import { DECLAIMER } from "./config";
import styles from "./index.module.scss";

dayjs.locale("zh-cn");

function GameInfo(props) {
  const { detail, currentLocation, orderDetail } = props;
  const { order_status } = orderDetail;
  const { latitude, longitude, location, location_name, start_time, end_time } =
    detail || {};

  const openMap = () => {
    Taro.openLocation({
      latitude, // 纬度（必填）
      longitude, // 经度（必填）
      name: location_name, // 位置名（可选）
      address: location, // 地址详情（可选）
      scale: 15, // 地图缩放级别（1-28）
    });
  };

  const [c_latitude, c_longitude] = currentLocation;
  const distance =
    c_latitude + c_longitude === 0
      ? 0
      : calculateDistance(c_latitude, c_longitude, latitude, longitude) / 1000;

  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
  const game_length = endTime.diff(startTime, "minutes") / 60;

  const startMonth = startTime.format("M");
  const startDay = startTime.format("D");
  const theDayOfWeek = startTime.format("dddd");
  const startDate = `${startMonth}月${startDay}日 ${theDayOfWeek}`;
  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;

  return (
    <View className={styles.gameInfoContainer}>
      {order_status !== OrderStatus.PENDING && (
        <>
          <View className={styles.paidInfo}>已支付 ¥ 90</View>
          <View className={styles.gameStatus}>
            <Text className={styles.statusText}>球局暂未开始</Text>
            <Text>球局开始前2小时，我们将通过短信通知你</Text>
          </View>
        </>
      )}
      <View className={styles.gameInfo}>
        {/* Date and Weather */}
        <View className={styles.gameInfoDateWeather}>
          {/* Calendar and Date time */}
          <View className={styles.gameInfoDateWeatherCalendarDate}>
            {/* Calendar */}
            <View className={styles.gameInfoDateWeatherCalendarDateCalendar}>
              <View className={styles.month}>{startMonth}月</View>
              <View className={styles.day}>{startDay}</View>
            </View>
            {/* Date time */}
            <View className={styles.gameInfoDateWeatherCalendarDateDate}>
              <View className={styles.date}>{startDate}</View>
              <View className={styles.venueTime}>
                {gameRange} （{game_length}小时）
              </View>
            </View>
          </View>
        </View>
        {/* Place */}
        <View className={styles.gameInfoPlace}>
          {/* venue location message */}
          <View className={styles.locationMessage}>
            {/* location icon */}
            <View className={styles.locationMessageIcon}>
              <Image
                className={styles.locationMessageIconImage}
                src="https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/43aab7e9-061e-4e3b-88c6-61c19b660b22.png"
              />
            </View>
            {/* location message */}
            <View className={styles.locationMessageText}>
              {/* venue name and distance */}
              <View
                className={styles.locationMessageTextNameDistance}
                onClick={openMap}
              >
                <Text>{location_name || "-"}</Text>
                {distance ? (
                  <>
                    <Text>·</Text>
                    <Text>{distance.toFixed(1)}km</Text>
                  </>
                ) : null}

                <Image
                  className={styles.locationMessageTextNameDistanceArrow}
                  src={img.ICON_DETAIL_ARROW_RIGHT}
                />
              </View>
              {/* venue address */}
              <View className={styles.locationMessageTextAddress}>
                <Text>{location || "-"}</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
      {/* Action bar */}
      <View className={styles.gameInfoActions}></View>
    </View>
  );
}

function OrderMsg(props) {
  const { detail, checkOrderInfo } = props;
  const {
    start_time,
    end_time,
    location,
    location_name,
    wechat_contact,
    price,
  } = detail;
  const { order_info: { registrant_nickname } = {} } = checkOrderInfo;
  const startTime = dayjs(start_time);
  const endTime = dayjs(end_time);
  const startYear = startTime.format("YYYY");
  const startMonth = startTime.format("M");
  const startDay = startTime.format("D");
  const startDate = `${startYear}年${startMonth}月${startDay}日`;
  const gameRange = `${startTime.format("HH:mm")} - ${endTime.format("HH:mm")}`;
  const summary = [
    {
      title: "时间",
      content: `${startDate} ${gameRange}`,
    },
    {
      title: "地址",
      content: `${location} ${location_name}`,
    },
    {
      title: "组织者昵称",
      content: registrant_nickname,
    },
    {
      title: "组织者电话",
      content: wechat_contact,
    },
    {
      title: "费用",
      content: `${price} 元 / 人`,
    },
  ];
  return (
    <View className={styles.orderSummary}>
      <View className={styles.moduleTitle}>
        <Text>确认订单信息</Text>
      </View>
      {/* 订单信息摘要 */}
      <View className={styles.summaryList}>
        {summary.map((item, index) => (
          <View key={index} className={styles.summaryItem}>
            <Text className={styles.title}>{item.title}</Text>
            <Text className={styles.content}>{item.content}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

function RefundPolicy(props) {
  const { checkOrderInfo } = props;
  const { refund_policy = [] } = checkOrderInfo;
  const policyList = [
    {
      time: "申请退款时间",
      rule: "退款规则",
    },
    ...refund_policy.map((item, index) => {
      const [, theTime] = item.application_time.split("undefined ");
      const theTimeObj = dayjs(theTime);
      const year = theTimeObj.format("YYYY");
      const month = theTimeObj.format("M");
      const day = theTimeObj.format("D");
      const time = theTimeObj.format("HH:MM");
      return {
        time: `${year}年${month}月${day}日${time}${index === 0 ? "前" : "后"}`,
        rule: item.refund_rule,
      };
    }),
  ];
  return (
    <View className={styles.refundPolicy}>
      <View className={styles.moduleTitle}>
        <Text>退款政策</Text>
      </View>
      {/* 订单信息摘要 */}
      <View className={styles.policyList}>
        {policyList.map((item, index) => (
          <View key={index} className={styles.policyItem}>
            <View className={styles.time}>{item.time}</View>
            <View className={styles.rule}>{item.rule}</View>
          </View>
        ))}
      </View>
    </View>
  );
}

function Disclaimer() {
  return (
    <View className={styles.declaimer}>
      <Text className={styles.title}>免责声明</Text>
      <Text className={styles.content}>{DECLAIMER}</Text>
    </View>
  );
}

const OrderCheck = () => {
  const { params } = useRouter();
  const { id: stringId, gameId: stringGameId } = params;
  const [id, gameId] = [Number(stringId), Number(stringGameId)];
  const [detail, setDetail] = useState<GameData | {}>({});
  const [location, setLocation] = useState<number[]>([0, 0]);
  const [checkOrderInfo, setCheckOrderInfo] = useState<GameOrderRes | {}>({});
  const [orderDetail, setOrderDetail] = useState({});

  useDidShow(async () => {
    let gameDetail = {};
    if (id) {
      const res = await orderService.getOrderDetail(id);
      if (res.code === 0) {
        setOrderDetail(res.data);
        gameDetail = res.data.game_info;
      }
    } else if (gameId) {
      const res = await detailService.getDetail(gameId);
      if (res.code === 0) {
        gameDetail = res.data;
      }
    }
    if (gameDetail.id) {
      setDetail(gameDetail);
      onInit(gameDetail.id);
    }
  });

  async function checkOrder(gid) {
    const orderRes = await orderService.getCheckOrderInfo(gid);
    setCheckOrderInfo(orderRes.data);
  }

  async function onInit(gid) {
    checkOrder(gid);
    const location = await getCurrentLocation();
    setLocation([location.latitude, location.longitude]);
  }

  async function getPaymentParams() {
    const unPaidRes = await orderService.getUnpaidOrder(detail.id);
    if (unPaidRes.code === 0 && unPaidRes.data.has_unpaid_order) {
      return unPaidRes.data.payment_params;
    }
    const createOrderRes = await orderService.createOrder(detail.id);
    if (createOrderRes.code === 0) {
      return createOrderRes.data.payment_params;
    }
    throw new Error("支付调用失败");
  }

  //TODO: get order msg from id
  const handlePay = async () => {
    Taro.showLoading({
      title: "支付中...",
      mask: true,
    });

    try {
      const payment_params = await getPaymentParams();
      await payOrder(payment_params);
      Taro.hideLoading();
      Taro.showToast({
        title: "支付成功",
        icon: "success",
      });
      await delay(1000);
      Taro.navigateBack({
        delta: 1,
      });
    } catch (error) {
      Taro.hideLoading();
      Taro.showToast({
        title: error.message,
        icon: "none",
      });
    }
  };
  if (!id && !gameId) {
    return (
      <View className={styles.errorTip}>
        <Text>异常订单</Text>
        <Button
          type="warn"
          onClick={() => {
            Taro.redirectTo({ url: "/pages/list/index" });
          }}
        >
          回到首页
        </Button>
      </View>
    );
  }
  return (
    <View className={styles.container}>
      {/* Game Date and Address */}
      <GameInfo
        detail={detail}
        orderDetail={orderDetail}
        currentLocation={location}
      />
      {/* Order message */}
      <OrderMsg detail={detail} checkOrderInfo={checkOrderInfo} />
      {/* Refund policy */}
      <RefundPolicy checkOrderInfo={checkOrderInfo} />
      {/* Disclaimer */}
      <Disclaimer />
      {(!id || orderDetail.order_status === OrderStatus.PENDING) && (
        <Button className={styles.payButton} type="primary" onClick={handlePay}>
          {orderDetail.order_status === OrderStatus.PENDING ? "继续" : ""}支付
        </Button>
      )}
    </View>
  );
};

export default withAuth(OrderCheck);