<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useAuthStore } from '../stores/authStore'

const auth = useAuthStore()
const router = useRouter()
const route = useRoute()

const name = ref('')
const email = ref('')
const password = ref('')
const error = ref('')
const busy = ref(false)

const returnTo = computed(() => {
  const value = route.query.returnTo
  return typeof value === 'string' && value.length ? value : '/account'
})

async function submit() {
  error.value = ''
  busy.value = true

  try {
    await auth.signup({
      name: name.value.trim() || undefined,
      email: email.value.trim(),
      password: password.value,
    })
    await router.push(returnTo.value)
  } catch (err) {
    error.value = err?.message || 'Signup failed.'
  } finally {
    busy.value = false
  }
}
</script>

<template>
  <main class="auth">
    <section class="panel">
      <h1>Create your account</h1>
      <p>Save your photobooth strips and access them anytime.</p>

      <form class="form" @submit.prevent="submit">
        <label>
          <span>Name (optional)</span>
          <input v-model="name" type="text" autocomplete="name" />
        </label>

        <label>
          <span>Email</span>
          <input v-model="email" type="email" autocomplete="email" required />
        </label>

        <label>
          <span>Password</span>
          <input v-model="password" type="password" autocomplete="new-password" required />
        </label>

        <p v-if="error" class="error">{{ error }}</p>

        <button class="primary" type="submit" :disabled="busy">
          {{ busy ? 'Creating…' : 'Sign up' }}
        </button>

        <RouterLink class="helper" :to="{ name: 'login', query: { returnTo } }"
          >Already have an account? Login</RouterLink
        >
      </form>
    </section>
  </main>
</template>

<style scoped>
.auth {
  display: grid;
  place-items: center;
  padding: 24px 0;
}

.panel {
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 14px;
}

.panel h1 {
  margin: 0;
}

.panel p {
  margin: 0;
  color: var(--muted);
}

.form {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

label {
  display: grid;
  gap: 6px;
}

label span {
  font-weight: 600;
  font-size: 0.9rem;
}

input {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(200, 90, 124, 0.28);
  background: rgba(255, 255, 255, 0.9);
}

.primary {
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  background: #c85a7c;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(200, 90, 124, 0.3);
}

.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error {
  margin: 0;
  color: #a13b56;
  background: rgba(255, 236, 243, 0.7);
  border: 1px solid rgba(200, 90, 124, 0.25);
  padding: 10px 12px;
  border-radius: 14px;
}

.helper {
  justify-self: center;
  color: #7c3b54;
  font-weight: 600;
}
</style>
