<template>
  <div class="relative flex flex-col min-h-screen">
    <!-- Random background -->
    <div class="app-randbg" aria-hidden="true">
      <img
        v-if="randBgUrl"
        class="app-randbg-img"
        :src="randBgUrl"
        alt=""
        decoding="async"
        fetchpriority="low"
      />
    </div>

    <!-- PWA Splash Screen -->
    <SplashScreen :visible="showSplash" />

    <!-- Top navigation bar -->
    <header class="flex items-center justify-between gap-5 px-[5vw] py-4 glass-strong border-b border-white/35 shadow-[0_4px_24px_rgba(33,33,40,0.08)] sticky top-0 z-[100] max-md:flex-row max-md:flex-nowrap max-md:px-[3vw] max-md:py-2 max-md:gap-1.5">
      <!-- Brand -->
      <div class="flex gap-4 items-center cursor-pointer select-none max-md:gap-2 max-md:flex-shrink-0" @click="onLogoClick">
        <div class="w-[46px] h-[46px] rounded-[10px] overflow-hidden border border-white/60 glass-strong shadow-[0_12px_24px_rgba(33,33,40,0.18)] flex items-center justify-center max-md:w-8 max-md:h-8">
          <img src="/logo.png" alt="萌芽小店" draggable="false" class="w-full h-full object-contain" />
        </div>
        <div>
          <h1 class="text-[28px] tracking-wide max-md:text-base max-md:whitespace-nowrap">萌芽小店</h1>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex gap-3 items-center max-md:gap-1 max-md:flex-shrink-0 max-md:overflow-hidden">
        <button class="ghost" @click="goHome">商店</button>
        <template v-if="loggedIn">
          <button class="ghost relative inline-flex items-center gap-1" @click="goWishlist">
            <span class="max-md:text-xs">☆</span>
            收藏夹
            <span
              v-if="wishlistCount > 0"
              class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-gradient-to-br from-accent to-accent2 text-white text-[11px] font-bold leading-none max-md:min-w-[14px] max-md:h-[14px] max-md:text-[9px]"
            >{{ wishlistCount }}</span>
          </button>
          <button class="ghost" @click="goMyOrders">我的订单</button>
          <div
            class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/60 border border-white/35 cursor-pointer hover:bg-white/85 transition-colors max-md:px-1.5 max-md:gap-1"
            @click="goProfile"
          >
            <img
              v-if="authState.avatarUrl"
              class="w-7 h-7 rounded-full object-cover border border-white/35 max-md:w-5 max-md:h-5"
              :src="authState.avatarUrl"
              :alt="authState.username"
            />
            <div
              v-else
              class="w-7 h-7 rounded-full flex items-center justify-center bg-gradient-to-br from-accent to-accent2 text-white text-[15px] font-semibold border border-white/35 max-md:w-5 max-md:h-5 max-md:text-xs"
            >
              {{ (authState.username || authState.account || '?').charAt(0) }}
            </div>
            <span class="text-[17px] font-bold text-apptext max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap max-md:text-xs max-md:max-w-[50px]">
              {{ authState.username || authState.account }}
            </span>
          </div>
          <button class="ghost" @click="logout">退出</button>
        </template>
        <a
          v-else
          class="inline-flex items-center px-[18px] py-[10px] rounded-lg bg-gradient-to-br from-accent to-accent2 text-white no-underline text-[17px] shadow-[0_10px_30px_rgba(145,168,208,0.35)] transition-transform hover:-translate-y-px max-md:text-xs max-md:px-2 max-md:py-1.5 max-md:whitespace-nowrap"
          :href="loginUrl"
        >萌芽账号登录</a>
      </div>
    </header>

    <!-- Admin modal -->
    <Teleport to="body">
      <Transition name="modal">
        <div
          v-if="showAdminModal"
          class="admin-modal fixed inset-0 z-[1000] flex items-center justify-center bg-apptext/35 backdrop-blur-lg"
          @click.self="showAdminModal = false"
        >
          <div class="admin-modal relative w-[360px] max-w-[90vw] px-8 pt-9 pb-7 glass-strong rounded-xl shadow-[0_24px_60px_rgba(33,33,40,0.22)] text-center">
            <button
              class="absolute top-3 right-4 bg-transparent border-none text-[22px] text-muted hover:text-apptext cursor-pointer px-2 py-1 rounded leading-none transition-colors"
              @click="showAdminModal = false"
            >&times;</button>
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-[10px] bg-gradient-to-br from-accent to-accent2 text-white mb-4">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            </div>
            <h3 class="text-[22px] mb-1.5">管理员验证</h3>
            <p class="text-[15px] text-muted mb-5">请输入管理员令牌以访问后台</p>
            <form @submit.prevent="submitAdminToken">
              <input
                ref="tokenInputRef"
                v-model="tokenInput"
                type="password"
                class="w-full px-4 py-3 rounded-lg border border-white/35 bg-white/65 text-center tracking-widest text-[18px] outline-none transition focus:border-accent focus:shadow-[0_0_0_3px_rgba(180,154,203,0.18)]"
                style="font-family: var(--font-serif);"
                placeholder="输入 Token…"
                autocomplete="off"
              />
              <p v-if="tokenError" class="text-[15px] text-[#d4566a] mt-2">{{ tokenError }}</p>
              <button type="submit" class="primary w-full mt-4 py-3 text-[17px]" :disabled="!tokenInput.trim()">
                进入后台
              </button>
            </form>
          </div>
        </div>
      </Transition>
    </Teleport>

    <!-- Page body -->
    <div class="flex-1 flex flex-col px-[5vw] py-7 max-md:px-[2vw] max-md:py-3">
      <main class="flex-1 py-7 min-h-0">
        <router-view />
      </main>

      <!-- Footer -->
      <footer class="mt-3 px-[26px] py-6 glass rounded-[var(--radius-default)] shadow-[0_-4px_30px_rgba(33,33,40,0.06)] max-md:px-3.5 max-md:py-5">
        <div class="flex flex-col items-center gap-3.5">
          <!-- Brand -->
          <div class="flex items-center gap-2.5">
            <img src="/logo.png" alt="萌芽小店" class="w-7 h-7 rounded-[5px] object-contain border border-white/50 shadow-[0_4px_12px_rgba(33,33,40,0.1)]" />
            <span class="text-[19px] font-semibold text-apptext tracking-[0.5px]" style="font-family: var(--font-serif);">萌芽小店</span>
          </div>

          <!-- Divider -->
          <div class="w-10 h-0.5 rounded-full bg-gradient-to-r from-accent to-accent2 opacity-50"></div>

          <!-- Links / stats -->
          <div class="flex items-center gap-6 flex-wrap justify-center max-md:flex-row max-md:flex-wrap max-md:gap-2.5 max-md:justify-center">
            <a
              class="inline-flex items-center gap-1.5 text-[#3d5a88] no-underline text-[15px] font-semibold px-3 py-1.5 rounded bg-[rgba(145,168,208,0.12)] hover:bg-[rgba(145,168,208,0.22)] transition-colors"
              href="mailto:mail@smyhub.com"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
              mail@smyhub.com
            </a>
            <span v-if="statsLoaded" class="inline-flex items-center gap-1.5 text-[15px] font-semibold text-[#6b4d85] px-3 py-1.5 rounded bg-[rgba(180,154,203,0.12)]">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
              累计下单 {{ stats.totalOrders }} 次
            </span>
            <span v-if="statsLoaded" class="inline-flex items-center gap-1.5 text-[15px] font-semibold text-[#3d5a88] px-3 py-1.5 rounded bg-[rgba(145,168,208,0.12)]">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
              累计访问 {{ stats.totalVisits }} 次
            </span>
          </div>

          <p class="text-[14px] text-[#45424a]/95 tracking-[0.3px]">© 2025 – 2026 萌芽小店 · All rights reserved</p>
        </div>
      </footer>
    </div>

    <!-- Floating chat widget -->
    <ChatWidget
      v-if="loggedIn && authState.token"
      :user-token="authState.token"
      :user-name="authState.username || authState.account"
      :user-avatar="authState.avatarUrl"
    />

    <!-- PWA update toast -->
    <Transition name="pwa-toast">
      <div
        v-if="needRefresh"
        class="fixed bottom-20 left-1/2 -translate-x-1/2 z-[9999] flex items-center gap-3 px-[18px] py-2.5 rounded-3xl bg-[#1a1a1a] text-white text-[13px] shadow-[0_4px_24px_rgba(0,0,0,0.25)] whitespace-nowrap"
      >
        <span>发现新版本</span>
        <button
          class="bg-[#4ade80] text-[#111] border-none rounded-xl px-3.5 py-1 text-xs font-semibold cursor-pointer"
          @click="updateServiceWorker(true)"
        >立即更新</button>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { verifyAdminToken, fetchStats, recordSiteVisit } from './modules/shared/api'
import { authState, isLoggedIn, clearAuth, getLoginUrl } from './modules/shared/auth'
import { wishlistCount, loadWishlist } from './modules/shared/useWishlist'
import ChatWidget from './modules/chat/ChatWidget.vue'
import SplashScreen from './modules/shared/SplashScreen.vue'
import { useRegisterSW } from 'virtual:pwa-register/vue'

const RAND_BG_JSON_URL = 'https://randbg.api.smyhub.com/api/random?format=json'

const { needRefresh, updateServiceWorker } = useRegisterSW({
  onRegisteredSW(swUrl, r) {
    if (r) setInterval(() => r.update(), 1000 * 60 * 60)
  }
})

const showSplash = ref(true)
const randBgUrl = ref('')

const router = useRouter()
const stats = reactive({ totalOrders: 0, totalVisits: 0 })
const statsLoaded = ref(false)

const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())

const showAdminModal = ref(false)
const tokenInput = ref('')
const tokenError = ref('')
const tokenInputRef = ref(null)

let logoClickCount = 0
let logoClickTimer = null
const CLICK_THRESHOLD = 5
const CLICK_WINDOW_MS = 2000

const onLogoClick = () => {
  logoClickCount++
  clearTimeout(logoClickTimer)
  if (logoClickCount >= CLICK_THRESHOLD) {
    logoClickCount = 0
    tokenInput.value = ''
    tokenError.value = ''
    showAdminModal.value = true
    nextTick(() => tokenInputRef.value?.focus())
    return
  }
  logoClickTimer = setTimeout(() => { logoClickCount = 0 }, CLICK_WINDOW_MS)
}

const submitAdminToken = async () => {
  const input = tokenInput.value.trim()
  if (!input) return
  tokenError.value = ''
  try {
    const valid = await verifyAdminToken(input)
    if (valid) {
      showAdminModal.value = false
      router.push(`/admin?token=${encodeURIComponent(input)}`)
    } else {
      tokenError.value = '令牌错误，请重试'
    }
  } catch {
    tokenError.value = '验证失败，无法连接服务器'
  }
}

const goHome = () => { router.push('/') }
const goMyOrders = () => { router.push('/my/orders') }
const goWishlist = () => { router.push('/wishlist') }

const goProfile = () => {
  if (authState.account) {
    window.open(`https://auth.shumengya.top/user/${authState.account}`, '_blank')
  }
}

const logout = () => { clearAuth() }

const SPLASH_MIN_MS = 1400

onMounted(async () => {
  const splashStart = Date.now()

  fetch(RAND_BG_JSON_URL)
    .then((r) => r.json())
    .then((data) => {
      if (data && typeof data.url === 'string') randBgUrl.value = data.url
    })
    .catch(() => {})

  await loadWishlist()
  try {
    recordSiteVisit().then((result) => {
      if (result.totalVisits) stats.totalVisits = result.totalVisits
    }).catch(() => {})
    const data = await fetchStats()
    stats.totalOrders = data.totalOrders || 0
    stats.totalVisits = data.totalVisits || 0
    statsLoaded.value = true
  } catch (e) {
    statsLoaded.value = false
  }

  const elapsed = Date.now() - splashStart
  const remaining = SPLASH_MIN_MS - elapsed
  setTimeout(() => { showSplash.value = false }, remaining > 0 ? remaining : 0)
})

watch(() => authState.token, async (newToken) => {
  if (newToken) {
    await loadWishlist()
  }
})
</script>
