<script setup lang="ts">
import { ref } from 'vue'
import LoginForm from '@/components/auth/LoginForm.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'

const isLogin = ref(true)

const toggleAuth = () => {
  isLogin.value = !isLogin.value
}
</script>

<template>
  <div class="auth-view-hud bg-[#0F1115] min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
    <!-- HUD Background Elements -->
    <div class="absolute inset-0 pointer-events-none">
      <div class="scanning-lines"></div>
      <div class="hud-corner top-left"></div>
      <div class="hud-corner top-right"></div>
      <div class="hud-corner bottom-left"></div>
      <div class="hud-corner bottom-right"></div>
      
      <!-- Animated HUD Circles -->
      <div class="hud-circle opacity-10"></div>
      <div class="hud-circle-inner opacity-5"></div>
    </div>

    <div class="auth-container relative z-10 w-full max-w-md">
      <!-- SIBU Branding -->
      <div class="text-center mb-10">
        <h1 class="text-5xl font-black italic tracking-tighter text-primary mb-2">SIBU</h1>
        <div class="flex items-center justify-center gap-2">
          <span class="h-px w-8 bg-primary/30"></span>
          <p class="text-[10px] font-bold text-primary tracking-[0.3em] uppercase">Auth System v2.0</p>
          <span class="h-px w-8 bg-primary/30"></span>
        </div>
      </div>

      <!-- Auth Box -->
      <div class="bg-[#1C1F26]/60 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/5 shadow-2xl relative">
        <!-- Floating HUD bracket -->
        <div class="absolute -top-4 -left-4 size-12 border-t-2 border-l-2 border-primary/40 rounded-tl-2xl"></div>
        <div class="absolute -bottom-4 -right-4 size-12 border-b-2 border-r-2 border-primary/40 rounded-br-2xl"></div>

        <transition name="hud-fade" mode="out-in">
          <div :key="isLogin ? 'login' : 'register'">
            <div class="mb-8">
              <h2 class="text-2xl font-black text-white mb-1">
                {{ isLogin ? 'SNC: INICIAR SESIÓN' : 'SNC: REGISTRO' }}
              </h2>
              <p class="text-xs text-slate-500 font-bold uppercase tracking-wider">
                {{ isLogin ? 'Acceso autorizado requerido' : 'Crear nuevas credenciales de acceso' }}
              </p>
            </div>

            <LoginForm v-if="isLogin" @toggle="toggleAuth" />
            <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
          </div>
        </transition>
      </div>

      <!-- Footer Help -->
      <div class="mt-8 text-center">
        <p class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">
          Encriptación End-to-End • SIBU Cloud Services
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.auth-view-hud {
  font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
}

.scanning-lines {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(254, 231, 21, 0.02) 50%
  );
  background-size: 100% 4px;
  animation: scan 10s linear infinite;
}

@keyframes scan {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

.hud-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: rgba(254, 231, 21, 0.2);
  border-style: solid;
}

.top-left { top: 40px; left: 40px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.top-right { top: 40px; right: 40px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.bottom-left { bottom: 40px; left: 40px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.bottom-right { bottom: 40px; right: 40px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

.hud-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px dashed rgba(254, 231, 21, 0.3);
  border-radius: 50%;
  animation: spin 60s linear infinite;
}

.hud-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border: 40px double rgba(254, 231, 21, 0.2);
  border-radius: 50%;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hud-fade-enter-active, .hud-fade-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-fade-enter-from, .hud-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(10px);
}
</style>
