{% extends 'admin/layout.html.twig' %}
{% block title %}{{ product.name }} - KitscoApp{% endblock %}
{% block page_title %}{{ product.name }}{% endblock %}

{% block content %}
<!-- Action Bar -->
<div class="flex flex-wrap gap-2 mb-6">
    <a href="{{ path('admin_product_edit', {id: product.id}) }}" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-pencil"></i> Edit
    </a>
    <a href="{{ path('admin_inventory_history', {id: product.id}) }}" class="inline-flex items-center gap-1.5 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-clock-history"></i> Stock History
    </a>
    <a href="{{ path('admin_product_index') }}" class="inline-flex items-center gap-1.5 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm ml-auto">
        <i class="bi bi-arrow-left"></i> All Products
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left Column: Image + Details -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Product Header Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex flex-col sm:flex-row gap-6 p-6">
                <!-- Image -->
                <div class="shrink-0">
                    {% if product.imagePath %}
                        <img src="{{ asset(product.imagePath) }}" alt="{{ product.name }}" class="w-40 h-40 object-cover rounded-xl border border-gray-200">
                    {% else %}
                        <div class="w-40 h-40 rounded-xl bg-gray-50 border border-gray-200 flex items-center justify-center">
                            <i class="bi bi-box text-5xl text-gray-200"></i>
                        </div>
                    {% endif %}
                </div>

                <!-- Info -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h2 class="text-xl font-bold text-gray-800">{{ product.name }}</h2>
                            {% if product.sku %}
                                <p class="text-sm text-gray-400 mt-0.5">SKU: {{ product.sku }}</p>
                            {% endif %}
                        </div>
                        <div class="flex flex-col gap-1 shrink-0">
                            <span class="inline-block px-2.5 py-1 rounded-full text-xs font-medium {{ product.isActive ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ product.isActive ? 'Active' : 'Inactive' }}
                            </span>
                            {% if product.isActive %}
                            <span class="inline-block px-2.5 py-1 rounded-full text-xs font-medium {{ product.showOnWebsite ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700' }}">
                                <i class="bi bi-{{ product.showOnWebsite ? 'globe' : 'eye-slash' }} text-[10px]"></i>
                                {{ product.showOnWebsite ? 'On Website' : 'Hidden' }}
                            </span>
                            {% endif %}
                        </div>
                    </div>

                    {% if product.category %}
                        <span class="inline-block mt-3 text-xs font-medium text-kitsco-accent bg-kitsco-accent/10 px-3 py-1 rounded-full">{{ product.category }}</span>
                    {% endif %}

                    {% if product.description %}
                        <p class="text-sm text-gray-500 mt-3 leading-relaxed">{{ product.description }}</p>
                    {% endif %}

                    <div class="flex flex-wrap gap-6 mt-4 pt-4 border-t border-gray-100">
                        <div>
                            <p class="text-xs text-gray-400 uppercase tracking-wide">Selling Price</p>
                            <p class="text-lg font-bold text-gray-800 mt-0.5">{{ product.unitPrice|money }} <span class="text-xs font-normal text-gray-400">TZS</span></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400 uppercase tracking-wide">Cost (COGS)</p>
                            <p class="text-lg font-bold text-gray-800 mt-0.5">{{ product.cogs|money }} <span class="text-xs font-normal text-gray-400">TZS</span></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-400 uppercase tracking-wide">Margin</p>
                            <p class="text-lg font-bold mt-0.5 {{ product.profitMarginPercentage > 0 ? 'text-green-600' : 'text-gray-400' }}">{{ product.profitMarginPercentage }}%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Stock Receipts -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-box-seam mr-2"></i>Recent Stock Receipts</h3>
                <a href="{{ path('admin_inventory_history', {id: product.id}) }}" class="text-xs text-kitsco-accent hover:underline">View all</a>
            </div>
            {% if recentStockReceipts|length > 0 %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-4 py-2.5 text-left font-medium">Date</th>
                            <th class="px-4 py-2.5 text-left font-medium">Supplier</th>
                            <th class="px-4 py-2.5 text-right font-medium">Qty</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for receipt in recentStockReceipts %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-2.5 text-gray-600">{{ receipt.purchaseDate|date('d M Y') }}</td>
                            <td class="px-4 py-2.5 text-gray-600">{{ receipt.supplier ?? '—' }}</td>
                            <td class="px-4 py-2.5 text-right font-medium">{{ receipt.quantity }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="px-6 py-8 text-center text-gray-400">
                <i class="bi bi-inbox text-2xl"></i>
                <p class="text-sm mt-2">No stock receipts yet.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Right Column: Stats -->
    <div class="space-y-6">
        <!-- Stock Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <p class="text-xs text-gray-400 uppercase tracking-wide mb-3">Current Stock</p>
            <div class="flex items-end gap-2">
                <span class="text-4xl font-bold {{ product.stockQuantity <= 0 ? 'text-red-600' : (product.stockQuantity <= 10 ? 'text-yellow-600' : 'text-gray-800') }}">{{ product.stockQuantity }}</span>
                <span class="text-sm text-gray-400 mb-1">units</span>
            </div>
            {% if product.stockQuantity <= 0 %}
                <p class="mt-2 text-xs text-red-500 font-medium"><i class="bi bi-exclamation-triangle mr-1"></i>Out of stock</p>
            {% elseif product.stockQuantity <= 10 %}
                <p class="mt-2 text-xs text-yellow-600 font-medium"><i class="bi bi-exclamation-triangle mr-1"></i>Low stock</p>
            {% endif %}
        </div>

        <!-- Sales Stats Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <p class="text-xs text-gray-400 uppercase tracking-wide mb-4">Sales Performance</p>
            <div class="space-y-4">
                <div>
                    <p class="text-xs text-gray-400">Units Sold</p>
                    <p class="text-2xl font-bold text-gray-800">{{ totalUnitsSold|money }}</p>
                </div>
                <div class="border-t border-gray-100 pt-4">
                    <p class="text-xs text-gray-400">Total Revenue</p>
                    <p class="text-2xl font-bold text-gray-800">{{ totalRevenue|money }} <span class="text-xs font-normal text-gray-400">TZS</span></p>
                </div>
            </div>
        </div>

        <!-- Timestamps Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <p class="text-xs text-gray-400 uppercase tracking-wide mb-3">Timestamps</p>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-400">Created</span>
                    <span class="text-gray-600">{{ product.createdAt|date('d M Y') }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">Updated</span>
                    <span class="text-gray-600">{{ product.updatedAt|date('d M Y') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}