<template>
  <div class="min-h-screen bg-gray-50 flex flex-col">
    <div class="flex-1 flex items-center justify-center px-4">
      <div class="max-w-md w-full">
      <div class="text-center mb-8">
        <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4" />
        <h2 class="text-3xl font-bold text-gray-900">{{ isRegistering ? 'Create Account' : 'Log In' }}</h2>
        <p class="mt-2 text-sm text-gray-600">{{ isRegistering ? 'Create a new account' : 'Sign in to your account' }}</p>
      </div>

      <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
        <form @submit.prevent="isRegistering ? handleRegister() : handleLogin()" class="space-y-6">
          <!-- First Name (only show when registering) -->
          <div v-if="isRegistering">
            <label for="firstName" class="block text-sm font-medium text-gray-700">
              First Name
            </label>
            <input
              id="firstName"
              v-model="firstName"
              type="text"
              required
              autocomplete="given-name"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <!-- Last Name (only show when registering) -->
          <div v-if="isRegistering">
            <label for="lastName" class="block text-sm font-medium text-gray-700">
              Last Name
            </label>
            <input
              id="lastName"
              v-model="lastName"
              type="text"
              required
              autocomplete="family-name"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <!-- Email (only show when registering) -->
          <div v-if="isRegistering">
            <label for="email" class="block text-sm font-medium text-gray-700">
              Email
            </label>
            <input
              id="email"
              v-model="email"
              type="email"
              required
              autocomplete="email"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <div>
            <label for="username" class="block text-sm font-medium text-gray-700">
              Username
            </label>
            <input
              id="username"
              v-model="username"
              type="text"
              required
              autocapitalize="none"
              autocomplete="username"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700">
              Password
            </label>
            <input
              id="password"
              v-model="password"
              type="password"
              required
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
            
            <!-- Password Requirements (only show when registering) -->
            <div v-if="isRegistering && password.length > 0" class="mt-2 space-y-1 text-xs">
              <div :class="passwordRequirements.minLength ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.minLength">✓</span>
                <span v-else>○</span>
                At least 8 characters
              </div>
              <div :class="passwordRequirements.hasUppercase ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasUppercase">✓</span>
                <span v-else>○</span>
                One uppercase letter
              </div>
              <div :class="passwordRequirements.hasLowercase ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasLowercase">✓</span>
                <span v-else>○</span>
                One lowercase letter
              </div>
              <div :class="passwordRequirements.hasNumberOrSymbol ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasNumberOrSymbol">✓</span>
                <span v-else>○</span>
                One number or symbol
              </div>
            </div>
          </div>

          <!-- Confirm Password (only show when registering) -->
          <div v-if="isRegistering">
            <label for="confirmPassword" class="block text-sm font-medium text-gray-700">
              Confirm Password
            </label>
            <input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              required
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
            
            <!-- Password Match Indicator -->
            <div v-if="confirmPassword.length > 0" class="mt-2 text-xs">
              <div :class="passwordsMatch ? 'text-green-600' : 'text-red-600'">
                <span v-if="passwordsMatch">✓ Passwords match</span>
                <span v-else>✗ Passwords do not match</span>
              </div>
            </div>
          </div>

          <div v-if="error" class="text-red-600 text-sm">
            {{ error }}
          </div>

          <button
            type="submit"
            :disabled="loading"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
          >
            {{ loading ? (isRegistering ? 'Creating account...' : 'Signing in...') : (isRegistering ? 'Create Account' : 'Sign In') }}
          </button>
        </form>

        <div class="mt-6 text-center space-y-3">
          <button
            @click="toggleMode"
            class="text-sm text-blue-600 hover:text-blue-700 font-medium"
          >
            {{ isRegistering ? 'Already have an account? Sign in' : "Don't have an account? Create one" }}
          </button>
          <div v-if="!isRegistering">
            <NuxtLink to="/forgot-password" class="text-sm text-blue-600 hover:text-blue-700">
              Forgot Password?
            </NuxtLink>
          </div>
          <div>
            <NuxtLink to="/" class="text-sm text-gray-600 hover:text-gray-700">
              ← Back to Sermons
            </NuxtLink>
          </div>
        </div>
      </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const email = ref('')
const firstName = ref('')
const lastName = ref('')
const error = ref('')
const loading = ref(false)

// Initialize from URL query parameter
const isRegistering = ref(route.query.mode === 'register')

const passwordRequirements = computed(() => ({
  minLength: password.value.length >= 8,
  hasUppercase: /[A-Z]/.test(password.value),
  hasLowercase: /[a-z]/.test(password.value),
  hasNumberOrSymbol: /[0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password.value)
}))

const isPasswordValid = computed(() => {
  return passwordRequirements.value.minLength &&
         passwordRequirements.value.hasUppercase &&
         passwordRequirements.value.hasLowercase &&
         passwordRequirements.value.hasNumberOrSymbol
})

const passwordsMatch = computed(() => {
  return password.value === confirmPassword.value
})

function toggleMode() {
  isRegistering.value = !isRegistering.value
  error.value = ''
  username.value = ''
  password.value = ''
  confirmPassword.value = ''
  email.value = ''
  firstName.value = ''
  lastName.value = ''

  // Update URL to reflect mode
  const query = { ...route.query }
  if (isRegistering.value) {
    query.mode = 'register'
  } else {
    delete query.mode
  }
  router.replace({ query })
}

async function handleLogin() {
  error.value = ''
  loading.value = true

  try {
    const response = await $fetch('/api/auth/login', {
      method: 'POST',
      body: {
        username: username.value,
        password: password.value
      }
    })

    if (response.success) {
      // Check if there's a redirect parameter
      const redirect = route.query.redirect as string
      await navigateTo(redirect || '/')
    }
  } catch (e: any) {
    error.value = e.data?.message || 'Invalid credentials'
  } finally {
    loading.value = false
  }
}

async function handleRegister() {
  error.value = ''

  // Validate password requirements
  if (!isPasswordValid.value) {
    error.value = 'Please meet all password requirements'
    return
  }

  // Validate passwords match
  if (!passwordsMatch.value) {
    error.value = 'Passwords do not match'
    return
  }

  loading.value = true

  try {
    const response = await $fetch('/api/auth/register', {
      method: 'POST',
      body: {
        username: username.value,
        password: password.value,
        email: email.value,
        firstName: firstName.value,
        lastName: lastName.value
      }
    })

    if (response.success) {
      // Check if there's a redirect parameter
      const redirect = route.query.redirect as string
      await navigateTo(redirect || '/')
    }
  } catch (e: any) {
    error.value = e.data?.message || 'Registration failed'
  } finally {
    loading.value = false
  }
}
</script>
