<script setup lang="ts">
import { watch } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const auth = useAuthStore()

watch(
  () => auth.isAuthenticated,
  (isAuthenticated) => {
    if (!isAuthenticated && router.currentRoute.value.path !== '/login') {
      void router.replace('/login')
    }
  },
)
</script>

<template>
  <div class="layout scanlines">
    <main class="main-content grid-bg">
      <div class="grid-drift-layer" aria-hidden="true"></div>
      <div class="grid-scan-layer" aria-hidden="true"></div>
      <div class="grid-vertical-scan-layer" aria-hidden="true"></div>
      <div class="content-layer">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg-void);
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* animated background layers */
.grid-drift-layer,
.grid-scan-layer,
.grid-vertical-scan-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grid-drift-layer {
  z-index: 0;
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(0, 245, 212, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 212, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: grid-drift 18s linear infinite;
}

.grid-scan-layer {
  z-index: 2;
  background:
    linear-gradient(120deg, transparent 0%, rgba(0, 245, 212, 0.01) 46%, rgba(0, 245, 212, 0.38) 50%, rgba(0, 245, 212, 0.01) 54%, transparent 100%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(0, 245, 212, 0.35));
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(-28%, 0, 0);
  animation: grid-scan-sweep 5.6s ease-in-out infinite;
}

.grid-vertical-scan-layer {
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 245, 212, 0.008) 47%, rgba(0, 245, 212, 0.34) 50%, rgba(0, 245, 212, 0.008) 53%, transparent 100%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(0, 245, 212, 0.3));
  will-change: transform, opacity;
  opacity: 0;
  transform: translate3d(0, -24%, 0);
  animation: grid-vertical-scan 7.4s ease-in-out infinite 0.8s;
}

.content-layer {
  position: relative;
  z-index: 1;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .grid-drift-layer,
  .grid-scan-layer,
  .grid-vertical-scan-layer {
    animation: none;
    transform: none;
    opacity: 0;
  }
}
</style>
