<div class="container-fluid py-4">
  <div class="row bei-shell mx-auto g-0 border rounded-3 overflow-hidden">
    <div class="col-3 border-end bg-light p-3" id="beiFolders">
      <div class="list-group list-group-flush">
        <button class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center" data-folder="inbox">
          Inbox <span class="badge text-bg-dark rounded-pill" id="beiInboxBadge"></span>
        </button>
        <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-folder="sent">
          Sent <span class="badge text-bg-dark rounded-pill" id="beiSentBadge"></span>
        </button>
        <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-folder="drafts">
          Drafts <span class="badge text-bg-dark rounded-pill" id="beiDraftsBadge"></span>
        </button>
      </div>
    </div>

    <div class="col-4 border-end p-0 bei-list-col" id="beiList"></div>

    <div class="col-5 p-4" id="beiReadingPane">
      <p class="text-muted">Select an email to read it here.</p>
    </div>
  </div>
</div>

.bei-shell { max-width: 960px; min-height: 460px; }
.bei-list-col { max-height: 460px; overflow-y: auto; }
.bei-email-item { cursor: pointer; border-bottom: 1px solid #eceef1; padding: 12px 16px; }
.bei-email-item:hover { background: #f8f9fa; }
.bei-email-item.bei-unread .bei-email-subject { font-weight: 700; }
.bei-email-item.bei-selected { background: #f1f3f5; }

const DATA = {
  inbox: [
    { id: 1, from: 'Alicia Chen', subject: 'Q3 roadmap review', preview: 'Can we sync before Friday on the...', body: 'Hi team,\n\nCan we sync before Friday on the Q3 roadmap? I want to walk through the prioritization before it goes to leadership.\n\nThanks,\nAlicia', unread: true },
    { id: 2, from: 'GitHub', subject: 'Your weekly digest', preview: '3 pull requests were merged this week', body: 'Your weekly digest:\n\n3 pull requests were merged this week across your repositories. Check your dashboard for details.', unread: true },
    { id: 3, from: 'Marcus Lee', subject: 'Re: Invoice #4521', preview: 'Thanks, this looks correct. Approving now.', body: 'Thanks, this looks correct. Approving now.\n\n— Marcus', unread: false },
    { id: 4, from: 'Priya Nair', subject: 'Design handoff files', preview: 'Attached are the final Figma exports for...', body: 'Attached are the final Figma exports for the checkout redesign. Let me know if anything is missing.\n\nPriya', unread: true },
  ],
  sent: [
    { id: 5, from: 'Me', subject: 'Re: Q3 roadmap review', preview: 'Works for me, sending an invite now.', body: 'Works for me, sending an invite now.', unread: false },
  ],
  drafts: [
    { id: 6, from: '(Draft)', subject: 'Follow up with vendor', preview: 'Hey, just checking in on the...', body: 'Hey, just checking in on the shipment timeline for next month...', unread: false },
  ],
};

let currentFolder = 'inbox';
let selectedId = null;

const listEl = document.getElementById('beiList');
const readingPane = document.getElementById('beiReadingPane');
const folderButtons = Array.from(document.querySelectorAll('#beiFolders button'));

function unreadCount(folder) {
  return DATA[folder].filter(e => e.unread).length;
}

function updateBadges() {
  document.getElementById('beiInboxBadge').textContent = unreadCount('inbox') || '';
  document.getElementById('beiSentBadge').textContent = unreadCount('sent') || '';
  document.getElementById('beiDraftsBadge').textContent = unreadCount('drafts') || '';
}

function renderList() {
  listEl.innerHTML = '';
  DATA[currentFolder].forEach(email => {
    const item = document.createElement('div');
    item.className = 'bei-email-item' + (email.unread ? ' bei-unread' : '') + (email.id === selectedId ? ' bei-selected' : '');
    item.innerHTML = '<div class="d-flex justify-content-between"><span class="small">' + email.from + '</span></div>' +
      '<div class="bei-email-subject small">' + email.subject + '</div>' +
      '<div class="text-muted small text-truncate">' + email.preview + '</div>';
    item.addEventListener('click', () => selectEmail(email.id));
    listEl.appendChild(item);
  });
}

function selectEmail(id) {
  selectedId = id;
  const email = DATA[currentFolder].find(e => e.id === id);
  if (!email) return;
  if (email.unread) {
    email.unread = false;
    updateBadges();
  }
  renderList();
  readingPane.innerHTML = '<h5 class="fw-bold mb-1">' + email.subject + '</h5>' +
    '<div class="text-muted small mb-3">From ' + email.from + '</div>' +
    '<p style="white-space: pre-line;">' + email.body + '</p>';
}

folderButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    folderButtons.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    currentFolder = btn.getAttribute('data-folder');
    selectedId = null;
    readingPane.innerHTML = '<p class="text-muted">Select an email to read it here.</p>';
    renderList();
  });
});

updateBadges();
renderList();