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

{% block title %}{% trans "Inventory Dashboard - Virtual Fitting System" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-2">{% trans "Inventory Dashboard" %}</h1>
        <p class="text-xl text-gray-600">{% trans "Manage your product inventory" %}</p>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-md p-6">
            <p class="text-gray-600 mb-2">{% trans "Total Variants" %}</p>
            <p class="text-3xl font-bold text-gray-900">{{ total_variants }}</p>
        </div>
        <div class="bg-green-50 rounded-xl shadow-md p-6">
            <p class="text-green-700 mb-2">{% trans "In Stock" %}</p>
            <p class="text-3xl font-bold text-green-600">{{ in_stock|length }}</p>
        </div>
        <div class="bg-yellow-50 rounded-xl shadow-md p-6">
            <p class="text-yellow-700 mb-2">{% trans "Low Stock" %}</p>
            <p class="text-3xl font-bold text-yellow-600">{{ low_stock|length }}</p>
        </div>
        <div class="bg-red-50 rounded-xl shadow-md p-6">
            <p class="text-red-700 mb-2">{% trans "Out of Stock" %}</p>
            <p class="text-3xl font-bold text-red-600">{{ out_of_stock|length }}</p>
        </div>
    </div>

    <!-- Low Stock Alert -->
    {% if low_stock %}
    <div class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-6 mb-8">
        <h2 class="text-xl font-bold text-yellow-900 mb-4">{% trans "Low Stock Alerts" %}</h2>
        <div class="space-y-2">
            {% for variant in low_stock %}
            <div class="flex items-center justify-between bg-white rounded-lg p-4">
                <div>
                    <p class="font-medium text-gray-900">{{ variant.localized_product_name }}</p>
                    <p class="text-sm text-gray-600">{% trans "Size" %}: {{ variant.size.name }} | {% trans "Color" %}: {{ variant.localized_color_name }}</p>
                </div>
                <span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg font-bold">
                    {{ variant.inventory.quantity|default:0 }} {% trans "left" %}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Out of Stock Alert -->
    {% if out_of_stock %}
    <div class="bg-red-50 border-2 border-red-200 rounded-xl p-6 mb-8">
        <h2 class="text-xl font-bold text-red-900 mb-4">{% trans "Out of Stock" %}</h2>
        <div class="space-y-2">
            {% for variant in out_of_stock %}
            <div class="flex items-center justify-between bg-white rounded-lg p-4">
                <div>
                    <p class="font-medium text-gray-900">{{ variant.localized_product_name }}</p>
                    <p class="text-sm text-gray-600">{% trans "Size" %}: {{ variant.size.name }} | {% trans "Color" %}: {{ variant.localized_color_name }}</p>
                </div>
                <span class="px-4 py-2 bg-red-100 text-red-800 rounded-lg font-bold">
                    {% trans "Out of Stock" %}
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- All Inventory -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-2xl font-bold text-gray-900">{% trans "All Inventory" %}</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[#EAF3F8]">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Product" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">{% trans "Size" %}
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Color" %}
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Quantity" %}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-[#1B3A6B] uppercase tracking-wider">
                            {% trans "Status" %}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for variant in in_stock %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                            {{ variant.inventory.quantity|default:0 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                {% trans "In Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                    {% for variant in low_stock %}
                    <tr class="bg-yellow-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-yellow-900">
                            {{ variant.inventory.quantity|default:0 }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                {% trans "Low Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                    {% for variant in out_of_stock %}
                    <tr class="bg-red-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ variant.localized_product_name }}</div>
                            <div class="text-sm text-gray-500">{{ variant.product.category|title }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ variant.size.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 rounded-full border"
                                    style="background-color: {{ variant.color.hex_code }};"></div>
                                <span class="text-sm text-gray-900">{{ variant.localized_color_name }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-red-900">0</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span
                                class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                {% trans "Out of Stock" %}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-8 text-center">
        <a href="/admin/fitting_system/inventory/"
            class="bg-[#1B3A6B] text-white px-8 py-3 rounded-lg font-bold hover:bg-[#2E5FA3] transition">
            {% trans "Manage Inventory in Admin Panel" %}
        </a>
    </div>
</div>
{% endblock %}