/**
 * SignHall Homepage Logic
 */

import { injectLayout, renderExhibitCard, t } from './layout.js';
import { CATEGORIES } from './config.js';
import { getAllExhibits, getStats } from './data.js';
import { getExhibitSVG, categoryColors } from './svg-illustrations.js';

async function initHome() {
  injectLayout('home');
  renderPavilions();
  renderFeatured();
  renderHeroStats();
  initRevealAnimations();
  initBackToTop();

  // Hero search form
  const form = document.getElementById('hero-search-form');
  if (form) {
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const query = document.getElementById('hero-search-input').value.trim();
      window.location.href = `pages/search.html?q=${encodeURIComponent(query)}`;
    });
  }
}

async function renderHeroStats() {
  const statsEl = document.getElementById('hero-stats');
  if (!statsEl) return;

  const stats = await getStats();
  statsEl.innerHTML = `
    <div class="hero-stat">
      <div class="hero-stat-number">${stats.total}+</div>
      <div class="hero-stat-label">${t('home') === '首页' ? '件展品' : 'Exhibits'}</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-number">${stats.a}+</div>
      <div class="hero-stat-label">${t('home') === '首页' ? '成品' : 'Finished'}</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-number">${stats.b}+</div>
      <div class="hero-stat-label">${t('home') === '首页' ? '设备' : 'Equipment'}</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-number">${stats.c}+</div>
      <div class="hero-stat-label">${t('home') === '首页' ? '供应链' : 'Supply Chain'}</div>
    </div>
    <div class="hero-stat">
      <div class="hero-stat-number">${stats.exportable}+</div>
      <div class="hero-stat-label">${t('home') === '首页' ? '可出口' : 'Export Ready'}</div>
    </div>
  `;
}

function renderPavilions() {
  const grid = document.getElementById('pavilion-grid');
  if (!grid) return;

  const pavilionItems = [
    { key: 'A-Finished', icon: 'A', features: ['Backlit & Front-lit Letters', 'Sign Panels & Blade Signs', 'Wayfinding Systems', 'Spirit Fortresses', 'Storefront Signs', 'Landscape Signage', 'Signage Engineering Projects'] },
    { key: 'B-Equipment', icon: 'B', features: ['Laser Cutting Machines', 'CNC Bending Machines', 'Engraving & Routing', 'UV Printers', 'Welding Equipment', 'Powder Coating Lines', 'Complete Factory Setup'] },
    { key: 'C-SupplyChain', icon: 'C', features: ['Acrylic & Metal Sheets', 'LED Light Sources', 'Power Supplies & Drivers', 'Adhesives & Glues', 'Inks & Films', 'Design Software', 'Testing, Logistics, Installation'] }
  ];

  grid.innerHTML = pavilionItems.map((p, idx) => {
    const cat = CATEGORIES[p.key];
    const featureList = p.features.map(f => `<li>${f}</li>`).join('');

    // Generate preview SVG icons for each pavilion
    const previewSubCats = {
      'A-Finished': 'Backlit Letter',
      'B-Equipment': 'Laser Cutting Machine',
      'C-SupplyChain': 'LED Light Source'
    };
    const previewExhibit = { main_category: p.key, sub_category: previewSubCats[p.key] };
    const previewSVG = getExhibitSVG(previewExhibit, 'sm');

    return `
      <div class="pavilion-card cat-${cat.color} reveal" style="transition-delay: ${idx * 100}ms" onclick="window.location.href='pages/category.html?cat=${p.key}'">
        <div class="pavilion-card-header">
          <span class="pavilion-badge">${p.key}</span>
          <h3>${cat.label}</h3>
          <p>${cat.description}</p>
          <div class="pavilion-icon-row">${previewSVG}</div>
        </div>
        <div class="pavilion-card-body">
          <ul>${featureList}</ul>
          <div class="pavilion-stats-row">
            <div class="pavilion-stat-mini">
              <div class="num pavilion-stat-a">-</div>
              <div class="label">Items</div>
            </div>
            <div class="pavilion-stat-mini">
              <div class="num">-</div>
              <div class="label">Sub-cats</div>
            </div>
            <div class="pavilion-stat-mini">
              <div class="num">-</div>
              <div class="label">Export</div>
            </div>
          </div>
          <a href="pages/category.html?cat=${p.key}" class="pavilion-card-link" onclick="event.stopPropagation()">
            Browse ${cat.label} &rarr;
          </a>
        </div>
      </div>
    `;
  }).join('');

  // Load stats for pavilion cards
  getAllExhibits().then(exhibits => {
    pavilionItems.forEach(p => {
      const catExhibits = exhibits.filter(e => e.main_category === p.key);
      const subCats = new Set(catExhibits.map(e => e.sub_category));
      const exportable = catExhibits.filter(e => e.export_available).length;

      const card = document.querySelector(`.pavilion-card.cat-${CATEGORIES[p.key].color} .pavilion-stats-row`);
      if (card) {
        card.innerHTML = `
          <div class="pavilion-stat-mini">
            <div class="num">${catExhibits.length}</div>
            <div class="label">Items</div>
          </div>
          <div class="pavilion-stat-mini">
            <div class="num">${subCats.size}</div>
            <div class="label">Sub-cats</div>
          </div>
          <div class="pavilion-stat-mini">
            <div class="num">${exportable}</div>
            <div class="label">Export</div>
          </div>
        `;
      }
    });
  });
}

async function renderFeatured() {
  const grid = document.getElementById('featured-grid');
  if (!grid) return;

  const exhibits = await getAllExhibits();
  const featured = exhibits.slice(0, 6);
  grid.innerHTML = featured.map((ex, i) => {
    const boothNum = `B-${String(i + 1).padStart(2, '0')}`;
    const card = renderExhibitCard(ex);
    // Insert booth number badge
    const cardWithBooth = card.replace(
      'class="exhibit-card"',
      'class="exhibit-card booth-card"'
    ).replace(
      '<div class="exhibit-card-thumb">',
      `<div class="exhibit-card-thumb"><span class="booth-number">${boothNum}</span>`
    );
    return `<div class="reveal" style="transition-delay: ${i * 80}ms">${cardWithBooth}</div>`;
  }).join('');
}

function initRevealAnimations() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
}

function initBackToTop() {
  const btn = document.createElement('button');
  btn.className = 'back-to-top';
  btn.innerHTML = '&uarr;';
  btn.setAttribute('aria-label', 'Back to top');
  btn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
  document.body.appendChild(btn);

  window.addEventListener('scroll', () => {
    if (window.scrollY > 400) {
      btn.classList.add('visible');
    } else {
      btn.classList.remove('visible');
    }
  });
}

initHome();