<template>
  <div class="page">
    <div ref="transitionBoxRef" class="transition-box">
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="blob"></div>
      <div class="subject-box">
        <!-- 画板 -->
        <div class="menu-item" @click="openMainWindow">
          <fluent-window24-regular class="menu-icon"></fluent-window24-regular>
          <span id="drawing-board-text">打开主窗口</span>
        </div>
        <!-- 画板 -->
        <div class="menu-item" @click="openBoardWindow">
          <fluent-hand-draw24-regular class="menu-icon"></fluent-hand-draw24-regular>
          <span id="drawing-board-text">打开画板</span>
        </div>
        <!-- 退出应用程序 -->
        <div class="menu-item" @click="exitApp">
          <solar-power-linear class="menu-icon"> </solar-power-linear>
          <span>退出应用程序</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
  import FluentWindow24Regular from '~icons/fluent/window-24-regular';
  import FluentHandDraw24Regular from '~icons/fluent/hand-draw-24-regular';
  import SolarPowerLinear from '~icons/solar/power-linear';
  import { playPromptTone } from '@/utils/prompt-tone';
  import type { Placement } from '@/utils/tauri/windows-util';
  import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
  import { exit } from '@tauri-apps/plugin-process';
  import type { UnlistenFn } from '@tauri-apps/api/event';
  import { createDrawingBoardWindow, createMainWindow } from '@/utils/tauri/windows-action';

  const webviewWindow = WebviewWindow.getCurrent();
  const placement = ref<Placement>('auto');
  const transitionBoxRef = useTemplateRef('transitionBoxRef');
  const isExitApp = ref(false);
  let closeTimeout: NodeJS.Timeout | null = null;
  const transitionName = computed(() => getTransitionName(placement.value));
  let unlisten: UnlistenFn | undefined = undefined;
  // 页面加载完成后初始化
  onMounted(() => {
    const params = new URLSearchParams(window.location.search);
    placement.value = (params.get('placement') || 'auto') as Placement;

    webviewWindow.setFocus();
    webviewWindow
      .listen('tauri://blur', () => {
        hideWindow();
      })
      .then((_unlisten) => {
        unlisten = _unlisten;
      });
    document.addEventListener('contextmenu', (e) => {
      e.preventDefault();
    });

    applyTransitionClass();
  });

  onUnmounted(() => {
    unlisten?.();
  });

  /**
   * 应用过渡动画类
   */
  function applyTransitionClass() {
    // 设置过渡时间为0，确保初始状态立即应用
    transitionBoxRef.value!.style.transitionDuration = `0ms`;
    transitionBoxRef.value!.classList.add(`${transitionName.value}-enter-active`);
    transitionBoxRef.value!.classList.add(`${transitionName.value}-enter-from`);
    transitionBoxRef.value!.style.transitionDuration = `300ms`;
    transitionBoxRef.value!.classList.remove(`${transitionName.value}-enter-from`);
    transitionBoxRef.value!.classList.add(`${transitionName.value}-enter-to`);
  }

  /**
   * 退出应用程序
   */
  function exitApp() {
    playPromptTone();
    isExitApp.value = true;
    hideWindow();
  }

  /**
   * 打开画板窗口
   */
  async function openBoardWindow() {
    playPromptTone();
    await createDrawingBoardWindow();
    hideWindow();
  }

  /**
   * 退出登录
   */
  function openMainWindow() {
    playPromptTone();
    createMainWindow();
  }

  /**
   * 隐藏窗口
   */
  function hideWindow() {
    closeTimeout && clearTimeout(closeTimeout);
    transitionBoxRef.value!.style.transitionDuration = `0ms`;
    transitionBoxRef.value!.classList.remove(`${transitionName.value}-enter-to`);
    transitionBoxRef.value!.classList.add(`${transitionName.value}-leave-from`);
    nextTick(() => {
      transitionBoxRef.value!.style.transitionDuration = `300ms`;
      transitionBoxRef.value!.classList.remove(`${transitionName.value}-leave-from`);
      transitionBoxRef.value!.classList.add(`${transitionName.value}-leave-to`);
      // 动画结束后关闭窗口
      closeTimeout = setTimeout(() => {
        handleTransitionEnd();
      }, 300);
    });
  }

  /**
   * 处理过渡动画结束事件
   */
  function handleTransitionEnd() {
    if (isExitApp.value) {
      isExitApp.value = false;
      exit(0);
    } else {
      webviewWindow.close();
    }
  }

  /**
   * 获取过渡动画名称
   */
  function getTransitionName(_placement: Placement) {
    switch (_placement) {
      case 'top':
        return 'zoom-in-bottom';
      case 'bottom':
        return 'zoom-in-top';
      case 'left':
        return 'zoom-in-left';
      case 'right':
        return 'zoom-in-right';
      default:
        return 'fade-in';
    }
  }
</script>

<style scoped lang="scss">
  @keyframes color-change1 {
    0% {
      background: rgb(250, 230, 115);
    }

    25% {
      background: rgb(250, 151, 201);
    }

    50% {
      background: rgb(198, 139, 253);
    }

    75% {
      background: rgb(130, 214, 250);
    }

    100% {
      background: rgb(250, 230, 115);
    }
  }
  @keyframes color-change2 {
    0% {
      background: rgb(198, 139, 253);
    }

    25% {
      background: rgb(250, 151, 201);
    }

    50% {
      background: rgb(250, 230, 115);
    }

    75% {
      background: rgb(130, 214, 250);
    }

    100% {
      background: rgb(198, 139, 253);
    }
  }
  @keyframes color-change3 {
    0% {
      background: rgb(130, 214, 250);
    }

    25% {
      background: rgb(250, 230, 115);
    }

    50% {
      background: rgb(198, 139, 253);
    }

    75% {
      background: rgb(250, 151, 201);
    }

    100% {
      background: rgb(130, 214, 250);
    }
  }
  @keyframes float-1 {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(70vh);
    }

    100% {
      transform: translateY(0);
    }
  }
  @keyframes float-2 {
    0% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-60vh);
    }

    100% {
      transform: translateY(0);
    }
  }

  body {
    padding: 0;
    margin: 0;
  }

  .page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border-radius: 20px;
  }

  .transition-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #eeeeee;
    border-radius: 20px;
  }

  .blob {
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    filter: blur(30px);

    &:nth-child(1) {
      top: 20px;
      left: 20px;
      animation:
        float-1 12s ease-in-out infinite,
        color-change1 16s infinite;
    }

    &:nth-child(2) {
      top: 20px;
      right: 20px;
      z-index: -1;
      animation:
        float-1 15s ease-in-out infinite,
        color-change2 18s infinite;
    }

    &:nth-child(3) {
      bottom: 30px;
      left: 40px;
      animation:
        float-2 13s ease-in-out infinite,
        color-change3 12s infinite;
    }

    &:nth-child(4) {
      right: 40px;
      bottom: 60px;
      animation:
        float-2 10s ease-in-out infinite,
        color-change1 14s infinite;
    }
  }

  .subject-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    height: 100vh;

    .menu-item {
      display: flex;
      flex: 1;
      align-items: center;
      width: 100%;
      padding: 0 15px;
      font-size: 16px;
      color: #222222;
      cursor: pointer;
      user-select: none;
      border-radius: 6px;
      transition: background-color 0.2s;

      &:hover {
        background: rgba(207, 207, 207, 0.3);
      }

      .menu-icon {
        width: 1em;
        height: 1em;
        margin-right: 12px;
        font-size: 20px;
      }
    }
  }

  .fade-in-enter-active,
  .fade-in-leave-active {
    transition: opacity 0.3s linear;
  }

  .fade-in-enter-from,
  .fade-in-leave-to {
    opacity: 0;
  }

  .zoom-in-top-enter-active,
  .zoom-in-top-leave-active {
    transition:
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center top;
  }

  .zoom-in-top-enter-from,
  .zoom-in-top-leave-to {
    opacity: 0;
    transform: scaleY(0);
  }

  .zoom-in-top-enter-to,
  .zoom-in-top-leave-from {
    opacity: 1;
    transform: scaleY(1);
  }

  .zoom-in-bottom-enter-active,
  .zoom-in-bottom-leave-active {
    transition:
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center bottom;
  }

  .zoom-in-bottom-enter-from,
  .zoom-in-bottom-leave-to {
    opacity: 0;
    transform: scaleY(0);
  }

  .zoom-in-bottom-enter-to,
  .zoom-in-bottom-leave-from {
    opacity: 1;
    transform: scaleY(1);
  }

  .zoom-in-left-enter-active,
  .zoom-in-left-leave-active {
    transition:
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center left;
  }

  .zoom-in-left-enter-from,
  .zoom-in-left-leave-to {
    opacity: 0;
    transform: scaleX(0);
  }

  .zoom-in-right-enter-active,
  .zoom-in-right-leave-active {
    transition:
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center right;
  }

  .zoom-in-right-enter-from,
  .zoom-in-right-leave-to {
    opacity: 0;
    transform: scaleX(0);
  }
</style>
