@page "/syndicate-pairings"
@using Model
@inject NavigationManager Nav

<PageTitle>Syndicates - Chrono</PageTitle>

<div class="syndicates-container">
    <header class="syndicates-header">
        <h1>Syndicate Pairings</h1>
        <p class="text-muted">Explore the possible combinations of syndicates</p>
    </header>

    <div class="pairings-grid">
        @foreach (var pairing in GetPairings())
        {
            <div class="pairing-card" @onclick="() => NavigateToDecks(pairing)">
                <div class="pairing-display">
                    <div class="syndicate-item">
                        <div class="syn-icon @pairing.S1.ToLower()"></div>
                        <span class="syn-name">@pairing.S1</span>
                    </div>
                    <div class="pairing-separator">
                        <i class="bi bi-x-lg"></i>
                    </div>
                    <div class="syndicate-item">
                        <div class="syn-icon @pairing.S2.ToLower()"></div>
                        <span class="syn-name">@pairing.S2</span>
                    </div>
                </div>
                <div class="pairing-info">
                    <span class="pairing-label">Browse Decks</span>
                </div>
            </div>
        }
    </div>
</div>

@code {
    private record Pairing(string S1, string S2);

    private IEnumerable<Pairing> GetPairings()
    {
        var syndicates = new[] { "Singularity", "Phasetide", "Silence", "Lifeblood", "Sungrace", "Splintergleam" };
        for (int i = 0; i < syndicates.Length; i++)
        {
            for (int j = i + 1; j < syndicates.Length; j++)
            {
                yield return new Pairing(syndicates[i], syndicates[j]);
            }
        }
    }

    private void NavigateToDecks(Pairing pairing)
    {
        Nav.NavigateTo($"/decks?s1={pairing.S1}&s2={pairing.S2}");
    }
}