<template>
  <PageFrame>
    <div class="tools-container">
      <!-- 滑动区域 -->
      <div
        class="tools-viewport"
        @touchstart.passive="onTouchStart"
        @touchend.passive="onTouchEnd"
        @mousedown="onMouseDown"
        @mouseup="onMouseUp"
      >
        <div class="tools-track" :style="trackStyle">
          <div
            v-for="pageIndex in totalPages"
            :key="pageIndex"
            class="tools-page"
          >
            <section class="tools-grid">
              <article
                v-for="tool in pageTools(pageIndex - 1)"
                :key="tool + pageIndex"
                class="tool-card"
                @click="handleToolClick(tool)"
              >
                <h3 class="tool-title">{{ tool }}</h3>
              </article>
            </section>
          </div>
        </div>
      </div>

      <!-- 分页指示器 -->
      <div class="pagination-dots">
        <span
          v-for="(_, i) in totalPages"
          :key="i"
          class="dot"
          :class="{ active: i === currentPage }"
          @click="currentPage = i"
        />
      </div>
    </div>
  </PageFrame>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import PageFrame from "@/components/layout/PageFrame.vue";

const tools = [
  "单词书",
  "单词闯关",
  "单词测评",
  "词典",
  "生词本",
  "乐读",
  "乐训语感",
  "句子箱",
  "零基础",
];

const pageSize = 9;
const currentPage = ref(0);
const router = useRouter();
const totalPages = computed(() => Math.ceil(tools.length / pageSize));

const pageTools = (pageIndex: number) =>
  tools.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);

const trackStyle = computed(() => ({
  transform: `translateX(-${currentPage.value * 100}%)`,
}));

function handleToolClick(tool: string) {
  if (tool !== "单词书") return;
  router.push({ name: "english-word-book" });
}

// ---- 触摸滑动 ----
let touchStartX = 0;

function onTouchStart(e: TouchEvent) {
  touchStartX = e.touches[0].clientX;
}

function onTouchEnd(e: TouchEvent) {
  const diff = touchStartX - e.changedTouches[0].clientX;
  if (Math.abs(diff) < 40) return;
  if (diff > 0 && currentPage.value < totalPages.value - 1) currentPage.value++;
  else if (diff < 0 && currentPage.value > 0) currentPage.value--;
}

// ---- 鼠标拖拽（桌面端调试用）----
let mouseStartX = 0;

function onMouseDown(e: MouseEvent) {
  mouseStartX = e.clientX;
}

function onMouseUp(e: MouseEvent) {
  const diff = mouseStartX - e.clientX;
  if (Math.abs(diff) < 40) return;
  if (diff > 0 && currentPage.value < totalPages.value - 1) currentPage.value++;
  else if (diff < 0 && currentPage.value > 0) currentPage.value--;
}
</script>

<style scoped lang="scss">
.tools-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  gap: 16px;
  position: relative;
}

/* 可视窗口：溢出裁剪 */
.tools-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: grab;
  user-select: none;

  &:active {
    cursor: grabbing;
  }
}

/* 水平轨道：所有页并排 */
.tools-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 每一页：宽度固定为 100% */
.tools-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 32px 33px;
  width: 100%;
  height: 100%;
}

.tool-card {
  display: flex;
  align-items: flex-start;
  border-radius: 24px;
  background: #fff;
  padding: 99px 64px;
  width: 554px;
  height: 238px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  min-width: 0;
  min-height: 0;

  &:hover {
    box-shadow: 0 6px 18px rgba(51, 83, 145, 0.15);
  }
}

.tool-title {
  font-size: 44px;
  font-weight: 600;
  color: #121212;
}

.pagination-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
}

.dot {
  width: 12px;
  height: 6px;
  border-radius: 4px;
  background: #d6deeb;
  cursor: pointer;
  transition: all 0.2s;

  &.active {
    width: 32px;
    height: 6px;
    background: #adc9ff;
  }
}
</style>
