<template>
  <div class="login-page">
    <div>
      <h2>{{ $t('auth.login') }}</h2>
      <form @submit.prevent="executeLogin">
        <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.login') }}</button>
      </form>
      <div class="forgot-password-link">
        <router-link to="/forgot-password">{{ $t('auth.forgotPassword') }}</router-link>
      </div>
      <div class="register-link">
        <p>{{ $t('auth.noAccount') }} <router-link to="/register">{{ $t('auth.register') }}</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)"
    />
  </div>
</template>

<script>
import { mapActions } from 'vuex';
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 {
  name: 'Login',
  components: {
    InfoDialog,
    ConfirmDialog
  },
  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;
        },
        
    ...mapActions(['login']),
    async executeLogin() {
      try {
        const response = await apiClient.post('/auth/login', { email: this.email, password: this.password }, {
          timeout: 5000,
        });
        await this.login({ token: response.data.token, username: this.email }); 
        this.$router.push('/'); 
      } catch (error) {
        const message = safeErrorMessage(error, this.$t('auth.loginFailed'));
        await this.showInfo(this.$t('messages.error'), message, '', 'error');
      }
    },
  },
};
</script>
