<template>
  <div class="login-container">
    <div class="login-box">
      <img :src="siteLogo" alt="Site logo" class="login-logo" />
      <h1>Change Password</h1>

      <p v-if="forced" class="first-run-note">
        Your account uses a temporary password. Set a new one to continue.
      </p>

      <div v-if="error" class="error-message">{{ error }}</div>
      <div v-if="success" class="settings-success">{{ success }}</div>

      <form @submit.prevent="handleSubmit">
        <div v-if="!forced" class="form-group">
          <label for="currentpassword">Current Password</label>
          <input id="currentpassword" v-model="currentPassword" type="password"
                 class="form-control" required />
        </div>
        <div class="form-group">
          <label for="newpassword">New Password</label>
          <input id="newpassword" v-model="newPassword" type="password"
                 class="form-control" required minlength="8" autofocus />
        </div>
        <div class="form-group">
          <label for="confirmpassword">Confirm New Password</label>
          <input id="confirmpassword" v-model="confirmPassword" type="password"
                 class="form-control" required minlength="8" />
        </div>
        <button type="submit" class="btn btn-primary" :disabled="loading">
          {{ loading ? 'Saving...' : 'Change password' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { authApi } from '../api'
import { getSiteLogo } from '../utils/siteSettings'
import { withBase } from '../utils/basePath'
import { apiError } from '../utils/apiError'

const router = useRouter()
const authStore = useAuthStore()

const forced = computed(() => authStore.mustChangePassword)

const siteLogo = ref(withBase('/ge-aerospace-logo.svg'))
const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const error = ref('')
const success = ref('')
const loading = ref(false)

onMounted(() => {
  getSiteLogo().then(logo => { siteLogo.value = logo })
})

async function handleSubmit() {
  error.value = ''
  success.value = ''
  if (newPassword.value !== confirmPassword.value) {
    error.value = 'New passwords do not match'
    return
  }
  loading.value = true
  try {
    const payload = { new_password: newPassword.value }
    if (!forced.value) payload.current_password = currentPassword.value
    await authApi.changePassword(payload)
    authStore.clearMustChangePassword()
    success.value = 'Password changed.'
    // Land in the app now that the forced-change flag is cleared.
    setTimeout(() => router.push('/'), 600)
  } catch (event) {
    error.value = apiError(event, 'Failed to change password')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.first-run-note { color: var(--text-light); font-size: 0.9rem; margin-bottom: 1rem; }
</style>
