<script setup>
import { onMounted, ref } from 'vue';

const isDark = ref(false);

// 检查系统偏好或本地存储
onMounted(() => {
  const savedPreference = localStorage.getItem('darkMode');
  const systemPreference = window.matchMedia(
    '(prefers-color-scheme: dark)',
  ).matches;

  isDark.value =
    savedPreference === null ? systemPreference : savedPreference === 'true';

  updateDarkClass();
});

// 切换模式
function toggleDarkMode() {
  isDark.value = !isDark.value;
  localStorage.setItem('darkMode', isDark.value);
  updateDarkClass();
}

// 更新HTML class
function updateDarkClass() {
  if (isDark.value) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}
</script>

<template>
  <div
    class="flex h-full flex-col items-center justify-center bg-white dark:bg-[#1a1a1a]"
  >
    <!-- 模式切换按钮 -->
    <!--    <div class="absolute top-4 right-4">-->
    <!--      <button @click="toggleDarkMode" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">-->
    <!--        <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300"-->
    <!--             viewBox="0 0 20 20" fill="currentColor">-->
    <!--          <path fill-rule="evenodd"-->
    <!--                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"-->
    <!--                clip-rule="evenodd"/>-->
    <!--        </svg>-->
    <!--        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700"-->
    <!--             viewBox="0 0 20 20" fill="currentColor">-->
    <!--          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>-->
    <!--        </svg>-->
    <!--      </button>-->
    <!--    </div>-->

    <!-- SVG 插画 -->
    <div class="mb-8">
      <svg
        fill="none"
        height="200"
        viewBox="0 0 200 200"
        width="200"
        xmlns="http://www.w3.org/2000/svg"
      >
        <!-- 聊天气泡 -->
        <ellipse
          class="fill-blue-100 stroke-blue-500 dark:fill-blue-900 dark:stroke-blue-300"
          cx="70"
          cy="80"
          rx="35"
          ry="25"
          stroke-width="2"
        />
        <ellipse
          class="fill-purple-100 stroke-purple-500 dark:fill-purple-900 dark:stroke-purple-300"
          cx="130"
          cy="120"
          rx="35"
          ry="25"
          stroke-width="2"
        />

        <!-- 消息线条 -->
        <line
          class="stroke-blue-500 dark:stroke-blue-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="45"
          x2="55"
          y1="85"
          y2="85"
        />
        <line
          class="stroke-blue-500 dark:stroke-blue-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="45"
          x2="65"
          y1="90"
          y2="90"
        />
        <line
          class="stroke-blue-500 dark:stroke-blue-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="45"
          x2="60"
          y1="95"
          y2="95"
        />

        <line
          class="stroke-purple-500 dark:stroke-purple-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="110"
          x2="125"
          y1="115"
          y2="115"
        />
        <line
          class="stroke-purple-500 dark:stroke-purple-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="110"
          x2="140"
          y1="120"
          y2="120"
        />
        <line
          class="stroke-purple-500 dark:stroke-purple-300"
          stroke-linecap="round"
          stroke-width="2"
          x1="110"
          x2="135"
          y1="125"
          y2="125"
        />

        <!-- 装饰性元素 -->
        <circle
          class="fill-orange-500 dark:fill-orange-300"
          cx="50"
          cy="50"
          r="3"
        />
        <circle
          class="fill-green-500 dark:fill-green-300"
          cx="150"
          cy="60"
          r="3"
        />
        <circle
          class="fill-pink-500 dark:fill-pink-300"
          cx="40"
          cy="140"
          r="3"
        />
        <circle
          class="fill-blue-500 dark:fill-blue-300"
          cx="160"
          cy="150"
          r="3"
        />

        <!-- 连接线 -->
        <path
          class="stroke-gray-300 dark:stroke-gray-500"
          d="M70 105 Q100 110 130 95"
          fill="none"
          stroke-dasharray="5,5"
          stroke-width="2"
        />
      </svg>
    </div>

    <!-- 文字提示 -->
    <div class="text-center">
      <h3 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">
        开始聊天吧！
      </h3>
      <p class="max-w-md text-gray-600 dark:text-gray-400">
        从左侧选择一个联系人开始对话，享受愉快的聊天体验
      </p>
    </div>

    <!-- 装饰性动画元素 -->
    <div
      class="absolute left-20 top-20 h-4 w-4 animate-bounce rounded-full bg-blue-100 opacity-80 dark:bg-blue-800"
    ></div>
    <div
      class="absolute bottom-20 right-20 h-6 w-6 animate-pulse rounded-full bg-purple-100 opacity-80 dark:bg-purple-800"
    ></div>
    <div
      class="absolute right-40 top-40 h-3 w-3 animate-ping rounded-full bg-green-100 opacity-80 dark:bg-green-800"
    ></div>
  </div>
</template>
