@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>
            </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="modal-backdrop" @onclick="CloseDetail"></div>
    <div class="card-detail">
        <button class="detail-close" @onclick="CloseDetail"><i class="bi bi-x-lg"></i></button>
        <div class="detail-layout">
            <div class="detail-image">
                <img src="@selectedCard.ImagePath" alt="@selectedCard.Name"/>
            </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">@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">@string.Join(", ", selectedCard.ImmortalizeTo!)</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">@selectedCard.ImmortalizeFrom</span>
                    </div>
                }
            </div>
        </div>
    </div>
}

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

    private DeckData? deck;
    private CardData? selectedCard;

    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 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();
            }
        };
    }

}