midrandbooks/MidrandBookshop/Components/Pages/Home.razor

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<div id="top-target" 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">
    <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">
                @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>
                }

                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
                        @onclick="ToggleExtraCategories">
                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </button>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">

                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
                        style="height: 32px; font-size: 0.8rem;"
                        @onclick="ToggleFilterMenu">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                    </svg>
                    <span>Filter & Sort</span>
                </button>

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

            </div>
        </div>
    </div>

    @if (ShowExpandedCategories)
    {
        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
            @foreach (var category in DynamicExtendedCategories)
            {
                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>
            }
        </div>
    }

    @if (ShowFilterMenu)
    {
        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
            <div class="row g-4">
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
                    <div class="d-flex flex-column gap-1">
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
                    <div class="d-flex flex-column gap-1">
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
                    <div class="form-check form-switch pt-1 ms-1">
                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
                    </div>
                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
                </div>
            </div>
        </div>
    }

    <div class="position-relative w-100 custom-milled-line">
        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
        <div class="position-absolute w-100 core-horizontal-rule"></div>
    </div>
</div>

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

    @if (!PaginatedBooks.Any())
    {
        <div class="text-center text-muted py-5">
            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
        </div>
    }
    else if (CurrentViewMode == ViewMode.Grid)
    {
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
                         style="cursor: pointer;"
                         @onclick="() => NavigateToProduct(book.Id)">
                        <div class="d-flex justify-content-between align-items-center">
                            @if (book.IsNew)
                            {
                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
                            }
                            else
                            {
                                <div></div>
                            }
                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" 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 class="d-flex justify-content-center align-items-center my-auto py-3">
                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
                        <div>
                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
                        </div>
                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
            @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.Title</span>
                        <span class="text-muted small list-item-author">by @book.Author</span>
                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
                    </div>
                    <div class="d-flex align-items-center gap-4">
                        @if (book.IsNew)
                        {
                            <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 @book.Price.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"
   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="19" x2="12" y2="5"></line>
        <polyline points="5 12 12 5 19 12"></polyline>
    </svg>
</a>

@code {
    public enum ViewMode { Grid, List }
    private ViewMode CurrentViewMode = ViewMode.Grid;

    [CascadingParameter]
    public string SharedSearchQuery { get; set; } = string.Empty;

    private string ActiveCategory = "All";
    private bool ShowExpandedCategories = false;
    private bool ShowFilterMenu = false;

    private string SelectedSortOption = "default";
    private string ActivePriceFilter = "all";
    private bool OnlyShowNew = false;

    private List<string> MainCategories = new() { "All", "Graphic Design", "Product Design", "Architecture" };
    private List<string> DynamicExtendedCategories = new();

    private int ItemsPerPage = 12;
    private int VisibleCount = 12;

    public class BookItem
    {
        public long Id { get; set; } // Refactored to hold unique record indices of type long
        public string Title { get; set; } = string.Empty;
        public string Author { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public string Category { get; set; } = string.Empty;
        public bool IsNew { get; set; }
        public string Isbn { get; set; } = string.Empty;
    }

    private List<BookItem> BooksCollection = new();

    private IEnumerable<BookItem> FilteredData
    {
        get
        {
            var data = BooksCollection.AsEnumerable();

            if (!string.IsNullOrWhiteSpace(SharedSearchQuery))
            {
                var q = SharedSearchQuery.Trim();
                data = data.Where(b =>
                    b.Title.Contains(q, StringComparison.OrdinalIgnoreCase) ||
                    b.Author.Contains(q, StringComparison.OrdinalIgnoreCase) ||
                    b.Isbn.Contains(q, StringComparison.OrdinalIgnoreCase)
                );
            }

            if (ActiveCategory != "All")
            {
                data = data.Where(b => b.Category.Equals(ActiveCategory, StringComparison.OrdinalIgnoreCase));
            }

            if (OnlyShowNew) { data = data.Where(b => b.IsNew); }

            data = ActivePriceFilter switch
            {
                "under-500" => data.Where(b => b.Price < 500),
                "500-1000" => data.Where(b => b.Price >= 500 && b.Price <= 1000),
                "over-1000" => data.Where(b => b.Price > 1000),
                _ => data
            };

            return data;
        }
    }

    private IEnumerable<BookItem> SortedAndFilteredBooks => SelectedSortOption switch
    {
        "price-low" => FilteredData.OrderBy(b => b.Price),
        "price-high" => FilteredData.OrderByDescending(b => b.Price),
        "title-asc" => FilteredData.OrderBy(b => b.Title),
        _ => FilteredData
    };

    private IEnumerable<BookItem> PaginatedBooks => SortedAndFilteredBooks.Take(VisibleCount);
    private int TotalFilteredCount => FilteredData.Count();
    private bool HasMoreItems => VisibleCount < TotalFilteredCount;

    protected override void OnInitialized()
    {
        var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
        DynamicExtendedCategories.AddRange(extraSourceCategories);

        // Updated mock items to supply long IDs matching your screenshot items
        BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
        BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
        BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });

        var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
        var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
        var designers = new[] { "J. Morrison", "K. Fujita", "Studio Bouroullec", "Es Devlin", "Kenya Hara" };

        var entireCategoryPool = MainCategories.Concat(DynamicExtendedCategories).Where(c => c != "All").ToArray();
        var random = new Random(42);

        for (int i = 4; i <= 60; i++)
        {
            BooksCollection.Add(new BookItem
            {
                Id = (long)i,
                Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
                Author = designers[random.Next(designers.Length)],
                Price = random.Next(25, 135) * 10,
                Category = entireCategoryPool[random.Next(entireCategoryPool.Length)],
                IsNew = random.NextDouble() > 0.7,
                Isbn = $"978000000{i}"
            });
        }
    }

    // Handles the explicit page transition routing
    private void NavigateToProduct(long id)
    {
        Navigation.NavigateTo($"/product/{id}");
    }

    private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
    private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
    private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;
    private void ToggleFilterMenu() => ShowFilterMenu = !ShowFilterMenu;
    private void ChangeSort(string sortOption) => SelectedSortOption = sortOption;
    private void ChangePriceFilter(string priceBracket) { ActivePriceFilter = priceBracket; VisibleCount = ItemsPerPage; }
    private void ToggleNewArrivalsOnly(ChangeEventArgs e) { OnlyShowNew = e.Value is bool b && b; VisibleCount = ItemsPerPage; }
    private void ResetFilters() { SelectedSortOption = "default"; ActivePriceFilter = "all"; OnlyShowNew = false; VisibleCount = ItemsPerPage; }
    private void LoadNextPage() { if (HasMoreItems) VisibleCount += ItemsPerPage; }
}