<template>
  <div class="relative min-h-screen flex flex-col">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div v-if="contact?.customHtml" v-html="customHeaderHtml" />
    <div class="app-shell" :style="backgroundStyle">
      <div class="background-overlay" :style="overlayStyle" />
      <button
        class="background-toggle"
        :title="hideComponents ? '显示内容' : '隐藏内容'"
        :class="{ active: hideComponents }"
        @click="hideComponents = !hideComponents"
      >
        <span class="toggle-icon">{{ hideComponents ? "👁️" : "🙈" }}</span>
        <span class="toggle-label">{{ hideComponents ? "显示" : "隐藏" }}</span>
      </button>
      <div class="content-stack">
        <Transition name="fade-down">
          <main v-if="!hideComponents" key="content" class="app-body">
            <NuxtPage />
          </main>
        </Transition>
        <Transition name="fade-up">
          <PageSwitcher v-if="!hideComponents" key="switcher" />
        </Transition>
        <Transition name="fade-down">
          <FooterSection v-if="!hideComponents" key="footer" :contact="contact" />
        </Transition>
      </div>
      <MusicPlayer />
    </div>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import PageSwitcher from "~/components/PageSwitcher.vue";
import FooterSection from "~/components/FooterSection.vue";
import MusicPlayer from "~/components/MusicPlayer.vue";
import siteConfig from "~/config/siteConfig";

const customHeaderHtml = siteConfig.header.customHtml;
const contact = siteConfig.footer;
const bg = siteConfig.appearance.background;
const isMobile = ref(false);
const hideComponents = ref(false);

const checkIfMobile = () => {
  isMobile.value = typeof window !== "undefined" && window.innerWidth <= 768;
};

onMounted(() => {
  checkIfMobile();
  window.addEventListener("resize", checkIfMobile);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", checkIfMobile);
});

const getBackgroundImage = () => {
  if (!bg.enable) return undefined;
  const image = isMobile.value && bg.mobileImage ? bg.mobileImage : bg.image;
  if (!image) return undefined;
  return image.startsWith("http") ? image : `/${image}`;
};

const backgroundStyle = computed(() => ({ backgroundColor: "#0f1629" }));

const overlayStyle = computed(() => {
  const imageUrl = getBackgroundImage();
  if (!bg.enable || !imageUrl) return {};
  return {
    backgroundImage: `linear-gradient(${bg.overlay}, ${bg.overlay}), url('${imageUrl}')`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundAttachment: "fixed",
    filter: bg.blur ? `blur(${bg.blur}px)` : undefined,
  };
});
</script>
