<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
    <div
      v-show="!aiDialogVisible"
      class="ai-float-ball"
      :style="{ left: `${floatPosition.x}px`, top: `${floatPosition.y}px` }"
      @mousedown="handleFloatMouseDown"
    >
      AI
    </div>
    <el-dialog v-model="aiDialogVisible" title="AI 对话" width="80%" draggable append-to-body class="ai-chat-dialog" @close="handleAiDialogClose">
      <AiChat />
    </el-dialog>
  </el-config-provider>
</template>

<script setup lang="ts">
import { useSettingsStore } from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { useAppStore } from '@/store/modules/app';

const appStore = useAppStore();
const AiChat = defineAsyncComponent(() => import('@/views/aiChat/index.vue'));
const aiDialogVisible = ref(false);
const floatPosition = reactive({
  x: Math.max(window.innerWidth - 96, 24),
  y: Math.max(window.innerHeight - 180, 120)
});
const dragState = reactive({
  dragging: false,
  moved: false,
  startX: 0,
  startY: 0,
  originX: 0,
  originY: 0
});

const clampFloatPosition = () => {
  floatPosition.x = Math.min(Math.max(floatPosition.x, 12), Math.max(window.innerWidth - 68, 12));
  floatPosition.y = Math.min(Math.max(floatPosition.y, 72), Math.max(window.innerHeight - 68, 72));
};

const handleFloatMouseMove = (event: MouseEvent) => {
  if (!dragState.dragging) return;
  const offsetX = event.clientX - dragState.startX;
  const offsetY = event.clientY - dragState.startY;
  if (Math.abs(offsetX) > 3 || Math.abs(offsetY) > 3) dragState.moved = true;
  floatPosition.x = dragState.originX + offsetX;
  floatPosition.y = dragState.originY + offsetY;
  clampFloatPosition();
};

const handleFloatMouseUp = () => {
  if (!dragState.dragging) return;
  dragState.dragging = false;
  window.removeEventListener('mousemove', handleFloatMouseMove);
  window.removeEventListener('mouseup', handleFloatMouseUp);
  if (!dragState.moved) aiDialogVisible.value = true;
};

const handleFloatMouseDown = (event: MouseEvent) => {
  event.preventDefault();
  dragState.dragging = true;
  dragState.moved = false;
  dragState.startX = event.clientX;
  dragState.startY = event.clientY;
  dragState.originX = floatPosition.x;
  dragState.originY = floatPosition.y;
  window.addEventListener('mousemove', handleFloatMouseMove);
  window.addEventListener('mouseup', handleFloatMouseUp);
};

const handleWindowResize = () => {
  clampFloatPosition();
};

const handleAiDialogClose = () => {
  console.log(123);
  aiDialogVisible.value = false;
};

onMounted(() => {
  window.addEventListener('resize', handleWindowResize);
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleWindowResize);
  window.removeEventListener('mousemove', handleFloatMouseMove);
  window.removeEventListener('mouseup', handleFloatMouseUp);
});
</script>

<style scoped>
.ai-float-ball {
  position: fixed;
  z-index: 3000;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  background: linear-gradient(145deg, #0f766e, #2563eb);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  color: #fff;
  cursor: grab;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  user-select: none;
}

.ai-float-ball:active {
  cursor: grabbing;
}

:deep(.ai-chat-dialog) {
  height: 80vh;
  max-height: 80vh;
  margin-top: 10vh;
}

:deep(.ai-chat-dialog .el-dialog__body) {
  height: calc(80vh - 56px);
  padding: 0;
  overflow: hidden;
}

:deep(.ai-chat-dialog .ai-chat-page) {
  min-height: 0;
  height: 100%;
  padding: 0;
}
</style>
