<template>
  <div class="login-page">
    <div class="login-card">
      <h2>{{ $t('auth.login') }}</h2>
      <form class="login-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, mapGetters } 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: '',
    };
  },
  computed: {
    ...mapGetters(['defaultHomeRoute']),
  },
  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 }); 
        const redirectTarget = typeof this.$route.query.redirect === 'string' ? this.$route.query.redirect : this.defaultHomeRoute;
        this.$router.push(redirectTarget); 
      } catch (error) {
        const message = safeErrorMessage(error, this.$t('auth.loginFailed'));
        await this.showInfo(this.$t('messages.error'), message, '', 'error');
      }
    },
  },
};
</script>

<style scoped>
.login-page {
  min-height: calc(100dvh - 10rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-card {
  width: min(100%, 420px);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(24, 70, 54, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(24, 70, 54, 0.12);
  padding: 1.5rem;
}

.login-card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-form input,
.login-form button {
  width: 100%;
}

.forgot-password-link,
.register-link {
  margin-top: 0.9rem;
}

.register-link p {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .login-page {
    min-height: calc(100dvh - 8rem);
    padding: 0.5rem;
    align-items: flex-start;
  }

  .login-card {
    width: 100%;
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 14px;
  }
}
</style>
