<div class="container py-5 d-flex justify-content-center">
  <div class="card bs2fb-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-1">Your backup codes</h5>
      <p class="small text-muted mb-3">Each code can only be used once. Click a code to mark it used, the way redeeming one during sign-in would.</p>

      <div class="row row-cols-2 g-2 mb-3" id="bs2fbGrid"></div>

      <p class="small fw-semibold mb-3"><span id="bs2fbRemaining">10</span> of 10 codes remaining</p>

      <div class="d-flex flex-wrap gap-2 mb-3">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bs2fbCopy">Copy all</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bs2fbDownload">Download .txt</button>
        <button type="button" class="btn btn-sm btn-outline-danger" id="bs2fbRegenBtn">Regenerate codes</button>
      </div>
      <p class="small mb-0" id="bs2fbFeedback">&nbsp;</p>
    </div>
  </div>
</div>

<div class="modal fade" id="bs2fbModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Regenerate backup codes?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Your 10 current codes will stop working immediately, including any you haven't used yet.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger fw-bold" id="bs2fbRegenConfirm">Regenerate</button>
      </div>
    </div>
  </div>
</div>

.bs2fb-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bs2fb-code {
  display: block; width: 100%; text-align: center;
  padding: 8px 6px; border-radius: 8px; border: 1px solid #e5e7eb;
  background: #f8f9fb; font: 700 13px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em; cursor: pointer; transition: background .12s, color .12s;
}
.bs2fb-code:hover { background: #eef0ff; }
.bs2fb-code-used { text-decoration: line-through; color: #9ca3af; background: #f3f4f6; cursor: default; }
#bs2fbFeedback.text-success { color: #198754 !important; }

const CHARSET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
const grid = document.getElementById('bs2fbGrid');
const remainingEl = document.getElementById('bs2fbRemaining');
const feedback = document.getElementById('bs2fbFeedback');
const modal = new bootstrap.Modal(document.getElementById('bs2fbModal'));

let codes = [];

function randomCode() {
  let s = '';
  for (let i = 0; i < 8; i++) s += CHARSET[Math.floor(Math.random() * CHARSET.length)];
  return s.slice(0, 4) + '-' + s.slice(4);
}

function generateCodes() {
  codes = Array.from({ length: 10 }, () => ({ value: randomCode(), used: false }));
}

function renderGrid() {
  grid.innerHTML = codes.map((c, i) =>
    '<div class="col"><button type="button" class="bs2fb-code' + (c.used ? ' bs2fb-code-used' : '') +
    '" data-index="' + i + '">' + c.value + '</button></div>'
  ).join('');
  remainingEl.textContent = codes.filter(c => !c.used).length;
}

grid.addEventListener('click', e => {
  const btn = e.target.closest('.bs2fb-code');
  if (!btn || btn.classList.contains('bs2fb-code-used')) return;
  codes[Number(btn.dataset.index)].used = true;
  renderGrid();
  feedback.textContent = 'Code ' + btn.textContent + ' marked used.';
  feedback.className = 'small text-muted';
});

document.getElementById('bs2fbCopy').addEventListener('click', () => {
  const text = codes.map(c => c.value).join('\n');
  navigator.clipboard.writeText(text).then(() => {
    feedback.textContent = 'All 10 codes copied to clipboard.';
    feedback.className = 'small text-success';
  });
});

document.getElementById('bs2fbDownload').addEventListener('click', () => {
  const text = codes.map(c => c.value).join('\n') + '\n';
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'backup-codes.txt';
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
  feedback.textContent = 'Download started.';
  feedback.className = 'small text-muted';
});

document.getElementById('bs2fbRegenBtn').addEventListener('click', () => modal.show());

document.getElementById('bs2fbRegenConfirm').addEventListener('click', () => {
  generateCodes();
  renderGrid();
  feedback.textContent = 'New codes generated — the old set no longer works.';
  feedback.className = 'small text-success';
  modal.hide();
});

generateCodes();
renderGrid();