midrandbooks/MidrandBookshop/Components/Pages/Home.razor

@page "/"
@rendermode InteractiveServer

<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />

<div class="container text-center text-hero-wrapper">
    <h1 class="display-3 text-dark mb-3 px-2 master-headline">
        Discover thoughtfully curated<br>books for every reader.
    </h1>
    <p class="text-muted mx-auto mb-0 sub-headline">
        Explorations into books, reading culture, and the art of thoughtful curation from Midrand to the world.
    </p>
</div>

<div class="container mb-5 px-md-5">

    @if (AuthorId.HasValue && !string.IsNullOrEmpty(ActiveAuthorFilterName))
    {
        <div class="alert alert-light border d-flex align-items-center justify-content-between rounded-pill px-4 py-2 mb-4 shadow-sm mx-auto" style="max-width: 520px;">
            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-dark rounded-pill fw-normal px-2.5 py-1">Author Collection</span>
                <span class="text-dark fw-medium small">Archived items from <strong>@ActiveAuthorFilterName</strong></span>
            </div>
            <button class="btn btn-close btn-sm p-1 ms-3" @onclick="ClearAuthorFilter" aria-label="Clear Filter"></button>
        </div>
    }

    <div class="row align-items-center justify-content-between pb-3 g-3">
        <div class="col-12 col-md-8">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
                @if (!AuthorId.HasValue)
                {
                    @foreach (var category in MainCategories)
                    {
                        var catName = category;
                        <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
                            @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
                                @onclick="() => SelectCategory(catName)">
                            @catName
                        </button>
                    }

                    @if (DynamicExtendedCategories.Count > 0)
                    {
                        <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 control-expansion-trigger"
                                @onclick="ToggleExtraCategories">
                            <span>@(ShowExpandedCategories ? "Collapse Cloud" : "More Genres")</span>
                            <svg class="transition-smooth @(ShowExpandedCategories ? "rotate-180" : "")" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6,9 12,15 18,9" /></svg>
                        </button>
                    }
                }
                else
                {
                    <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium" @onclick="ClearAuthorFilter">
                        &larr; Return to Catalog Index
                    </button>
                }
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="d-flex align-items-center justify-content-md-end gap-2 text-md-end row-actions-wrapper">
                <button class="btn btn-sm btn-outline-secondary text-dark bg-white border-light-subtle rounded-pill px-3.5 py-1.5 fw-medium d-inline-flex align-items-center gap-2"
                        @onclick="ToggleFilterMenu">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
                    <span>Refine Curation</span>
                </button>

                <div class="btn-group bg-white rounded-pill p-1 border border-light-subtle shadow-sm" role="group">
                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.Grid ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.Grid)">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>
                    </button>
                    <button class="btn btn-sm rounded-pill p-1 d-flex align-items-center justify-content-center toggle-layout-action @(CurrentViewMode == ViewMode.List ? "btn-dark text-white shadow-sm" : "btn-link text-muted")"
                            style="width:28px; height:28px;" @onclick="() => SetViewMode(ViewMode.List)">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if (ShowExpandedCategories && DynamicExtendedCategories.Count > 0 && !AuthorId.HasValue)
    {
        <div class="category-cloud-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-light">
            <h2 class="h6 text-muted mb-3 text-uppercase tracking-wider" style="font-size:0.7rem; font-weight:700;">Curated Subgenre Tag Index</h2>
            <div class="d-flex flex-wrap gap-2">
                @foreach (var subCategory in DynamicExtendedCategories)
                {
                    var subName = subCategory;
                    <button class="btn btn-xs rounded-pill px-2.5 py-1 text-dark border-light-subtle transition-smooth
                        @(ActiveCategory == subName ? "btn-dark text-white" : "bg-white btn-outline-secondary")"
                            style="font-size:0.75rem;" @onclick="() => SelectCategory(subName)">
                        #@subName
                    </button>
                }
            </div>
        </div>
    }

    @if (ShowFilterMenu)
    {
        <div class="filter-panel-drawer p-4 mb-4 border border-light-subtle rounded animate-slide-down bg-white shadow-sm">
            <div class="row g-4 text-start">
                <div class="col-12 col-sm-4">
                    <label class="form-label small fw-semibold text-dark">Sort Artifacts</label>
                    <select class="form-select form-select-sm rounded-pill px-3" value="@SelectedSortOption" @onchange="(e) => ChangeSort(e.Value?.ToString()!)">
                        <option value="default">Release Timeline</option>
                        <option value="price-low">Value: Low to High</option>
                        <option value="price-high">Value: High to Low</option>
                        <option value="title-asc">Alphabetical Order</option>
                    </select>
                </div>
                <div class="col-12 col-sm-4">
                    <label class="form-label small fw-semibold text-dark">Price Thresholds</label>
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "all" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "under-500" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("under-500")'>Under R500</button>
                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "500-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("500-1000")'>R500 - R1,000</button>
                        <button class="btn btn-xs rounded-pill px-3 py-1 @(ActivePriceFilter == "over-1000" ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle")" @onclick='() => ChangePriceFilter("over-1000")'>Over R1,000</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4 d-flex align-items-center mt-sm-4">
                    <div class="form-check form-switch p-0 m-0 d-flex align-items-center gap-2">
                        <input class="form-check-input ms-0 mt-0 styled-switch-toggle" type="checkbox" role="switch" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly">
                        <label class="form-check-label small fw-medium text-dark user-select-none" for="newArrivalsToggle">New Acquisitions Only</label>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top border-light-subtle">
                <button class="btn btn-link btn-sm text-decoration-none text-muted fw-medium px-3" @onclick="ResetFilters">Purge Filters</button>
                <button class="btn btn-dark btn-sm rounded-pill px-4" @onclick="ToggleFilterMenu">Apply Selection</button>
            </div>
        </div>
    }

    @if (!PaginatedBooks.Any())
    {
        <div class="text-center py-5 my-4 bg-light rounded border border-dashed border-light-subtle animate-fade-in">
            <svg class="text-muted mb-3" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
            <p class="text-secondary mb-1 fw-medium">No archived books match your active criteria.</p>
            <span class="text-muted small">Try adjusting your category definitions or search phrase query.</span>
        </div>
    }
    else if (CurrentViewMode == ViewMode.Grid)
    {
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
                <BookCard Id="@book.Id"
                          Title="@book.Name"
                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
                          Price="@ProductPriceCache[book.Id]"
                          Category="@ProductPrimaryCategoryCache[book.Id]"
                          IsNew="@book.Enabled"
                          BookImageUrl="@book.ImageUrl"
                          OnCardClick="() => NavigateToProduct(book.Id)" />
            }
        </div>
    }
    else if (CurrentViewMode == ViewMode.List)
    {
        <div class="d-flex flex-column border rounded bg-white overflow-hidden shadow-sm animate-fade-in list-container-wrapper">
            @foreach (var book in PaginatedBooks)
            {
                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
                     style="cursor: pointer;"
                     @onclick="() => NavigateToProduct(book.Id)">
                    <div class="d-flex align-items-center gap-4 structural-list-left">
                        <span class="text-dark fw-medium list-item-title">@book.Name</span>
                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
                    </div>
                    <div class="d-flex align-items-center gap-4">
                        @if (book.Enabled)
                        {
                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
                        }
                        <span class="text-dark font-monospace fw-medium list-item-price">R @ProductPriceCache[book.Id].ToString("N0")</span>
                        <button class="btn btn-link text-dark p-1">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                        </button>
                    </div>
                </div>
            }
        </div>
    }

    @if (HasMoreItems)
    {
        <div class="d-flex flex-column align-items-center justify-content-center mt-5 pt-4">
            <button class="btn btn-outline-dark rounded-pill px-5 py-2.5 fw-medium shadow-sm" style="font-size: 0.85rem;" @onclick="LoadNextPage">
                <span>Show More Artifacts</span>
            </button>
        </div>
    }
</div>

<a class="back-to-top-btn d-flex align-items-center justify-content-center"
   aria-label="Back to top"
   href="#top-target">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
</a>