(() => {
  const statusEl = document.getElementById('status');
  const pseudoInput = document.getElementById('pseudo');
  const giftButtonsEl = document.getElementById('giftButtons');
  const commentText = document.getElementById('commentText');
  const logEl = document.getElementById('log');

  TikTokEvents.on('_status', (d) => {
    statusEl.textContent = d.connected ? 'Connecte au serveur' : 'Deconnecte, nouvelle tentative...';
    statusEl.className = d.connected ? 'ok' : 'down';
  });

  function log(text, skipped) {
    const row = document.createElement('div');
    row.className = 'log-row' + (skipped ? ' skip' : '');
    row.textContent = text;
    logEl.appendChild(row);
    while (logEl.children.length > 30) logEl.removeChild(logEl.firstChild);
  }

  // Un pseudo vide ou juste "-" veut dire "ne simule rien" (utile pour cliquer
  // sans risque quand on veut juste regarder l'interface).
  function getPseudo() {
    const v = pseudoInput.value.trim();
    if (!v || v === '-') return null;
    return v;
  }

  function guardedSend(build) {
    const pseudo = getPseudo();
    if (!pseudo) {
      log('(ignore : mets un pseudo pour simuler)', true);
      return;
    }
    const event = build(pseudo);
    TikTokEvents.send(event);
    log('Envoye : ' + JSON.stringify(event));
  }

  document.querySelectorAll('button[data-action]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const action = btn.dataset.action;
      if (action === 'follow') {
        guardedSend((pseudo) => ({ type: 'follow', uniqueId: pseudo }));
      } else if (action === 'like100') {
        guardedSend((pseudo) => ({ type: 'like', uniqueId: pseudo, likeCount: 100 }));
      } else if (action === 'like500') {
        guardedSend((pseudo) => ({ type: 'like', uniqueId: pseudo, likeCount: 500 }));
      } else if (action === 'comment') {
        const text = commentText.value.trim();
        if (!text) { log('(ignore : ecris un commentaire)', true); return; }
        guardedSend((pseudo) => ({ type: 'comment', uniqueId: pseudo, comment: text }));
      }
    });
  });

  function buildGiftButtons(flat, prices) {
    giftButtonsEl.innerHTML = '';
    flat.forEach((entry) => {
      const price = (prices && prices[entry.id] !== undefined) ? prices[entry.id] : entry.diamonds;
      const btn = document.createElement('button');
      btn.className = 'gift-btn';
      btn.innerHTML = `<img class="icon" src="/overlay/${entry.image}" alt="" onerror="this.style.display='none'">` +
        `<span class="name">${entry.name}</span><span class="price">${price}💎</span>`;
      btn.addEventListener('click', () => {
        guardedSend((pseudo) => ({
          type: 'gift',
          uniqueId: pseudo,
          giftName: entry.name,
          diamondCount: price,
          repeatCount: 1
        }));
      });
      giftButtonsEl.appendChild(btn);
    });
  }

  Promise.all([
    fetch('/overlay/gift-legend.json').then((r) => r.json()),
    fetch('/overlay/gift-prices.json').then((r) => r.json()).catch(() => null)
  ]).then(([legend, prices]) => {
    const flat = [...legend.grid, ...legend.sideLeft, ...legend.sideRight, legend.special];
    buildGiftButtons(flat, prices);
  });

  // ============ Onglet Dashboard ============
  const vues = {
    simulation: document.getElementById('vue-simulation'),
    dashboard: document.getElementById('vue-dashboard')
  };
  let minuteurStats = null;

  document.querySelectorAll('#tabs .tab').forEach((btn) => {
    btn.addEventListener('click', () => {
      const cible = btn.dataset.onglet;
      document.querySelectorAll('#tabs .tab').forEach((b) => b.classList.toggle('actif', b === btn));
      Object.entries(vues).forEach(([nom, el]) => { el.hidden = nom !== cible; });
      if (cible === 'dashboard') { chargerStats(); lancerAuto(); } else arreterAuto();
    });
  });

  function nombre(n) {
    return (Number(n) || 0).toLocaleString('fr-CH').replace(/ | /g, "'");
  }

  function dateCourte(iso) {
    if (!iso) return '-';
    const d = new Date(iso);
    return isNaN(d) ? '-' : d.toLocaleString('fr-CH', { dateStyle: 'short', timeStyle: 'short' });
  }

  function echappe(s) {
    return String(s === undefined || s === null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  // Construit un tableau HTML a partir de colonnes { titre, cle, format }.
  function tableau(cible, lignes, colonnes) {
    const el = document.getElementById(cible);
    if (!lignes || !lignes.length) { el.innerHTML = '<div class="vide">Aucune donnee pour le moment.</div>'; return; }
    const entete = colonnes.map((c) => `<th>${echappe(c.titre)}</th>`).join('');
    const corps = lignes.map((l, i) => {
      const cellules = colonnes.map((c) => {
        const brut = typeof c.cle === 'function' ? c.cle(l, i) : l[c.cle];
        const val = c.format ? c.format(brut, l, i) : echappe(brut === undefined || brut === null ? '-' : brut);
        return `<td>${val}</td>`;
      }).join('');
      return `<tr>${cellules}</tr>`;
    }).join('');
    el.innerHTML = `<table><thead><tr>${entete}</tr></thead><tbody>${corps}</tbody></table>`;
  }

  function carte(titre, valeur, precision) {
    return `<div class="carte"><div class="carte-valeur">${valeur}</div><div class="carte-titre">${echappe(titre)}</div>` +
      (precision ? `<div class="carte-precision">${echappe(precision)}</div>` : '') + '</div>';
  }

  function rendreStats(s) {
    const g = s.global;
    document.getElementById('cartes').innerHTML = [
      carte('Diamants recus', nombre(g.diamants), `${nombre(g.diamantsParLive)} / live`),
      carte('Dons', nombre(g.dons), `${nombre(g.donateurs)} donateurs`),
      carte('Likes', nombre(g.likes), `${nombre(g.likesParLive)} / live`),
      carte('Follows', nombre(g.follows)),
      carte('Commentaires', nombre(g.commentaires)),
      carte('Partages', nombre(g.partages)),
      carte('Personnes vues', nombre(g.personnes)),
      carte('Lives', nombre(g.lives), `depuis le ${dateCourte(s.creeLe)}`),
      carte('Diamants / donateur', nombre(g.diamantsParDonateur))
    ].join('');

    const colPseudo = { titre: 'Pseudo', cle: 'pseudo' };
    const rang = { titre: '#', cle: (l, i) => i + 1 };

    tableau('tableDonateurs', s.topDonateurs, [
      rang, colPseudo,
      { titre: 'Diamants', cle: 'diamants', format: nombre },
      { titre: 'Dons', cle: 'dons', format: nombre },
      { titre: 'Plus gros don', cle: 'plusGrosDon' },
      { titre: 'Lives', cle: 'livesVus', format: nombre },
      { titre: 'Vu la derniere fois', cle: 'dernierVu', format: dateCourte }
    ]);

    tableau('tableLikers', s.topLikers, [
      rang, colPseudo,
      { titre: 'Likes', cle: 'likes', format: nombre },
      { titre: 'Diamants', cle: 'diamants', format: nombre },
      { titre: 'Lives', cle: 'livesVus', format: nombre },
      { titre: 'Vu la derniere fois', cle: 'dernierVu', format: dateCourte }
    ]);

    tableau('tableDons', s.parDon, [
      rang,
      { titre: 'Don', cle: 'nom' },
      { titre: 'Envoye', cle: 'fois', format: nombre },
      { titre: 'Diamants', cle: 'diamants', format: nombre }
    ]);

    tableau('tableCommentateurs', s.topCommentateurs, [
      rang, colPseudo,
      { titre: 'Commentaires', cle: 'commentaires', format: nombre },
      { titre: 'Lives', cle: 'livesVus', format: nombre }
    ]);

    tableau('tableFideles', s.plusFideles, [
      rang, colPseudo,
      { titre: 'Lives', cle: 'livesVus', format: nombre },
      { titre: 'Diamants', cle: 'diamants', format: nombre },
      { titre: 'Likes', cle: 'likes', format: nombre },
      { titre: 'Premiere fois', cle: 'premierVu', format: dateCourte }
    ]);

    tableau('tableLives', s.lives, [
      { titre: 'Debut', cle: 'debut', format: dateCourte },
      { titre: 'Jeu', cle: 'jeu' },
      { titre: 'Compte TikTok', cle: 'pseudoTikTok' },
      { titre: 'Diamants', cle: 'diamants', format: nombre },
      { titre: 'Dons', cle: 'dons', format: nombre },
      { titre: 'Likes', cle: 'likes', format: nombre },
      { titre: 'Follows', cle: 'follows', format: nombre },
      { titre: 'Personnes', cle: 'personnes', format: nombre }
    ]);
  }

  // ---- Etat du live : si le stream n'est pas actif, on propose de reessayer ----
  const etatPastille = document.getElementById('etatPastille');
  const etatTexte = document.getElementById('etatTexte');
  const etatActions = document.getElementById('etatActions');
  const pseudoLive = document.getElementById('pseudoLive');
  const boutonReconnecter = document.getElementById('reconnecter');

  const LIBELLES = {
    'connecte': 'Live actif',
    'connexion': 'Connexion en cours...',
    'erreur': 'Live inactif ou injoignable',
    'ended': 'Le live est terminé',
    'disconnected': 'Déconnecté du live',
    'aucun-pseudo': 'Aucun profil TikTok configuré'
  };

  function rendreEtatLive(e) {
    const ok = !!e.enLigne;
    etatPastille.className = 'pastille ' + (ok ? 'ok' : (e.statut === 'connexion' ? 'attente' : 'ko'));
    const titre = LIBELLES[e.statut] || e.statut;
    etatTexte.textContent = (e.pseudo ? `@${e.pseudo} — ` : '') + titre + (e.message ? ` (${e.message})` : '');
    // Le bouton n'apparait que si le live n'est PAS actif.
    etatActions.hidden = ok || e.statut === 'connexion';
    if (e.pseudo && !pseudoLive.value) pseudoLive.value = e.pseudo;
  }

  function chargerEtatLive() {
    fetch('/api/live-status').then((r) => r.json()).then(rendreEtatLive).catch(() => {
      etatPastille.className = 'pastille ko';
      etatTexte.textContent = 'Serveur injoignable';
      etatActions.hidden = false;
    });
  }

  boutonReconnecter.addEventListener('click', () => {
    boutonReconnecter.disabled = true;
    boutonReconnecter.textContent = '⏳ Connexion...';
    fetch('/api/live/reconnect', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pseudo: pseudoLive.value.trim() })
    })
      .then((r) => r.json())
      .then(rendreEtatLive)
      .catch(() => {})
      .finally(() => {
        boutonReconnecter.disabled = false;
        boutonReconnecter.textContent = '🔄 Réessayer la connexion au profil';
        // la connexion aboutit un peu apres la reponse : on revient voir
        setTimeout(chargerEtatLive, 2500);
      });
  });

  // ---- Reglages du jeu, appliques en direct (sans recharger les pages) ----
  const cfgPalier = document.getElementById('cfgPalier');
  const cfgEtages = document.getElementById('cfgEtages');
  const cfgEtat = document.getElementById('cfgEtat');

  function afficherEtatCfg(texte, erreur) {
    cfgEtat.textContent = texte;
    cfgEtat.className = 'cfg-etat' + (erreur ? ' ko' : ' ok');
    if (texte) setTimeout(() => { cfgEtat.textContent = ''; }, 4000);
  }

  function chargerConfigJeu() {
    fetch('/api/game-config').then((r) => r.json()).then((cfg) => {
      // on ne remplace pas ce que l'utilisateur est en train de taper
      if (document.activeElement !== cfgPalier) cfgPalier.value = cfg.likeMilestone || 500;
      if (document.activeElement !== cfgEtages) cfgEtages.value = cfg.likeMilestoneFloors || 5;
    }).catch(() => {});
  }

  document.getElementById('cfgEnregistrer').addEventListener('click', () => {
    fetch('/api/game-config', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        likeMilestone: Number(cfgPalier.value),
        likeMilestoneFloors: Number(cfgEtages.value)
      })
    })
      .then((r) => r.json())
      .then((cfg) => afficherEtatCfg(`Appliqué : explosion tous les ${cfg.likeMilestone} likes, -${cfg.likeMilestoneFloors} étages`))
      .catch(() => afficherEtatCfg('Échec de l\'enregistrement', true));
  });

  function chargerStats() {
    chargerEtatLive();
    chargerConfigJeu();
    fetch('/api/stats')
      .then((r) => r.json())
      .then(rendreStats)
      .catch(() => { document.getElementById('cartes').innerHTML = '<div class="vide">Statistiques indisponibles.</div>'; });
  }

  function lancerAuto() {
    arreterAuto();
    if (document.getElementById('autoRafraichir').checked) minuteurStats = setInterval(chargerStats, 5000);
  }

  function arreterAuto() {
    if (minuteurStats) { clearInterval(minuteurStats); minuteurStats = null; }
  }

  document.getElementById('rafraichirStats').addEventListener('click', chargerStats);
  document.getElementById('autoRafraichir').addEventListener('change', lancerAuto);
  document.getElementById('reinitStats').addEventListener('click', () => {
    if (!confirm('Effacer definitivement toutes les statistiques de tous les lives ?')) return;
    fetch('/api/stats/reset', { method: 'POST' }).then(chargerStats);
  });
})();
