<template>
  <div class="reset-password-container">
    <h2>{{ $t('auth.resetPassword') }}</h2>

    <form v-if="!resetDone" @submit.prevent="submitReset">
      <input
        v-model="newPassword"
        type="password"
        :placeholder="$t('auth.newPassword')"
        required
        minlength="6"
        :disabled="loading"
      />
      <input
        v-model="confirmPassword"
        type="password"
        :placeholder="$t('auth.confirmPassword')"
        required
        minlength="6"
        :disabled="loading"
      />
      <button type="submit" :disabled="loading">
        {{ loading ? $t('auth.saving') : $t('auth.saveNewPassword') }}
      </button>
    </form>

    <div v-else class="success-message">
      <p>{{ $t('auth.passwordResetSuccess') }}</p>
      <router-link to="/login" class="login-button">{{ $t('auth.toLogin') }}</router-link>
    </div>

    <!-- Info Dialog -->
    <InfoDialog
        v-model="infoDialog.isOpen"
        :title="infoDialog.title"
        :message="infoDialog.message"
        :details="infoDialog.details"
        :type="infoDialog.type"
    />
  </div>
</template>

<script>
import apiClient from '../apiClient.js';
import InfoDialog from '../components/InfoDialog.vue';
import { buildInfoConfig, safeErrorMessage } from '../utils/dialogUtils.js';

export default {
  components: { InfoDialog },
  data() {
    return {
      newPassword: '',
      confirmPassword: '',
      loading: false,
      resetDone: false,
      infoDialog: {
        isOpen: false,
        title: '',
        message: '',
        details: '',
        type: 'info'
      }
    };
  },
  methods: {
    async showInfo(title, message, details = '', type = 'info') {
      this.infoDialog = buildInfoConfig({ title, message, details, type });
    },
    async submitReset() {
      if (this.newPassword !== this.confirmPassword) {
        await this.showInfo(this.$t('messages.error'), this.$t('auth.passwordsDoNotMatch'), '', 'error');
        return;
      }

      if (this.newPassword.length < 6) {
        await this.showInfo(this.$t('messages.error'), this.$t('auth.passwordTooShort'), '', 'error');
        return;
      }

      this.loading = true;
      try {
        const token = this.$route.params.token;
        await apiClient.post('/auth/reset-password', {
          token,
          password: this.newPassword
        });
        this.resetDone = true;
      } catch (error) {
        const message = safeErrorMessage(error, this.$t('auth.resetFailed'));
        await this.showInfo(this.$t('messages.error'), message, '', 'error');
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.reset-password-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.success-message {
  background-color: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 6px;
  padding: 1rem;
  color: #2e7d32;
  text-align: center;
  line-height: 1.5;
}

.login-button {
  display: inline-block;
  margin-top: 1rem;
  background-color: #4CAF50;
  color: white;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
}

.login-button:hover {
  background-color: #43a047;
}

form input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

form button {
  width: 100%;
}

form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
