// ─── AUTH UI + INTÉGRATION API ────────────────────────────────────────────────
// Ajouter dans index.html APRÈS api.js et AVANT script.js :
// <script src="auth-ui.js"></script>

let authMode = 'login'; // 'login' | 'register'

// ─── Initialisation au chargement ────────────────────────────────────────────
window.addEventListener('DOMContentLoaded', async () => {
  // Charge l'emoji sauvegardé dès le départ
  const savedEmoji = loadUserEmoji();
  const iconEl = document.getElementById('userIconDisplay');
  if (iconEl) iconEl.textContent = savedEmoji;

  const token = api.getToken();
  if (token) {
    try {
      const user = await api.me();
      onAuthSuccess(user);
    } catch (err) {
      // Token expiré ou invalide → afficher la modale
      api.clearToken();
      showAuthModal();
    }
  } else {
    showAuthModal();
  }

  // Support touche Entrée dans les champs du formulaire
  ['authUsername', 'authPassword', 'authEmail'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('keydown', e => { if (e.key === 'Enter') authSubmit(); });
  });
});

function showAuthModal() {
  document.getElementById('authModal').style.display = 'flex';
}

function hideAuthModal() {
  document.getElementById('authModal').style.display = 'none';
}

function authToggleMode() {
  authMode = authMode === 'login' ? 'register' : 'login';
  const isLogin = authMode === 'login';
  document.getElementById('authTitle').textContent = isLogin ? 'Connexion' : 'Créer un compte';
  document.getElementById('authBtnLabel').textContent = isLogin ? 'Se connecter' : "S'inscrire";
  document.getElementById('authToggleLabel').textContent = isLogin
    ? "Pas encore de compte ? S'inscrire"
    : 'Déjà un compte ? Se connecter';
  document.getElementById('authError').style.display = 'none';
  // Affiche le champ email uniquement en mode inscription
  const emailField = document.getElementById('authEmail');
  if (emailField) emailField.style.display = isLogin ? 'none' : 'block';
}

function showAuthError(msg) {
  const el = document.getElementById('authError');
  el.textContent = msg;
  el.style.display = 'block';
}

async function authSubmit() {
  const username = document.getElementById('authUsername').value.trim();
  const password = document.getElementById('authPassword').value;
  const emailEl = document.getElementById('authEmail');
  const email = emailEl ? emailEl.value.trim() : '';

  if (!username || !password) {
    return showAuthError('Remplis les deux champs stp 🙂');
  }

  if (authMode === 'register' && password.length < 4) {
    return showAuthError('Le mot de passe doit faire au moins 4 caractères');
  }

  try {
    document.getElementById('authBtnLabel').textContent = '⏳ Chargement...';
    const user = authMode === 'login'
      ? await api.login(username, password)
      : await api.register(username, password, email);
    onAuthSuccess(user);
  } catch (err) {
    // Distinguer erreur réseau vs erreur serveur
    if (err.message === 'Failed to fetch' || err.name === 'TypeError') {
      showAuthError('❌ Impossible de contacter le serveur. Vérifie ta connexion ou réessaie plus tard.');
    } else {
      showAuthError(err.message);
    }
  } finally {
    document.getElementById('authBtnLabel').textContent =
      authMode === 'login' ? 'Se connecter' : "S'inscrire";
  }
}

function authSkip() {
  hideAuthModal();
  // Mode local : vide les stats pour repartir propre
  ['tq_bestGlobal','tq_played','tq_catStats','tq_mistakes','tq_daily','tq_user'].forEach(k => localStorage.removeItem(k));
  if (typeof state !== 'undefined') {
    state.bestGlobal = 0;
    state.played     = 0;
    state.catStats   = {};
    state.mistakes   = [];
    renderStats && renderStats();
  }
}

// ─── Appelé après login/register réussi ──────────────────────────────────────
function onAuthSuccess(user) {
  hideAuthModal();

  // ── REMPLACE le localStorage par les données du serveur (pas de merge)
  // Cela évite que deux comptes voient les mêmes stats sur le même navigateur
  if (typeof state !== 'undefined') {

    // Écrase complètement le state avec les données serveur
    state.bestGlobal = user.bestGlobal || 0;
    state.played     = user.played     || 0;

    // CatStats : reconstruit depuis le serveur
    state.catStats = {};
    if (user.catStats && user.catStats.length) {
      user.catStats.forEach(s => {
        state.catStats[s.category] = {
          good: s.good, bad: s.bad, played: s.played, bestScore: s.bestScore
        };
      });
    }

    // Fautes : remplace par celles du serveur
    state.mistakes = [];
    if (user.mistakes && user.mistakes.length) {
      user.mistakes.forEach(m => {
        state.mistakes.push({
          category:    m.category,
          question:    m.question,
          user:        m.userAnswer,
          correct:     m.correct,
          explanation: m.explanation
        });
      });
    }

    // Question du jour — on vide d'abord, puis on remet seulement si ce compte a répondu aujourd'hui
    localStorage.removeItem('tq_daily');
    if (user.dailyHistory && user.dailyHistory.length) {
      const ref = new Date('2025-01-01');
      const today = Math.floor((new Date() - ref) / (1000 * 60 * 60 * 24));
      const todayEntry = user.dailyHistory.find(d => d.day === today);
      if (todayEntry) {
        localStorage.setItem('tq_daily', JSON.stringify({ day: todayEntry.day, correct: todayEntry.correct }));
      }
    }

    // Sauvegarde dans localStorage pour ce compte
    localStorage.setItem('tq_bestGlobal', JSON.stringify(state.bestGlobal));
    localStorage.setItem('tq_played',     JSON.stringify(state.played));
    localStorage.setItem('tq_catStats',   JSON.stringify(state.catStats));
    localStorage.setItem('tq_mistakes',   JSON.stringify(state.mistakes));
    localStorage.setItem('tq_user',       user.username);

    renderStats && renderStats();
  }

  // Affiche le panneau utilisateur + emojis
  updateUserPanel(user.username);
}

// ─── Panneau utilisateur (haut gauche) ───────────────────────────────────────
function toggleUserPanel() {
  const panel = document.getElementById('userPanel');
  panel.classList.toggle('open');
  if (panel.classList.contains('open')) {
    if (typeof renderAvatarGrid === 'function') renderAvatarGrid();
    if (typeof renderSeasonalThemeGrid === 'function') renderSeasonalThemeGrid();
  }
}

// Exposer globalement
window.toggleUserPanel = toggleUserPanel;

// Ferme le panneau si on clique ailleurs
document.addEventListener('click', e => {
  const btn = document.getElementById('userIconBtn');
  const panel = document.getElementById('userPanel');
  if (btn && panel && !btn.contains(e.target) && !panel.contains(e.target)) {
    panel.classList.remove('open');
  }
});

function updateUserPanel(username) {
  const nameEl = document.getElementById('userPanelName');
  const subEl = document.getElementById('userPanelSub');
  const loginBtn = document.querySelector('#userPanel button:not(.logout-btn)');
  const logoutBtn = document.getElementById('logoutBtn');

  if (username) {
    nameEl.childNodes[0].textContent = username;
    subEl.textContent = 'Connecté ✓';
    loginBtn.style.display = 'none';
    logoutBtn.style.display = 'block';
    const iconEl = document.getElementById('userIconDisplay');
    if (iconEl) iconEl.textContent = loadUserEmoji();
  } else {
    nameEl.childNodes[0].textContent = 'Non connecté';
    subEl.textContent = '';
    loginBtn.style.display = 'block';
    logoutBtn.style.display = 'none';
    const iconEl = document.getElementById('userIconDisplay');
    if (iconEl) iconEl.textContent = '👤';
  }
}

function openLoginFromPanel() {
  document.getElementById('userPanel').classList.remove('open');
  showAuthModal();
}

function handleLogout() {
  api.logout();
  // Vide toutes les stats du localStorage
  ['tq_bestGlobal','tq_played','tq_catStats','tq_mistakes','tq_daily','tq_user'].forEach(k => localStorage.removeItem(k));
  // Remet le state à zéro
  if (typeof state !== 'undefined') {
    state.bestGlobal = 0;
    state.played     = 0;
    state.catStats   = {};
    state.mistakes   = [];
    renderStats && renderStats();
  }
  updateUserPanel(null);
  document.getElementById('userPanel').classList.remove('open');
  showAuthModal();
}

// ─── Override de saveState pour persister aussi côté serveur ─────────────────
// On patche saveState APRÈS que script.js l'ait défini.
// Cette ligne doit être dans un script APRÈS script.js dans index.html.
document.addEventListener('DOMContentLoaded', () => {
  // On attend que script.js ait défini saveState, puis on le wrape.
  const _originalSaveState = window.saveState;
  if (typeof _originalSaveState === 'function') {
    window.saveState = function () {
      _originalSaveState();
      if (api.getToken()) {
        // On ne spam pas le serveur — on sauvegarde de façon silencieuse
        // saveState est appelé à chaque réponse; on laisse nextQuestion()
        // déclencher la vraie sauvegarde de session (voir patchNextQuestion).
      }
    };
  }
});

// ─── Patch de nextQuestion pour sauvegarder la session complète en fin ────────
// À appeler dans index.html juste après <script src="script.js">
function patchNextQuestion() {
  const _original = window.nextQuestion;
  window.nextQuestion = function () {
    const isLastQuestion = state.index >= state.activeQuiz.length - 1;

    if (isLastQuestion && api.getToken()) {
      // Session terminée → on envoie au serveur
      api.saveSession({
        category: state.category,
        score: state.score,
        good: state.good,
        bad: state.bad,
        bestStreak: state.bestStreak,
        mistakes: state.mistakes.slice(-state.bad) // seulement les fautes de cette session
      }).then(data => {
        // Met à jour bestGlobal si le serveur retourne un meilleur score
        if (data.bestGlobal > state.bestGlobal) {
          state.bestGlobal = data.bestGlobal;
          renderStats && renderStats();
        }
      }).catch(console.error);
    }

    _original.call(this);
  };
}

// ─── Patch de answerDaily pour sauvegarder côté serveur ──────────────────────
function patchAnswerDaily() {
  const _original = window.answerDaily;
  if (!_original) return;
  window.answerDaily = function (btn) {
    _original.call(this, btn);
    if (api.getToken()) {
      const day = getDayNumber();
      // On lit le statut juste posté dans localStorage pour savoir si correct
      const status = JSON.parse(localStorage.getItem('tq_daily') || '{}');
      if (status.day === day) {
        api.saveDaily(day, status.correct).catch(console.error);
      }
    }
  };
}

// ─── Patch de clearMistakes ───────────────────────────────────────────────────
function patchClearMistakes() {
  const _original = window.clearMistakes;
  if (!_original) return;
  window.clearMistakes = function () {
    _original.call(this);
    if (api.getToken()) {
      api.clearMistakes().catch(console.error);
    }
  };
}

// Appel des patches une fois le DOM prêt
window.addEventListener('DOMContentLoaded', () => {
  // Légère attente pour laisser script.js définir ses fonctions
  setTimeout(() => {
    patchNextQuestion();
    patchAnswerDaily();
    patchClearMistakes();
  }, 0);
});


// ─── EMOJI DE PROFIL ──────────────────────────────────────────────────────────
const PROFILE_EMOJIS = [
  '😊','😎','🤓','🥳','😏','🤩','😇','🧠','🦊',
  '🐼','🐸','🦁','🐯','🐺','🦄','🐉','🌟','🔥',
  '💎','🎯','🚀','🎸','🏆','⚡','👑',
  '🏍️','🚗','🧗','🏐','🤾','🎵','🏳️‍🌈','🍺','💃'
];

function loadUserEmoji() {
  return localStorage.getItem('tq_avatar') || localStorage.getItem('tq_emoji') || '😊';
}

function saveUserEmoji(emoji) {
  localStorage.setItem('tq_emoji', emoji);
  localStorage.setItem('tq_avatar', emoji);
}

function renderEmojiPicker() {
  const grid = document.getElementById('emojiGrid');
  if (!grid) return;
  const current = loadUserEmoji();
  grid.innerHTML = '';
  grid.style.cssText = 'display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;';
  PROFILE_EMOJIS.forEach((e, i) => {
    const span = document.createElement('span');
    span.textContent = e;
    span.title = e;
    span.dataset.idx = i;
    const isSelected = e === current;
    span.style.cssText = 'font-size:1.5rem;cursor:pointer;text-align:center;padding:4px;border-radius:6px;display:block;'
      + (isSelected ? 'outline:2px solid var(--accent,#ff8a2a);outline-offset:1px;background:rgba(255,138,42,.1);' : '');
    span.addEventListener('click', function(ev) {
      ev.stopPropagation();
      selectEmoji(e);
    });
    grid.appendChild(span);
  });
}

function selectEmoji(emoji) {
  saveUserEmoji(emoji);
  if (typeof state !== 'undefined') state.avatar = emoji;
  if (typeof window.syncAvatarUI === 'function') {
    window.syncAvatarUI(emoji);
  } else {
    const userIconDisplay = document.getElementById('userIconDisplay');
    if (userIconDisplay) userIconDisplay.textContent = emoji;
  }
  renderEmojiPicker();
}
