{% extends "base.html" %}

{% block title %}Mis Productos - {{ empresa.Nombre }} - TallArt{% endblock %}

{% block extra_css %}
<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fade-in {
        animation: fadeInUp 0.6s ease-out forwards;
    }
    
    .product-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .product-card:hover {
        transform: translateY(-8px);
    }
    
    .product-image {
        transition: transform 0.6s ease;
    }
    
    .product-card:hover .product-image {
        transform: scale(1.1);
    }
    
    .stat-card {
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-4px);
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        
        <!-- Header con breadcrumb -->
        <div class="mb-6 animate-fade-in">
            <nav class="text-sm text-gray-600 mb-4">
                <a href="{{ url_for('empresa.mi_empresa') }}" class="hover:text-purple-600 transition-colors">Mi Empresa</a>
                <span class="mx-2">/</span>
                <span class="text-gray-900 font-semibold">Mis Productos</span>
            </nav>
            
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div>
                    <h1 class="text-5xl font-black bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-3">
                        🎨 Mis Productos
                    </h1>
                    <p class="text-xl text-gray-700">Catálogo de <span class="font-semibold text-purple-600">{{ empresa.Nombre }}</span></p>
                </div>
                
                <div class="flex flex-wrap gap-3">
                    <a href="{{ url_for('empresa.mi_empresa') }}"
                       class="px-6 py-3.5 bg-white border-2 border-gray-200 text-gray-700 font-bold rounded-2xl hover:bg-gray-50 hover:border-gray-300 transition-all duration-300 flex items-center gap-2 shadow-md hover:shadow-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        Volver
                    </a>
                    
                    <a href="{{ url_for('empresa.crear_producto') }}"
                       class="px-8 py-3.5 bg-gradient-to-r from-emerald-500 via-green-500 to-teal-500 text-white font-black rounded-2xl hover:from-emerald-600 hover:via-green-600 hover:to-teal-600 transition-all duration-300 shadow-xl hover:shadow-2xl flex items-center gap-2 transform hover:scale-105">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        Crear Producto
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Estadísticas -->
        {% if productos and productos|length > 0 %}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8 animate-fade-in" style="animation-delay: 0.1s;">
            <div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm font-semibold mb-1">Total Productos</p>
                        <p class="text-white text-4xl font-black">{{ productos|length }}</p>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="stat-card bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-green-100 text-sm font-semibold mb-1">Activos</p>
                        <p class="text-white text-4xl font-black">{{ productos|selectattr('EsActivo')|list|length }}</p>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="stat-card bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-orange-100 text-sm font-semibold mb-1">Inactivos</p>
                        <p class="text-white text-4xl font-black">{{ productos|rejectattr('EsActivo')|list|length }}</p>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <div class="stat-card bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 shadow-xl">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-purple-100 text-sm font-semibold mb-1">Stock Total</p>
                        <p class="text-white text-4xl font-black">{{ productos|sum(attribute='Stock') or 0 }}</p>
                    </div>
                    <div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}


        <!-- Productos -->
        {% if productos and productos|length > 0 %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {% for producto in productos %}
            <div class="product-card bg-white rounded-3xl shadow-lg overflow-hidden hover:shadow-2xl animate-fade-in" style="animation-delay: {{ loop.index0 * 0.05 }}s;">
                
                <!-- Badge de Estado -->
                <div class="absolute top-4 right-4 z-10">
                    {% if producto.EsActivo %}
                    <span class="px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-full shadow-lg flex items-center gap-1">
                        <span class="w-2 h-2 bg-white rounded-full animate-pulse"></span>
                        ACTIVO
                    </span>
                    {% else %}
                    <span class="px-3 py-1.5 bg-gray-500 text-white text-xs font-bold rounded-full shadow-lg">
                        INACTIVO
                    </span>
                    {% endif %}
                </div>
                
                <!-- Imagen -->
                <div class="h-56 bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 overflow-hidden relative">
                    {% if producto.ImagenPrincipal %}
                        {% if producto.ImagenPrincipal.startswith('http') %}
                            <img src="{{ producto.ImagenPrincipal }}" 
                                 alt="{{ producto.Nombre }}" 
                                 class="product-image w-full h-full object-cover">
                        {% else %}
                            <img src="{{ url_for('static', filename=producto.ImagenPrincipal.lstrip('/').replace('static/', '')) }}" 
                                 alt="{{ producto.Nombre }}" 
                                 class="product-image w-full h-full object-cover">
                        {% endif %}
                    {% else %}
                    <div class="w-full h-full flex items-center justify-center">
                        <svg class="w-20 h-20 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    {% endif %}
                    
                    <!-- Overlay con Stock -->
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                        <div class="flex items-center gap-2 text-white">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                            </svg>
                            <span class="font-bold">Stock: {{ producto.Stock or 0 }} unidades</span>
                        </div>
                    </div>
                </div>
                
                <!-- Info -->
                <div class="p-5">
                    <!-- Categoría -->
                    {% if producto.CategoriaNombre %}
                    <div class="mb-3">
                        <span class="inline-block px-3 py-1 bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 text-xs font-bold rounded-full">
                            {{ producto.CategoriaNombre }}
                        </span>
                    </div>
                    {% endif %}
                    
                    <!-- Nombre -->
                    <h3 class="text-xl font-black text-gray-900 mb-2 line-clamp-1">
                        {{ producto.Nombre }}
                    </h3>
                    
                    <!-- Descripción -->
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2 h-10">
                        {{ producto.Descripcion or 'Sin descripción disponible' }}
                    </p>
                    
                    <!-- Precio -->
                    <div class="mb-5">
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500 font-semibold">Precio:</span>
                            <span class="text-3xl font-black bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                                S/ {{ "%.2f"|format(producto.Precio or 0) }}
                            </span>
                        </div>
                    </div>
                    
                    <!-- Acciones -->
                    <div class="grid grid-cols-3 gap-2">
                        <a href="{{ url_for('empresa.editar_producto', producto_id=producto.ProductoID) }}"
                           class="col-span-3 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-300 flex items-center justify-center gap-2 shadow-md hover:shadow-lg"
                           title="Editar producto">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                            Editar
                        </a>
                        
                        <form method="POST" action="{{ url_for('empresa.toggle_producto', producto_id=producto.ProductoID) }}" class="col-span-2">
                            <button type="submit"
                                    class="w-full px-3 py-3 {% if producto.EsActivo %}bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600{% else %}bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700{% endif %} text-white font-bold rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-md hover:shadow-lg"
                                    title="{% if producto.EsActivo %}Desactivar{% else %}Activar{% endif %}">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    {% if producto.EsActivo %}
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                                    {% else %}
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    {% endif %}
                                </svg>
                                {% if producto.EsActivo %}Ocultar{% else %}Mostrar{% endif %}
                            </button>
                        </form>
                        
                        <form method="POST" action="{{ url_for('empresa.eliminar_producto', producto_id=producto.ProductoID) }}" onsubmit="return confirm('⚠️ ¿Eliminar {{ producto.Nombre }}?\n\nEsta acción no se puede deshacer.');">
                            <button type="submit"
                                    class="w-full px-3 py-3 bg-gradient-to-r from-red-500 to-pink-600 text-white font-bold rounded-xl hover:from-red-600 hover:to-pink-700 transition-all duration-300 flex items-center justify-center shadow-md hover:shadow-lg"
                                    title="Eliminar producto">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        {% else %}
        <!-- Sin productos -->
        <div class="bg-white rounded-3xl shadow-2xl p-12 lg:p-20 text-center animate-fade-in">
            <div class="max-w-2xl mx-auto">
                <!-- Icono animado -->
                <div class="inline-block relative mb-8">
                    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full blur-2xl opacity-30 animate-pulse"></div>
                    <div class="relative inline-block p-8 bg-gradient-to-br from-purple-100 to-pink-100 rounded-full">
                        <svg class="w-24 h-24 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                        </svg>
                    </div>
                </div>
                
                <h2 class="text-4xl font-black text-gray-900 mb-4">
                    ¡Comienza tu catálogo! 🚀
                </h2>
                <p class="text-xl text-gray-600 mb-8 leading-relaxed">
                    Aún no tienes productos registrados.<br>
                    <span class="font-semibold text-purple-600">Crea tu primer producto</span> y comienza a mostrar tus artesanías al mundo.
                </p>
                
                <!-- Features -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10 text-left">
                    <div class="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl">
                        <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-3">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-1">Fotos de calidad</h3>
                        <p class="text-sm text-gray-600">Muestra tus productos con imágenes atractivas</p>
                    </div>
                    
                    <div class="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl">
                        <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-3">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-1">Precios flexibles</h3>
                        <p class="text-sm text-gray-600">Define el precio de cada artesanía</p>
                    </div>
                    
                    <div class="p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-2xl">
                        <div class="w-12 h-12 bg-pink-500 rounded-xl flex items-center justify-center mb-3">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-1">Control de stock</h3>
                        <p class="text-sm text-gray-600">Mantén el inventario actualizado</p>
                    </div>
                </div>
                
                <a href="{{ url_for('empresa.crear_producto') }}"
                   class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white text-lg font-black rounded-2xl hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition-all duration-300 shadow-2xl hover:shadow-3xl transform hover:scale-105">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Crear Mi Primer Producto
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}