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

{% block title %}{% trans "Your Recommendations - Virtual Fitting System" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    <!-- ===== SUCCESS HEADER ===== -->
    <div class="text-center mb-12">
        <div
            class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full mb-4 shadow-lg">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>
        <h1 class="text-4xl font-extrabold text-gray-900 mb-2">{% trans "Scan Complete!" %}</h1>
        <p class="text-xl text-gray-500">{% trans "Here are your personalised results" %}</p>
    </div>

    <!-- ===== AI RESULTS: SIZE + SKIN TONE ===== -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">

        <!-- Recommended Size -->
        <div
            class="relative overflow-hidden bg-gradient-to-br from-[#1B3A6B] via-[#2E5FA3] to-[#5B8FC9] rounded-3xl p-8 text-white shadow-2xl">
            <div class="absolute -top-6 -right-6 w-32 h-32 bg-white/10 rounded-full"></div>
            <div class="absolute -bottom-8 -left-8 w-40 h-40 bg-white/5 rounded-full"></div>
            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                        <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
                            </path>
                        </svg>
                    </div>
                    <span class="text-lg font-semibold text-white/80">{% trans "AI Recommended Size" %}</span>
                </div>
                <p class="text-8xl font-black tracking-tight leading-none mb-3">{{ recommended_size }}</p>
                <p class="text-white/70 text-sm">{% trans "Based on your body measurements analysed by YOLO + LLM" %}
                </p>
            </div>
        </div>

        <!-- Skin Tone -->
        <div
            class="relative overflow-hidden bg-gradient-to-br from-amber-500 via-orange-500 to-rose-500 rounded-3xl p-8 text-white shadow-2xl">
            <div class="absolute -top-6 -right-6 w-32 h-32 bg-white/10 rounded-full"></div>
            <div class="absolute -bottom-8 -left-8 w-40 h-40 bg-white/5 rounded-full"></div>
            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                        <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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
                            </path>
                        </svg>
                    </div>
                    <span class="text-lg font-semibold text-white/80">{% trans "Detected Skin Tone" %}</span>
                </div>

                <!-- Skin tone visual indicator -->
                <div class="flex items-center gap-4 mb-3">
                    <div class="w-16 h-16 rounded-2xl shadow-inner border-4 border-white/30
                        {% if body_scan.skin_tone == 'very_light' %}bg-[#f5e6d3]
                        {% elif body_scan.skin_tone == 'light' %}bg-[#e8c9a0]
                        {% elif body_scan.skin_tone == 'intermediate' %}bg-[#c8956c]
                        {% elif body_scan.skin_tone == 'tan' %}bg-[#a0694a]
                        {% else %}bg-[#6b3a2a]{% endif %}">
                    </div>
                    <div>
                        <p class="text-4xl font-black">{{ skin_tone_display }}</p>
                        <p class="text-white/70 text-sm capitalize">{{ undertone_display }} {% trans "undertone" %}</p>
                    </div>
                </div>
                <p class="text-white/70 text-sm">{% trans "Detected from your face selfie using colour analysis" %}</p>
            </div>
        </div>

    </div>

    <!-- ===== MATCHING PRODUCTS ===== -->
    <div class="bg-white rounded-3xl shadow-xl p-8 mb-8">
        <div class="flex items-center gap-3 mb-2">
            <span class="text-3xl">🛍️</span>
            <h2 class="text-2xl font-bold text-gray-900">{% trans "Products That Fit You" %}</h2>
        </div>
        <p class="text-gray-500 mb-6">
            {% trans "All items below are available in your size" %}
            <span class="inline-block px-3 py-1 bg-[#EAF3F8] text-[#1B3A6B] font-bold rounded-full text-sm ml-1">{{ recommended_size }}</span>
        </p>

        {% if matching_products %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for item in matching_products %}
            <div
                class="border-2 border-[#7DB8D8]/40 bg-gradient-to-br from-white to-[#EAF3F8]/30 rounded-2xl overflow-hidden hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">

                <!-- Size badge -->
                <div
                    class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white text-center py-2 text-sm font-bold flex items-center justify-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    {% trans "Your Size" %}: {{ item.recommended_size }}
                </div>

                <!-- Product image: Priority to uploaded image, then fallback to static defaults -->
                <div class="aspect-square bg-gradient-to-br from-gray-50 to-gray-100 relative overflow-hidden">
                    {% if item.product.image %}
                    <img src="{{ item.product.image.url }}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% elif item.product.category == 'shirt' and item.product.gender == 'men' %}
                    <img src="{% static 'images/products/mens_shirt.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% elif item.product.category == 'shirt' and item.product.gender == 'women' %}
                    <img src="{% static 'images/products/blouse.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% elif item.product.category == 'pants' or item.product.category == 'jeans' %}
                    <img src="{% static 'images/products/jeans.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% elif item.product.category == 'dress' %}
                    <img src="{% static 'images/products/womens_dress.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% elif item.product.category == 'jacket' %}
                    <img src="{% static 'images/products/jacket.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% else %}
                    <img src="{% static 'images/products/mens_shirt.png' %}" alt="{{ item.product_name }}"
                        class="w-full h-full object-cover">
                    {% endif %}

                    <!-- Category badge -->
                    <div class="absolute top-3 right-3">
                        <span
                            class="px-3 py-1 bg-white/90 backdrop-blur-sm text-[#1B3A6B] text-xs font-semibold rounded-full shadow capitalize">
                            {{ item.category_label }}
                        </span>
                    </div>
                </div>

                <!-- Product info -->
                <div class="p-5">
                    <h3 class="font-bold text-lg text-gray-900 mb-4">{{ item.product_name }}</h3>

                    <!-- Size -->
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-10 h-10 bg-[#EAF3F8] rounded-full flex items-center justify-center flex-shrink-0">
                            <svg class="w-5 h-5 text-[#1B3A6B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500 uppercase tracking-wide">{% trans "Your Size" %}</span>
                            <p class="font-extrabold text-[#1B3A6B] text-2xl leading-tight">{{ item.recommended_size }}
                            </p>
                        </div>
                    </div>

                    <!-- Price -->
                    <div
                        class="text-3xl font-extrabold bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] bg-clip-text text-transparent mb-4">
                        YER {{ item.product.price }}
                    </div>

                    <!-- CTA -->
                    <a href="{% url 'fitting_system:product_detail' item.product.id %}"
                        class="block w-full bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white text-center py-3 rounded-xl font-bold hover:shadow-lg transition transform hover:scale-105">
                        {% trans "View Product Details" %}
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>

        {% else %}
        <div class="text-center py-16 bg-[#EAF3F8] rounded-2xl">
            <svg class="w-20 h-20 text-[#7DB8D8] mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
                </path>
            </svg>
            <p class="text-gray-600 text-lg font-medium">{% trans "No products in size" %} <strong>{{ recommended_size
                    }}</strong> {% trans "in stock right now" %}</p>
            <p class="text-gray-400 mt-2">{% trans "Check back later or browse our full catalogue" %}</p>
        </div>
        {% endif %}
    </div>

    <!-- ===== ACTION BUTTONS ===== -->
    <div class="flex gap-4 justify-center flex-wrap">
        <a href="{% url 'fitting_system:store' %}"
            class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-xl transition transform hover:scale-105">
            {% trans "Browse All Products" %}
        </a>
        <a href="{% url 'fitting_system:avatar' body_scan.session_id %}"
            class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-xl transition transform hover:scale-105 flex items-center gap-2">
            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            {% trans "View Your 3D Avatar" %}
        </a>
        <a href="{% url 'fitting_system:scan' %}"
            class="bg-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-800 hover:shadow-lg transition">
            {% trans "Scan Another Customer" %}
        </a>
    </div>

</div>
{% endblock %}