tugan-kun-mereytoylarmen-kut/script.js

let allPoems = [];
let currentCategory = 'all';

document.addEventListener('DOMContentLoaded', function() {
  loadPoems();
  setupFilters();
  setupSearch();
});

async function loadPoems() {
  try {
    const response = await fetch('data.json');
    const data = await response.json();
    allPoems = data.poems;
    renderPoems(allPoems);
  } catch (error) {
    console.error('Өлеңдерді жүктеу қатесі:', error);
  }
}

function renderPoems(poems) {
  const grid = document.getElementById('poemsGrid');
  if (!grid) return;
  
  if (poems.length === 0) {
    grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--kt-ai-fg-muted); padding: 48px;">Өлеңдер табылмады</p>';
    return;
  }
  
  grid.innerHTML = poems.map(poem => {
    const categoryEmojis = {
      'tugankun': '🎂',
      'mereitoy': '🎉',
      'uileny': '💍',
      'besik': '👶',
      'tulek': '🎓',
      'nauryz': '🌸'
    };
    
    const categoryNames = {
      'tugankun': 'Туған күн',
      'mereitoy': 'Мерейтой',
      'uileny': 'Үйлену',
      'besik': 'Бесік той',
      'tulek': 'Түлектер',
      'nauryz': '8 Наурыз'
    };
    
    return `
      <article class="kt-ai-card poem-card" onclick="copyPoem('${escapeHtml(poem.text)}')">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
          <div>
            <span class="kt-ai-chip" style="margin-bottom: 8px;">${categoryEmojis[poem.category]} ${categoryNames[poem.category]}</span>
            <h3 style="margin: 0;">${poem.title}</h3>
          </div>
        </div>
        <p class="poem-text" style="color: var(--kt-ai-fg-muted); margin-bottom: 16px;">${poem.text}</p>
        <div style="display: flex; align-items: center; gap: 8px; color: var(--kt-ai-link); font-size: 0.9rem;">
          <span>📋</span>
          <span>Басу арқылы көшіру</span>
        </div>
      </article>
    `;
  }).join('');
}

function setupFilters() {
  const filterButtons = document.querySelectorAll('.category-filter .kt-ai-btn');
  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      filterButtons.forEach(btn => {
        btn.setAttribute('data-variant', 'ghost');
      });
      this.setAttribute('data-variant', 'primary');
      
      const category = this.getAttribute('data-category');
      currentCategory = category;
      filterPoems();
    });
  });
}

function setupSearch() {
  const searchInput = document.getElementById('searchInput');
  if (searchInput) {
    searchInput.addEventListener('input', function() {
      filterPoems();
    });
  }
}

function filterPoems() {
  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  
  let filtered = allPoems;
  
  if (currentCategory !== 'all') {
    filtered = filtered.filter(poem => poem.category === currentCategory);
  }
  
  if (searchTerm) {
    filtered = filtered.filter(poem => 
      poem.title.toLowerCase().includes(searchTerm) ||
      poem.text.toLowerCase().includes(searchTerm) ||
      poem.tags.some(tag => tag.toLowerCase().includes(searchTerm))
    );
  }
  
  renderPoems(filtered);
}

function copyPoem(text) {
  navigator.clipboard.writeText(text).then(() => {
    showToast();
  }).catch(err => {
    console.error('Көшіру қатесі:', err);
    fallbackCopy(text);
  });
}

function fallbackCopy(text) {
  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    document.execCommand('copy');
    showToast();
  } catch (err) {
    console.error('Көшіру қатесі:', err);
  }
  document.body.removeChild(textArea);
}

function showToast() {
  const toast = document.getElementById('copyToast');
  if (toast) {
    toast.classList.add('show');
    setTimeout(() => {
      toast.classList.remove('show');
    }, 2000);
  }
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML.replace(/\n/g, '\\n');
}