{% extends "base.html" %}

{% block title %}Mis Favoritos - TallArt{% endblock %}

{% block content %}
<style>
    .favorites-container {
        min-height: 70vh;
        padding: 2rem 0;
    }
    
    .favorites-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 3rem 0;
        margin-bottom: 3rem;
        border-radius: 0 0 30px 30px;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }
    
    .favorites-header h1 {
        font-weight: 800;
        margin: 0;
        font-size: 2.5rem;
    }
    
    .favorites-tabs {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        background: white;
        padding: 1rem;
        border-radius: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .tab-btn {
        flex: 1;
        padding: 1rem;
        border: none;
        background: transparent;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .tab-btn:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
    }
    
    .tab-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    
    .tab-badge {
        background: rgba(255,255,255,0.2);
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
    }
    
    .tab-btn.active .tab-badge {
        background: rgba(255,255,255,0.3);
    }
    
    .favorite-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .favorite-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }
    
    .favorite-card-image {
        position: relative;
        height: 220px;
        overflow: hidden;
    }
    
    .favorite-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .favorite-card:hover .favorite-card-image img {
        transform: scale(1.1);
    }
    
    .favorite-type-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-size: 0.85rem;
        font-weight: 700;
        backdrop-filter: blur(10px);
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .badge-empresa {
        background: rgba(102, 126, 234, 0.95);
        color: white;
    }
    
    .badge-producto {
        background: rgba(255, 107, 107, 0.95);
        color: white;
    }
    
    .favorite-remove-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.95);
        color: #ff6b6b;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    
    .favorite-remove-btn:hover {
        background: #ff6b6b;
        color: white;
        transform: rotate(10deg) scale(1.1);
    }
    
    .favorite-card-body {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .favorite-card-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #2d3748;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .favorite-card-description {
        color: #718096;
        font-size: 0.9rem;
        margin-bottom: 1rem;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .favorite-card-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 2px solid #f7fafc;
    }
    
    .favorite-price {
        font-size: 1.5rem;
        font-weight: 800;
        color: #667eea;
    }
    
    .favorite-rating {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        color: #f59e0b;
        font-weight: 600;
    }
    
    .favorite-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .btn-view {
        flex: 1;
        padding: 0.75rem;
        border-radius: 10px;
        border: 2px solid #667eea;
        background: white;
        color: #667eea;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .btn-view:hover {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
    }
    
    .btn-cart {
        flex: 1;
        padding: 0.75rem;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .btn-cart:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    
    .empty-state {
        text-align: center;
        padding: 5rem 2rem;
        background: white;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }
    
    .empty-icon {
        font-size: 5rem;
        color: #e2e8f0;
        margin-bottom: 1.5rem;
    }
    
    .empty-state h3 {
        color: #4a5568;
        margin-bottom: 1rem;
    }
    
    .empty-state p {
        color: #a0aec0;
        margin-bottom: 2rem;
    }
    
    .favorite-empresa-link {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        color: #667eea;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        margin-top: 0.5rem;
    }
    
    .favorite-empresa-link:hover {
        color: #764ba2;
    }
    
    @media (max-width: 768px) {
        .favorites-header h1 {
            font-size: 2rem;
        }
        
        .favorites-tabs {
            flex-direction: column;
        }
        
        .favorite-actions {
            flex-direction: column;
        }
    }
</style>

<div class="favorites-header">
    <div class="container">
        <h1>❤️ Mis Favoritos</h1>
        <p class="mb-0">Todos tus productos y empresas favoritas en un solo lugar</p>
    </div>
</div>

<div class="container favorites-container">
    {% if favoritos %}
    <!-- Tabs de filtrado -->
    <div class="favorites-tabs">
        <button class="tab-btn active" onclick="filterFavorites('todos')" id="tab-todos">
            <span>🌟 Todos</span>
            <span class="tab-badge" id="count-todos">{{ favoritos|length }}</span>
        </button>
        <button class="tab-btn" onclick="filterFavorites('producto')" id="tab-producto">
            <span>🛍️ Productos</span>
            <span class="tab-badge" id="count-productos">
                {{ favoritos|selectattr('TipoFavorito', 'equalto', 'producto')|list|length }}
            </span>
        </button>
        <button class="tab-btn" onclick="filterFavorites('empresa')" id="tab-empresa">
            <span>🏪 Empresas</span>
            <span class="tab-badge" id="count-empresas">
                {{ favoritos|selectattr('TipoFavorito', 'equalto', 'empresa')|list|length }}
            </span>
        </button>
    </div>

    <!-- Grid de favoritos -->
    <div class="row" id="favorites-grid">
        {% for favorito in favoritos %}
        <div class="col-lg-3 col-md-4 col-sm-6 mb-4 favorite-item" data-type="{{ favorito.TipoFavorito }}">
            <div class="favorite-card">
                <div class="favorite-card-image">
                    <img src="{{ url_for('static', filename='graficos/' + (favorito.Imagen or 'Logo.png')) }}" 
                         alt="{{ favorito.Nombre }}">
                    
                    <div class="favorite-type-badge {% if favorito.TipoFavorito == 'empresa' %}badge-empresa{% else %}badge-producto{% endif %}">
                        {% if favorito.TipoFavorito == 'empresa' %}
                            🏪 Empresa
                        {% else %}
                            🛍️ Producto
                        {% endif %}
                    </div>
                    
                    <button class="favorite-remove-btn" 
                            onclick="removeFavorite({{ favorito.ItemID }}, '{{ favorito.TipoFavorito }}')"
                            title="Quitar de favoritos">
                        <i class="fas fa-heart"></i>
                    </button>
                </div>
                
                <div class="favorite-card-body">
                    <h3 class="favorite-card-title">{{ favorito.Nombre }}</h3>
                    <p class="favorite-card-description">{{ favorito.Descripcion or 'Sin descripción' }}</p>
                    
                    {% if favorito.TipoFavorito == 'producto' %}
                        <div class="favorite-card-info">
                            <div class="favorite-price">S/ {{ "%.2f"|format(favorito.Precio) }}</div>
                        </div>
                        
                        {% if favorito.EmpresaNombre %}
                        <a href="{{ url_for('main.empresa', slug=favorito.EmpresaSlug) }}" 
                           class="favorite-empresa-link">
                            <i class="fas fa-store"></i>
                            {{ favorito.EmpresaNombre }}
                        </a>
                        {% endif %}
                        
                        <div class="favorite-actions">
                            <button class="btn-cart" onclick="addToCart({{ favorito.ItemID }})">
                                <i class="fas fa-shopping-cart"></i>
                                Al Carrito
                            </button>
                            <a href="{{ url_for('main.empresa', slug=favorito.EmpresaSlug) }}" class="btn-view">
                                <i class="fas fa-store"></i>
                                Ver Tienda
                            </a>
                        </div>
                    {% else %}
                        {% if favorito.CalificacionPromedio %}
                        <div class="favorite-card-info">
                            <div class="favorite-rating">
                                <i class="fas fa-star"></i>
                                {{ "%.1f"|format(favorito.CalificacionPromedio) }}
                                <span style="color: #a0aec0;">({{ favorito.TotalResenas or 0 }})</span>
                            </div>
                        </div>
                        {% endif %}
                        
                        <div class="favorite-actions">
                            <a href="{{ url_for('main.empresa', slug=favorito.Slug) }}" class="btn-view" style="flex: initial; width: 100%;">
                                <i class="fas fa-store"></i>
                                Ver Empresa
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">💔</div>
        <h3>No tienes favoritos aún</h3>
        <p>Agrega productos y empresas a tus favoritos para encontrarlos fácilmente</p>
        <a href="{{ url_for('main.index') }}" class="btn-cart" style="display: inline-flex; padding: 1rem 2rem;">
            <i class="fas fa-shopping-bag"></i>
            Explorar TallArt
        </a>
    </div>
    {% endif %}
</div>

<script>
function filterFavorites(type) {
    // Update active tab
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.getElementById('tab-' + (type === 'todos' ? 'todos' : type)).classList.add('active');
    
    // Filter items
    const items = document.querySelectorAll('.favorite-item');
    items.forEach(item => {
        if (type === 'todos' || item.dataset.type === type) {
            item.style.display = 'block';
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 10);
        } else {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            setTimeout(() => {
                item.style.display = 'none';
            }, 300);
        }
    });
}

function addToCart(productId) {
    fetch('{{ url_for("cart.add_to_cart") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `product_id=${productId}&quantity=1`
    })
    .then(response => {
        if (response.ok) {
            showNotification('✅ Producto agregado al carrito', 'success');
            // Actualizar contador del carrito si existe
            updateCartCount();
        } else {
            showNotification('❌ Error al agregar al carrito', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('❌ Error al agregar al carrito', 'error');
    });
}

function removeFavorite(itemId, itemType) {
    if (confirm('¿Estás seguro de que quieres quitar este ' + (itemType === 'empresa' ? 'empresa' : 'producto') + ' de tus favoritos?')) {
        fetch('{{ url_for("favorites.remove") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                item_id: itemId,
                type: itemType
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Animar y remover el elemento
                const item = document.querySelector(`[onclick*="removeFavorite(${itemId}, '${itemType}')"]`).closest('.favorite-item');
                if (item) {
                    item.style.opacity = '0';
                    item.style.transform = 'scale(0.8)';
                    setTimeout(() => {
                        item.remove();
                        
                        // Actualizar contadores
                        updateCounts();
                        
                        // Verificar si no hay más favoritos
                        const remainingItems = document.querySelectorAll('.favorite-item');
                        if (remainingItems.length === 0) {
                            location.reload();
                        }
                    }, 300);
                }
                
                showNotification('✅ Removido de favoritos', 'success');
            } else {
                showNotification('❌ Error al remover de favoritos', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('❌ Error al remover de favoritos', 'error');
        });
    }
}

function updateCounts() {
    const allItems = document.querySelectorAll('.favorite-item');
    const productItems = document.querySelectorAll('.favorite-item[data-type="producto"]');
    const empresaItems = document.querySelectorAll('.favorite-item[data-type="empresa"]');
    
    document.getElementById('count-todos').textContent = allItems.length;
    document.getElementById('count-productos').textContent = productItems.length;
    document.getElementById('count-empresas').textContent = empresaItems.length;
}

function updateCartCount() {
    fetch('{{ url_for("cart.get_cart_count") }}')
        .then(response => response.json())
        .then(data => {
            const cartBadge = document.querySelector('.cart-count');
            if (cartBadge) {
                cartBadge.textContent = data.count || 0;
            }
        })
        .catch(error => console.error('Error updating cart count:', error));
}

function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 1rem 1.5rem;
        background: ${type === 'success' ? 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)' : 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)'};
        color: white;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 9999;
        font-weight: 600;
        animation: slideIn 0.3s ease;
    `;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Animaciones CSS
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
    
    .favorite-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}