<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useDraggableFab } from '../composables/useDraggableFab'

const router = useRouter()
const route = useRoute()
const open = ref(false)
const { wrapStyle, dragging, onFabPointerDown, consumeDragClick } = useDraggableFab(
  'wordloop-fab-train',
  () => ({
    x: window.innerWidth - 16 - 56,
    y: window.innerHeight - 64 - 56 - 16,
  })
)

const trainPaths = ['/quiz', '/spell', '/coach', '/graph-practice']

const isTrainRoute = computed(() =>
  trainPaths.some((p) => route.path === p || route.path.startsWith(p + '/'))
)

const items = [
  { to: '/quiz', label: '每日训练', icon: '✏️' },
  { to: '/spell', label: '拼写练习', icon: '⌨️' },
  { to: '/coach', label: '记忆对话', icon: '💬' },
]

function toggle() {
  if (consumeDragClick()) return
  open.value = !open.value
}

function go(to: string) {
  open.value = false
  if (route.path !== to) router.push(to)
}

watch(
  () => route.path,
  () => {
    open.value = false
  }
)
</script>

<template>
  <div class="train-fab-wrap" :style="wrapStyle">
    <div v-if="open" class="train-fab-backdrop" @click="open = false" />

    <transition name="train-menu">
      <ul v-if="open" class="train-fab-menu" role="menu">
        <li v-for="item in items" :key="item.to" role="none">
          <button
            type="button"
            class="train-fab-menu-item"
            role="menuitem"
            @click="go(item.to)"
          >
            <span class="menu-icon">{{ item.icon }}</span>
            {{ item.label }}
          </button>
        </li>
      </ul>
    </transition>

    <button
      type="button"
      class="train-fab-btn"
      :class="{ active: isTrainRoute, open, dragging }"
      aria-label="训练菜单"
      :aria-expanded="open"
      @pointerdown="onFabPointerDown"
      @click="toggle"
    >
      <span class="fab-icon">{{ open ? '×' : '✏️' }}</span>
      <span class="fab-label">训练</span>
    </button>
  </div>
</template>

<style scoped>
.train-fab-wrap {
  position: fixed;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.train-fab-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, 0.25);
}

.train-fab-menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(79, 110, 247, 0.2);
  border: 1px solid var(--border);
  min-width: 148px;
}

.train-fab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.train-fab-menu-item:hover {
  background: rgba(79, 110, 247, 0.08);
  color: var(--primary);
}

.menu-icon {
  font-size: 18px;
  line-height: 1;
}

.train-fab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(79, 110, 247, 0.45);
  touch-action: none;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
}

.train-fab-btn:hover:not(.dragging) {
  transform: scale(1.04);
}

.train-fab-btn.dragging {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(79, 110, 247, 0.55);
}

.train-fab-btn.active {
  box-shadow: 0 4px 20px rgba(79, 110, 247, 0.55);
}

.train-fab-btn.open {
  background: var(--primary-dark);
}

.fab-icon {
  font-size: 22px;
  line-height: 1;
}

.fab-label {
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}

.train-menu-enter-active,
.train-menu-leave-active {
  transition: opacity 0.15s, transform 0.15s;
}

.train-menu-enter-from,
.train-menu-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
</style>
