<template>
  <div class="login-container">
    <div class="card-modern auth-card">
      <div class="auth-header">
        <div class="logo-wrapper">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            <circle cx="12" cy="13" r="2" fill="currentColor"/>
          </svg>
        </div>
        <h1>Welcome Back!</h1>
        <p class="subtitle">Ready to track your training? Log in to continue your journey.</p>
      </div>

      <form @submit.prevent="handleLogin" class="form-modern">
        <!-- Username Field -->
        <div class="form-group-modern">
          <label for="username" class="form-label-modern">
            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
            Username
          </label>
          <input
            id="username"
            v-model="form.username"
            type="text"
            class="form-input-modern"
            placeholder="Enter your username"
            required
            :disabled="auth.loading"
            autocomplete="username"
          />
          <span class="form-helper-text">Your unique account identifier</span>
        </div>

        <!-- Password Field -->
        <div class="form-group-modern">
          <label for="password" class="form-label-modern">
            <svg class="label-icon" viewBox="0 0 24 24" fill="none">
              <rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
              <path d="M8 11V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V11" stroke="currentColor" stroke-width="2"/>
            </svg>
            Password
          </label>
          <div class="input-wrapper">
            <input
              id="password"
              v-model="form.password"
              :type="showPassword ? 'text' : 'password'"
              class="form-input-modern"
              placeholder="Enter your password"
              required
              :disabled="auth.loading"
              autocomplete="current-password"
            />
            <button
              type="button"
              @click="showPassword = !showPassword"
              class="password-toggle-btn"
              :title="showPassword ? 'Hide password' : 'Show password'"
              :aria-label="showPassword ? 'Hide password' : 'Show password'"
            >
              <svg v-if="showPassword" viewBox="0 0 24 24" fill="none">
                <path d="M1 12S6 4 12 4C18 4 23 12 23 12S18 20 12 20C6 20 1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
              </svg>
              <svg v-else viewBox="0 0 24 24" fill="none">
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.46 1 11.64M9.9 4.24C10.94 4.09 11.97 4 12 4C17 4 21.27 7.54 23 12.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
          <span class="form-helper-text">Keep your account secure</span>
        </div>

        <!-- Remember Me & Forgot Password -->
        <div class="form-options">
          <label class="remember-checkbox">
            <input v-model="rememberMe" type="checkbox" />
            <span>Keep me logged in on this device</span>
          </label>
          <RouterLink to="/password-reset" class="forgot-link">
            Forgot your password?
          </RouterLink>
        </div>

        <!-- Info Box -->
        <div class="info-box info-box-info">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
          <div>
            <strong>Tip:</strong> For security, never share your login credentials. Use a strong, unique password.
          </div>
        </div>

        <!-- Error Message -->
        <div v-if="auth.error" class="info-box info-box-danger">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
            <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
          </svg>
          <div>
            <div class="form-error-text">
              <strong>Login Failed:</strong> {{ auth.error }}
            </div>
          </div>
        </div>

        <!-- Success State -->
        <div v-if="loginSuccess" class="info-box info-box-success">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
            <path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div>
            <strong>Success!</strong> Redirecting to your dashboard...
          </div>
        </div>

        <!-- Login Button -->
        <button type="submit" :disabled="auth.loading" class="btn-modern btn-modern-primary btn-modern-large">
          <span v-if="auth.loading" class="loading-content">
            <svg class="spinner" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" stroke-dasharray="31.416" stroke-dashoffset="31.416" opacity="0.75"/>
            </svg>
            Logging in...
          </span>
          <span v-else>
            <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
              <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Log In
          </span>
        </button>
      </form>

      <!-- Divider -->
      <div class="auth-divider">
        <span>New to RideAware?</span>
      </div>

      <!-- Sign Up Link -->
      <div class="auth-footer">
        <p>Don't have an account yet? Join the community!</p>
        <RouterLink to="/signup" class="btn-modern btn-modern-secondary">
          Create Free Account
          <svg viewBox="0 0 24 24" fill="none" style="width: 20px; height: 20px;">
            <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <polyline points="12 5 19 12 12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </RouterLink>
      </div>
    </div>

    <!-- Background Decorations -->
    <div class="background-decoration">
      <div class="decoration-blob blob-1"></div>
      <div class="decoration-blob blob-2"></div>
      <div class="decoration-blob blob-3"></div>
    </div>

    <!-- Bottom Link -->
    <div class="bottom-link">
      <RouterLink to="/" class="btn-modern btn-modern-secondary">
        <svg viewBox="0 0 24 24" fill="none" style="width: 16px; height: 16px;">
          <path d="M19 12H5M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Back to Home
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuth } from '@/composables/useAuth'

const router = useRouter()
const auth = useAuth()

const showPassword = ref(false)
const rememberMe = ref(false)
const loginSuccess = ref(false)

const form = reactive({
  username: '',
  password: ''
})

async function handleLogin() {
  try {
    await auth.login(form.username, form.password)
    if (rememberMe.value) {
      localStorage.setItem('rememberMe', 'true')
      localStorage.setItem('username', form.username)
    } else {
      localStorage.removeItem('rememberMe')
      localStorage.removeItem('username')
    }
    loginSuccess.value = true
    setTimeout(() => {
      router.push('/dashboard')
    }, 1000)
  } catch (error) {
    console.error('Login error:', error)
    loginSuccess.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  padding: var(--spacing-md);
  position: relative;
  overflow: hidden;
}

/* ============================================
   AUTH CARD
   ============================================ */
.auth-card {
  max-width: 520px;
  width: 100%;
  animation: slideUp var(--transition-slower) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
}

/* ============================================
   AUTH HEADER
   ============================================ */
.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.logo-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--gradient-primary);
  border-radius: var(--radius-2xl);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoFloat 0.8s ease-out 0.2s both;
}

.logo-wrapper svg {
  width: 100%;
  height: 100%;
}

h1 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  animation: titleSlide var(--transition-slower) ease-out 0.3s both;
}

.subtitle {
  margin: var(--spacing-sm) 0 0 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  animation: subtitleFade var(--transition-slower) ease-out 0.4s both;
}

/* ============================================
   FORM ENHANCEMENTS
   ============================================ */
.label-icon {
  width: 18px;
  height: 18px;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
  color: var(--color-primary);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
}

.password-toggle-btn svg {
  width: 100%;
  height: 100%;
}

.password-toggle-btn:hover {
  color: var(--color-primary);
  background: rgba(0, 102, 204, 0.1);
}

/* ============================================
   FORM OPTIONS
   ============================================ */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.remember-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  user-select: none;
}

.remember-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
  border: 2px solid var(--color-border);
  border-radius: 4px;
}

.forgot-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-base);
}

.forgot-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
.btn-modern-large {
  width: 100%;
  padding: 16px 32px;
  font-size: var(--font-size-lg);
  min-height: 56px;
}

.loading-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.spinner {
  width: 22px;
  height: 22px;
  animation: spin 1s linear infinite;
}

/* ============================================
   INFO BOXES
   ============================================ */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.info-box svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================
   DIVIDER
   ============================================ */
.auth-divider {
  position: relative;
  text-align: center;
  margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-divider);
}

.auth-divider span {
  position: relative;
  background: var(--color-surface);
  padding: 0 var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* ============================================
   AUTH FOOTER
   ============================================ */
.auth-footer {
  text-align: center;
}

.auth-footer p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.auth-footer .btn-modern {
  width: 100%;
}

/* ============================================
   BACKGROUND DECORATIONS
   ============================================ */
.background-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.decoration-blob {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  animation: float 8s ease-in-out infinite;
}

.blob-1 {
  width: 400px;
  height: 400px;
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.blob-2 {
  width: 300px;
  height: 300px;
  bottom: -5%;
  right: -5%;
  animation-delay: 2s;
}

.blob-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: -5%;
  animation-delay: 4s;
}

/* ============================================
   BOTTOM LINK
   ============================================ */
.bottom-link {
  position: absolute;
  bottom: var(--spacing-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.bottom-link .btn-modern {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.bottom-link .btn-modern:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes logoFloat {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes titleSlide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes subtitleFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes formSlide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(180deg);
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 640px) {
  .login-container {
    padding: var(--spacing-md);
  }

  .auth-card {
    padding: var(--spacing-xl);
  }

  .auth-header {
    margin-bottom: var(--spacing-lg);
  }

  .logo-wrapper {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  .subtitle {
    font-size: var(--font-size-sm);
  }

  .form-options {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-divider {
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
  }

  .blob-1 {
    width: 300px;
    height: 300px;
  }

  .blob-2 {
    width: 200px;
    height: 200px;
  }

  .blob-3 {
    width: 150px;
    height: 150px;
  }

  .bottom-link a {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: var(--spacing-lg);
  }

  .auth-header {
    margin-bottom: var(--spacing-md);
  }

  .logo-wrapper {
    width: 56px;
    height: 56px;
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  .subtitle {
    font-size: var(--font-size-sm);
  }

  .bottom-link {
    bottom: var(--spacing-md);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .logo-wrapper,
  h1,
  .subtitle,
  .decoration-blob {
    animation: none;
  }
}
</style>