// ============================================================
// Admin Panel — V10
// ============================================================

let authToken = localStorage.getItem('chatia_token');
let charts = {};

function toast(msg, type = 'default') {
  const container = document.getElementById('toastContainer');
  const el = document.createElement('div');
  el.className = `toast ${type}`;
  el.textContent = msg;
  container.appendChild(el);
  setTimeout(() => { el.style.opacity = '0'; setTimeout(() => el.remove(), 200); }, 3000);
}

async function api(path) {
  const resp = await fetch(path, { headers: { 'Authorization': `Bearer ${authToken}` } });
  if (resp.status === 401) {
    document.getElementById('unauthorized').style.display = 'flex';
    document.getElementById('adminContent').style.display = 'none';
    throw new Error('Unauthorized');
  }
  if (resp.status === 403) {
    document.getElementById('unauthorized').style.display = 'flex';
    document.getElementById('unauthorized').querySelector('h1').textContent = 'Accès admin requis';
    document.getElementById('unauthorized').querySelector('p').textContent = 'Votre compte n\'est pas administrateur.';
    document.getElementById('adminContent').style.display = 'none';
    throw new Error('Forbidden');
  }
  return resp;
}

function fmtDate(ts) {
  if (!ts) return '—';
  return new Date(ts * 1000).toLocaleString();
}

function fmtNum(n) {
  if (!n && n !== 0) return '—';
  return n.toLocaleString();
}

const Admin = {
  async init() {
    if (!authToken) {
      document.getElementById('unauthorized').style.display = 'flex';
      document.getElementById('adminContent').style.display = 'none';
      return;
    }
    // Verify admin
    try {
      const meResp = await api('/me');
      if (!meResp.ok) throw new Error('Not logged in');
      const me = await meResp.json();
      if (!me.is_admin) {
        document.getElementById('unauthorized').style.display = 'flex';
        document.getElementById('unauthorized').querySelector('h1').textContent = 'Accès admin requis';
        document.getElementById('unauthorized').querySelector('p').textContent = 'Votre compte n\'est pas administrateur.';
        document.getElementById('adminContent').style.display = 'none';
        return;
      }
    } catch (e) {
      document.getElementById('unauthorized').style.display = 'flex';
      document.getElementById('adminContent').style.display = 'none';
      return;
    }
    document.getElementById('adminContent').style.display = 'block';
    await this.loadStats();
    await this.loadUsers();
    await this.loadUsage();
    await this.loadAudit();
  },

  switchTab(ev, tabId) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
    ev.currentTarget.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  },

  async loadStats() {
    try {
      const resp = await api('/admin/stats');
      if (!resp.ok) throw new Error('Failed');
      const s = await resp.json();
      document.getElementById('statTotalUsers').textContent = fmtNum(s.total_users);
      document.getElementById('statNew7').textContent = fmtNum(s.new_7d);
      document.getElementById('statNew20').textContent = fmtNum(s.new_20d);
      document.getElementById('statNew30').textContent = fmtNum(s.new_30d);
      document.getElementById('statActive24').textContent = fmtNum(s.active_24h);
      document.getElementById('statActive7').textContent = fmtNum(s.active_7d);
      document.getElementById('statBanned').textContent = fmtNum(s.banned);
      document.getElementById('statJobs').textContent = fmtNum(s.jobs_running);
      document.getElementById('statTokens30').textContent = fmtNum(s.tokens_30d);
      document.getElementById('statTokensTotal').textContent = fmtNum(s.tokens_total);

      const growthEl = document.getElementById('statGrowth');
      if (s.growth_pct !== null) {
        const sign = s.growth_pct >= 0 ? '+' : '';
        const cls = s.growth_pct > 0 ? 'up' : (s.growth_pct < 0 ? 'down' : 'neutral');
        growthEl.className = `stat-trend ${cls}`;
        growthEl.innerHTML = `<i class="fas fa-arrow-${s.growth_pct > 0 ? 'up' : (s.growth_pct < 0 ? 'down' : 'right')}"></i> ${sign}${s.growth_pct}% vs 30j précédents`;
      }

      // Charts
      this.renderDailyChart(s.daily_new);
      this.renderHourlyChart(s.hourly_activity);
      this.renderTopModelsChart(s.top_models);
    } catch (e) {
      toast('Erreur chargement stats: ' + e.message, 'error');
    }
  },

  renderDailyChart(data) {
    const ctx = document.getElementById('chartDaily').getContext('2d');
    if (charts.daily) charts.daily.destroy();
    charts.daily = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.map(d => d.date),
        datasets: [{
          label: 'Inscriptions',
          data: data.map(d => d.count),
          borderColor: '#7c5cff',
          backgroundColor: 'rgba(124, 92, 255, 0.1)',
          tension: 0.4, fill: true, pointRadius: 4, pointBackgroundColor: '#7c5cff',
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { ticks: { color: '#a0a0b8', maxRotation: 45 }, grid: { color: 'rgba(255,255,255,0.05)' } } }
      }
    });
  },

  renderHourlyChart(data) {
    const ctx = document.getElementById('chartHourly').getContext('2d');
    if (charts.hourly) charts.hourly.destroy();
    const hours = Array.from({ length: 24 }, (_, i) => i);
    const counts = hours.map(h => {
      const found = data.find(d => d.hour === h);
      return found ? found.count : 0;
    });
    charts.hourly = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: hours.map(h => h + 'h'),
        datasets: [{
          label: 'Connexions',
          data: counts,
          backgroundColor: '#7c5cff',
          borderRadius: 4,
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { ticks: { color: '#a0a0b8' }, grid: { display: false } } }
      }
    });
  },

  renderTopModelsChart(data) {
    const ctx = document.getElementById('chartTopModels').getContext('2d');
    if (charts.topModels) charts.topModels.destroy();
    charts.topModels = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: data.map(d => d.model),
        datasets: [{
          label: 'Appels',
          data: data.map(d => d.calls),
          backgroundColor: ['#7c5cff', '#00d4ff', '#4ade80', '#fbbf24', '#ff4d6d', '#ff8a3d', '#a78bfa', '#22d3ee'],
          borderRadius: 4,
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { color: 'rgba(255,255,255,0.05)' } }, y: { ticks: { color: '#a0a0b8' }, grid: { display: false } } }
      }
    });
  },

  async loadUsers() {
    try {
      const resp = await api('/admin/users');
      if (!resp.ok) throw new Error('Failed');
      const data = await resp.json();
      const tbody = document.getElementById('usersTbody');
      tbody.innerHTML = '';
      data.users.forEach(u => {
        const tr = document.createElement('tr');
        const status = u.is_banned ? '<span class="badge banned">Banni</span>' : '<span class="badge active">Actif</span>';
        const role = u.is_admin ? '<span class="badge admin">Admin</span>' : '<span class="badge active">User</span>';
        const banBtn = u.is_banned
          ? `<button class="btn-success-sm" onclick="Admin.unbanUser('${u.username}')"><i class="fas fa-unlock"></i> Débannir</button>`
          : `<button class="btn-danger-sm" onclick="Admin.banUser('${u.username}')"><i class="fas fa-ban"></i> Bannir</button>`;
        const deleteBtn = `<button class="btn-danger-sm" onclick="Admin.deleteUser('${u.username}')" style="margin-left:4px"><i class="fas fa-trash"></i></button>`;
        tr.innerHTML = `
          <td><strong>${u.username}</strong></td>
          <td>${role}</td>
          <td class="mono">${fmtDate(u.created_at)}</td>
          <td class="mono">${fmtDate(u.last_login_at)}</td>
          <td>${fmtNum(u.total_calls)}</td>
          <td>${fmtNum(u.login_count)}</td>
          <td>${status}</td>
          <td>${banBtn}${deleteBtn}</td>
        `;
        tbody.appendChild(tr);
      });
    } catch (e) {
      toast('Erreur chargement users: ' + e.message, 'error');
    }
  },

  async banUser(username) {
    if (!confirm(`Bannir l'utilisateur "${username}" ?`)) return;
    const resp = await api(`/admin/users/${encodeURIComponent(username)}/ban`, { method: 'POST' });
    if (resp.ok) { toast('Utilisateur banni', 'success'); this.loadUsers(); }
    else { toast('Erreur', 'error'); }
  },

  async unbanUser(username) {
    const resp = await api(`/admin/users/${encodeURIComponent(username)}/unban`, { method: 'POST' });
    if (resp.ok) { toast('Utilisateur débanni', 'success'); this.loadUsers(); }
    else { toast('Erreur', 'error'); }
  },

  async deleteUser(username) {
    if (!confirm(`SUPPRIMER "${username}" et TOUTES ses données ? Cette action est irréversible.`)) return;
    if (!confirm(`Confirmez définitivement la suppression de "${username}" ?`)) return;
    const resp = await api(`/admin/users/${encodeURIComponent(username)}`, { method: 'DELETE' });
    if (resp.ok) { toast('Utilisateur supprimé', 'success'); this.loadUsers(); }
    else { toast('Erreur', 'error'); }
  },

  async loadUsage() {
    try {
      const resp = await api('/admin/usage');
      if (!resp.ok) throw new Error('Failed');
      const data = await resp.json();
      this.renderProviderChart(data.by_provider);
      this.renderTopUsersChart(data.top_users);
      this.renderDailyUsageChart(data.daily_usage);
    } catch (e) {
      toast('Erreur chargement usage: ' + e.message, 'error');
    }
  },

  renderProviderChart(data) {
    const ctx = document.getElementById('chartByProvider').getContext('2d');
    if (charts.byProvider) charts.byProvider.destroy();
    charts.byProvider = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: data.map(d => d.provider),
        datasets: [{
          data: data.map(d => d.calls),
          backgroundColor: ['#7c5cff', '#00d4ff', '#4ade80', '#fbbf24', '#ff4d6d', '#a78bfa'],
          borderWidth: 0,
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { position: 'right', labels: { color: '#e4e4f0' } } }
      }
    });
  },

  renderTopUsersChart(data) {
    const ctx = document.getElementById('chartTopUsers').getContext('2d');
    if (charts.topUsers) charts.topUsers.destroy();
    charts.topUsers = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: data.map(d => d.username),
        datasets: [{
          label: 'Appels API',
          data: data.map(d => d.calls),
          backgroundColor: '#00d4ff',
          borderRadius: 4,
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { color: 'rgba(255,255,255,0.05)' } }, y: { ticks: { color: '#a0a0b8' }, grid: { display: false } } }
      }
    });
  },

  renderDailyUsageChart(data) {
    const ctx = document.getElementById('chartDailyUsage').getContext('2d');
    if (charts.dailyUsage) charts.dailyUsage.destroy();
    charts.dailyUsage = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.map(d => d.date),
        datasets: [{
          label: 'Appels API',
          data: data.map(d => d.calls),
          borderColor: '#4ade80',
          backgroundColor: 'rgba(74, 222, 128, 0.1)',
          tension: 0.4, fill: true, pointRadius: 3,
        }, {
          label: 'Tokens (×1000)',
          data: data.map(d => Math.round(d.tokens / 1000)),
          borderColor: '#fbbf24',
          backgroundColor: 'rgba(251, 191, 36, 0.1)',
          tension: 0.4, fill: true, pointRadius: 3, yAxisID: 'y1',
        }]
      },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#e4e4f0' } } },
        scales: {
          y: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { color: 'rgba(255,255,255,0.05)' }, position: 'left' },
          y1: { beginAtZero: true, ticks: { color: '#a0a0b8' }, grid: { display: false }, position: 'right' },
          x: { ticks: { color: '#a0a0b8', maxRotation: 45 }, grid: { color: 'rgba(255,255,255,0.05)' } }
        }
      }
    });
  },

  async loadAudit() {
    try {
      const resp = await api('/admin/audit?limit=200');
      if (!resp.ok) throw new Error('Failed');
      const data = await resp.json();
      const tbody = document.getElementById('auditTbody');
      tbody.innerHTML = '';
      data.logs.forEach(l => {
        const tr = document.createElement('tr');
        let details = '';
        try { if (l.details) details = JSON.stringify(JSON.parse(l.details)); } catch (e) { details = l.details || ''; }
        tr.innerHTML = `
          <td class="mono">${fmtDate(l.created_at)}</td>
          <td>${l.username || '<em>—</em>'}</td>
          <td class="audit-action-cell">${l.action}</td>
          <td class="mono">${l.ip || '—'}</td>
          <td class="mono" style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${l.user_agent || '—'}</td>
          <td class="mono" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${details || '—'}</td>
        `;
        tbody.appendChild(tr);
      });
    } catch (e) {
      toast('Erreur chargement audit: ' + e.message, 'error');
    }
  },
};

window.addEventListener('DOMContentLoaded', () => Admin.init());