<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import Card from 'primevue/card'
import InputText from 'primevue/inputtext'
import Password from 'primevue/password'
import Button from 'primevue/button'
import Message from 'primevue/message'

const props = defineProps<{
  errorMessage?: string
}>()

const emit = defineEmits<{
  authenticate: [email: string, password: string]
}>()

const email = ref('')
const password = ref('')
const isLoading = ref(false)
const emailInput = ref<InstanceType<typeof InputText> | null>(null)

const canSubmit = computed(() => {
  if (!email.value || !password.value || isLoading.value) return false
  // Basic email validation
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email.value)
})

const handleSubmit = () => {
  if (!canSubmit.value) return

  // Prevent double-submit
  if (isLoading.value) return

  isLoading.value = true

  emit('authenticate', email.value, password.value)

  // Reset loading state after a timeout (parent will handle actual auth)
  setTimeout(() => {
    isLoading.value = false
  }, 5000)
}

const handleKeypress = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && canSubmit.value) {
    event.preventDefault() // Prevent form submission if this is in a form
    handleSubmit()
  }
}

onMounted(() => {
  // Focus on the email input when component mounts
  if (emailInput.value?.$el) {
    emailInput.value.$el.focus()
  }
})
</script>

<template>
  <div class="login-screen">
    <div class="login-container">
      <Card class="login-card">
        <template #title>
          <div class="login-title">
            <i class="pi pi-lock" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
            <h2>Sign In</h2>
          </div>
        </template>
        <template #content>
          <div class="login-content">
            <p class="welcome-message">
              Enter your credentials to access the platform.
            </p>

            <Message v-if="errorMessage" severity="error" :closable="false">
              {{ errorMessage }}
            </Message>

            <div class="form-field">
              <label for="email">Email</label>
              <InputText
                ref="emailInput"
                id="email"
                v-model="email"
                type="email"
                placeholder="Enter your email"
                class="email-input"
                @keypress="handleKeypress"
                :disabled="isLoading"
                autocomplete="email"
              />
            </div>

            <div class="form-field">
              <label for="password">Password</label>
              <Password
                id="password"
                v-model="password"
                :feedback="false"
                toggleMask
                placeholder="Enter your password"
                class="password-input"
                @keypress="handleKeypress"
                :disabled="isLoading"
                autocomplete="current-password"
              />
            </div>

            <Button
              label="Sign In"
              icon="pi pi-sign-in"
              @click="handleSubmit"
              :disabled="!canSubmit"
              :loading="isLoading"
              class="connect-button"
            />
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>

<style scoped>
.login-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f0f;
}

.login-container {
  width: 100%;
  max-width: 450px;
  padding: 2rem;
}

.login-card {
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.login-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--p-primary-color);
}

.login-title h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.login-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.welcome-message {
  text-align: center;
  color: var(--p-text-secondary-color);
  margin: 0;
  line-height: 1.6;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-weight: 600;
  color: var(--p-text-color);
}

.email-input,
.password-input {
  width: 100%;
}

.password-input :deep(.p-inputtext) {
  width: 100%;
}

.connect-button {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
</style>
