@page "/registry/{Code}/item/{ItemId:guid}/contribution-amount"
@rendermode InteractiveServer

@using BirthList.Web.Features.Registries

<PageTitle>Contribution Amount</PageTitle>

@if (Registry is null || Item is null)
{
    <p>Item not found.</p>
}
else if (!IsAuthenticated)
{
    <p>Please log in first.</p>
}
else
{
    <div class="registry-shell @RegistryThemeService.GetCssClass(Registry.RegistryType, Registry.ThemeKey)">
        <h1>Partially fulfill: @Item.Name</h1>

        <div class="card p-3">
            @if (RepresentableAmounts.Count == 0)
            {
                <p class="text-muted mb-0">No representable amount can be formed from configured QR codes up to €200.</p>
            }
            else
            {
                <label class="form-label">Select amount: €@SelectedAmount</label>
                <input type="range"
                       class="form-range"
                       min="0"
                       max="@(RepresentableAmounts.Count - 1)"
                       step="1"
                       @bind="SliderIndex"
                       @bind:after="RecalculateSuggestions" />
            }

            @if (Suggestions.Count == 0)
            {
                <p class="text-muted mt-2">No QR combination available for this amount.</p>
            }
            else
            {
                <p class="mt-3 mb-2"><strong>Suggested QR combination:</strong></p>
                <ul class="mb-3">
                    @foreach (var suggestion in Suggestions)
                    {
                        <li>@suggestion.RepeatCount x €@suggestion.Amount</li>
                    }
                </ul>

                <div class="d-flex flex-column gap-3">
                    @foreach (var suggestion in Suggestions)
                    {
                        @for (var i = 0; i < suggestion.RepeatCount; i++)
                        {
                            <div>
                                <div class="small mb-1">€@suggestion.Amount</div>
                                <img src="@BuildQrImageUrl(suggestion.QrCodeUrl)" alt="QR code @suggestion.Amount" class="img-fluid" style="max-height: 220px;" />
                                <div class="small text-muted text-break">
                                    <a href="@suggestion.QrCodeUrl" target="_blank" rel="noopener noreferrer">Open payment link</a>
                                </div>
                            </div>
                        }
                    }
                </div>
            }

            <div class="d-flex gap-2 mt-3">
                <button class="btn btn-success" @onclick="ConfirmAsync" disabled="@(SelectedAmount <= 0)">I transferred this amount</button>
                <button class="btn btn-outline-secondary" @onclick="BackToRegistry">Back</button>
            </div>
        </div>
    </div>
}