<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import LoginForm from '../components/auth/LoginForm.vue'
import RegisterForm from '../components/auth/RegisterForm.vue'

const { t } = useI18n()
const router = useRouter()
const isLogin = ref(true)
const mounted = ref(false)

onMounted(() => {
  mounted.value = true
  // Check if we should start in register mode
  const mode = router.currentRoute.value.query.mode
  if (mode === 'register') {
    isLogin.value = false
  }
})

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

<template>
  <div class="auth-page" :class="{ 'is-mounted': mounted }">
    <!-- Immersive Background -->
    <div class="auth-bg-wrapper">
      <div class="auth-bg-overlay"></div>
      <img src="/auth-bg.png" alt="" class="auth-bg-image" />
    </div>

    <!-- Main Content -->
    <main class="auth-main">
      <!-- Top Navigation -->
      <nav class="auth-nav">
        <button @click="router.push('/map')" class="glass-btn back-btn">
          <span class="material-icons">arrow_back</span>
          <span>{{ t('auth.back') }}</span>
        </button>
      </nav>

      <div class="auth-content-grid">
        <!-- Branding Side (Desktop only) -->
        <div class="branding-section">
          <img src="/sib.png" alt="SIB Logo" class="brand-logo" />
          <h1 class="brand-title">SIB</h1>
          <p class="brand-tagline">{{ t('auth.brandingSubtitle') }}</p>
          <div class="brand-features">
            <div class="feature-item">
              <span class="material-icons">directions_bus</span>
              <span>Rutas en tiempo real</span>
            </div>
            <div class="feature-item">
              <span class="material-icons">payments</span>
              <span>Ofertas exclusivas</span>
            </div>
            <div class="feature-item">
              <span class="material-icons">location_on</span>
              <span>Paradas inteligentes</span>
            </div>
          </div>
        </div>

        <!-- Form Section -->
        <div class="form-section">
          <div class="glass-card auth-card">
            <!-- Mobile Logo -->
            <div class="mobile-header">
              <img src="/sib.png" alt="SIB Logo" class="mobile-logo" />
            </div>

            <!-- Tab Selector -->
            <div class="auth-tabs-pill">
              <button 
                class="pill-btn" 
                :class="{ active: isLogin }" 
                @click="isLogin = true"
              >
                {{ t('auth.loginTab') }}
              </button>
              <button 
                class="pill-btn" 
                :class="{ active: !isLogin }" 
                @click="isLogin = false"
              >
                {{ t('auth.registerTab') }}
              </button>
              <div class="pill-slider" :class="{ 'slide-right': !isLogin }"></div>
            </div>

            <!-- Forms Container -->
            <div class="auth-forms-container">
              <Transition name="form-fade" mode="out-in">
                <div :key="isLogin ? 'login' : 'register'" class="form-transition-wrapper">
                  <LoginForm v-if="isLogin" @toggle="toggleAuth" />
                  <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
                </div>
              </Transition>
            </div>

            <footer class="auth-footer">
              <p>{{ t('auth.footer') }}</p>
            </footer>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.auth-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* Background Systems */
.auth-bg-wrapper {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.auth-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transform: scale(1.1);
  filter: blur(5px);
  transition: transform 10s ease-out;
}

.is-mounted .auth-bg-image {
  transform: scale(1);
}

.auth-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

/* Layout */
.auth-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.auth-nav {
  height: 60px;
  display: flex;
  align-items: center;
}

.auth-content-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 4rem;
  align-items: center;
  padding: 2rem 0;
}

/* Branding Section */
.branding-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: slideInLeft 0.8s ease-out;
}

.brand-logo {
  width: 80px;
  filter: drop-shadow(0 0 20px rgba(254, 231, 21, 0.4));
}

.brand-title {
  font-size: 5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.04em;
  background: linear-gradient(to right, #fff, var(--active-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-tagline {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.7);
  max-width: 400px;
  line-height: 1.6;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}

.feature-item .material-icons {
  color: var(--active-color);
  background: rgba(254, 231, 21, 0.1);
  padding: 0.5rem;
  border-radius: 12px;
}

/* Form Section */
.form-section {
  display: flex;
  justify-content: center;
  animation: slideInRight 0.8s ease-out;
}

.glass-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2.5rem;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auth-card {
  padding: 0;
}

.mobile-header {
  display: none;
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.mobile-logo {
  height: 50px;
}

/* Custom Pills Tabs */
.auth-tabs-pill {
  position: relative;
  display: flex;
  background: rgba(0,0,0,0.3);
  margin: 2rem 2rem 1rem;
  padding: 0.4rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.pill-btn {
  flex: 1;
  padding: 0.8rem;
  border: none;
  background: none;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
}

.pill-btn.active {
  color: #000;
}

.pill-slider {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.4rem;
  width: calc(50% - 0.4rem);
  background: var(--active-color);
  border-radius: 1.1rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.pill-slider.slide-right {
  transform: translateX(100%);
}

/* Forms Container */
.auth-forms-container {
  min-height: 400px;
  padding-bottom: 2rem;
}

.form-transition-wrapper {
  width: 100%;
}

/* Buttons */
.glass-btn {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.glass-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateX(-5px);
}

.auth-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}

.auth-footer p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

/* Animations */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

.form-fade-enter-active,
.form-fade-leave-active {
  transition: all 0.3s ease;
}

.form-fade-enter-from {
  opacity: 0;
  transform: scale(0.95);
}

.form-fade-leave-to {
  opacity: 0;
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
  .auth-content-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .branding-section {
    display: none;
  }
  .mobile-header {
    display: block;
  }
  .form-section {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .auth-main {
    padding: 1rem;
  }
  .glass-card {
    border-radius: 2rem;
  }
  .auth-tabs-pill {
    margin: 1.5rem 1.5rem 0.5rem;
  }
}
</style>
