@page
@model AsadiTools.Pages.Shop.ShopIndexModel
@{ ViewData["Title"] = "فروشگاه قطعات یدکی ابزار برقی"; Layout = "_Layout"; }

<div class="bg-blue-800 text-white py-10 px-4">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-extrabold mb-2">فروشگاه قطعات یدکی</h1>
        <p class="text-blue-200">قطعات اصل ابزار برقی صنعتی با گارانتی</p>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 py-8">
    <!-- Filters -->
    <div class="bg-white rounded-2xl border border-gray-100 p-5 mb-8">
        <form method="get" class="mb-5">
            <input type="text" name="search" value="@Model.Search" placeholder="جستجو در قطعات..."
                   class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </form>

        <div class="mb-4">
            <p class="text-xs text-gray-500 font-bold mb-2">دسته‌بندی</p>
            <div class="flex flex-wrap gap-2">
                <a href="/Shop" class="text-sm px-3 py-1.5 rounded-full border transition-colors @(Model.Category == null ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400")">همه</a>
                @foreach (var cat in SiteData.Categories)
                {
                    <a href="/Shop?category=@cat.Id@(Model.Brand != null ? "&brand=" + Model.Brand : "")"
                       class="text-sm px-3 py-1.5 rounded-full border transition-colors @(Model.Category == cat.Id ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400")">
                        @cat.Icon @cat.NameFa
                    </a>
                }
            </div>
        </div>

        <div>
            <p class="text-xs text-gray-500 font-bold mb-2">برند</p>
            <div class="flex flex-wrap gap-2">
                <a href="/Shop@(Model.Category != null ? "?category=" + Model.Category : "")"
                   class="text-sm px-3 py-1.5 rounded-full border transition-colors @(Model.Brand == null ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400")">همه برندها</a>
                @foreach (var brand in SiteData.Brands)
                {
                    <a href="/Shop?brand=@brand.Id@(Model.Category != null ? "&category=" + Model.Category : "")"
                       class="text-sm px-3 py-1.5 rounded-full border transition-colors @(Model.Brand == brand.Id ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400")">
                        @brand.NameFa
                    </a>
                }
            </div>
        </div>
    </div>

    <p class="text-sm text-gray-500 mb-5">@Model.TotalCount محصول یافت شد</p>

    @if (!Model.Products.Any())
    {
        <div class="text-center py-20 text-gray-400">
            <div class="text-5xl mb-4">🔍</div>
            <p>محصولی یافت نشد</p>
            <a href="/Shop" class="text-blue-600 text-sm mt-2 hover:underline block">مشاهده همه محصولات</a>
        </div>
    }
    else
    {
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            @foreach (var p in Model.Products)
            {
                var cat = SiteData.Categories.FirstOrDefault(c => c.Id == p.Category);
                var brand = SiteData.Brands.FirstOrDefault(b => b.Id == p.Brand);
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow flex flex-col">
                    @if (!string.IsNullOrEmpty(p.ImageUrl))
                    {
                        <div class="rounded-t-xl overflow-hidden" style="height:160px">
                            <img src="@p.ImageUrl" alt="@p.NameFa" loading="lazy"
                                 class="w-full h-full object-cover"
                                 onerror="this.parentElement.innerHTML='<div class=\'bg-gradient-to-br from-blue-50 to-blue-100 h-full flex items-center justify-center text-5xl\'>@(cat?.Icon ?? "🔧")</div>'" />
                        </div>
                    }
                    else
                    {
                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-t-xl p-8 flex items-center justify-center text-5xl">
                            @(cat?.Icon ?? "🔧")
                        </div>
                    }
                    <div class="p-4 flex flex-col flex-1 gap-3">
                        <div class="flex flex-wrap gap-1.5">
                            @if (brand != null) { <span class="text-xs font-bold px-2 py-0.5 rounded-full text-white" style="background-color:@brand.Color">@brand.NameFa</span> }
                            @if (cat != null) { <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">@cat.NameFa</span> }
                            @if (p.Stock == 0) { <span class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600">ناموجود</span> }
                        </div>
                        <div>
                            <a href="/Shop/Detail?id=@p.Id" class="font-bold text-gray-900 hover:text-blue-700 transition-colors leading-snug block">@p.NameFa</a>
                            @if (p.Sku != null) { <p class="text-xs text-gray-400 mt-0.5">کد: @p.Sku</p> }
                        </div>
                        <div class="mt-auto">
                            @if (p.HasDiscount) { <p class="text-sm text-gray-400 line-through">@SiteData.FormatPrice(p.Price)</p> }
                            <p class="text-lg font-bold text-blue-700">@SiteData.FormatPrice(p.FinalPrice)</p>
                        </div>
                        <form method="post" asp-page-handler="AddToCart">
                            @Html.AntiForgeryToken()
                            <input type="hidden" name="productId" value="@p.Id" />
                            <input type="hidden" name="nameFa" value="@p.NameFa" />
                            <input type="hidden" name="price" value="@p.FinalPrice" />
                            <input type="hidden" name="sku" value="@p.Sku" />
                            <button type="submit" @(p.Stock == 0 ? "disabled" : "")
                                    class="w-full flex items-center justify-center gap-2 bg-blue-700 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-blue-800 transition-colors disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed">
                                🛒 @(p.Stock == 0 ? "ناموجود" : "افزودن به سبد")
                            </button>
                        </form>
                    </div>
                </div>
            }
        </div>
    }

    @if (Model.TotalPages > 1)
    {
        <div class="flex justify-center items-center gap-2 mt-10">
            @if (Model.CurrentPage > 1)
            {
                <a href="/Shop?page=@(Model.CurrentPage - 1)@(Model.Category != null ? "&category=" + Model.Category : "")@(Model.Brand != null ? "&brand=" + Model.Brand : "")@(Model.Search != null ? "&search=" + Model.Search : "")"
                   class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 hover:border-blue-400 hover:text-blue-700 transition-colors">
                    ‹ قبلی
                </a>
            }
            @for (var i = Math.Max(1, Model.CurrentPage - 2); i <= Math.Min(Model.TotalPages, Model.CurrentPage + 2); i++)
            {
                <a href="/Shop?page=@i@(Model.Category != null ? "&category=" + Model.Category : "")@(Model.Brand != null ? "&brand=" + Model.Brand : "")@(Model.Search != null ? "&search=" + Model.Search : "")"
                   class="px-4 py-2 rounded-xl border text-sm transition-colors @(i == Model.CurrentPage ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400 hover:text-blue-700")">
                    @i
                </a>
            }
            @if (Model.CurrentPage < Model.TotalPages)
            {
                <a href="/Shop?page=@(Model.CurrentPage + 1)@(Model.Category != null ? "&category=" + Model.Category : "")@(Model.Brand != null ? "&brand=" + Model.Brand : "")@(Model.Search != null ? "&search=" + Model.Search : "")"
                   class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 hover:border-blue-400 hover:text-blue-700 transition-colors">
                    بعدی ›
                </a>
            }
        </div>
    }
</div>