<template>
  <div class="report-page">
    <h2 class="title">Report</h2>
    <div style="width: 100%; margin: 10px 0">
      <div style="display: flex">
        <span>场景码：</span>
        <el-input
          style="width: 200px"
          v-model="num"
          placeholder="请输入场景码"
        ></el-input>
      </div>
      <div style="display: flex; margin-top: 10px">
        <span>用户：</span>
        <el-input
          style="width: 200px"
          v-model="userId"
          placeholder="请输入用户ID"
        ></el-input>
      </div>
    </div>
    <div class="category-tabs">
      <el-button
        v-for="floor in floors"
        :key="floor"
        size="small"
        :type="floor === activeFloor ? 'primary' : 'default'"
        @click="setActiveFloor(floor)"
      >
        {{ floor }}
      </el-button>
    </div>

    <div class="button-list">
      <el-button
        v-for="item in filteredList"
        :key="item.id"
        :class="[
          'report-btn',
          { 'is-active': activeReportItem && activeReportItem.id === item.id },
        ]"
        type="primary"
        plain
        :loading="reportingId === item.id"
        @click="onReport(item)"
      >
        <span class="btn-content">
          <span class="btn-name">{{ item.name }}</span>
          <span class="btn-id">#{{ item.id }}</span>
        </span>
      </el-button>

      <el-button
        class="report-btn stop-btn"
        type="warning"
        plain
        :disabled="reportStatus === 'idle'"
        @click="onPauseReport()"
      >
        <span class="btn-content">
          <span class="btn-name">{{
            reportStatus === "paused" ? "继续" : "暂停"
          }}</span>
        </span>
      </el-button>
      <el-button
        class="report-btn stop-btn"
        type="danger"
        plain
        :disabled="reportStatus === 'idle'"
        @click="onStopReport()"
      >
        <span class="btn-content">
          <span class="btn-name">结束上报</span>
        </span>
      </el-button>
      <!-- 
      <div class="fetch-link" @click="getReportInfo">
        获取数据{{ servicesData }}
      </div> -->
    </div>

    <p v-if="reportStatus !== 'idle' && activeReportItem" class="status-text">
      {{ reportStatus === "paused" ? "Paused" : "Reporting" }}:
      {{ activeReportItem.name }} #{{ activeReportItem.id }} (every 1s)
    </p>
    <p v-else-if="reportStatus !== 'idle'" class="status-text">
      {{ reportStatus === "paused" ? "Paused" : "Reporting" }}: 未选择点位
    </p>

    <div v-if="lastReportedItem" class="report-result">
      <h3>Last Report Payload</h3>
      <pre>{{ JSON.stringify(lastReportedItem, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { reportTagInfo, startReport, stopReport } from "@/api.js";
import tagCoordinateList from "./tagCoordinateList.json";
import reportInfoStream from "./reportInfoStream.js";

export default {
  name: "ReportPage",
  data() {
    return {
      tagList: tagCoordinateList,
      reportingId: null,
      activeReportItem: null,
      lastReportedItem: null,
      reportTimer: null,
      isRequesting: false,
      reportStream: null,
      servicesData: null,
      floors: [],
      activeFloor: "",
      num: "SG-t-rQ14yS9VjVp",
      userId: null,
      reportStatus: "idle", // idle | running | paused
    };
  },
  computed: {
    filteredList() {
      if (!this.activeFloor) {
        return this.tagList;
      }
      return this.tagList.filter((item) => item.floor === this.activeFloor);
    },
  },
  beforeUnmount() {
    this.clearReportTimer();
    this.closeReportStream();

    this.unsubData && this.unsubData();
    this.unsubErr && this.unsubErr();
  },
  mounted() {
    if (this.$route.query.userId) {
      this.userId = this.$route.query.userId;
    }
    const floorList = Array.from(
      new Set(this.tagList.map((item) => item.floor).filter(Boolean)),
    );
    this.floors = floorList.sort((a, b) => {
      const aMatch = String(a).match(/\d+/);
      const bMatch = String(b).match(/\d+/);
      const aNum = aMatch ? parseInt(aMatch[0], 10) : Number.NaN;
      const bNum = bMatch ? parseInt(bMatch[0], 10) : Number.NaN;
      const aIsNum = !Number.isNaN(aNum);
      const bIsNum = !Number.isNaN(bNum);

      if (aIsNum && bIsNum) {
        return aNum - bNum;
      }
      if (aIsNum) {
        return -1;
      }
      if (bIsNum) {
        return 1;
      }
      return String(a).localeCompare(String(b), "zh-Hans-CN");
    });
    this.activeFloor = this.floors[0] || "";

    this.unsubData = reportInfoStream.subscribe((data) => {
      this.servicesData = data;
    });

    this.unsubErr = reportInfoStream.onError((err) => {
      console.error(err);
    });
  },
  methods: {
    setActiveFloor(floor) {
      this.activeFloor = floor;
    },
    closeReportStream() {
      if (this.reportStream) {
        this.reportStream.close();
        this.reportStream = null;
      }
    },
    getReportInfo() {
      reportInfoStream.start();
    },
    clearReportTimer() {
      if (this.reportTimer) {
        clearInterval(this.reportTimer);
        this.reportTimer = null;
      }
    },
    buildReportPayload(item) {
      return {
        ...item,
        num: this.num,
        userId: this.userId,
      };
    },
    sendReportOnce() {
      if (!this.activeReportItem || this.isRequesting) {
        return;
      }

      const item = this.activeReportItem;
      this.reportingId = item.id;
      this.isRequesting = true;
      const payload = this.buildReportPayload(item);

      reportTagInfo(payload)
        .then(() => {
          this.lastReportedItem = payload;
        })
        .catch((err) => {
          ElMessage({
            message: err?.message || err || "report failed",
            type: "error",
          });
        })
        .finally(() => {
          this.isRequesting = false;
          this.reportingId = null;
        });
    },
    startPolling({ immediate = false } = {}) {
      this.clearReportTimer();
      if (immediate) {
        this.sendReportOnce();
      }
      this.reportTimer = setInterval(() => {
        this.sendReportOnce();
      }, 1000);
    },
    async onReport(item) {
      if (!this.userId) {
        ElMessage({
          message: "请输入用户id",
          type: "warning",
        });
        return;
      }
      if (!this.num) {
        ElMessage({
          message: "请输入场景码",
          type: "warning",
        });
        return;
      }
      this.activeReportItem = item;

      // First click: start session + polling
      if (this.reportStatus === "idle") {
        try {
          await startReport({
            num: this.num,
            userId: this.userId,
          });
          this.reportStatus = "running";
          this.startPolling({ immediate: true });
        } catch (err) {
          ElMessage({
            message: err?.message || err || "startReport failed",
            type: "error",
          });
        }
        return;
      }

      // paused: click any point button to resume polling
      if (this.reportStatus === "paused") {
        this.reportStatus = "running";
        this.startPolling({ immediate: true });
        return;
      }

      // running: switch item and keep polling
      this.startPolling({ immediate: true });

      // (switched toast intentionally omitted)
    },
    onPauseReport() {
      if (this.reportStatus === "idle") {
        return;
      }

      if (this.reportStatus === "running") {
        this.clearReportTimer();
        this.reportStatus = "paused";
        ElMessage({ message: "report paused", type: "info" });
        return;
      }

      // paused -> running
      this.reportStatus = "running";
      this.startPolling({ immediate: true });
      ElMessage({ message: "report resumed", type: "success" });
    },
    async onStopReport() {
      if (this.reportStatus === "idle") {
        return;
      }

      this.clearReportTimer();
      this.reportingId = null;
      this.isRequesting = false;

      try {
        let res = await stopReport({
          num: this.num,
          userId: this.userId,
        });
        console.error(res);
        if (res.data) {
          ElMessageBox.alert(`记录ID: ${res.data}`, "", {
            confirmButtonText: "OK",
            callback: (action) => {
              console.log(action);
            },
          });
        }
      } catch (err) {
        ElMessage({
          message: err?.message || err || "stopReport failed",
          type: "error",
        });
      } finally {
        this.reportStatus = "idle";
        this.activeReportItem = null;
        ElMessage({ message: "report stopped", type: "info" });
      }
    },
  },
};
</script>

<style scoped>
.report-page {
  padding: calc(12px + env(safe-area-inset-top)) 12px
    calc(16px + env(safe-area-inset-bottom));
  max-width: 920px;
  margin: 0 auto;
}

.title {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.2;
}

.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.button-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.report-btn {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  margin-left: 0 !important;
}

.report-btn .btn-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.report-btn .btn-name {
  font-size: 13px;
  line-height: 1.1;
  padding-right: 8px;
}

.report-btn .btn-id {
  margin-left: 0;
  opacity: 0.8;
  font-size: 12px;
  min-width: 34px;
  text-align: right;
}

.report-btn.is-active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.stop-btn :deep(span) {
  justify-content: center;
}

.fetch-link {
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
}

.status-text {
  margin: 10px 0 0;
  color: #606266;
  font-size: 12px;
}

.report-result {
  margin-top: 20px;
}

.report-result pre {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .report-page {
    padding: 20px;
  }

  .button-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .report-btn {
    min-height: 40px;
    padding: 7px 10px;
  }
}
</style>
<style>
.el-message-box {
  width: 80% !important;
}
</style>
