SIB/frontend/src/views/AuthView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import LoginForm from '@/components/auth/LoginForm.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'
import { getGoogleRedirectResult } from '@/firebaseConfig'
import { authService } from '@/services/authService'
import { useAuthStore } from '@/stores/auth'

const isLogin = ref(true)
const toggleAuth = () => { isLogin.value = !isLogin.value }
const router = useRouter()
const authStore = useAuthStore()

// Handle redirect result from Google Sign-In on mobile
// (signInWithRedirect reloads the page; we catch the result here on load)
onMounted(async () => {
  try {
    const result = await getGoogleRedirectResult()
    if (result) {
      const response = await authService.googleLogin(result.token)
      authStore.login(response.access_token, response.role, response.full_name)
      const role = response.role.toUpperCase()
      if (role === 'ADMIN') router.push('/admin')
      else if (role === 'DRIVER') router.push('/driver')
      else if (role === 'PROMOTER') router.push('/promoter')
      else router.push('/map')
    }
  } catch (e) {
    // No redirect result pending, or error — ignore silently
    console.warn('Google redirect result:', e)
  }
})
</script>

<template>
  <div class="auth-page">
    <!-- Fondo con glow SIBU -->
    <div class="auth-glow" aria-hidden="true"></div>

    <div class="auth-wrapper">
      <!-- Branding -->
      <div class="auth-brand">
        <h1 class="brand-title">SIBU</h1>
        <p class="brand-subtitle">Sistema de Transporte Público</p>
      </div>

      <!-- Card principal -->
      <div class="auth-card">
        <!-- Tabs Login / Registro -->
        <div class="auth-tabs">
          <button
            class="auth-tab"
            :class="{ 'auth-tab--active': isLogin }"
            @click="isLogin = true"
          >
            Iniciar Sesión
          </button>
          <button
            class="auth-tab"
            :class="{ 'auth-tab--active': !isLogin }"
            @click="isLogin = false"
          >
            Crear Cuenta
          </button>
        </div>

        <!-- Formularios con transición -->
        <Transition name="auth-slide" mode="out-in">
          <LoginForm v-if="isLogin" @toggle="toggleAuth" />
          <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
        </Transition>
      </div>

      <!-- Footer -->
      <p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
    </div>
  </div>
</template>

<style scoped>
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  font-family: var(--font-family);
}

/* Glow decorativo SIBU amarillo */
.auth-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 231, 21, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ─── Branding ─── */
.auth-brand {
  text-align: center;
}

.brand-title {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--active-color);
  margin: 0;
  line-height: 1;
}

.brand-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0.375rem 0 0;
  letter-spacing: 0.02em;
}

/* ─── Card ─── */
.auth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ─── Tabs ─── */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border-color);
}

.auth-tab {
  padding: 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-tab:hover {
  color: var(--text-primary);
}

.auth-tab--active {
  color: var(--active-color);
  border-bottom-color: var(--active-color);
}

/* ─── Transición entre formularios ─── */
.auth-slide-enter-active,
.auth-slide-leave-active {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.auth-slide-enter-from {
  opacity: 0;
  transform: translateX(16px);
}

.auth-slide-leave-to {
  opacity: 0;
  transform: translateX(-16px);
}

/* ─── Footer ─── */
.auth-footer {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.5;
  margin: 0;
  letter-spacing: 0.03em;
}
</style>