import { renderHeader } from '../components/header.js';
import { state } from '../state.js';

export const pageMeta = { id: 'notifications-view', title: 'Уведомления' };

function renderList(container) {
  const active = state.notificationsTab;
  container.innerHTML = '';
  const card = document.createElement('article');
  card.className = 'card stack';

  const title = document.createElement('strong');
  title.textContent = active === 'events' ? 'События в разработке' : 'Ответы в разработке';

  const description = document.createElement('p');
  description.className = 'meta-muted';
  description.textContent = active === 'events'
    ? 'Здесь будут отображаться события: кто подписался на вас, куда вас добавили, кто поставил лайк и другие действия.'
    : 'Здесь будут отображаться ответы и комментарии на ваши сообщения в публичных каналах.';

  const note = document.createElement('p');
  note.className = 'meta-muted';
  note.textContent = 'Раздел находится в разработке. Функционал будет добавлен в следующих обновлениях.';

  card.append(title, description, note);
  container.append(card);
}

export function render() {
  const screen = document.createElement('section');
  screen.className = 'stack notifications-screen';

  screen.append(renderHeader({ title: 'Уведомления' }));

  const tabs = document.createElement('div');
  tabs.className = 'tabs';
  tabs.innerHTML = `
    <button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
    <button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
  `;

  const list = document.createElement('div');
  list.className = 'stack notifications-list';
  renderList(list);

  tabs.querySelectorAll('.tab-btn').forEach((btn) => {
    btn.addEventListener('click', () => {
      state.notificationsTab = btn.dataset.tab;
      tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
      btn.classList.add('active');
      renderList(list);
    });
  });

  screen.append(tabs, list);
  return screen;
}