<template>
  <div class="min-h-screen flex items-center justify-center bg-neutral-light">
    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-md border border-neutral-light">
      <div>
        <h2 class="mt-6 text-center text-3xl font-bold text-neutral-dark">
          {{ $t('auth.createAccount') }}
        </h2>
        <p class="mt-2 text-center text-sm text-neutral">
          {{ $t('auth.createAccountSubtitle') }}
        </p>
      </div>
      <form class="mt-8 space-y-6" @submit.prevent="register">
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        <div class="rounded-md -space-y-px">
          <div class="mb-4">
            <label for="name" class="form-label">{{ $t('auth.fullName') }}</label>
            <input id="name" name="name" type="text" autocomplete="name" required 
                   class="form-input" 
                   v-model="form.name" />
          </div>
          <div class="mb-4">
            <label for="email" class="form-label">{{ $t('auth.email') }}</label>
            <input id="email" name="email" type="email" autocomplete="email" required 
                   class="form-input" 
                   v-model="form.email" />
          </div>
          <div class="mb-4">
            <label for="password" class="form-label">{{ $t('auth.password') }}</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required 
                   class="form-input" 
                   v-model="form.password" />
          </div>
          <div class="mb-4">
            <label for="password_confirmation" class="form-label">{{ $t('auth.confirmPassword') }}</label>
            <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required 
                   class="form-input" 
                   v-model="form.password_confirmation" />
            <p v-if="passwordMismatch" class="form-error">{{ $t('auth.passwordMismatch') }}</p>
          </div>
        </div>

        <div>
          <button type="submit" 
                  class="btn-primary w-full flex justify-center"
                  :disabled="loading || passwordMismatch">
            <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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 ? $t('auth.registering') : $t('auth.register') }}
          </button>
        </div>
      </form>
      <div class="text-center mt-4">
        <p class="text-sm text-neutral">
          {{ $t('auth.alreadyRegistered') }} 
          <router-link to="/login" class="font-medium text-primary hover:text-primary-600 transition-colors duration-200">
            {{ $t('auth.login') }}
          </router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

export default {
  name: 'Register',
  setup() {
    const router = useRouter();
    const authStore = useAuthStore();
    
    const form = ref({
      name: '',
      email: '',
      password: '',
      passwordConfirmation: ''
    });
    
    const loading = ref(false);
    const error = ref('');
    const passwordMismatch = ref(false);
    
    const register = async () => {
      loading.value = true;
      error.value = '';
      
      // Validate password confirmation
      if (form.value.password !== form.value.passwordConfirmation) {
        error.value = 'Passwords do not match';
        loading.value = false;
        passwordMismatch.value = true;
        return;
      }
      
      try {
        // In a real app, this would be an API call
        // const response = await axios.post('/api/register', form.value);
        
        // For demo purposes, we'll simulate a successful registration
        // with a mock token and user
        const token = 'mock-jwt-token';
        const user = {
          id: 1,
          name: form.value.name,
          email: form.value.email
        };
        
        // Store the token and user in the auth store
        authStore.setToken(token);
        authStore.setUser(user);
        
        // Redirect to dashboard
        router.push('/');
      } catch (err) {
        error.value = err.response?.data?.message || 'An error occurred during registration';
      } finally {
        loading.value = false;
      }
    };
    
    return {
      form,
      loading,
      error,
      passwordMismatch,
      register
    };
  }
};
</script> 