<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { RefreshCw, ShieldCheck, Sparkles } from '@lucide/vue'
import { useRoute, useRouter } from 'vue-router'

import { loadSiteStatus } from '../lib/siteStatus'
import './notFoundView.css'
import './maintenanceView.css'

const route = useRoute()
const router = useRouter()
const refreshing = ref(false)
const title = ref('Sternenpause')
const message = ref('Die Award-Galaxie wird gerade liebevoll poliert. Schau gleich wieder vorbei.')

const from = computed(() => {
  const queryFrom = route.query.from
  return typeof queryFrom === 'string' && queryFrom.startsWith('/') ? queryFrom : '/'
})

async function refreshCopy(force = false) {
  const status = await loadSiteStatus(force)
  title.value = status?.maintenanceTitle || 'Sternenpause'
  message.value = status?.maintenanceMessage || 'Die Award-Galaxie wird gerade liebevoll poliert. Schau gleich wieder vorbei.'
  return status
}

async function retry() {
  refreshing.value = true
  try {
    const latest = await refreshCopy(true)
    if (!latest?.maintenanceModeEnabled) {
      await router.replace(from.value)
    }
  } finally {
    refreshing.value = false
  }
}

onMounted(() => {
  void refreshCopy(true)
})
</script>

<template>
  <div class="not-found maintenance-page">
    <div class="not-found__sky"></div>
    <div class="not-found__glow not-found__glow--violet"></div>
    <div class="not-found__glow not-found__glow--peach"></div>
    <div class="not-found__glow not-found__glow--pink"></div>
    <span class="not-found__star not-found__star--1">✦</span>
    <span class="not-found__star not-found__star--2">✧</span>
    <span class="not-found__star not-found__star--3">★</span>
    <span class="not-found__star not-found__star--4">✦</span>
    <span class="not-found__star not-found__star--5">✧</span>

    <div class="not-found__content">
      <div class="not-found__badge">
        <Sparkles class="h-4 w-4" />
        Wartungszauber aktiv
      </div>
      <div class="not-found__pillow-wrap">
        <span class="maintenance-tea__spark maintenance-tea__spark--one">✦</span>
        <span class="maintenance-tea__spark maintenance-tea__spark--two">✧</span>
        <span class="maintenance-tea__spark maintenance-tea__spark--three">★</span>
        <div class="maintenance-tea" aria-hidden="true">
          <div class="maintenance-tea__steam-field">
            <span class="maintenance-tea__steam maintenance-tea__steam--one"></span>
            <span class="maintenance-tea__steam maintenance-tea__steam--two"></span>
            <span class="maintenance-tea__steam maintenance-tea__steam--three"></span>
            <svg class="maintenance-tea__constellation" viewBox="0 0 220 112" role="presentation" aria-hidden="true">
              <path d="M46 78 L82 42 L124 57 L168 28" />
              <path d="M82 42 L104 88 L151 78" />
              <circle cx="46" cy="78" r="5" />
              <circle cx="82" cy="42" r="4.5" />
              <circle cx="104" cy="88" r="4" />
              <circle cx="124" cy="57" r="5.2" />
              <circle cx="151" cy="78" r="4.2" />
              <circle cx="168" cy="28" r="5.8" />
            </svg>
          </div>
          <div class="maintenance-tea__cloud">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="maintenance-tea__saucer"></div>
          <div class="maintenance-tea__cup">
            <span class="maintenance-tea__tea"></span>
            <span class="maintenance-tea__shine"></span>
            <span class="maintenance-tea__label">Pause</span>
          </div>
          <div class="maintenance-tea__handle"></div>
        </div>
      </div>
      <p class="not-found__eyebrow">Die Sterne werden neu sortiert</p>
      <h1 class="not-found__title">{{ title }}</h1>
      <p class="not-found__text">{{ message }}</p>

      <div class="not-found__actions">
        <button class="not-found__primary" :disabled="refreshing" @click="retry">
          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': refreshing }" />
          {{ refreshing ? 'Prüft die Galaxie ...' : 'Erneut versuchen' }}
        </button>
        <button class="not-found__secondary" @click="router.push('/login?redirect=/admin/settings')">
          <ShieldCheck class="h-4 w-4" />
          Admin öffnen
        </button>
      </div>
    </div>
  </div>
</template>
