import dayjs from "dayjs";
import { message } from "@/utils/message";
import { addDialog } from "@/components/ReDialog";
import type { PaginationProps } from "@pureadmin/table";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElDescriptions,
  ElDescriptionsItem,
  ElImage,
  ElTable,
  ElTableColumn
} from "element-plus";
import {
  getRefundApplicationList,
  getRefundApplicationDetail,
  reviewRefundApplication,
  getOrderById,
  getOrderMedia
} from "@/api/order";
import type { RefundApplicationItem, RefundApplicationSearchForm } from "../../utils/types";
import { type Ref, ref, reactive, onMounted } from "vue";
import {
  initPagination,
  handlePageSizeChange,
  handleCurrentPageChange,
  resetPagination
} from "@/utils/paginationHelper";

export function useRefund(tableRef: Ref) {
  const form = reactive<RefundApplicationSearchForm>({
    orderNo: "",
    status: "",
    startDate: "",
    endDate: ""
  });

  const formRef = ref();
  const dataList = ref<RefundApplicationItem[]>([]);
  const loading = ref(true);
  const pagination = reactive<PaginationProps>(initPagination());

  const columns: TableColumnList = [
    { label: "申请编号", prop: "applicationNo", minWidth: 160 },
    {
      label: "订单编号",
      prop: "orderNo",
      minWidth: 160,
      cellRenderer: ({ row }: any) => (
        <el-button link type="primary" size="small" onClick={() => handleOrderDetail(row)}>
          {row.orderNo}
        </el-button>
      )
    },
    { label: "用户ID", prop: "userId", minWidth: 80 },
    {
      label: "退款金额",
      prop: "refundAmount",
      minWidth: 100,
      cellRenderer: ({ row }: any) => (
        <span style="color: #f56c6c; font-weight: 600;">¥{row.refundAmount || "0.00"}</span>
      )
    },
    {
      label: "申请原因",
      prop: "reason",
      minWidth: 180,
      formatter: ({ reason }: any) => reason || "-"
    },
    {
      label: "退款状态",
      prop: "status",
      minWidth: 90,
      cellRenderer: ({ row }: any) => {
        const statusMap: Record<number, { text: string; type: string }> = {
          0: { text: "待审核", type: "warning" },
          1: { text: "已通过", type: "success" },
          2: { text: "已拒绝", type: "danger" }
        };
        const s = statusMap[row.status] || { text: "未知", type: "info" };
        return <el-tag type={s.type as any} size="small">{s.text}</el-tag>;
      }
    },
    {
      label: "申请时间",
      prop: "createTime",
      minWidth: 160,
      formatter: ({ createTime }: any) =>
        createTime ? dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") : "-"
    },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      slot: "operation"
    }
  ];

  async function onSearch() {
    loading.value = true;
    try {
      const searchParams: any = {
        page: pagination.currentPage,
        pageSize: pagination.pageSize
      };
      if (form.orderNo) searchParams.orderNo = form.orderNo;
      if (form.status !== "") searchParams.status = parseInt(form.status as string, 10);
      if (form.startDate) searchParams.startDate = form.startDate;
      if (form.endDate) searchParams.endDate = form.endDate;

      const { data } = await getRefundApplicationList(searchParams);
      dataList.value = data.list || [];
      pagination.total = Number(data.total) || 0;
    } catch (error) {
      console.error("获取退款申请列表失败:", error);
      dataList.value = [];
      pagination.total = 0;
    } finally {
      setTimeout(() => { loading.value = false; }, 300);
    }
  }

  function resetForm(formEl: any) {
    if (!formEl) return;
    formEl.resetFields();
    resetPagination(pagination, onSearch);
  }

  function handleSizeChange(val: number) {
    handlePageSizeChange(val, pagination, onSearch);
  }

  function handleCurrentChange(val: number) {
    handleCurrentPageChange(val, pagination, onSearch);
  }

  async function handleOrderDetail(row: RefundApplicationItem) {
    try {
      // 先获取订单详情
      const { data: order } = await getOrderById(row.orderId) as any;
      if (!order) { message("获取订单详情失败", { type: "error" }); return; }

      // 尝试多种方式获取订单媒体（activityId > orderNo > order.videoUrl）
      let media: any = null;
      const activityId = order.activityId || row.activityId || "";
      const orderNo = order.orderNo || row.orderNo || "";
      console.log("[退款详情] 订单信息:", { orderId: row.orderId, activityId, orderNo, hasVideoUrl: !!order.videoUrl });

      // 优先用 activityId 查哈哈平台
      if (activityId) {
        try {
          const res = await getOrderMedia({ activityId });
          media = res.data;
          console.log("[退款详情] 媒体查询结果(activityId):", media);
        } catch (e) { console.warn("[退款详情] activityId 查媒体失败:", e); }
      }
      // 如果 activityId 没查到，尝试用 orderNo（哈哈平台可能用内部 orderId 也能查）
      if (!media?.video_url && !media?.main_video?.length && orderNo) {
        try {
          const res = await getOrderMedia({ orderId: orderNo });
          media = res.data;
          console.log("[退款详情] 媒体查询结果(orderNo):", media);
        } catch (e) { console.warn("[退款详情] orderNo 查媒体失败:", e); }
      }

      // 提取视频URL
      const videoUrl: string | null = media?.video_url || media?.videoUrl
        || (media?.main_video?.length ? media.main_video[0] : null)
        || order.videoUrl || null;
      console.log("[退款详情] 最终 videoUrl:", videoUrl);

      const payStatusMap: Record<string, { text: string; type: string }> = {
        "UNPAID": { text: "未支付", type: "warning" },
        "PAID": { text: "已支付", type: "success" },
        "PARTIAL_REFUND": { text: "部分退款", type: "warning" },
        "REFUND": { text: "全额退款", type: "danger" }
      };
      const ps = payStatusMap[order.payStatus] || { text: "未知", type: "info" };

      addDialog({
        title: `订单详情 - ${row.orderNo}`,
        width: "780px",
        draggable: true,
        closeOnClickModal: false,
        contentRenderer: () => (
          <div style="max-height: 70vh; overflow-y: auto; padding: 0 4px;">
            <div style="font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--el-text-color-primary);">基本信息</div>
            <ElDescriptions column={2} border size="small">
              <ElDescriptionsItem label="订单编号">{order.orderNo || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="支付订单号">{order.transactionId || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="用户ID">{order.userId || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="手机号">{order.phone || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="订单总金额">
                ¥{(order.totalAmount || 0).toFixed(2)}
              </ElDescriptionsItem>
              <ElDescriptionsItem label="实付金额">
                <span style="color: #f56c6c; font-weight: 600;">¥{(order.paidAmount || order.totalAmount || 0).toFixed(2)}</span>
              </ElDescriptionsItem>
              <ElDescriptionsItem label="优惠金额">
                ¥{(order.discountAmount || 0).toFixed(2)}
              </ElDescriptionsItem>
              <ElDescriptionsItem label="支付状态">
                <el-tag type={ps.type as any} size="small">{ps.text}</el-tag>
              </ElDescriptionsItem>
              <ElDescriptionsItem label="支付方式">{order.payType || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="门店">{order.storeName || order.shopName || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="设备ID">{order.deviceId || "-"}</ElDescriptionsItem>
              <ElDescriptionsItem label="下单时间">
                {order.createTime ? dayjs(order.createTime).format("YYYY-MM-DD HH:mm:ss") : "-"}
              </ElDescriptionsItem>
              <ElDescriptionsItem label="支付时间">
                {order.payTime ? dayjs(order.payTime).format("YYYY-MM-DD HH:mm:ss") : "-"}
              </ElDescriptionsItem>
              {order.confidence != null && (
                <ElDescriptionsItem label="识别置信度">{order.confidence}%</ElDescriptionsItem>
              )}
            </ElDescriptions>

            {order.products && order.products.length > 0 && (
              <>
                <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">订单商品</div>
                <ElTable data={order.products} border size="small" style="width: 100%">
                  <ElTableColumn label="商品名称" min-width={160}>
                    {{
                      default: ({ row: r }: any) => (
                        <div style="display: flex; align-items: center; gap: 8px;">
                          {r.pic ? (
                            <ElImage src={r.pic} style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;" fit="cover">
                              {{ error: () => (<div style="width: 40px; height: 40px; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999;">暂无</div>) }}
                            </ElImage>
                          ) : (
                            <div style="width: 40px; height: 40px; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; flex-shrink: 0;">暂无</div>
                          )}
                          <span>{r.productName}</span>
                        </div>
                      )
                    }}
                  </ElTableColumn>
                  <ElTableColumn label="单价" width={90} align="right"
                    v-slots={{ default: ({ row: r }: any) => <span>¥{(r.price || 0).toFixed(2)}</span> }}
                  />
                  <ElTableColumn label="数量" width={80} align="center"
                    v-slots={{ default: ({ row: r }: any) => <span>×{r.productNum || 1}</span> }}
                  />
                  <ElTableColumn label="小计" width={100} align="right"
                    v-slots={{
                      default: ({ row: r }: any) => (
                        <span style="color: #e6a23c; font-weight: 600;">
                          ¥{((r.price || 0) * (r.productNum || 1)).toFixed(2)}
                        </span>
                      )
                    }}
                  />
                </ElTable>
              </>
            )}

            {videoUrl && (
              <>
                <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">订单视频</div>
                <video
                  src={videoUrl}
                  controls
                  style="width:100%;max-height:400px;border-radius:8px;background:#000;"
                >
                  您的浏览器不支持视频播放
                </video>
              </>
            )}
          </div>
        ),
        hideFooter: true
      });
    } catch (error) {
      message("获取订单详情失败", { type: "error" });
    }
  }

  async function handleDetail(row: RefundApplicationItem) {
    try {
      const { data } = await getRefundApplicationDetail(row.id);
      const app = data;

      const statusMap: Record<number, { text: string; type: string }> = {
        0: { text: "待审核", type: "warning" },
        1: { text: "已通过", type: "success" },
        2: { text: "已拒绝", type: "danger" }
      };
      const s = statusMap[app.status] || { text: "未知", type: "info" };

      addDialog({
        title: "退款申请详情 - " + app.applicationNo,
        width: "600px",
        draggable: true,
        closeOnClickModal: false,
        contentRenderer: () => (
          <div style="max-height: 70vh; overflow-y: auto; padding: 0 4px;">
            <div style="font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--el-text-color-primary);">基本信息</div>
            <ElDescriptions column={2} border size="small">
              <ElDescriptionsItem label="申请编号">{app.applicationNo}</ElDescriptionsItem>
              <ElDescriptionsItem label="订单编号">{app.orderNo}</ElDescriptionsItem>
              <ElDescriptionsItem label="申请人用户ID">{app.userId}</ElDescriptionsItem>
              <ElDescriptionsItem label="退款金额">
                <span style="color: #f56c6c; font-weight: 600;">¥{(app.refundAmount || 0).toFixed(2)}</span>
              </ElDescriptionsItem>
              <ElDescriptionsItem label="退款状态">
                <el-tag type={s.type as any} size="small">{s.text}</el-tag>
              </ElDescriptionsItem>
              <ElDescriptionsItem label="申请时间">
                {app.createTime ? dayjs(app.createTime).format("YYYY-MM-DD HH:mm:ss") : "-"}
              </ElDescriptionsItem>
              <ElDescriptionsItem label="申请原因" span={2}>{app.reason || "-"}</ElDescriptionsItem>
              {app.reviewTime && (
                <ElDescriptionsItem label="审核时间">
                  {dayjs(app.reviewTime).format("YYYY-MM-DD HH:mm:ss")}
                </ElDescriptionsItem>
              )}
              {app.reviewRemark && (
                <ElDescriptionsItem label="审核备注" span={2}>{app.reviewRemark}</ElDescriptionsItem>
              )}
            </ElDescriptions>

            {app.refundProducts && app.refundProducts.length > 0 && (
              <>
                <div style="font-size: 15px; font-weight: 600; margin: 14px 0 10px; color: var(--el-text-color-primary);">退款商品</div>
                <ElTable data={app.refundProducts} border size="small" style="width: 100%">
                  <ElTableColumn label="商品名称" min-width={180}>
                    {{
                      default: ({ row: r }: any) => (
                        <div style="display: flex; align-items: center; gap: 8px;">
                          {r.pic ? (
                            <ElImage
                              src={r.pic}
                              style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;"
                              fit="cover"
                            >
                              {{
                                error: () => (
                                  <div style="width: 40px; height: 40px; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999;">暂无</div>
                                )
                              }}
                            </ElImage>
                          ) : (
                            <div style="width: 40px; height: 40px; background: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; flex-shrink: 0;">暂无</div>
                          )}
                          <span>{r.productName}</span>
                        </div>
                      )
                    }}
                  </ElTableColumn>
                  <ElTableColumn label="单价" width={100} align="right"
                    v-slots={{ default: ({ row: r }: any) => <span>¥{(r.price || 0).toFixed(2)}</span> }}
                  />
                  <ElTableColumn label="退款数量" width={90} align="center"
                    v-slots={{ default: ({ row: r }: any) => <span>×{r.quantity || 1}</span> }}
                  />
                  <ElTableColumn label="退款金额" width={110} align="right"
                    v-slots={{
                      default: ({ row: r }: any) => (
                        <span style="color: #e6a23c; font-weight: 600;">
                          ¥{((r.price || 0) * (r.quantity || 1)).toFixed(2)}
                        </span>
                      )
                    }}
                  />
                </ElTable>
              </>
            )}
          </div>
        ),
        hideFooter: true
      });
    } catch (error) {
      message("获取退款详情失败", { type: "error" });
    }
  }

  async function handleApprove(row: RefundApplicationItem) {
    try {
      const res = await reviewRefundApplication(row.id, { approved: true });
      if (res.code === 200) {
        message("退款申请已通过", { type: "success" });
        onSearch();
      } else {
        message(res.message || "操作失败", { type: "error" });
      }
    } catch (error) {
      message("操作失败", { type: "error" });
    }
  }

  function handleReject(row: RefundApplicationItem) {
    const remarkRef = ref("");
    const formRef2 = ref();

    addDialog({
      title: "拒绝退款 - " + row.applicationNo,
      width: "35%",
      draggable: true,
      closeOnClickModal: false,
      contentRenderer: () => (
        <ElForm ref={formRef2} model={{ remark: remarkRef.value }}>
          <ElFormItem
            label="拒绝原因"
            prop="remark"
            rules={[{ required: true, message: "请输入拒绝原因", trigger: "blur" }]}
          >
            <ElInput
              v-model={remarkRef.value}
              type="textarea"
              placeholder="请输入拒绝原因"
              rows={3}
            />
          </ElFormItem>
        </ElForm>
      ),
      beforeSure: async (done) => {
        const valid = await formRef2.value?.validate().catch(() => false);
        if (!valid) return;

        try {
          const res = await reviewRefundApplication(row.id, {
            approved: false,
            remark: remarkRef.value
          });
          if (res.code === 200) {
            message("退款申请已拒绝", { type: "success" });
            done();
            onSearch();
          } else {
            message(res.message || "操作失败", { type: "error" });
          }
        } catch (error) {
          message("操作失败", { type: "error" });
        }
      }
    });
  }

  onMounted(() => {
    onSearch();
  });

  return {
    form,
    loading,
    columns,
    dataList,
    pagination,
    onSearch,
    resetForm,
    handleOrderDetail,
    handleDetail,
    handleApprove,
    handleReject,
    handleSizeChange,
    handleCurrentChange
  };
}