{% extends 'base.html' %}
{% load static %}

{% block title %}Meine Wunschliste - Kasico Fursuit Shop{% endblock %}

{% block content %}
<div class="wishlist-container">
    <!-- Hero Section -->
    <div class="wishlist-hero furry-card text-center mb-5">
        <div class="wishlist-hero-content">
            <h1 class="wishlist-title">❤️ Meine Wunschliste</h1>
            <p class="wishlist-subtitle">Deine gesammelten Favoriten und Traum-Fursuits</p>
            <div class="wishlist-stats">
                <span class="wishlist-stat">{{ wishlist.products.count }} Produkte</span>
                <span class="wishlist-stat">💕 Gespeichert</span>
            </div>
        </div>
    </div>

    <!-- Messages -->
    {% if messages %}
    <div class="messages-section mb-5">
        {% for message in messages %}
        <div class="message-card message-{{ message.tags }}">
            <div class="message-icon">
                {% if message.tags == 'success' %}✅
                {% elif message.tags == 'error' %}❌
                {% elif message.tags == 'warning' %}⚠️
                {% else %}ℹ️{% endif %}
            </div>
            <div class="message-content">
                <p class="message-text">{{ message }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Wishlist Content -->
    <div class="wishlist-content">
        {% if wishlist.products.all %}
        <!-- Filters and Actions -->
        <div class="wishlist-controls furry-card mb-4">
            <div class="controls-header">
                <h3 class="controls-title">🎛️ Wunschliste verwalten</h3>
                <div class="controls-actions">
                    <button class="btn furry-btn-outline" id="selectAllBtn">
                        📋 Alle auswählen
                    </button>
                    <button class="btn furry-btn-secondary" id="addSelectedToCartBtn">
                        🛒 Ausgewählte in Warenkorb
                    </button>
                </div>
            </div>
            
            <div class="filters-section">
                <div class="filter-group">
                    <label class="filter-label">🔍 Filter:</label>
                    <select class="filter-select" id="typeFilter">
                        <option value="">Alle Typen</option>
                        <option value="fullsuit">Fullsuit</option>
                        <option value="partial">Partial</option>
                        <option value="head">Head</option>
                        <option value="paws">Paws</option>
                    </select>
                    <select class="filter-select" id="styleFilter">
                        <option value="">Alle Styles</option>
                        <option value="realistic">Realistic</option>
                        <option value="cartoon">Cartoon</option>
                        <option value="toony">Toony</option>
                        <option value="kemono">Kemono</option>
                    </select>
                </div>
                <div class="sort-group">
                    <label class="sort-label">📊 Sortieren:</label>
                    <select class="sort-select" id="sortSelect">
                        <option value="name">Name A-Z</option>
                        <option value="price-low">Preis: Niedrig → Hoch</option>
                        <option value="price-high">Preis: Hoch → Niedrig</option>
                        <option value="date-added">Hinzugefügt: Neueste</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="wishlist-grid">
            {% for product in wishlist.products.all %}
            <div class="wishlist-item furry-card" data-type="{{ product.fursuit_type }}" data-style="{{ product.style }}" data-price="{{ product.price }}">
                <div class="wishlist-item-header">
                    <div class="wishlist-checkbox">
                        <input type="checkbox" class="product-checkbox" id="product-{{ product.id }}" data-product-id="{{ product.id }}">
                        <label for="product-{{ product.id }}" class="checkbox-label"></label>
                    </div>
                    <button class="remove-btn" data-product-id="{{ product.id }}" title="Von Wunschliste entfernen">
                        ❌
                    </button>
                </div>
                
                <div class="wishlist-item-image">
                    {% if product.image %}
                    <img src="{{ product.image.url }}" alt="{{ product.name }}" class="product-image furry-lazy-image">
                    {% else %}
                    <img src="{% static 'images/placeholder.png' %}" alt="Placeholder" class="product-image">
                    {% endif %}
                    <div class="image-overlay">
                        <div class="overlay-buttons">
                            <a href="{% url 'products:product_detail' product.id %}" class="overlay-btn">
                                👁️ Details
                            </a>
                            <button class="overlay-btn add-to-cart-btn" data-product-id="{{ product.id }}">
                                🛒 In Warenkorb
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="wishlist-item-content">
                    <h4 class="product-title">{{ product.name }}</h4>
                    <p class="product-description">{{ product.description|truncatewords:15 }}</p>
                    
                    <div class="product-details">
                        <div class="detail-item">
                            <span class="detail-label">💰 Preis:</span>
                            <span class="detail-value price">{{ product.price }}€</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">🎭 Typ:</span>
                            <span class="detail-value">{{ product.get_fursuit_type_display }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">🎨 Style:</span>
                            <span class="detail-value">{{ product.get_style_display }}</span>
                        </div>
                    </div>
                    
                    <div class="product-actions">
                        <a href="{% url 'products:product_detail' product.id %}" class="btn furry-btn">
                            👁️ Details anzeigen
                        </a>
                        <button class="btn furry-btn-secondary add-to-cart-btn" data-product-id="{{ product.id }}">
                            🛒 In Warenkorb
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Bulk Actions -->
        <div class="bulk-actions furry-card mt-4" id="bulkActions" style="display: none;">
            <div class="bulk-actions-content">
                <span class="bulk-text">📦 <span id="selectedCount">0</span> Produkte ausgewählt</span>
                <div class="bulk-buttons">
                    <button class="btn furry-btn" id="addSelectedToCart">
                        🛒 In Warenkorb legen
                    </button>
                    <button class="btn furry-btn-outline" id="removeSelected">
                        ❌ Von Wunschliste entfernen
                    </button>
                </div>
            </div>
        </div>

        {% else %}
        <!-- Empty State -->
        <div class="empty-wishlist furry-card text-center">
            <div class="empty-icon">💔</div>
            <h3 class="empty-title">Deine Wunschliste ist leer</h3>
            <p class="empty-description">
                Du hast noch keine Fursuits zu deiner Wunschliste hinzugefügt. 
                Entdecke unsere Kollektion und sammle deine Favoriten!
            </p>
            <div class="empty-actions">
                <a href="{% url 'products:product_list' %}" class="btn furry-btn">
                    🛍️ Shop durchsuchen
                </a>
                <a href="{% url 'products:gallery' %}" class="btn furry-btn-secondary">
                    🖼️ Galerie ansehen
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    --dark-color: #1F2937;
    --light-color: #F3E8FF;
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
}

.wishlist-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.wishlist-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.wishlist-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.wishlist-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.wishlist-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.wishlist-stat {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.messages-section {
    display: grid;
    gap: 1rem;
}

.message-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.message-success {
    border-left: 4px solid var(--success-color);
}

.message-error {
    border-left: 4px solid var(--error-color);
}

.message-warning {
    border-left: 4px solid var(--warning-color);
}

.message-info {
    border-left: 4px solid var(--primary-color);
}

.message-icon {
    font-size: 1.5rem;
    min-width: 2rem;
}

.message-content {
    flex: 1;
}

.message-text {
    margin: 0;
    color: var(--dark-color);
    font-weight: 500;
}

.wishlist-controls {
    padding: 2rem;
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.controls-title {
    color: var(--dark-color);
    font-weight: 700;
    margin: 0;
}

.controls-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filters-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-group, .sort-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-label, .sort-label {
    font-weight: 600;
    color: var(--dark-color);
    margin: 0;
}

.filter-select, .sort-select {
    padding: 0.5rem 1rem;
    border: 2px solid var(--light-color);
    border-radius: 10px;
    background: white;
    color: var(--dark-color);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-select:focus, .sort-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.wishlist-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.wishlist-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.wishlist-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--light-color);
}

.wishlist-checkbox {
    position: relative;
}

.product-checkbox {
    display: none;
}

.checkbox-label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.product-checkbox:checked + .checkbox-label {
    background: var(--primary-color);
}

.product-checkbox:checked + .checkbox-label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.remove-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.remove-btn:hover {
    background: var(--error-color);
    color: white;
    transform: scale(1.1);
}

.wishlist-item-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wishlist-item:hover .product-image {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(139, 92, 246, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wishlist-item:hover .image-overlay {
    opacity: 1;
}

.overlay-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overlay-btn {
    background: white;
    color: var(--primary-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.overlay-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

.wishlist-item-content {
    padding: 1.5rem;
}

.product-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.product-description {
    color: var(--dark-color);
    opacity: 0.8;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.product-details {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light-color);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: var(--dark-color);
    opacity: 0.8;
}

.detail-value {
    color: var(--dark-color);
    font-weight: 600;
}

.price {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-actions {
    padding: 1.5rem;
    background: var(--light-color);
}

.bulk-actions-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.bulk-text {
    font-weight: 600;
    color: var(--dark-color);
}

.bulk-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.empty-wishlist {
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
}

.empty-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.empty-description {
    color: var(--dark-color);
    opacity: 0.8;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.empty-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.furry-btn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-secondary {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-outline {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

@media (max-width: 768px) {
    .wishlist-container {
        padding: 1rem;
    }
    
    .wishlist-title {
        font-size: 2rem;
    }
    
    .wishlist-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .wishlist-stat {
        width: 100%;
        text-align: center;
    }
    
    .wishlist-grid {
        grid-template-columns: 1fr;
    }
    
    .controls-header, .filters-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bulk-actions-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Animation für Wishlist Items */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wishlist-item {
    animation: fadeInUp 0.6s ease-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.product-checkbox');
    const selectAllBtn = document.getElementById('selectAllBtn');
    const bulkActions = document.getElementById('bulkActions');
    const selectedCount = document.getElementById('selectedCount');
    const addSelectedToCartBtn = document.getElementById('addSelectedToCartBtn');
    const removeSelectedBtn = document.getElementById('removeSelected');
    const removeButtons = document.querySelectorAll('.remove-btn');
    const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
    const typeFilter = document.getElementById('typeFilter');
    const styleFilter = document.getElementById('styleFilter');
    const sortSelect = document.getElementById('sortSelect');
    const wishlistItems = document.querySelectorAll('.wishlist-item');

    // Checkbox functionality
    function updateBulkActions() {
        const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
        const totalBoxes = document.querySelectorAll('.product-checkbox');
        
        if (checkedBoxes.length > 0) {
            bulkActions.style.display = 'block';
            selectedCount.textContent = checkedBoxes.length;
            
            if (checkedBoxes.length === totalBoxes.length) {
                selectAllBtn.textContent = '📋 Auswahl aufheben';
            } else {
                selectAllBtn.textContent = '📋 Alle auswählen';
            }
        } else {
            bulkActions.style.display = 'none';
        }
    }

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });

    // Select all functionality
    selectAllBtn.addEventListener('click', function() {
        const allChecked = document.querySelectorAll('.product-checkbox:checked').length === checkboxes.length;
        
        checkboxes.forEach(checkbox => {
            checkbox.checked = !allChecked;
        });
        
        updateBulkActions();
    });

    // Remove from wishlist
    removeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const productId = this.dataset.productId;
            if (confirm('Möchtest du dieses Produkt wirklich von deiner Wunschliste entfernen?')) {
                fetch(`/products/remove-from-wishlist/${productId}/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        this.closest('.wishlist-item').style.animation = 'fadeOut 0.3s ease-out';
                        setTimeout(() => {
                            this.closest('.wishlist-item').remove();
                            updateBulkActions();
                        }, 300);
                    }
                })
                .catch(error => console.error('Error:', error));
            }
        });
    });

    // Add to cart functionality
    addToCartButtons.forEach(button => {
        button.addEventListener('click', function() {
            const productId = this.dataset.productId;
            
            fetch('/products/add-to-cart/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                },
                body: JSON.stringify({
                    product_id: productId,
                    quantity: 1
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success animation
                    this.innerHTML = '✅ Hinzugefügt!';
                    this.style.background = 'var(--success-color)';
                    setTimeout(() => {
                        this.innerHTML = '🛒 In Warenkorb';
                        this.style.background = '';
                    }, 2000);
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });

    // Filter functionality
    function filterItems() {
        const selectedType = typeFilter.value;
        const selectedStyle = styleFilter.value;
        
        wishlistItems.forEach(item => {
            const itemType = item.dataset.type;
            const itemStyle = item.dataset.style;
            
            const typeMatch = !selectedType || itemType === selectedType;
            const styleMatch = !selectedStyle || itemStyle === selectedStyle;
            
            if (typeMatch && styleMatch) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    }

    typeFilter.addEventListener('change', filterItems);
    styleFilter.addEventListener('change', filterItems);

    // Sort functionality
    sortSelect.addEventListener('change', function() {
        const sortBy = this.value;
        const items = Array.from(wishlistItems);
        
        items.sort((a, b) => {
            switch(sortBy) {
                case 'name':
                    return a.querySelector('.product-title').textContent.localeCompare(b.querySelector('.product-title').textContent);
                case 'price-low':
                    return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                case 'price-high':
                    return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                case 'date-added':
                    // Assuming items are already in order of addition
                    return 0;
                default:
                    return 0;
            }
        });
        
        const grid = document.querySelector('.wishlist-grid');
        items.forEach(item => grid.appendChild(item));
    });

    // Bulk actions
    addSelectedToCartBtn.addEventListener('click', function() {
        const selectedProducts = document.querySelectorAll('.product-checkbox:checked');
        selectedProducts.forEach(checkbox => {
            const productId = checkbox.dataset.productId;
            const addToCartBtn = document.querySelector(`.add-to-cart-btn[data-product-id="${productId}"]`);
            addToCartBtn.click();
        });
    });

    removeSelectedBtn.addEventListener('click', function() {
        if (confirm('Möchtest du alle ausgewählten Produkte von deiner Wunschliste entfernen?')) {
            const selectedProducts = document.querySelectorAll('.product-checkbox:checked');
            selectedProducts.forEach(checkbox => {
                const productId = checkbox.dataset.productId;
                const removeBtn = document.querySelector(`.remove-btn[data-product-id="${productId}"]`);
                removeBtn.click();
            });
        }
    });
});
</script>

<style>
/* Fade out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}
</style>
{% endblock %}