<?php
$title     = 'Connexion';
$brandName = App\Core\Config::get('app_name', 'NOVALINK');
$base      = rtrim(App\Core\Config::baseUrl(), '/');
?>

<div class="auth-login-intro">
  <div class="auth-kicker">
    <i class="bi bi-stars"></i>
    <span>Espace sécurisé</span>
  </div>
  <h1 class="auth-title">Connexion à <?= htmlspecialchars($brandName) ?></h1>
  <p class="auth-subtitle">Accédez à votre cockpit opérationnel, suivez vos interventions et reprenez vos traitements en quelques secondes.</p>

  <div class="auth-quick-status">
    <div class="auth-quick-status__item">
      <i class="bi bi-shield-lock"></i>
      <span>Accès protégé</span>
    </div>
    <div class="auth-quick-status__item">
      <i class="bi bi-lightning-charge"></i>
      <span>Connexion rapide</span>
    </div>
    <div class="auth-quick-status__item">
      <i class="bi bi-diagram-3"></i>
      <span>Suivi centralisé</span>
    </div>
  </div>
</div>

<?php if (!empty($error)): ?>
  <div class="alert alert-danger d-flex align-items-center gap-2 mb-4 auth-alert" role="alert">
    <i class="fas fa-circle-exclamation fa-fw"></i>
    <span><?= htmlspecialchars($error) ?></span>
  </div>
<?php endif; ?>

<div class="auth-form-card">
  <div class="auth-form-card__head">
    <div>
      <div class="auth-form-card__eyebrow">Authentification</div>
      <div class="auth-form-card__title">Renseignez vos accès</div>
    </div>
    <div class="auth-form-card__icon">
      <i class="bi bi-person-badge"></i>
    </div>
  </div>

  <form method="post" action="<?= htmlspecialchars($base) ?>/login" class="needs-validation" novalidate autocomplete="off">
    <div class="auth-fieldset">
      <div class="mb-3">
        <label class="form-label" for="loginEmail">Adresse email</label>
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-at fa-fw"></i></span>
          <input
            type="email"
            name="email"
            id="loginEmail"
            class="form-control"
            required
            placeholder="vous@domaine.com"
            autocomplete="username"
            aria-label="Adresse email"
          >
          <div class="invalid-feedback">Adresse email invalide.</div>
        </div>
      </div>

      <div class="mb-4">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <label class="form-label mb-0" for="loginPassword">Mot de passe</label>
          <a href="<?= htmlspecialchars($base) ?>/password/forgot"
             class="text-decoration-none auth-inline-link"
             tabindex="-1">
            Mot de passe oublié ?
          </a>
        </div>
        <div class="input-group" data-password-toggle>
          <span class="input-group-text"><i class="fas fa-lock fa-fw"></i></span>
          <input
            type="password"
            name="password"
            id="loginPassword"
            class="form-control"
            required
            minlength="6"
            placeholder="••••••••"
            autocomplete="current-password"
            aria-label="Mot de passe"
          >
          <button type="button" class="btn" tabindex="-1"
                  data-action="toggle-password"
                  aria-label="Afficher / masquer le mot de passe">
            <i class="fas fa-eye fa-fw"></i>
          </button>
          <div class="invalid-feedback">Mot de passe requis (min 6 caractères).</div>
        </div>
        <div id="pwdStrengthWrap" class="mt-2" style="display:none;">
          <div class="d-flex gap-1 mb-1" id="pwdBars">
            <div class="pwd-bar rounded-pill" style="height:3px;flex:1;background:#e2e8f0;transition:background .3s;"></div>
            <div class="pwd-bar rounded-pill" style="height:3px;flex:1;background:#e2e8f0;transition:background .3s;"></div>
            <div class="pwd-bar rounded-pill" style="height:3px;flex:1;background:#e2e8f0;transition:background .3s;"></div>
            <div class="pwd-bar rounded-pill" style="height:3px;flex:1;background:#e2e8f0;transition:background .3s;"></div>
          </div>
          <span id="pwdStrengthLabel" style="font-size:.75rem;color:var(--auth-muted);"></span>
        </div>
      </div>

      <div class="auth-form-row mb-4">
        <div class="form-check mb-0">
          <input class="form-check-input" type="checkbox" value="1" id="rememberMe" name="remember">
          <label class="form-check-label" for="rememberMe" style="font-size:.875rem;color:var(--auth-muted);">
            Se souvenir de moi
          </label>
        </div>
        <div class="auth-form-row__meta">
          <i class="bi bi-lock-fill"></i>
          <span>Session chiffrée</span>
        </div>
      </div>

      <div class="d-grid">
        <button class="btn btn-primary auth-submit-btn" type="submit" id="loginSubmitBtn">
          <span class="btn-label">
            <i class="fas fa-right-to-bracket me-1"></i> Se connecter
          </span>
          <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
        </button>
      </div>
    </div>

    <div class="auth-divider">Expérience unifiée</div>

    <div class="auth-trust-list">
      <div class="auth-trust-list__item">
        <i class="bi bi-speedometer2"></i>
        <div>
          <strong>Accès immédiat</strong>
          <span>Dashboard, interventions et référentiels au même endroit.</span>
        </div>
      </div>
      <div class="auth-trust-list__item">
        <i class="bi bi-broadcast-pin"></i>
        <div>
          <strong>Suivi en temps réel</strong>
          <span>Visibilité rapide sur les tickets et notifications prioritaires.</span>
        </div>
      </div>
    </div>

    <p class="text-center mt-4 mb-0" style="font-size:.78rem;color:#94a3b8;">
      <i class="fas fa-shield-halved me-1"></i> Connexion sécurisée &nbsp;·&nbsp; © <?= date('Y') ?> <?= htmlspecialchars($brandName) ?>
    </p>
  </form>
</div>

<script>
(function () {
  'use strict';

  // Validation Bootstrap 5
  const form = document.querySelector('form.needs-validation');
  if (form) {
    form.addEventListener('submit', function (e) {
      if (!form.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
      }
      form.classList.add('was-validated');
    });
  }

  // Toggle visibilité mot de passe
  document.querySelectorAll('[data-action="toggle-password"]').forEach(btn => {
    btn.addEventListener('click', () => {
      const input = btn.closest('[data-password-toggle]').querySelector('input');
      if (!input) return;
      const show = input.type === 'password';
      input.type = show ? 'text' : 'password';
      btn.querySelector('i').className = show ? 'fas fa-eye-slash fa-fw' : 'fas fa-eye fa-fw';
    });
  });

  // Barre de force du mot de passe
  const pwdInput  = document.getElementById('loginPassword');
  const barsWrap  = document.getElementById('pwdStrengthWrap');
  const bars      = document.querySelectorAll('#pwdBars .pwd-bar');
  const label     = document.getElementById('pwdStrengthLabel');
  const levels    = [
    { label: 'Très faible', color: '#ef4444' },
    { label: 'Faible',      color: '#f97316' },
    { label: 'Moyen',       color: '#eab308' },
    { label: 'Bon',         color: '#22c55e' },
    { label: 'Excellent',   color: '#4f6ef7' },
  ];

  if (pwdInput) {
    pwdInput.addEventListener('input', () => {
      const v = pwdInput.value;
      if (!v) { barsWrap.style.display = 'none'; return; }

      let score = 0;
      if (v.length >= 8)          score++;
      if (/[A-Z]/.test(v))        score++;
      if (/[0-9]/.test(v))        score++;
      if (/[^A-Za-z0-9]/.test(v)) score++;

      barsWrap.style.display = 'block';
      const lvl = levels[score] ?? levels[levels.length - 1];

      bars.forEach((b, i) => {
        b.style.background = i <= score ? lvl.color : '#e2e8f0';
      });
      label.textContent  = 'Force : ' + lvl.label;
      label.style.color  = lvl.color;
    });
  }

  // Spinner au submit
  const submitBtn = document.getElementById('loginSubmitBtn');
  if (submitBtn) {
    submitBtn.closest('form')?.addEventListener('submit', () => {
      if (!submitBtn.closest('form').checkValidity()) return;
      submitBtn.querySelector('.spinner-border')?.classList.remove('d-none');
      submitBtn.disabled = true;
    });
  }
})();
</script>
