import { getStoredMobileConfig } from '../api.js';
import { activateMobileAccess, getMobileActivationState } from '../activation.js';

export async function renderActivation(root, onActivated) {
  const cfg = getStoredMobileConfig();
  const logoUrl = cfg.logo_url || '/insuite-logo.svg';
  const appName = cfg.app_name || 'Insuite Technicien';
  const activation = getMobileActivationState();
  const loginBgStyle = cfg.login_bg_url
    ? `style="background-image:url('${escapeAttr(cfg.login_bg_url)}');background-size:cover;background-position:center"`
    : '';

  root.innerHTML = `
    <div class="mobile-login-screen" ${loginBgStyle}>
      <div class="mobile-login-card">
        <div class="screen-hero mb-3">
          <div class="mobile-login-brandmark">
            <img src="${escapeAttr(logoUrl)}" alt="${escapeAttr(appName)}" class="mobile-login-logo">
          </div>
          <div class="screen-hero-pill"><i class="fas fa-key"></i> Activation requise</div>
          <h1 class="h4 mt-3 mb-1">Activer l’accès mobile</h1>
          <p class="mb-0 opacity-75">Saisissez l’adresse email autorisée et le code reçu par email avant la première authentification.</p>
        </div>

        <div class="alert alert-info" role="status">
          ${activation.activated && activation.email
            ? `Appareil déjà associé à ${escapeAttr(activation.email)}.`
            : 'Le code est généré depuis le module Licences mobiles dans le back-office.'}
        </div>

        <div class="alert alert-danger" id="activationErrBox" style="display:none"></div>

        <form id="activationForm" class="screen-stack">
          <div>
            <label class="form-label">Adresse email</label>
            <input class="form-control" type="email" name="email" autocomplete="email" required>
          </div>
          <div>
            <label class="form-label">Code d’activation</label>
            <input class="form-control" type="text" name="code" autocomplete="one-time-code" placeholder="ABCD-EFGH" required>
          </div>
          <button class="btn btn-primary w-100 mobile-cta" type="submit">Activer l’application</button>
        </form>
      </div>
    </div>
  `;

  const errBox = root.querySelector('#activationErrBox');
  const form = root.querySelector('#activationForm');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    errBox.style.display = 'none';

    const formData = new FormData(form);
    const email = String(formData.get('email') || '').trim();
    const code = String(formData.get('code') || '').trim();

    if (!email || !code) {
      errBox.textContent = 'Renseignez l’adresse email et le code d’activation.';
      errBox.style.display = 'block';
      return;
    }

    try {
      const state = await activateMobileAccess({ email, code });
      if (!state.activated) {
        errBox.textContent = 'Activation impossible.';
        errBox.style.display = 'block';
        return;
      }

      renderActivationSuccess(root, state, onActivated);
    } catch (error) {
      const msg = (() => {
        switch (error?.data?.error) {
          case 'license_disabled':
            return 'Cette licence mobile est suspendue.';
          case 'code_expired':
            return 'Le code d’activation a expiré. Demandez-en un nouveau.';
          case 'code_invalid':
            return 'Le code d’activation est invalide.';
          case 'user_not_found':
            return 'Aucun utilisateur actif ne correspond à cette adresse email.';
          default:
            return error?.status ? 'Activation refusée par le serveur.' : 'Connexion au serveur impossible. Vérifiez le réseau puis réessayez.';
        }
      })();
      errBox.textContent = msg;
      errBox.style.display = 'block';
    }
  });
}

function renderActivationSuccess(root, state, onActivated) {
  const cfg = getStoredMobileConfig();
  const logoUrl = cfg.logo_url || '/insuite-logo.svg';
  const appName = cfg.app_name || 'Insuite Technicien';
  const displayName = state.userName || state.email || 'Compte mobile';

  root.innerHTML = `
    <div class="mobile-login-screen">
      <div class="mobile-login-card mobile-activation-success-card">
        <div class="activation-success-stage" aria-hidden="true">
          <div class="activation-success-halo activation-success-halo-a"></div>
          <div class="activation-success-halo activation-success-halo-b"></div>
          <div class="activation-success-seal">
            <i class="fas fa-check"></i>
          </div>
        </div>

        <div class="screen-hero activation-success-hero mb-3">
          <div class="mobile-login-brandmark">
            <img src="${escapeAttr(logoUrl)}" alt="${escapeAttr(appName)}" class="mobile-login-logo">
          </div>
          <div class="screen-hero-pill"><i class="fas fa-circle-check"></i> Activation validée</div>
          <h1 class="h4 mt-3 mb-1">Compte mobile activé</h1>
          <p class="mb-0 opacity-75">L’appareil est maintenant autorisé pour ${escapeAttr(displayName)}. Vous pouvez accéder à votre espace personnel.</p>
        </div>

        <div class="activation-success-meta">
          <div>
            <span class="activation-success-label">Compte</span>
            <strong>${escapeAttr(displayName)}</strong>
          </div>
          <div>
            <span class="activation-success-label">Activation</span>
            <strong>${escapeAttr(formatActivationDate(state.activatedAt))}</strong>
          </div>
        </div>

        <div class="d-grid gap-2 mt-4">
          <button type="button" class="btn btn-primary mobile-cta" id="btnActivationContinue">
            Accéder à l'espace personnel
          </button>
        </div>
      </div>
    </div>
  `;

  const continueButton = root.querySelector('#btnActivationContinue');
  continueButton?.addEventListener('click', () => onActivated(state));
  window.setTimeout(() => continueButton?.focus(), 220);
}

function formatActivationDate(value) {
  if (!value) {
    return 'À l’instant';
  }

  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) {
    return 'À l’instant';
  }

  return parsed.toLocaleString('fr-FR');
}

function escapeAttr(value) {
  return String(value ?? '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}