import { requestPasswordReset, resetPassword } from '../api.js';

export async function renderForgotPassword(root, onFinished) {
  root.innerHTML = `
    <section class="public-auth-shell public-auth-shell-login">
      <div class="public-auth-card public-auth-card-login">
        <div class="public-auth-back-row">
          <a class="btn btn-sm btn-outline-secondary public-auth-back-link" href="#/login">
            <i class="fas fa-arrow-left"></i>
            <span>Retour</span>
          </a>
        </div>
        <div class="public-hero-card">
          <div class="public-brand-mark"><img src="/e-intervention-logo.svg" alt="e-Intervention"></div>
          <span class="public-hero-pill">Mot de passe oublié</span>
          <h1>Réinitialiser l'accès client</h1>
          <p>Demandez un code de réinitialisation à partir de votre contact client ou de votre email, puis définissez un nouveau mot de passe.</p>
        </div>

        <div class="public-auth-switch">
          <span>Vous vous souvenez de votre mot de passe ?</span>
          <a href="#/login">Retour à la connexion</a>
        </div>

        <div class="alert alert-danger" id="errorBox" hidden></div>
        <div class="alert alert-success" id="successBox" hidden></div>

        <form id="requestForm" class="public-form-stack">
          <div>
            <label class="form-label">Contact client ou email</label>
            <input class="form-control" name="login" autocomplete="username" placeholder="+225 01 XX XX XX XX ou client@mail.com" required>
          </div>
          <button class="btn btn-outline-primary public-secondary-cta" type="submit">Recevoir le code</button>
        </form>

        <form id="resetForm" class="public-form-stack" hidden>
          <div>
            <label class="form-label">Contact client ou email</label>
            <input class="form-control" name="login" autocomplete="username" required>
          </div>
          <div>
            <label class="form-label">Code reçu par email</label>
            <input class="form-control" name="code" inputmode="numeric" maxlength="6" placeholder="000000" required>
          </div>
          <div>
            <label class="form-label">Nouveau mot de passe</label>
            <input class="form-control" name="password" type="password" autocomplete="new-password" minlength="6" required>
          </div>
          <button class="btn btn-primary public-cta" type="submit">Réinitialiser le mot de passe</button>
        </form>
      </div>
    </section>
  `;

  const requestForm = root.querySelector('#requestForm');
  const resetForm = root.querySelector('#resetForm');
  const errorBox = root.querySelector('#errorBox');
  const successBox = root.querySelector('#successBox');

  requestForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    errorBox.hidden = true;
    successBox.hidden = true;

    const login = String(new FormData(requestForm).get('login') || '').trim();
    try {
      const response = await requestPasswordReset({ login });
      successBox.hidden = false;
      successBox.textContent = response?.masked_email
        ? `Un code a été envoyé à ${response.masked_email}.`
        : 'Un code de réinitialisation a été envoyé à votre adresse email.';
      resetForm.hidden = false;
      resetForm.elements.login.value = login;
      resetForm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    } catch (error) {
      errorBox.hidden = false;
      const apiError = error?.data?.error || '';
      if (apiError === 'missing_reset_email') {
        errorBox.textContent = 'Aucune adresse email n’est associée à ce compte. Contactez le support pour réinitialiser votre accès.';
      } else if (apiError === 'account_not_found') {
        errorBox.textContent = 'Aucun compte client actif ne correspond à cet identifiant.';
      } else {
        errorBox.textContent = 'Impossible d’envoyer le code de réinitialisation pour le moment.';
      }
    }
  });

  resetForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    errorBox.hidden = true;
    successBox.hidden = true;

    const payload = Object.fromEntries(new FormData(resetForm).entries());
    try {
      await resetPassword(payload);
      successBox.hidden = false;
      successBox.textContent = 'Votre mot de passe a été réinitialisé. Vous pouvez maintenant vous connecter.';
      window.setTimeout(() => onFinished(), 900);
    } catch (error) {
      errorBox.hidden = false;
      const apiError = error?.data?.error || '';
      if (apiError === 'invalid_reset_code') {
        errorBox.textContent = 'Le code saisi est invalide.';
      } else if (apiError === 'reset_code_expired') {
        errorBox.textContent = 'Le code de réinitialisation a expiré. Demandez-en un nouveau.';
      } else if (apiError === 'weak_password') {
        errorBox.textContent = 'Le nouveau mot de passe doit contenir au moins 6 caractères.';
      } else {
        errorBox.textContent = 'Impossible de réinitialiser le mot de passe pour le moment.';
      }
    }
  });
}