
<template>
    <div>
      <h2>{{ $t('auth.register') }}</h2>
      <form @submit.prevent="register">
        <input v-model="email" type="email" :placeholder="$t('auth.email')" required />
        <input v-model="password" type="password" :placeholder="$t('auth.password')" required />
        <button type="submit">{{ $t('auth.register') }}</button>
      </form>
      <div class="login-link">
        <p>{{ $t('auth.hasAccount') }} <router-link to="/login">{{ $t('auth.toLogin') }}</router-link></p>
      </div>
    </div>
  
    
    <!-- Info Dialog -->
    <InfoDialog
        v-model="infoDialog.isOpen"
        :title="infoDialog.title"
        :message="infoDialog.message"
        :details="infoDialog.details"
        :type="infoDialog.type"
    />
    
    <!-- Confirm Dialog -->
    <ConfirmDialog
        v-model="confirmDialog.isOpen"
        :title="confirmDialog.title"
        :message="confirmDialog.message"
        :details="confirmDialog.details"
        :type="confirmDialog.type"
        @confirm="handleConfirmResult(true)"
        @cancel="handleConfirmResult(false)"
    />
</template>
  
  <script>
  import apiClient from '../apiClient.js';
  
  import InfoDialog from '../components/InfoDialog.vue';
import ConfirmDialog from '../components/ConfirmDialog.vue';
import { buildInfoConfig, buildConfirmConfig, safeErrorMessage } from '../utils/dialogUtils.js';
export default {
    data() {
      return {
            // Dialog States
            infoDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info'
            },
            confirmDialog: {
                isOpen: false,
                title: '',
                message: '',
                details: '',
                type: 'info',
                resolveCallback: null
            },
        email: '',
        password: '',
      };
    },
    methods: {
        // Dialog Helper Methods
        async showInfo(title, message, details = '', type = 'info') {
            this.infoDialog = buildInfoConfig({ title, message, details, type });
        },
        
        async showConfirm(title, message, details = '', type = 'info', options = {}) {
            return new Promise((resolve) => {
                this.confirmDialog = buildConfirmConfig({
                    title,
                    message,
                    details,
                    type,
                    resolveCallback: resolve,
                    ...options,
                });
            });
        },
        
        handleConfirmResult(confirmed) {
            if (this.confirmDialog.resolveCallback) {
                this.confirmDialog.resolveCallback(confirmed);
                this.confirmDialog.resolveCallback = null;
            }
            this.confirmDialog.isOpen = false;
        },
        
      async register() {
        try {
          await apiClient.post('/auth/register', { email: this.email, password: this.password });
          await this.showInfo(this.$t('messages.success'), this.$t('auth.registerSuccess'), '', 'success');
        } catch (error) {
          const message = safeErrorMessage(error, this.$t('auth.registerFailed'));
          await this.showInfo(this.$t('messages.error'), message, '', 'error');
        }
      },
    },
  };
  </script>
  