ChronoCCG/Chrono/Shared/Pages/DeckDetail.razor

@namespace Shared.Pages
@page "/decks/{Name}"

<PageTitle>@deck?.Name</PageTitle>

<div class="deck-detail-page">
    <a class="back-link" href="/decks"><i class="bi bi-arrow-left"></i> Back to Decks</a>

    @if (deck == null)
    {
        <div class="empty-state">
            <i class="bi bi-exclamation-circle"></i>
            <p>Deck not found.</p>
        </div>
    }
    else
    {
        <article class="deck-article">
            <header class="deck-header">
                <h1>@deck.Name</h1>
                <b>Deck Code:</b> <pre>@deck.DeckCode</pre>
                @if (deck.Factions.Count > 0)
                {
                    <div class="deck-factions">
                        @foreach (var f in deck.Factions)
                        {
                            <span class="faction-badge">@f</span>
                        }
                    </div>
                }
                <div class="deck-card-count">
                    <span>@deck.Cards.Count cards</span>
                    <span class="ms-3 badge @(deck.IsValid ? "bg-success" : "bg-danger")">
                        @(deck.IsValid ? "Valid" : "Invalid")
                    </span>
                    @if (!deck.IsValid)
                    {
                        <small class="text-danger ms-2 d-block d-md-inline">@deck.ValidationMessage</small>
                    }
                </div>

                @{
                    var distribution = GetManaDistribution();
                    var maxCount = distribution.Max(x => x.Count);
                }
                <div class="mana-curve">
                    @foreach (var entry in distribution)
                    {
                        var height = maxCount > 0 ? (entry.Count * 100 / maxCount) : 0;
                        <div class="mana-bar-container">
                            <div class="mana-bar-label">@entry.Count</div>
                            <div class="mana-bar" style="height: @($"{Math.Max(height, 5)}%")"></div>
                            <div class="mana-cost">@(entry.Cost >= 10 ? "10+" : entry.Cost.ToString())</div>
                        </div>
                    }
                </div>
            </header>

            @if (deck.Keycards.Count > 0)
            {
                <section class="deck-section">
                    <h2><i class="bi bi-star-fill" style="color: var(--gold);"></i> Keycards</h2>
                    <div class="deck-card-row">
                        @foreach (var cardName in deck.Keycards)
                        {
                            var card = LookupCard(cardName);
                            <button class="mini-card-btn" @onclick="() => SelectCard(card)">
                                <div class="mini-card">
                                    <div class="mini-card-img">
                                        <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
                                             loading="lazy"/>
                                    </div>
                                </div>
                            </button>
                        }
                    </div>
                </section>
            }

            @if (deck.Divers.Count > 0)
            {
                <section class="deck-section">
                    <h2><i class="bi bi-shuffle"></i> Divers</h2>
                    <div class="deck-card-row">
                        @foreach (var cardName in deck.Divers)
                        {
                            var card = LookupCard(cardName);
                            <button class="mini-card-btn" @onclick="() => SelectCard(card)">
                                <div class="mini-card">
                                    <div class="mini-card-img">
                                        <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
                                             loading="lazy"/>
                                    </div>
                                </div>
                            </button>
                        }
                    </div>
                </section>
            }

            <section class="deck-section">
                <h2><i class="bi bi-collection-fill"></i> Cards</h2>
                <div class="deck-card-row">
                    @foreach (var group in deck.Cards.GroupBy(x => x))
                    {
                        var cardName = group.Key;
                        var count = group.Count();
                        var card = LookupCard(cardName);
                        <button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
                                @onclick="() => SelectCard(card)">
                            <div class="mini-card-stack">
                                @for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
                                {
                                    <div class="mini-card" style="--stack-index: @i">
                                        <div class="mini-card-img">
                                            <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
                                                 loading="lazy"/>
                                        </div>
                                    </div>
                                }
                            </div>
                        </button>
                    }
                </div>
            </section>

            @if (deck.Description != null)
            {
                <section class="deck-section description">
                    <h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
                    <div class="deck-description">
                        @RenderDescription(deck.Description)
                    </div>
                </section>
            }
        </article>
    }
</div>

@if (selectedCard != null)
{
    <div class="detail-overlay" @onclick="CloseDetail"></div>
    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
        <button class="detail-close" @onclick="CloseDetail"><i class="bi bi-x-lg"></i></button>
        <div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
            @if (HasImage)
            {
                <div class="detail-image">
                    <img src="@selectedCard.ImagePath" alt="@selectedCard.Name"
                         onerror="this.style.display='none';this.parentElement.style.display='none'" />
                </div>
            }
            <div class="detail-info">
                <div class="detail-header">
                    <h2>@selectedCard.Name</h2>
                    <div class="detail-meta">
                        <span class="meta-badge category @selectedCard.Category?.ToLowerInvariant()">@selectedCard.Category</span>
                        @if (selectedCard.Cost.HasValue)
                        {
                            <span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @selectedCard.Cost</span>
                        }
                        @if (selectedCard.Attack.HasValue)
                        {
                            <span class="meta-badge attack"><i class="bi bi-crosshair"></i> @selectedCard.Attack</span>
                        }
                        @if (selectedCard.Health.HasValue)
                        {
                            <span class="meta-badge health"><i class="bi bi-heart-fill"></i> @selectedCard.Health</span>
                        }
                        @if (selectedCard.Speed != null)
                        {
                            <span class="meta-badge speed"><i class="bi bi-wind"></i> @selectedCard.Speed</span>
                        }
                    </div>
                </div>

                @if (selectedCard.Faction != null)
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
                        <span class="field-value">@selectedCard.Faction</span>
                    </div>
                }

                @if (selectedCard.Description != null)
                {
                    <div class="detail-field description">
                        <span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
                        <span class="field-value">@RenderCardDescription(selectedCard.Description)</span>
                    </div>
                }

                @if (selectedCard.Set != null)
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-collection"></i> Set</span>
                        <span class="field-value">@selectedCard.Set</span>
                    </div>
                }

                @if (selectedCard.Archetypes is { Count: > 0 })
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
                        <span class="field-value">@string.Join(", ", selectedCard.Archetypes)</span>
                    </div>
                }

                @if (selectedCard.ImmortalizeWhen != null)
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
                        <span class="field-value">@selectedCard.ImmortalizeWhen</span>
                    </div>
                }

                @if (selectedCard.HasImmortalize)
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
                        <span class="field-value">
                            @foreach (var name in selectedCard.ImmortalizeTo!)
                            {
                                var targetName = name;
                                var target = LookupCard(targetName);
                                if (target != null)
                                {
                                    <button class="inline-card-btn" @onclick="() => SelectCard(target)">@targetName</button>
                                }
                                else
                                {
                                    @targetName
                                }
                            }
                        </span>
                    </div>
                }

                @if (selectedCard.ImmortalizeFrom != null)
                {
                    <div class="detail-field">
                        <span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
                        <span class="field-value">
                            @{
                                var fromCard = LookupCard(selectedCard.ImmortalizeFrom);
                                if (fromCard != null)
                                {
                                    <button class="inline-card-btn" @onclick="() => SelectCard(fromCard)">@selectedCard.ImmortalizeFrom</button>
                                }
                                else
                                {
                                    @selectedCard.ImmortalizeFrom
                                }
                            }
                        </span>
                    </div>
                }
            </div>
        </div>
    </div>
}

@code {
    [Parameter] public string Name { get; set; } = "";

    private DeckData? deck;
    private CardData? selectedCard;

    private bool HasImage => selectedCard?.ImageFile is { Length: > 0 } && selectedCard.ImageFile != "placeholder.png";

    protected override void OnParametersSet()
    {
        var decoded = Uri.UnescapeDataString(Name);
        deck = DeckDatabase.Decks.FirstOrDefault(d => d.IsVisible && d.Name == decoded);
    }

    private CardData? LookupCard(string cardName)
    {
        return CardDatabase.Cards.FirstOrDefault(c =>
            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
    }

    private void SelectCard(CardData? card)
    {
        selectedCard = card;
    }

    private void CloseDetail()
    {
        selectedCard = null;
    }

    private List<(int Cost, int Count)> GetManaDistribution()
    {
        if (deck == null) return [];
        var counts = new Dictionary<int, int>();
        for (int i = 0; i <= 10; i++) counts[i] = 0;

        foreach (var cardName in deck.Cards)
        {
            var card = LookupCard(cardName);
            if (card?.Cost != null)
            {
                var cost = card.Cost.Value;
                if (cost >= 10) cost = 10;
                counts[cost]++;
            }
        }

        return counts.OrderBy(x => x.Key).Select(x => (x.Key, x.Value)).ToList();
    }

    private RenderFragment RenderDescription(string description)
    {
        return builder =>
        {
            var cardNames = CardDatabase.Cards
                .Select(c => c.Name)
                .Where(n => !string.IsNullOrWhiteSpace(n))
                .OrderByDescending(n => n.Length)
                .ToList();

            int sequence = 0;
            var paragraphs = description.Split('\n', StringSplitOptions.RemoveEmptyEntries);

            foreach (var paragraph in paragraphs)
            {
                builder.OpenElement(sequence++, "p");

                var currentText = paragraph;
                while (!string.IsNullOrEmpty(currentText))
                {
                    int bestMatchIndex = -1;
                    string? bestMatchName = null;

                    foreach (var name in cardNames)
                    {
                        int index = currentText.IndexOf(name, StringComparison.OrdinalIgnoreCase);
                        if (index != -1 && (bestMatchIndex == -1 || index < bestMatchIndex))
                        {
                            bestMatchIndex = index;
                            bestMatchName = name;
                        }
                    }

                    if (bestMatchIndex != -1 && bestMatchName != null)
                    {
                        if (bestMatchIndex > 0)
                        {
                            builder.AddContent(sequence++, currentText.Substring(0, bestMatchIndex));
                        }

                        var card = LookupCard(bestMatchName);
                        builder.OpenElement(sequence++, "button");
                        builder.AddAttribute(sequence++, "class", "inline-card-btn");
                        builder.AddAttribute(sequence++, "onclick", EventCallback.Factory.Create(this, () => SelectCard(card)));
                        builder.AddContent(sequence++, bestMatchName);
                        builder.CloseElement();

                        currentText = currentText.Substring(bestMatchIndex + bestMatchName.Length);
                    }
                    else
                    {
                        builder.AddContent(sequence++, currentText);
                        currentText = string.Empty;
                    }
                }

                builder.CloseElement();
            }
        };
    }

    private RenderFragment RenderCardDescription(string description) => builder =>
    {
        var cardNames = CardDatabase.Cards
            .Select(c => c.Name)
            .Where(n => !string.IsNullOrWhiteSpace(n))
            .OrderByDescending(n => n.Length)
            .ToList();

        int seq = 0;
        var remaining = description;

        while (!string.IsNullOrEmpty(remaining))
        {
            int bestIdx = -1;
            string? bestName = null;

            foreach (var name in cardNames)
            {
                int idx = remaining.IndexOf(name, StringComparison.OrdinalIgnoreCase);
                if (idx != -1 && (bestIdx == -1 || idx < bestIdx))
                {
                    bestIdx = idx;
                    bestName = name;
                }
            }

            if (bestIdx != -1 && bestName != null)
            {
                if (bestIdx > 0)
                    builder.AddContent(seq++, remaining[..bestIdx]);

                var card = LookupCard(bestName);
                if (card != null)
                {
                    builder.OpenElement(seq++, "button");
                    builder.AddAttribute(seq++, "class", "inline-card-btn");
                    builder.AddAttribute(seq++, "onclick",
                        EventCallback.Factory.Create(this, () => SelectCard(card)));
                    builder.AddContent(seq++, bestName);
                    builder.CloseElement();
                }
                else
                {
                    builder.AddContent(seq++, bestName);
                }

                remaining = remaining[(bestIdx + bestName.Length)..];
            }
            else
            {
                builder.AddContent(seq++, remaining);
                remaining = "";
            }
        }
    };
}