// ===== Event placeholder emoji =====
const EVENT_EMOJI = {
  event_1: '🩰', event_2: '🎻', event_3: '🐱', event_4: '🌻',
  event_5: '🎷', event_6: '🎪', event_7: '🦢', event_8: '🎨'
};

const CAT_BG = {
  theatre: 'bg-theatre', concerts: 'bg-concerts',
  exhibitions: 'bg-exhibitions', kids: 'bg-kids'
};

// ===== Router =====
function getRoute() {
  return window.location.hash.slice(1) || '/';
}

function navigate(path) {
  window.location.hash = path;
}

function router() {
  const route = getRoute();
  const app = document.getElementById('app');
  window.scrollTo(0, 0);

  if (route === '/') renderHomePage(app);
  else if (route.startsWith('/category/')) renderCategoryPage(app, route.split('/')[2]);
  else if (route.startsWith('/event/')) renderEventPage(app, route.split('/')[2]);
  else if (route.startsWith('/tickets/')) renderTicketsPage(app, route.split('/')[2]);
  else if (route === '/checkout') renderCheckoutPage(app);
  else if (route === '/payment-success') renderPaymentSuccessPage(app);
  else renderHomePage(app);

  updateActiveNav();
}

function updateActiveNav() {
  const route = getRoute();
  document.querySelectorAll('.header__nav-btn').forEach(btn => {
    btn.classList.remove('active');
    const cat = btn.dataset.category;
    if (cat && route === `/category/${cat}`) btn.classList.add('active');
  });
}

// ===== Card Components =====

// Hero card (large, like bilet.mos.ru carousel)
function heroCardHTML(event) {
  return `
    <div class="hero-card-wrap" onclick="navigate('/event/${event.id}'); trackEvent('event_click', {event_id:'${event.id}'});">
      <div class="hero-card">
        <img class="hero-card__img" src="${event.image}" alt="${event.name}"
             onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
        <div class="hero-card__img-placeholder ${CAT_BG[event.category]}" style="display:none;">
          ${EVENT_EMOJI[event.id] || '🎫'}
        </div>
        <div class="hero-card__badge">
          <span class="hero-card__badge-dot"></span> Вернём 10%
        </div>
        <div class="hero-card__price">от ${formatPrice(event.price)}</div>
      </div>
      <div class="hero-card__info">
        <div class="hero-card__category">${event.categoryName} <span>· ${event.age_restriction}</span></div>
        <div class="hero-card__title">${event.name}</div>
        <div class="hero-card__meta">${event.date} · ${event.venue}</div>
      </div>
    </div>`;
}

// Horizontal card (like "Главные концерты сезона")
function eventCardHHTML(event) {
  return `
    <div class="event-card-h" onclick="navigate('/event/${event.id}'); trackEvent('event_click', {event_id:'${event.id}'});">
      <img class="event-card-h__img" src="${event.image}" alt="${event.name}"
           onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
      <div class="event-card-h__img-placeholder ${CAT_BG[event.category]}" style="display:none;">
        ${EVENT_EMOJI[event.id] || '🎫'}
      </div>
      <div class="event-card-h__body">
        <div class="event-card-h__category">${event.categoryName} <span>· ${event.age_restriction}</span></div>
        <div class="event-card-h__title">${event.name}</div>
        <div class="event-card-h__meta">${event.date} · ${event.venue}</div>
        <div class="event-card-h__price">от ${formatPrice(event.price)}</div>
      </div>
    </div>`;
}

// Grid card (for category pages)
function eventCardGridHTML(event) {
  return `
    <div class="event-card" onclick="navigate('/event/${event.id}'); trackEvent('event_click', {event_id:'${event.id}'});">
      <div class="event-card__image-placeholder ${CAT_BG[event.category]}" style="position:relative;">
        <img src="${event.image}" alt="${event.name}" style="width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;"
             onerror="this.style.display='none';">
        ${EVENT_EMOJI[event.id] || '🎫'}
        <div class="event-card__badge-overlay">
          <span class="hero-card__badge-dot"></span> Вернём 10%
        </div>
        <div class="event-card__price-overlay">от ${formatPrice(event.price)}</div>
      </div>
      <div class="event-card__body">
        <div class="event-card__category-line"><span class="cat-name">${event.categoryName}</span> <span class="age">· ${event.age_restriction}</span></div>
        <div class="event-card__title">${event.name}</div>
        <div class="event-card__meta">${event.date} · ${event.venue}</div>
      </div>
    </div>`;
}

// ===== Date Picker HTML =====
function datepickerHTML() {
  const days = [];
  const now = new Date();
  const monthNames = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
  const dayNames = ['вс','пн','вт','ср','чт','пт','сб'];
  let currentMonth = -1;

  for (let i = 0; i < 30; i++) {
    const d = new Date(now);
    d.setDate(d.getDate() + i);
    const m = d.getMonth();
    if (m !== currentMonth) {
      currentMonth = m;
      days.push(`<div class="date-picker__month">${monthNames[m]}</div>`);
    }
    const dow = d.getDay();
    const isWeekend = dow === 0 || dow === 6;
    days.push(`
      <div class="date-picker__day ${isWeekend ? 'date-picker__day--weekend' : ''} ${i === 0 ? 'date-picker__day--active' : ''}">
        <span class="date-picker__day-num">${d.getDate()}</span>
        <span class="date-picker__day-name">${dayNames[dow]}</span>
      </div>`);
  }
  return `<div class="date-picker">${days.join('')}</div>`;
}

// ===== Pages =====

function renderHomePage(app) {
  trackEvent('page_view', { page_type: 'homepage' });

  const heroEvents = EVENTS.slice(0, 3);
  const concertEvents = EVENTS.filter(e => e.category === 'concerts' || e.category === 'theatre');
  const theatreEvents = EVENTS.filter(e => e.category === 'theatre');
  const recommendedEvents = EVENTS.slice(0, 4);

  app.innerHTML = `
    <div class="container">
      <!-- Hero Carousel -->
      <div class="hero-carousel">
        <div class="hero-carousel__grid">
          ${heroEvents.map(e => heroCardHTML(e)).join('')}
        </div>
      </div>

      <!-- Afisha Title + Date Picker + Filters -->
      <h1 class="afisha-title">Афиша Москвы</h1>
      ${datepickerHTML()}
      <div class="filters">
        <div class="filter-chip">Все события ▾</div>
        <div class="filter-chip">Цена, ₽ ▾</div>
        <div class="filter-chip">Дата ▾</div>
        <div class="filter-chip">Только бесплатные</div>
        <div class="filter-chip">Метро ▾</div>
        <div class="filter-chip">Площадки ▾</div>
        <div class="filter-chip">Для детей</div>
        <div class="filter-chip">Пушкинская карта</div>
      </div>

      <!-- Recommendations Block (CDP personalization point) -->
      <div class="recommendations">
        <div class="recommendations__header">
          <div class="recommendations__title">Рекомендуем вам</div>
          <div class="recommendations__badge">Персонализация CDP</div>
        </div>
        <div class="events-row">
          ${recommendedEvents.map(e => {
            trackEvent('block_view', { block_name: 'recommendations', event_id: e.id });
            return eventCardHHTML(e);
          }).join('')}
        </div>
      </div>

      <!-- Concert section -->
      <div class="section">
        <div class="section__header">
          <div class="section__title-link" onclick="navigate('/category/concerts')">
            «Мосбилет» собрал главные концерты сезона <span style="font-weight:300;">›</span>
          </div>
          <div class="section__nav">
            <button class="section__nav-btn">‹</button>
            <button class="section__nav-btn">›</button>
          </div>
        </div>
        <div class="events-row">
          ${concertEvents.slice(0, 4).map(e => eventCardHHTML(e)).join('')}
        </div>
      </div>

      <!-- Theatre section -->
      <div class="section">
        <div class="section__header">
          <div class="section__title-link" onclick="navigate('/category/theatre')">
            Театральные премьеры <span style="font-weight:300;">›</span>
          </div>
          <div class="section__nav">
            <button class="section__nav-btn">‹</button>
            <button class="section__nav-btn">›</button>
          </div>
        </div>
        <div class="events-grid" style="grid-template-columns: repeat(3, 1fr);">
          ${[...theatreEvents, ...EVENTS.filter(e => e.category === 'kids')].slice(0, 3).map(e => eventCardGridHTML(e)).join('')}
        </div>
      </div>

      <!-- Venues -->
      <div class="section">
        <div class="section__header">
          <div class="section__title">Все площадки ›</div>
        </div>
        <div class="venues-grid">
          <div class="venue-card bg-venue-1">
            <div class="venue-card__name">Большой театр</div>
            <div class="venue-card__link">Купить билет →</div>
          </div>
          <div class="venue-card bg-venue-2">
            <div class="venue-card__name">Московский зоопарк</div>
            <div class="venue-card__link">Купить билет →</div>
          </div>
          <div class="venue-card bg-venue-3">
            <div class="venue-card__name">Театр Маяковского</div>
            <div class="venue-card__link">Купить билет →</div>
          </div>
          <div class="venue-card bg-venue-4">
            <div class="venue-card__name">ГМИИ им. Пушкина</div>
            <div class="venue-card__link">Купить билет →</div>
          </div>
        </div>
      </div>
    </div>`;
}

function renderCategoryPage(app, categoryId) {
  const category = getCategoryById(categoryId);
  if (!category) { navigate('/'); return; }

  const events = getEventsByCategory(categoryId);
  trackEvent('category_view', { category_name: categoryId });
  trackEvent('page_view', { page_type: 'category', category_name: categoryId });

  // Hero events for the category
  const heroEvents = events.slice(0, 3);
  // Remaining for grid
  const gridEvents = events;

  app.innerHTML = `
    <div class="container">
      <!-- Hero carousel for category -->
      <div class="hero-carousel">
        <div class="hero-carousel__grid">
          ${heroEvents.map(e => heroCardHTML(e)).join('')}
        </div>
      </div>

      <div class="category-header__title">${category.name}</div>

      ${datepickerHTML()}

      <div class="filters">
        <div class="filter-chip">Цена, ₽ ▾</div>
        <div class="filter-chip">Дата ▾</div>
        <div class="filter-chip">Только бесплатные</div>
        <div class="filter-chip">Метро ▾</div>
        <div class="filter-chip">Площадки ▾</div>
        <div class="filter-chip">Для детей</div>
        <div class="filter-chip">Пушкинская карта</div>
      </div>

      <div class="events-grid" style="grid-template-columns: repeat(3, 1fr);">
        ${gridEvents.map(e => eventCardGridHTML(e)).join('')}
      </div>
    </div>`;
}

function renderEventPage(app, eventId) {
  const event = getEventById(eventId);
  if (!event) { navigate('/'); return; }

  trackEvent('event_view', {
    event_id: event.id, event_name: event.name, event_category: event.category,
    event_subcategory: event.subcategory, event_date: event.date,
    venue: event.venue, price: event.price, age_restriction: event.age_restriction
  });
  trackEvent('page_view', { page_type: 'event', event_id: event.id });

  const similar = EVENTS.filter(e => e.category === event.category && e.id !== event.id).slice(0, 3);

  app.innerHTML = `
    <div class="container">
      <div class="breadcrumbs">
        <a href="#/">Мосбилет</a>
        <span class="breadcrumbs__sep">›</span>
        <a href="#/category/${event.category}">${event.categoryName}</a>
        <span class="breadcrumbs__sep">›</span>
        <span>${event.name}</span>
      </div>

      <div class="event-detail">
        <div class="event-detail__layout">
          <div class="event-detail__content">
            <div class="event-detail__badges">
              <div class="event-detail__cashback">
                <span class="event-detail__cashback-dot"></span> Вернём 10%
              </div>
              <div class="event-detail__age">· ${event.age_restriction}</div>
            </div>

            <h1 class="event-detail__title">${event.name}</h1>
            <p class="event-detail__description">${event.description}</p>
            <div class="event-detail__date">${event.date}</div>
            <div class="event-detail__venue">${event.venue}</div>

            <div class="event-detail__actions">
              <button class="btn btn--primary btn--large" onclick="navigate('/tickets/${event.id}'); trackEvent('buy_click', {event_id:'${event.id}', event_name:'${event.name}'});">
                🎫 Купить от ${formatPrice(event.price)}
              </button>
              <button class="btn btn--secondary btn--large">
                Подробнее
              </button>
            </div>
          </div>

          <div class="event-detail__image-wrap">
            <div class="event-detail__img-placeholder ${CAT_BG[event.category]}" style="position:relative;overflow:hidden;">
              <img src="${event.image}" alt="${event.name}" style="width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;border-radius:var(--radius);"
                   onerror="this.style.display='none';">
              ${EVENT_EMOJI[event.id] || '🎫'}
            </div>
          </div>
        </div>
      </div>

      <!-- Schedule -->
      <div class="schedule">
        <div class="schedule__title">Расписание</div>
        <div class="schedule__item">
          <div class="schedule__date">
            <div class="schedule__date-num">19</div>
            <div class="schedule__date-month">мар / чт</div>
          </div>
          <div class="schedule__time-block">
            <div class="schedule__time">19:00</div>
            <div class="schedule__price">от ${formatPrice(event.price)}</div>
          </div>
        </div>
        <div class="schedule__item">
          <div class="schedule__date">
            <div class="schedule__date-num">25</div>
            <div class="schedule__date-month">апр / сб</div>
          </div>
          <div class="schedule__time-block">
            <div class="schedule__time">18:00</div>
            <div class="schedule__price">от ${formatPrice(Math.round(event.price * 1.2))}</div>
          </div>
        </div>
        <div class="schedule__item">
          <div class="schedule__date">
            <div class="schedule__date-num">16</div>
            <div class="schedule__date-month">май / сб</div>
          </div>
          <div class="schedule__time-block">
            <div class="schedule__time">18:00</div>
            <div class="schedule__price">от ${formatPrice(event.price)}</div>
          </div>
        </div>
      </div>

      ${similar.length > 0 ? `
      <div class="section">
        <div class="section__header">
          <div class="section__title">Похожие события</div>
        </div>
        <div class="events-row" style="grid-template-columns: repeat(3, 1fr);">
          ${similar.map(e => eventCardHHTML(e)).join('')}
        </div>
      </div>` : ''}
    </div>`;
}

function renderTicketsPage(app, eventId) {
  const event = getEventById(eventId);
  if (!event) { navigate('/'); return; }

  trackEvent('page_view', { page_type: 'tickets', event_id: event.id });
  trackEvent('ticket_selection', {
    event_id: event.id, ticket_price: event.price, ticket_quantity: 2, ticket_type: 'standard'
  });

  app.innerHTML = `
    <div class="container">
      <div class="breadcrumbs">
        <a href="#/">Мосбилет</a>
        <span class="breadcrumbs__sep">›</span>
        <a href="#/category/${event.category}">${event.categoryName}</a>
        <span class="breadcrumbs__sep">›</span>
        <a href="#/event/${event.id}">${event.name}</a>
        <span class="breadcrumbs__sep">›</span>
        <span>Выбор билета</span>
      </div>

      <div class="ticket-form">
        <h1 class="ticket-form__title">Выбор билета</h1>

        <div class="ticket-form__event-info">
          <div>
            <div class="ticket-form__event-name">${event.name}</div>
            <div class="ticket-form__event-venue">${event.venue} · ${event.date}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="ticket-date">Дата</label>
            <select id="ticket-date" onchange="updateTicketSummary()">
              <option value="${event.date}">${event.date}, ${event.time}</option>
            </select>
          </div>
          <div class="form-group">
            <label for="ticket-type">Категория места</label>
            <select id="ticket-type" onchange="updateTicketSummary()">
              <option value="standard" data-price="${event.price}">Стандарт — ${formatPrice(event.price)}</option>
              <option value="vip" data-price="${Math.round(event.price * 1.5)}">VIP — ${formatPrice(Math.round(event.price * 1.5))}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="ticket-qty">Количество билетов</label>
          <select id="ticket-qty" onchange="updateTicketSummary()">
            <option value="1">1</option>
            <option value="2" selected>2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>

        <div class="ticket-summary" id="ticket-summary">
          <div class="ticket-summary__row">
            <span>Билет (Стандарт) × 2</span>
            <span>${formatPrice(event.price * 2)}</span>
          </div>
          <div class="ticket-summary__row">
            <span>Сервисный сбор</span>
            <span>0 ₽</span>
          </div>
          <div class="ticket-summary__row ticket-summary__total">
            <span>Итого</span>
            <span>${formatPrice(event.price * 2)}</span>
          </div>
        </div>

        <button class="btn btn--primary btn--large btn--full" onclick="handleTicketSelection('${event.id}')">
          Продолжить оформление
        </button>
      </div>
    </div>`;
}

function updateTicketSummary() {
  const typeSelect = document.getElementById('ticket-type');
  const qtySelect = document.getElementById('ticket-qty');
  const opt = typeSelect.options[typeSelect.selectedIndex];
  const price = parseInt(opt.dataset.price);
  const qty = parseInt(qtySelect.value);
  const name = typeSelect.selectedIndex === 0 ? 'Стандарт' : 'VIP';
  const total = price * qty;

  document.getElementById('ticket-summary').innerHTML = `
    <div class="ticket-summary__row"><span>Билет (${name}) × ${qty}</span><span>${formatPrice(price * qty)}</span></div>
    <div class="ticket-summary__row"><span>Сервисный сбор</span><span>0 ₽</span></div>
    <div class="ticket-summary__row ticket-summary__total"><span>Итого</span><span>${formatPrice(total)}</span></div>`;
}

function handleTicketSelection(eventId) {
  const typeSelect = document.getElementById('ticket-type');
  const qtySelect = document.getElementById('ticket-qty');
  const opt = typeSelect.options[typeSelect.selectedIndex];
  const price = parseInt(opt.dataset.price);
  const qty = parseInt(qtySelect.value);

  trackEvent('ticket_selection', { event_id: eventId, ticket_price: price, ticket_quantity: qty, ticket_type: typeSelect.value });
  trackEvent('checkout_start', { event_id: eventId, ticket_price: price, ticket_quantity: qty, ticket_type: typeSelect.value });

  sessionStorage.setItem('checkout_data', JSON.stringify({
    event_id: eventId, ticket_price: price, ticket_quantity: qty, ticket_type: typeSelect.value
  }));
  navigate('/checkout');
}

function renderCheckoutPage(app) {
  const data = JSON.parse(sessionStorage.getItem('checkout_data') || '{}');
  const event = getEventById(data.event_id) || EVENTS[0];
  const qty = data.ticket_quantity || 2;
  const price = data.ticket_price || event.price;
  const total = price * qty;
  const typeName = data.ticket_type === 'vip' ? 'VIP' : 'Стандарт';

  trackEvent('page_view', { page_type: 'checkout', event_id: event.id });

  app.innerHTML = `
    <div class="container">
      <div class="breadcrumbs">
        <a href="#/">Мосбилет</a>
        <span class="breadcrumbs__sep">›</span>
        <a href="#/event/${event.id}">${event.name}</a>
        <span class="breadcrumbs__sep">›</span>
        <span>Оформление заказа</span>
      </div>

      <div class="checkout">
        <div class="checkout__form">
          <h1 class="ticket-form__title">Оформление заказа</h1>
          <div class="form-group">
            <label for="checkout-email">Email *</label>
            <input type="email" id="checkout-email" placeholder="example@mail.ru" required>
          </div>
          <div class="form-group">
            <label for="checkout-phone">Телефон *</label>
            <input type="tel" id="checkout-phone" placeholder="+7 (999) 123-45-67" required>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="checkout-lastname">Фамилия *</label>
              <input type="text" id="checkout-lastname" placeholder="Иванов">
            </div>
            <div class="form-group">
              <label for="checkout-firstname">Имя *</label>
              <input type="text" id="checkout-firstname" placeholder="Иван">
            </div>
          </div>
          <button class="btn btn--primary btn--large btn--full" onclick="handleCheckoutSubmit('${event.id}')" style="margin-top:1rem;">
            Перейти к оплате
          </button>
        </div>

        <div class="checkout__sidebar">
          <div class="checkout__sidebar-title">Ваш заказ</div>
          <div class="ticket-form__event-name" style="margin-bottom:0.5rem;">${event.name}</div>
          <div style="font-size:0.8125rem;color:var(--text-secondary);margin-bottom:0.25rem;">${event.date}, ${event.time}</div>
          <div style="font-size:0.8125rem;color:var(--text-secondary);margin-bottom:1rem;">${event.venue}</div>
          <div class="ticket-summary" style="margin:0;">
            <div class="ticket-summary__row"><span>${typeName} × ${qty}</span><span>${formatPrice(total)}</span></div>
            <div class="ticket-summary__row ticket-summary__total"><span>Итого</span><span>${formatPrice(total)}</span></div>
          </div>
        </div>
      </div>
    </div>`;
}

function handleCheckoutSubmit(eventId) {
  const email = document.getElementById('checkout-email').value;
  const phone = document.getElementById('checkout-phone').value;
  const lastname = document.getElementById('checkout-lastname').value;
  const firstname = document.getElementById('checkout-firstname').value;

  if (!email || !phone || !lastname || !firstname) {
    alert('Пожалуйста, заполните все поля');
    return;
  }

  trackEvent('checkout_form_submit', { event_id: eventId, email, phone });
  trackEvent('payment_start', { event_id: eventId, email, phone });

  setTimeout(() => {
    trackEvent('payment_success', { event_id: eventId, email });
    navigate('/payment-success');
  }, 800);
}

function renderPaymentSuccessPage(app) {
  trackEvent('page_view', { page_type: 'payment_success' });
  trackEvent('payment_success', {});

  app.innerHTML = `
    <div class="container">
      <div class="success">
        <div class="success__icon">✓</div>
        <h1 class="success__title">Спасибо за покупку!</h1>
        <p class="success__text">
          Ваш заказ успешно оформлен. Билеты отправлены на указанный email.<br>
          Номер заказа: <strong>MB-${Date.now().toString().slice(-6)}</strong>
        </p>
        <button class="btn btn--primary btn--large" onclick="navigate('/')">На главную</button>
      </div>
    </div>`;
}

// ===== Event Tracking (dataLayer for tag manager) =====
window.dataLayer = window.dataLayer || [];

function trackEvent(eventName, params) {
  const eventData = { event: eventName, ...params, timestamp: new Date().toISOString() };
  window.dataLayer.push(eventData);
  console.log('[DataLayer]', eventName, params);
}

function trackUserAttributes() {
  window.dataLayer.push({
    event: 'user_attributes',
    cookie_id: getCookieId(),
    session_id: getSessionId(),
    device_type: getDeviceType(),
    geo: 'Moscow'
  });
}

function getCookieId() {
  let id = localStorage.getItem('mosbilet_cookie_id');
  if (!id) { id = 'ck_' + Math.random().toString(36).substr(2, 12); localStorage.setItem('mosbilet_cookie_id', id); }
  return id;
}

function getSessionId() {
  let id = sessionStorage.getItem('mosbilet_session_id');
  if (!id) { id = 'ss_' + Math.random().toString(36).substr(2, 12); sessionStorage.setItem('mosbilet_session_id', id); }
  return id;
}

function getDeviceType() {
  const w = window.innerWidth;
  if (w < 768) return 'mobile';
  if (w < 1024) return 'tablet';
  return 'desktop';
}

// ===== Init =====
window.addEventListener('hashchange', router);
window.addEventListener('DOMContentLoaded', () => {
  trackUserAttributes();
  router();
});