<template>
  <section class="container-page grid min-h-[70vh] place-items-center py-10">
    <div class="card w-full max-w-md p-6">
      <h1 class="text-2xl font-extrabold">Register</h1>
      <p class="mt-2 text-sm text-slate-600">Buat akun untuk mulai menjual barang.</p>

      <form class="mt-6 grid gap-4" @submit.prevent="register">
        <p v-if="errorMessage" class="rounded-xl bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
          {{ errorMessage }}
        </p>
        <div>
          <label class="label">Nama Lengkap</label>
          <input v-model="form.name" class="input mt-2" placeholder="Nama kamu" required />
        </div>
        <div>
          <label class="label">Email</label>
          <input v-model="form.email" type="email" class="input mt-2" placeholder="nama@email.com" required />
        </div>
        <div>
          <label class="label">Nomor WhatsApp</label>
          <input v-model="form.whatsapp" class="input mt-2" placeholder="6281234567890" required />
        </div>
        <div>
          <label class="label">Password</label>
          <input v-model="form.password" type="password" class="input mt-2" placeholder="••••••••" required />
        </div>
        <button class="btn-primary w-full" :disabled="loading">
            <svg v-if="loading" class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
          {{ loading ? "Memproses..." : "Daftar" }}
        </button>
      </form>

      <p class="mt-5 text-center text-sm text-slate-600">
        Sudah punya akun?
        <RouterLink to="/login" class="font-bold text-brand-700">Login</RouterLink>
      </p>
    </div>
  </section>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { registerUser, setAuth } from "../utils"

const router = useRouter()

const form = reactive({
  name: "",
  email: "",
  whatsapp: "",
  password: ""
})
const loading = ref(false)
const errorMessage = ref("")

async function register() {
  loading.value = true
  errorMessage.value = ""

  try {
    const data = await registerUser(form)
    setAuth(data)
    router.push("/dashboard")
  } catch (error) {
    errorMessage.value = error.message
  } finally {
    loading.value = false
  }
}
</script>
