// Simple animation for feature cards
document.addEventListener('DOMContentLoaded', function() {
    const featureCards = document.querySelectorAll('.feature-card');
    
    featureCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
    
    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('.md\\:hidden');
    const navMenu = document.querySelector('nav');
    
    if (mobileMenuButton && navMenu) {
        mobileMenuButton.addEventListener('click', () => {
            navMenu.classList.toggle('hidden');
            navMenu.classList.toggle('flex');
            navMenu.classList.toggle('flex-col');
            navMenu.classList.toggle('absolute');
            navMenu.classList.toggle('top-16');
            navMenu.classList.toggle('left-0');
            navMenu.classList.toggle('w-full');
            navMenu.classList.toggle('bg-white');
            navMenu.classList.toggle('py-4');
            navMenu.classList.toggle('shadow-md');
        });
    }
    
    // Settings page functionality
    if (document.getElementById('settings.html')) {
        initializeSettingsPage();
    }
});

function initializeSettingsPage() {
    // Load categories and subcategories
    loadCategories();
    loadSubCategories();
    
    // Event listeners for category management
    document.getElementById('createCategoryBtn').addEventListener('click', createCategory);
    document.getElementById('addTagsBtn').addEventListener('click', addTagsToCategory);
    document.getElementById('removeTagsBtn').addEventListener('click', removeTagsFromCategory);
    
    // Event listeners for subcategory management
    document.getElementById('createSubCategoryBtn').addEventListener('click', createSubCategory);
    document.getElementById('addSubTagsBtn').addEventListener('click', addTagsToSubCategory);
    document.getElementById('removeSubTagsBtn').addEventListener('click', removeTagsFromSubCategory);
}

function loadCategories() {
    // This would normally fetch from the backend
    const categories = ['Character', 'Style', 'Color', 'Background', 'Clothing'];
    const select = document.getElementById('categorySelect');
    const grid = document.getElementById('categoriesGrid');
    
    // Clear existing options
    select.innerHTML = '<option value="">Kategori seçin</option>';
    grid.innerHTML = '';
    
    // Populate select and grid
    categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category;
        option.textContent = category;
        select.appendChild(option);
        
        const gridItem = document.createElement('div');
        gridItem.className = 'bg-primary/10 text-primary p-3 rounded-lg text-center';
        gridItem.textContent = `${category} (0)`;
        grid.appendChild(gridItem);
    });
}

function loadSubCategories() {
    // This would normally fetch from the backend
    const subCategories = ['Hair', 'Eyes', 'Accessories', 'Expression', 'Pose'];
    const select = document.getElementById('subCategorySelect');
    const grid = document.getElementById('subCategoriesGrid');
    
    // Clear existing options
    select.innerHTML = '<option value="">Alt kategori seçin</option>';
    grid.innerHTML = '';
    
    // Populate select and grid
    subCategories.forEach(subCategory => {
        const option = document.createElement('option');
        option.value = subCategory;
        option.textContent = subCategory;
        select.appendChild(option);
        
        const gridItem = document.createElement('div');
        gridItem.className = 'bg-secondary/10 text-secondary p-3 rounded-lg text-center';
        gridItem.textContent = `${subCategory} (0)`;
        grid.appendChild(gridItem);
    });
}

function createCategory() {
    const categoryName = document.getElementById('newCategoryName').value.trim();
    if (!categoryName) {
        showMessage('categoryMessage', 'Kategori adı boş olamaz!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('categoryMessage', `"${categoryName}" kategorisi oluşturuldu!`, 'success');
    document.getElementById('newCategoryName').value = '';
    
    // Reload categories
    loadCategories();
}

function addTagsToCategory() {
    const selectedCategory = document.getElementById('categorySelect').value;
    const tags = document.getElementById('addTagsInput').value.trim();
    
    if (!selectedCategory) {
        showMessage('categoryMessage', 'Lütfen bir kategori seçin!', 'error');
        return;
    }
    
    if (!tags) {
        showMessage('categoryMessage', 'Lütfen eklenecek etiketleri girin!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('categoryMessage', `"${tags}" etiketleri "${selectedCategory}" kategorisine eklendi!`, 'success');
    document.getElementById('addTagsInput').value = '';
}

function removeTagsFromCategory() {
    const selectedCategory = document.getElementById('categorySelect').value;
    const tags = document.getElementById('removeTagsInput').value.trim();
    
    if (!selectedCategory) {
        showMessage('categoryMessage', 'Lütfen bir kategori seçin!', 'error');
        return;
    }
    
    if (!tags) {
        showMessage('categoryMessage', 'Lütfen silinecek etiketleri girin!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('categoryMessage', `"${tags}" etiketleri "${selectedCategory}" kategorisinden silindi!`, 'success');
    document.getElementById('removeTagsInput').value = '';
}

function createSubCategory() {
    const categoryName = document.getElementById('newSubCategoryName').value.trim();
    if (!categoryName) {
        showMessage('subcategoryMessage', 'Alt kategori adı boş olamaz!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('subcategoryMessage', `"${categoryName}" alt kategorisi oluşturuldu!`, 'success');
    document.getElementById('newSubCategoryName').value = '';
    
    // Reload subcategories
    loadSubCategories();
}

function addTagsToSubCategory() {
    const selectedCategory = document.getElementById('subCategorySelect').value;
    const tags = document.getElementById('addSubTagsInput').value.trim();
    
    if (!selectedCategory) {
        showMessage('subcategoryMessage', 'Lütfen bir alt kategori seçin!', 'error');
        return;
    }
    
    if (!tags) {
        showMessage('subcategoryMessage', 'Lütfen eklenecek etiketleri girin!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('subcategoryMessage', `"${tags}" etiketleri "${selectedCategory}" alt kategorisine eklendi!`, 'success');
    document.getElementById('addSubTagsInput').value = '';
}

function removeTagsFromSubCategory() {
    const selectedCategory = document.getElementById('subCategorySelect').value;
    const tags = document.getElementById('removeSubTagsInput').value.trim();
    
    if (!selectedCategory) {
        showMessage('subcategoryMessage', 'Lütfen bir alt kategori seçin!', 'error');
        return;
    }
    
    if (!tags) {
        showMessage('subcategoryMessage', 'Lütfen silinecek etiketleri girin!', 'error');
        return;
    }
    
    // This would normally send a request to the backend
    showMessage('subcategoryMessage', `"${tags}" etiketleri "${selectedCategory}" alt kategorisinden silindi!`, 'success');
    document.getElementById('removeSubTagsInput').value = '';
}

function showMessage(elementId, message, type) {
    const element = document.getElementById(elementId);
    element.textContent = message;
    element.className = `p-3 rounded-lg mb-4 ${type === 'error' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`;
    element.classList.remove('hidden');
    
    // Hide message after 3 seconds
    setTimeout(() => {
        element.classList.add('hidden');
    }, 3000);
}
featureCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
    
    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('.md\\:hidden');
    const navMenu = document.querySelector('nav');
    
    if (mobileMenuButton && navMenu) {
        mobileMenuButton.addEventListener('click', () => {
            navMenu.classList.toggle('hidden');
            navMenu.classList.toggle('flex');
            navMenu.classList.toggle('flex-col');
            navMenu.classList.toggle('absolute');
            navMenu.classList.toggle('top-16');
            navMenu.classList.toggle('left-0');
            navMenu.classList.toggle('w-full');
            navMenu.classList.toggle('bg-white');
            navMenu.classList.toggle('py-4');
            navMenu.classList.toggle('shadow-md');
        });
    }
});