ChronoCCG/Chrono/Web/Pages/Cards.razor

@page "/cards"
@using System.Text.Json
@using Web.Models
@inject HttpClient Http

<PageTitle>Card Gallery</PageTitle>

<div class="gallery-container">
    <h1 class="mb-3">Card Gallery</h1>

    <div class="row g-2 mb-3 filters">
        <div class="col-md-4">
            <input @bind="search" @bind:event="oninput" class="form-control" placeholder="Search cards..." />
        </div>
        <div class="col-md-2">
            <select @bind="categoryFilter" class="form-select">
                <option value="">All Categories</option>
                <option value="Agent">Agents</option>
                <option value="Spell">Spells</option>
                <option value="Token">Tokens</option>
            </select>
        </div>
        <div class="col-md-2">
            <select @bind="factionFilter" class="form-select">
                <option value="">All Factions</option>
                @foreach (var f in factions)
                {
                    <option value="@f">@f</option>
                }
            </select>
        </div>
        <div class="col-md-2">
            <select @bind="costFilter" class="form-select">
                <option value="">All Costs</option>
                @for (int i = 0; i <= 12; i++)
                {
                    <option value="@i">@i</option>
                }
            </select>
        </div>
        <div class="col-md-2">
            <button class="btn btn-outline-secondary w-100" @onclick="ClearFilters">Clear</button>
        </div>
    </div>

    <div class="text-muted mb-2">@filteredCards.Count() cards shown</div>

    @if (filteredCards.Any())
    {
        <div class="card-grid">
            @foreach (var card in filteredCards)
            {
                <div class="card-cell @(selectedCard == card ? "selected" : "")"
                     @onclick="() => SelectCard(card)">
                    <div class="card-image-wrapper">
                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23333%22 width=%22200%22 height=%22280%22/><text fill=%22%23999%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
                    </div>
                    <div class="card-label">
                        <div class="card-name">@card.Name</div>
                        <div class="card-cost">@(card.CostDisplay != null ? $"⚡{card.CostDisplay}" : "")</div>
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="alert alert-info">No cards match your filters.</div>
    }
</div>

@if (selectedCard != null)
{
    <div class="modal-backdrop" @onclick="CloseDetail"></div>
    <div class="card-detail">
        <button class="btn-close detail-close" @onclick="CloseDetail"></button>
        <div class="detail-layout">
            <div class="detail-image">
                <img src="@selectedCard.ImagePath" alt="@selectedCard.Name" />
            </div>
            <div class="detail-info">
                <h2>@selectedCard.Name</h2>
                <div class="detail-meta">
                    <span class="badge bg-primary">@selectedCard.Category</span>
                    @if (selectedCard.Cost.HasValue)
                    {
                        <span class="badge bg-warning text-dark">Cost: @selectedCard.Cost</span>
                    }
                    @if (selectedCard.Attack.HasValue)
                    {
                        <span class="badge bg-danger">ATK: @selectedCard.Attack</span>
                    }
                    @if (selectedCard.Health.HasValue)
                    {
                        <span class="badge bg-success">HP: @selectedCard.Health</span>
                    }
                    @if (selectedCard.Speed != null)
                    {
                        <span class="badge bg-info text-dark">@selectedCard.Speed</span>
                    }
                </div>
                @if (selectedCard.Faction != null)
                {
                    <p><strong>Faction:</strong> @selectedCard.Faction</p>
                }
                @if (selectedCard.Description != null)
                {
                    <p><strong>Description:</strong> @selectedCard.Description</p>
                }
                @if (selectedCard.Set != null)
                {
                    <p><strong>Set:</strong> @selectedCard.Set</p>
                }
                @if (selectedCard.Archetypes is { Count: > 0 })
                {
                    <p><strong>Archetypes:</strong> @string.Join(", ", selectedCard.Archetypes)</p>
                }
                @if (selectedCard.ImmortalizeWhen != null)
                {
                    <p><strong>Immortalize When:</strong> @selectedCard.ImmortalizeWhen</p>
                }
                @if (selectedCard.HasImmortalize)
                {
                    <p><strong>Immortalizes To:</strong> @string.Join(", ", selectedCard.ImmortalizeTo!)</p>
                }
                @if (selectedCard.ImmortalizeFrom != null)
                {
                    <p><strong>Immortalizes From:</strong> @selectedCard.ImmortalizeFrom</p>
                }
            </div>
        </div>
    </div>
}

@code {
    private List<CardData> allCards = [];
    private IEnumerable<CardData> filteredCards => ApplyFilters();
    private string search = "";
    private string categoryFilter = "";
    private string factionFilter = "";
    private string costFilter = "";
    private CardData? selectedCard;
    private List<string> factions = [];

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var catalog = await Http.GetFromJsonAsync<CardCatalog>("sample-data/cards.json");
            if (catalog?.Cards != null)
            {
                allCards = catalog.Cards;
                factions = allCards
                    .Select(c => c.Faction)
                    .Where(f => f != null)
                    .Distinct()
                    .OrderBy(f => f)
                    .ToList()!;
            }
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Failed to load cards: {ex.Message}");
        }
    }

    private IEnumerable<CardData> ApplyFilters()
    {
        var q = search?.Trim().ToLowerInvariant() ?? "";
        return allCards.Where(c =>
            (q.Length == 0 || c.Name.ToLowerInvariant().Contains(q) ||
             (c.Description?.ToLowerInvariant().Contains(q) ?? false)) &&
            (categoryFilter == "" || c.Category == categoryFilter) &&
            (factionFilter == "" || c.Faction == factionFilter) &&
            (costFilter == "" || c.Cost?.ToString() == costFilter)
        );
    }

    private void SelectCard(CardData card) => selectedCard = card;
    private void CloseDetail() => selectedCard = null;

    private void ClearFilters()
    {
        search = "";
        categoryFilter = "";
        factionFilter = "";
        costFilter = "";
    }
}