// src/components/ScanProgress.js — live counts during the scan

import React from 'react';

const ScanProgress = ({ progress }) => {
  const collections = progress.collections || [];
  return (
    <div className="scan-progress">
      <h2>Scanning…</h2>
      <ul className="scan-progress-list">
        <li>Blobs listed (held): <strong>{progress.held ?? 0}</strong></li>
        <li>Records walked: <strong>{progress.records ?? 0}</strong></li>
        <li>Collections enumerated: <strong>{collections.length}</strong></li>
      </ul>
      {collections.length > 0 && (
        <table className="report-table compact">
          <thead>
            <tr>
              <th>Collection</th>
              <th>Records</th>
              <th>Blob refs</th>
            </tr>
          </thead>
          <tbody>
            {collections.map((c, i) => (
              <tr key={`${c.nsid}-${i}`}>
                <td><code>{c.nsid}</code></td>
                <td>{c.records}</td>
                <td>{c.blobRefs}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
      <p className="muted">Large repos take a while — this is live progress, not a spinner.</p>
    </div>
  );
};

export default ScanProgress;