/**
 * ADMIN CUSTOM JS – STABILITÉ STRUCTURELLE & INJECTION SÉCURISÉE
 * Thème "Golden Night" corrigé
 */

(function() {
  'use strict';

  document.addEventListener('DOMContentLoaded', function() {
    fixBootstrapOverflowClasses();
    injectWelcomeBanner();
    enhanceModelCardsWithCounts();
    transformMessagesToToasts();
    setupMobileSidebar();
    observeDynamicChanges();
  });

  // 1. Supprime les classes de marge Bootstrap qui causent des débordements sur mobile
  function fixBootstrapOverflowClasses() {
    const checkAndFix = () => {
      // Cibler les lignes avec marges négatives
      document.querySelectorAll('.row').forEach(row => {
        if (window.innerWidth < 768) {
          row.style.marginLeft = '0';
          row.style.marginRight = '0';
        } else {
          // Restaurer les marges par défaut seulement si nécessaire (Bootstrap les gère)
          row.style.marginLeft = '';
          row.style.marginRight = '';
        }
      });

      // S'assurer que les conteneurs n'ont pas de padding excessif
      document.querySelectorAll('.container-fluid').forEach(container => {
        if (window.innerWidth < 768) {
          container.style.paddingLeft = '0.75rem';
          container.style.paddingRight = '0.75rem';
        } else {
          container.style.paddingLeft = '';
          container.style.paddingRight = '';
        }
      });
    };

    checkAndFix();
    window.addEventListener('resize', debounce(checkAndFix, 150));
  }

  // 2. Injection sécurisée de la bannière de bienvenue (respect du padding parent)
  function injectWelcomeBanner() {
    const isHome = window.location.pathname.match(/^\/admin\/?$/);
    if (!isHome) return;

    const contentWrapper = document.querySelector('.content-wrapper .content');
    const containerFluid = contentWrapper?.querySelector('.container-fluid');
    if (!containerFluid) return;

    if (document.querySelector('.admin-welcome-banner')) return;

    const banner = document.createElement('div');
    banner.className = 'admin-welcome-banner';
    banner.setAttribute('role', 'banner');

    // Récupération asynchrone des statistiques pour les badges
    fetchQuickStats().then(stats => {
      banner.innerHTML = `
        <div>
          <h2>Centre de Contrôle Awards 2026</h2>
          <p style="color: var(--text-secondary); margin:0;">Supervision en temps réel</p>
        </div>
        <div class="welcome-stats">
          <div class="stat-badge">
            <i class="fas fa-calendar-alt" style="color: var(--gold-royal);"></i>
            <span>${stats.eventsCount} événements</span>
          </div>
          <div class="stat-badge">
            <i class="fas fa-vote-yea" style="color: var(--gold-royal);"></i>
            <span>${stats.votesCount} votes</span>
          </div>
        </div>
      `;
    }).catch(() => {
      banner.innerHTML = `
        <div>
          <h2>Centre de Contrôle Awards 2025</h2>
          <p style="color: var(--text-secondary); margin:0;">Gestion des votes</p>
        </div>
        <div class="welcome-stats">
          <div class="stat-badge">
            <i class="fas fa-trophy" style="color: var(--gold-royal);"></i>
            <span>Tableau de bord</span>
          </div>
        </div>
      `;
    });

    // Insertion avant le premier enfant du container-fluid
    containerFluid.insertBefore(banner, containerFluid.firstChild);
  }

  async function fetchQuickStats() {
    try {
      const [eventsRes, votesRes] = await Promise.all([
        fetch('/admin/nominations/evenement/?format=json'),
        fetch('/admin/ballot/vote/?format=json')
      ]);
      const eventsData = await eventsRes.json();
      const votesData = await votesRes.json();
      return {
        eventsCount: eventsData.count || 0,
        votesCount: votesData.count || 0
      };
    } catch (e) {
      return { eventsCount: '—', votesCount: '—' };
    }
  }

  // 3. Amélioration des cartes de modèles avec compteurs (sans casser la mise en page)
  function enhanceModelCardsWithCounts() {
    const modelCards = document.querySelectorAll('.card:not(.admin-welcome-banner)');
    if (modelCards.length === 0) return;

    modelCards.forEach(card => {
      if (card.classList.contains('stats-enhanced')) return;
      card.classList.add('stats-enhanced');

      const header = card.querySelector('.card-title, .card-header');
      if (!header) return;
      const title = header.textContent.trim();

      let endpoint = null;
      if (title.includes('Événement')) endpoint = '/admin/nominations/evenement/?format=json';
      else if (title.includes('Catégorie')) endpoint = '/admin/nominations/categorie/?format=json';
      else if (title.includes('Candidat')) endpoint = '/admin/nominations/candidat/?format=json';
      else if (title.includes('Vote')) endpoint = '/admin/ballot/vote/?format=json';
      else return;

      // Créer un conteneur pour les stats, placé de manière non intrusive
      const cardBody = card.querySelector('.card-body');
      if (!cardBody) return;

      let statsDiv = cardBody.querySelector('.model-stats');
      if (!statsDiv) {
        statsDiv = document.createElement('div');
        statsDiv.className = 'model-stats';
        statsDiv.style.marginTop = '1rem';
        statsDiv.style.display = 'flex';
        statsDiv.style.flexWrap = 'wrap';
        statsDiv.style.gap = '0.75rem';
        statsDiv.style.alignItems = 'center';
        cardBody.appendChild(statsDiv);
      }

      fetch(endpoint)
        .then(res => res.json())
        .then(data => {
          const count = data.count || 0;
          statsDiv.innerHTML = `
            <div style="background: rgba(212,175,55,0.08); border:1px solid var(--gold-royal); border-radius:40px; padding:0.4rem 1.2rem; display:inline-flex; align-items:center; gap:8px;">
              <span style="color:var(--gold-royal); font-weight:700; font-size:1.4rem;">${count}</span>
              <span style="color:var(--text-secondary); font-size:0.8rem; text-transform:uppercase;">éléments</span>
            </div>
          `;
        })
        .catch(() => {
          statsDiv.innerHTML = '';
        });
    });
  }

  // 4. Transformation des messages Django en toasts avec auto-disparition
  function transformMessagesToToasts() {
    const messagelist = document.querySelector('.messagelist');
    if (!messagelist) return;

    messagelist.querySelectorAll('li').forEach(msg => {
      if (msg.dataset.toastEnhanced) return;
      msg.dataset.toastEnhanced = 'true';

      // Ajout d'une icône selon le type
      const classes = msg.className;
      let icon = 'info-circle';
      if (classes.includes('success')) icon = 'check-circle';
      else if (classes.includes('error') || classes.includes('danger')) icon = 'exclamation-circle';
      else if (classes.includes('warning')) icon = 'exclamation-triangle';

      if (!msg.querySelector('i')) {
        const iconEl = document.createElement('i');
        iconEl.className = `fas fa-${icon} me-2`;
        msg.prepend(iconEl);
      }

      // Disparition automatique après 5 secondes
      setTimeout(() => {
        msg.style.opacity = '0';
        msg.style.transform = 'translateX(20px)';
        msg.style.transition = 'all 0.3s ease';
        setTimeout(() => msg.remove(), 300);
      }, 5000);
    });
  }

  // 5. Gestion du drawer mobile (si Jazzmin ne le fait pas)
  function setupMobileSidebar() {
    const toggleBtn = document.querySelector('[data-widget="pushmenu"]');
    if (!toggleBtn) return;

    toggleBtn.addEventListener('click', () => {
      document.body.classList.toggle('sidebar-open');
    });
  }

  // 6. Observer les changements DOM pour appliquer les corrections dynamiques
  function observeDynamicChanges() {
    const observer = new MutationObserver(() => {
      // Réappliquer les corrections de marges sur les nouvelles lignes
      fixBootstrapOverflowClasses();
      // Transformer les nouveaux messages
      transformMessagesToToasts();
      // Améliorer les nouvelles cartes
      enhanceModelCardsWithCounts();
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  // Utilitaire debounce
  function debounce(func, wait) {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

})();