<div class="container py-5 d-flex justify-content-center">
  <div class="card bscsv-card">
    <div class="card-body p-3">
      <label class="form-label small fw-semibold">Paste CSV data</label>
      <textarea class="form-control mb-2" id="bscsvInput" rows="4">name,email,role
Dana Reyes,dana@acme.co,Admin
Marcus Lee,marcus@acme,Editor
,priya@acme.co,Viewer</textarea>
      <button type="button" class="btn btn-dark btn-sm fw-bold mb-3" id="bscsvParse">Preview import</button>

      <div class="d-none" id="bscsvResult">
        <p class="small mb-2">
          <span class="text-success fw-semibold" id="bscsvValid">0 valid</span> &middot;
          <span class="text-danger fw-semibold" id="bscsvInvalid">0 with errors</span>
        </p>
        <div class="table-responsive">
          <table class="table table-sm mb-0" id="bscsvTable"></table>
        </div>
      </div>
    </div>
  </div>
</div>

.bscsv-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bscsvInput { font: 12px ui-monospace, Menlo, Consolas, monospace; }
.bscsv-row-error { background: #fef2f2; }
.bscsv-error-msg { font-size: 10.5px; color: #dc3545; display: block; }

const input = document.getElementById('bscsvInput');
const table = document.getElementById('bscsvTable');
const result = document.getElementById('bscsvResult');
const validEl = document.getElementById('bscsvValid');
const invalidEl = document.getElementById('bscsvInvalid');

// A minimal CSV line parser handling quoted fields with embedded commas —
// not a full RFC 4180 implementation, but correct for the common cases a
// pasted spreadsheet export actually produces.
function parseLine(line) {
  const fields = [];
  let current = '';
  let inQuotes = false;
  for (let i = 0; i < line.length; i++) {
    const ch = line[i];
    if (ch === '"') { inQuotes = !inQuotes; continue; }
    if (ch === ',' && !inQuotes) { fields.push(current); current = ''; continue; }
    current += ch;
  }
  fields.push(current);
  return fields.map(f => f.trim());
}

function validateRow(row) {
  const errors = [];
  if (!row.name) errors.push('missing name');
  if (!row.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email)) errors.push('invalid email');
  return errors;
}

document.getElementById('bscsvParse').addEventListener('click', () => {
  const lines = input.value.split('\n').map(l => l.trim()).filter(Boolean);
  if (lines.length < 2) return;

  const headers = parseLine(lines[0]);
  const rows = lines.slice(1).map(line => {
    const values = parseLine(line);
    const row = {};
    headers.forEach((h, i) => { row[h] = values[i] || ''; });
    row.__errors = validateRow(row);
    return row;
  });

  const validCount = rows.filter(r => r.__errors.length === 0).length;
  validEl.textContent = validCount + ' valid';
  invalidEl.textContent = (rows.length - validCount) + ' with errors';

  table.innerHTML =
    '<thead><tr>' + headers.map(h => '<th>' + h + '</th>').join('') + '</tr></thead>' +
    '<tbody>' + rows.map(row => {
      const hasErrors = row.__errors.length > 0;
      return '<tr class="' + (hasErrors ? 'bscsv-row-error' : '') + '">' +
        headers.map(h => '<td>' + (row[h] || '<em class="text-muted">empty</em>') + '</td>').join('') +
        '</tr>' + (hasErrors ? '<tr class="bscsv-row-error"><td colspan="' + headers.length +
          '"><span class="bscsv-error-msg">' + row.__errors.join(', ') + '</span></td></tr>' : '');
    }).join('') + '</tbody>';

  result.classList.remove('d-none');
});