<template>
  <div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
    <div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
      <div class="w-1/2 p-12 relative">
        <div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
          <span v-for="i in 16" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
        </div>
        <div class="flex flex-col items-center justify-center h-full">
          <div class="relative">
            <div class="w-48 h-48 flex items-center justify-center">
              <svg viewBox="0 0 120 120" class="w-full h-full">
                <polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"/>
                <polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"/>
                <polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"/>
                <polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"/>
                <polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"/>
                <polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"/>
              </svg>
            </div>
          </div>
          <h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
        </div>
      </div>
      <div class="w-1/2 bg-white rounded-3xl m-4 p-10">
        <h2 class="text-4xl font-black text-black mb-2">JOIN US!</h2>
        <p class="text-gray-600 mb-6">Create your account</p>
        <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
        <div class="mb-4">
          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">NAME</label>
          <input type="text" v-model="name" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Your name" />
        </div>
        <div class="mb-4">
          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">USERNAME</label>
          <input type="text" v-model="username" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Choose a username" />
        </div>
        <div class="mb-4">
          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL</label>
          <input type="email" v-model="email" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
        </div>
        <div class="mb-6">
          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
          <input type="password" v-model="password" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Create a password" />
        </div>
        <button @click="handleRegister" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
          <span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
          <span v-else>REGISTER</span>
        </button>
        <p class="text-center mt-6 text-gray-600">
          Already have an account?
          <router-link to="/" class="text-noctune-orange font-bold hover:underline">Login</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/authStore.js'

const router = useRouter()
const authStore = useAuthStore()

const name = ref('')
const username = ref('')
const email = ref('')
const password = ref('')
const loading = ref(false)
const error = ref('')

async function handleRegister() {
  error.value = ''
  loading.value = true
  const result = await authStore.register({ name: name.value, username: username.value, email: email.value, password: password.value })
  loading.value = false
  if (result.success) {
    router.push('/home')
  } else {
    error.value = result.message
  }
}
</script>
