/**
 * Dashboard de Progresso
 * Lê dados do localStorage e mostra estatísticas de estudo
 */

var PROGRESS_PREFIX = window.PROGRESS_PREFIX || 'quiz_progress_';

function initDashboard() {
  const dashboard = document.getElementById('dashboard-stats');
  if (!dashboard) return;

  const stats = calculateStats();
  renderDashboard(stats);
}

function calculateStats() {
  const allKeys = Object.keys(localStorage);
  const progressKeys = allKeys.filter((k) => k.startsWith(PROGRESS_PREFIX));

  const stats = {
    totalQuizzes: progressKeys.length,
    totalAcertos: 0,
    totalErros: 0,
    disciplinas: {},
  };

  progressKeys.forEach((key) => {
    try {
      const data = JSON.parse(localStorage.getItem(key));
      if (!data || !data.questions) return;

      const disciplina = key.replace(PROGRESS_PREFIX, '').split('_')[0];
      if (!stats.disciplinas[disciplina]) {
        stats.disciplinas[disciplina] = {
          acertos: 0,
          erros: 0,
          total: 0,
        };
      }

      stats.disciplinas[disciplina].acertos += data.acertos || 0;
      stats.disciplinas[disciplina].erros += data.erros || 0;
      stats.disciplinas[disciplina].total += data.questions.length;

      stats.totalAcertos += data.acertos || 0;
      stats.totalErros += data.erros || 0;
    } catch (e) {}
  });

  return stats;
}

function renderDashboard(stats) {
  const dashboard = document.getElementById('dashboard-stats');
  if (!dashboard) return;

  const totalQuestoes = stats.totalAcertos + stats.totalErros;
  const pctGeral = totalQuestoes > 0 ? Math.round((stats.totalAcertos / totalQuestoes) * 100) : 0;

  let html = `
    <div class="dashboard-container">
      <h2>📊 Seu Progresso de Estudo</h2>
      
      <div class="dashboard-overview">
        <div class="stat-card">
          <div class="stat-label">Quizzes Iniciados</div>
          <div class="stat-value">${stats.totalQuizzes}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Taxa de Acerto Geral</div>
          <div class="stat-value">${pctGeral}%</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Questões Respondidas</div>
          <div class="stat-value">${totalQuestoes}</div>
        </div>
      </div>

      <div class="dashboard-disciplines">
        <h3>Por Disciplina</h3>
  `;

  Object.entries(stats.disciplinas).forEach(([disc, data]) => {
    const pct = data.total > 0 ? Math.round((data.acertos / data.total) * 100) : 0;
    const nivel = pct >= 80 ? '🟢 Dominado' : pct >= 60 ? '🟡 Bom' : '🔴 Revisar';

    html += `
      <div class="disc-stat">
        <div class="disc-name">${disc}</div>
        <div class="disc-bar">
          <div class="disc-progress" style="width: ${pct}%"></div>
        </div>
        <div class="disc-info">
          <span>${data.acertos}/${data.total}</span>
          <span>${pct}%</span>
          <span>${nivel}</span>
        </div>
      </div>
    `;
  });

  html += `
      </div>
      <div class="dashboard-actions">
        <button class="btn" onclick="clearAllProgress()">Limpar Histórico</button>
      </div>
    </div>
  `;

  dashboard.innerHTML = html;
}

function clearAllProgress() {
  if (confirm('Tem certeza que quer limpar todo o histórico de progresso?')) {
    const allKeys = Object.keys(localStorage);
    allKeys.forEach((key) => {
      if (key.startsWith(PROGRESS_PREFIX)) {
        localStorage.removeItem(key);
      }
    });
    initDashboard();
  }
}

// Inicializar quando o DOM estiver pronto
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initDashboard);
} else {
  initDashboard();
}