// API Bridge — fetches topics and MCQs from the database API
// Supplements existing hardcoded CSE_QUESTIONS and NOTES_DATA
const API_BASE = '/api/v1/upsc';

// Category mapping: API category -> tab key
const CATEGORY_MAP = {
  'Ancient India': 'ancient',
  'Medieval India': 'medieval',
  'Modern India': 'modern',
  'Indian Polity': 'polity',
  'Geography': 'indgeo'
};

let apiTopics = [];
let apiLoaded = false;

async function loadAPITopics() {
  try {
    const res = await fetch(`${API_BASE}/topics`);
    if (!res.ok) return;
    apiTopics = await res.json();
    apiLoaded = true;
    // Update topic count badge
    const countEl = document.getElementById('api-topic-count');
    if (countEl) countEl.textContent = apiTopics.length;
    const mcqCountEl = document.getElementById('api-mcq-count');
    if (mcqCountEl) mcqCountEl.textContent = apiTopics.length * 20;
  } catch(e) { console.warn('API topics unavailable:', e); }
}

async function loadAPIMCQs(topicId) {
  try {
    const res = await fetch(`${API_BASE}/mcqs/${topicId}`);
    if (!res.ok) return null;
    return await res.json();
  } catch(e) { return null; }
}

async function loadAPITopicNotes(topicId) {
  try {
    const res = await fetch(`${API_BASE}/topics/${topicId}`);
    if (!res.ok) return null;
    return await res.json();
  } catch(e) { return null; }
}

// --- Enhanced MCQ rendering with API data ---
const apiRenderedMCQ = {};
const apiMCQScores = {};

function renderAPIMCQSection(tabKey) {
  const topics = apiTopics.filter(t => CATEGORY_MAP[t.category] === tabKey);
  if (!topics.length) return;
  
  const area = document.getElementById('mcq-render-area');
  let existing = document.getElementById('mcq-api-' + tabKey);
  if (existing) { existing.classList.add('active'); return; }
  
  const div = document.createElement('div');
  div.id = 'mcq-api-' + tabKey;
  div.className = 'mcq-container active';
  
  let html = `<div class="api-mcq-header" style="margin-bottom:1.5rem;">
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;">`;
  
  topics.forEach((t, i) => {
    const shortTitle = t.title.length > 30 ? t.title.substring(0, 28) + '...' : t.title;
    html += `<button class="mcq-subtopic-btn${i===0?' active':''}" onclick="loadSubtopicMCQs('${t.id}','${tabKey}',this)" style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.72rem;font-weight:600;border:1px solid var(--border);background:${i===0?'var(--accent)':'none'};color:${i===0?'#fff':'var(--dim)'};cursor:pointer;transition:all 0.2s;">${shortTitle}</button>`;
  });
  
  html += `</div><div id="mcq-api-questions-${tabKey}" style="min-height:200px;"><p style="color:var(--dim);font-size:0.85rem;">Loading questions...</p></div></div>`;
  
  div.innerHTML = html;
  area.appendChild(div);
  
  // Load first topic's MCQs
  if (topics.length > 0) loadSubtopicMCQs(topics[0].id, tabKey, null);
}

async function loadSubtopicMCQs(topicId, tabKey, btn) {
  // Update button styles
  if (btn) {
    const parent = btn.parentElement;
    parent.querySelectorAll('.mcq-subtopic-btn').forEach(b => {
      b.style.background = 'none'; b.style.color = 'var(--dim)';
    });
    btn.style.background = 'var(--accent)'; btn.style.color = '#fff';
  }
  
  const container = document.getElementById('mcq-api-questions-' + tabKey);
  if (!container) return;
  
  // Check cache
  if (apiRenderedMCQ[topicId]) {
    container.innerHTML = apiRenderedMCQ[topicId];
    return;
  }
  
  container.innerHTML = '<p style="color:var(--dim);font-size:0.85rem;">Loading questions...</p>';
  
  const data = await loadAPIMCQs(topicId);
  if (!data || !data.questions) {
    container.innerHTML = '<p style="color:var(--red);">Failed to load questions.</p>';
    return;
  }
  
  apiMCQScores[topicId] = { s: 0, t: 0 };
  const LETTERS = ['A','B','C','D'];
  
  let html = `<div class="mcq-score-bar"><div class="score-display">Score: <span id="api-score-${topicId}">0</span> / <span id="api-total-${topicId}">0</span> &nbsp;<span style="font-size:0.75rem;color:var(--dim);">(${data.count} questions)</span></div><button class="btn btn-outline" onclick="resetAPIMCQ('${topicId}','${tabKey}')">Reset</button></div>`;
  
  data.questions.forEach((q, i) => {
    const qId = `api_${topicId}_${i}`;
    const diffStars = '★'.repeat(q.difficulty) + '☆'.repeat(5 - q.difficulty);
    const opts = q.options.map((o, j) => `<div class="opt" onclick="answerAPI(this,'${qId}',${j},${q.answer},'${topicId}')">${LETTERS[j]}) ${o}</div>`).join('');
    html += `<div class="q-card" id="qc-${qId}"><div class="q-num">Q${i+1} <span style="float:right;font-size:0.7rem;color:var(--yellow);">${diffStars}</span></div><div class="q-text">${q.question}</div><div class="options">${opts}</div><div class="explanation" id="exp-${qId}">${q.explanation}</div></div>`;
  });
  
  container.innerHTML = html;
  apiRenderedMCQ[topicId] = html;
}

function answerAPI(opt, qId, choiceIdx, correctIdx, topicId) {
  if (opt.classList.contains('disabled')) return;
  const card = opt.closest('.q-card');
  const opts = card.querySelectorAll('.opt');
  opts.forEach(o => o.classList.add('disabled'));
  opt.classList.add('selected');
  const exp = document.getElementById('exp-' + qId);
  if (exp) exp.classList.add('show');
  if (choiceIdx === correctIdx) {
    opt.classList.add('correct-ans'); card.classList.add('correct');
  } else {
    opt.classList.add('wrong-ans'); card.classList.add('wrong');
    opts[correctIdx].classList.add('correct-ans');
  }
  if (!apiMCQScores[topicId]) apiMCQScores[topicId] = {s:0, t:0};
  apiMCQScores[topicId].t++;
  if (choiceIdx === correctIdx) apiMCQScores[topicId].s++;
  const scoreEl = document.getElementById('api-score-' + topicId);
  const totalEl = document.getElementById('api-total-' + topicId);
  if (scoreEl) scoreEl.textContent = apiMCQScores[topicId].s;
  if (totalEl) totalEl.textContent = apiMCQScores[topicId].t;
}

function resetAPIMCQ(topicId, tabKey) {
  delete apiRenderedMCQ[topicId];
  apiMCQScores[topicId] = {s:0, t:0};
  loadSubtopicMCQs(topicId, tabKey, null);
}

// --- Enhanced Notes rendering with API data ---
const apiRenderedNotes = {};

function renderAPINotesSection(tabKey) {
  const topics = apiTopics.filter(t => CATEGORY_MAP[t.category] === tabKey);
  if (!topics.length) return;
  
  const area = document.getElementById('notes-render-area');
  let existing = document.getElementById('notes-api-' + tabKey);
  if (existing) { existing.classList.add('active'); return; }
  
  const div = document.createElement('div');
  div.id = 'notes-api-' + tabKey;
  div.className = 'notes-container active';
  
  let html = `<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">`;
  topics.forEach((t, i) => {
    const shortTitle = t.title.length > 35 ? t.title.substring(0, 33) + '...' : t.title;
    html += `<button class="notes-subtopic-btn${i===0?' active':''}" onclick="loadSubtopicNotes('${t.id}','${tabKey}',this)" style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.72rem;font-weight:600;border:1px solid var(--border);background:${i===0?'rgba(15,118,110,0.8)':'none'};color:${i===0?'#fff':'var(--dim)'};cursor:pointer;transition:all 0.2s;">${shortTitle}</button>`;
  });
  html += `</div><div id="notes-api-content-${tabKey}" style="min-height:200px;"><p style="color:var(--dim);">Loading notes...</p></div>`;
  
  div.innerHTML = html;
  area.appendChild(div);
  
  if (topics.length > 0) loadSubtopicNotes(topics[0].id, tabKey, null);
}

async function loadSubtopicNotes(topicId, tabKey, btn) {
  if (btn) {
    const parent = btn.parentElement;
    parent.querySelectorAll('.notes-subtopic-btn').forEach(b => {
      b.style.background = 'none'; b.style.color = 'var(--dim)';
    });
    btn.style.background = 'rgba(15,118,110,0.8)'; btn.style.color = '#fff';
  }
  
  const container = document.getElementById('notes-api-content-' + tabKey);
  if (!container) return;
  
  if (apiRenderedNotes[topicId]) {
    container.innerHTML = apiRenderedNotes[topicId];
    return;
  }
  
  container.innerHTML = '<p style="color:var(--dim);">Loading notes...</p>';
  
  const data = await loadAPITopicNotes(topicId);
  if (!data) {
    container.innerHTML = '<p style="color:var(--red);">Failed to load notes.</p>';
    return;
  }
  
  const factsHtml = (data.key_facts || []).map(f => `<li>${f}</li>`).join('');
  const pyqYears = (data.pyq_years || []).join(', ');
  const crossLinks = (data.cross_links || []).map(l => `<span style="background:rgba(99,102,241,0.1);padding:0.15rem 0.5rem;border-radius:10px;font-size:0.72rem;color:var(--purple);border:1px solid rgba(99,102,241,0.2);">${l}</span>`).join(' ');
  const diffStars = '★'.repeat(data.difficulty || 3) + '☆'.repeat(5 - (data.difficulty || 3));
  const weightColor = data.weight === 'high' ? 'var(--green)' : data.weight === 'medium' ? 'var(--yellow)' : 'var(--dim)';
  
  // Convert markdown-ish notes to HTML
  let notesHtml = (data.notes || '').replace(/## (.*)/g, '<h3 style="color:var(--purple);margin:1.2rem 0 0.5rem;font-size:0.95rem;">$1</h3>')
    .replace(/### (.*)/g, '<h4 style="color:var(--text);margin:1rem 0 0.4rem;font-size:0.88rem;">$1</h4>')
    .replace(/\*\*(.*?)\*\*/g, '<strong style="color:var(--text);">$1</strong>')
    .replace(/\n- /g, '\n• ')
    .replace(/\n/g, '<br>');
  
  let html = `<div class="note-card" style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1rem;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
      <h3 style="font-size:1.1rem;font-weight:700;">${data.title}</h3>
      <div style="display:flex;gap:0.75rem;font-size:0.72rem;">
        <span style="color:var(--yellow);">${diffStars}</span>
        <span style="color:${weightColor};font-weight:700;text-transform:uppercase;">${data.weight || 'medium'} weight</span>
      </div>
    </div>
    <div style="font-size:0.83rem;color:var(--dim);line-height:1.8;margin-bottom:1.5rem;">${notesHtml}</div>
    <div style="background:rgba(34,197,94,0.05);border:1px solid rgba(34,197,94,0.15);border-radius:10px;padding:1rem;margin-bottom:1rem;">
      <h4 style="font-size:0.78rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.5rem;">Key Facts for Quick Revision</h4>
      <ul style="list-style:none;padding:0;font-size:0.8rem;color:var(--dim);line-height:1.7;">${factsHtml}</ul>
    </div>
    ${pyqYears ? `<div style="font-size:0.75rem;color:var(--dim);margin-bottom:0.75rem;"><strong style="color:var(--yellow);">PYQ Years:</strong> ${pyqYears}</div>` : ''}
    ${crossLinks ? `<div style="font-size:0.75rem;margin-bottom:0.5rem;"><strong style="color:var(--dim);">Related Topics:</strong> ${crossLinks}</div>` : ''}
  </div>`;
  
  container.innerHTML = html;
  apiRenderedNotes[topicId] = html;
}

// --- Override switch functions to use API when available ---
const origSwitchMCQ = window.switchMCQ;
window.switchMCQ = function(topic, btn) {
  // Hide all containers
  document.querySelectorAll('.mcq-container').forEach(c => c.classList.remove('active'));
  document.querySelectorAll('.mcq-topic-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  
  // Check if API has data for this topic
  const hasAPI = apiLoaded && apiTopics.some(t => CATEGORY_MAP[t.category] === topic);
  
  if (hasAPI) {
    // Hide old hardcoded version if visible
    const oldDiv = document.getElementById('mcq-' + topic);
    if (oldDiv) oldDiv.classList.remove('active');
    renderAPIMCQSection(topic);
  } else {
    // Fall back to hardcoded
    const apiDiv = document.getElementById('mcq-api-' + topic);
    if (apiDiv) apiDiv.classList.remove('active');
    renderMCQ(topic);
    const el = document.getElementById('mcq-' + topic);
    if (el) el.classList.add('active');
  }
};

const origSwitchNotes = window.switchNotes;
window.switchNotes = function(topic, btn) {
  document.querySelectorAll('.notes-container').forEach(c => c.classList.remove('active'));
  document.querySelectorAll('.notes-topic-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  
  const hasAPI = apiLoaded && apiTopics.some(t => CATEGORY_MAP[t.category] === topic);
  
  if (hasAPI) {
    const oldDiv = document.getElementById('notes-' + topic);
    if (oldDiv) oldDiv.classList.remove('active');
    renderAPINotesSection(topic);
  } else {
    const apiDiv = document.getElementById('notes-api-' + topic);
    if (apiDiv) apiDiv.classList.remove('active');
    renderNotes(topic);
    const el = document.getElementById('notes-' + topic);
    if (el) el.classList.add('active');
  }
};

// Load API data on page load and refresh the active tabs
loadAPITopics().then(() => {
  // Re-render ancient history (default tab) with API data
  if (apiLoaded) {
    // Remove old hardcoded ancient MCQ
    const oldMCQ = document.getElementById('mcq-ancient');
    if (oldMCQ) oldMCQ.classList.remove('active');
    renderAPIMCQSection('ancient');
    
    // Remove old hardcoded ancient notes
    const oldNotes = document.getElementById('notes-ancient');
    if (oldNotes) oldNotes.classList.remove('active');
    renderAPINotesSection('ancient');
  }
});