QRPayWeb/QRPay/Pages/Home.razor

@page "/"
@using QRCoder
@using SixLabors.ImageSharp.Formats
@using System.ComponentModel.DataAnnotations
<PageTitle>QRPay - QR Payment Generator</PageTitle>

<div class="qrpay-container">
    @if (!_showQRCode)
    {
        <!-- Form View -->
        <div class="qrpay-card">
            <!-- Logo and Header -->
            <div class="qrpay-header">
                <div class="qrpay-logo">
                    <img src="logo.svg" alt="QRPay Logo" />
                </div>
                <h1 class="qrpay-title">QRPay</h1>
                <p class="qrpay-subtitle">Generate QR payment codes instantly</p>
            </div>

            <!-- Form -->
            <EditForm Model="@paymentModel" OnValidSubmit="@GenerateQRCode">
                <DataAnnotationsValidator />
                
                <div class="qrpay-form">
                    <div class="form-group">
                        <label for="name" class="form-label">Beneficiary Name</label>
                        <InputText @bind-Value="paymentModel.Name" class="form-control" id="name" placeholder="Enter beneficiary name" />
                        <ValidationMessage For="@(() => paymentModel.Name)" class="validation-message" />
                    </div>

                    <div class="form-group">
                        <label for="iban" class="form-label">IBAN</label>
                        <InputText @bind-Value="paymentModel.IBAN" class="form-control" id="iban" placeholder="Enter IBAN (e.g., SK89 7500 0000 0000 1234 5671)" />
                        <ValidationMessage For="@(() => paymentModel.IBAN)" class="validation-message" />
                    </div>

                    <div class="form-group">
                        <label for="amount" class="form-label">Amount (EUR)</label>
                        <InputNumber @bind-Value="paymentModel.Amount" class="form-control" id="amount" placeholder="0.00" step="0.01" />
                        <ValidationMessage For="@(() => paymentModel.Amount)" class="validation-message" />
                    </div>

                    <div class="form-group">
                        <label for="remark" class="form-label">Payment Reference (Optional)</label>
                        <InputText @bind-Value="paymentModel.Remark" class="form-control" id="remark" placeholder="Enter payment reference or note" />
                        <ValidationMessage For="@(() => paymentModel.Remark)" class="validation-message" />
                    </div>

                    <button type="submit" class="btn-base btn-generate" disabled="@_isGenerating">
                        @if (_isGenerating)
                        {
                            <span class="spinner"></span>
                            <span>Generating...</span>
                        }
                        else
                        {
                            <span>Generate QR Code</span>
                        }
                    </button>
                </div>
            </EditForm>
        </div>
    }
    else
    {
        <!-- QR Code View -->
        <div class="qrcode-container">
            <div class="qrcode-header">
                <h2>Payment QR Code</h2>
                <p>Scan this code with your banking app</p>
            </div>
            
            <div class="qrcode-display">
                <img src="@QRCodeStr" alt="Payment QR Code" />
            </div>
            
            <div class="payment-details">
                <div class="detail-row">
                    <span class="detail-label">To:</span>
                    <span class="detail-value">@paymentModel.Name</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Amount:</span>
                    <span class="detail-value">€@paymentModel.Amount.ToString("F2")</span>
                </div>
                @if (!string.IsNullOrWhiteSpace(paymentModel.Remark))
                {
                    <div class="detail-row">
                        <span class="detail-label">Reference:</span>
                        <span class="detail-value">@paymentModel.Remark</span>
                    </div>
                }
            </div>
            
            <button class="btn-base btn-back" @onclick="@GoBack">
                <span>← Create New Payment</span>
            </button>
        </div>
    }
</div>

@code {
    private PaymentModel paymentModel = new();
    private string QRCodeStr = string.Empty;
    private bool _showQRCode = false;
    private bool _isGenerating = false;

    public class PaymentModel
    {
        [Required(ErrorMessage = "Beneficiary name is required")]
        [StringLength(70, ErrorMessage = "Name cannot exceed 70 characters")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "IBAN is required")]
        [RegularExpression(@"^[A-Z]{2}[0-9]{2}[A-Z0-9]{4}[0-9]{7}([A-Z0-9]?){0,16}$", ErrorMessage = "Please enter a valid IBAN")]
        public string IBAN { get; set; } = string.Empty;

        [Required(ErrorMessage = "Amount is required")]
        [Range(0.01, 999999.99, ErrorMessage = "Amount must be between €0.01 and €999,999.99")]
        public decimal Amount { get; set; } = 0;

        [StringLength(140, ErrorMessage = "Remark cannot exceed 140 characters")]
        public string? Remark { get; set; } = string.Empty;
    }

    public async Task GenerateQRCode()
    {
        _isGenerating = true;
        StateHasChanged();
        
        // Small delay to show loading state
        await Task.Delay(500);
        
        try
        {
            QRCodeStr = string.Empty;

            if (!string.IsNullOrWhiteSpace(paymentModel.IBAN))
            {
                using (var ms = new MemoryStream())
                {
                    QRCodeGenerator qRCodeGenerator = new QRCodeGenerator();

                    var payment = new PayBySquareTextGenerator.Payment(
                        paymentModel.IBAN.Replace(" ", ""), 
                        paymentModel.Amount, 
                        "EUR", 
                        "1", 
                        paymentModel.Remark ?? string.Empty);
                    payment.ConstantSymbol = "0308";
                    payment.BeneficiaryName = paymentModel.Name;

                    var payBySquare = new PayBySquareTextGenerator.PayBySquareOverkill(payment);
                    var stringData = payBySquare.GeneratePayBySquareOverkillString();

                    // Generate QR code data
                    using var qrCodeData = QRCodeGenerator.GenerateQrCode(stringData, QRCodeGenerator.ECCLevel.Q);
                    using var qrCode = new PngByteQRCode(qrCodeData);
                    byte[] qrCodeImage = qrCode.GetGraphic(20);

                    QRCodeStr = $"data:image/png;base64,{Convert.ToBase64String(qrCodeImage)}";
                }

                _showQRCode = true;
            }
        }
        finally
        {
            _isGenerating = false;
            StateHasChanged();
        }
    }

    public void GoBack()
    {
        _showQRCode = false;
        QRCodeStr = string.Empty;
        paymentModel = new PaymentModel(); // Reset the form
        StateHasChanged();
    }
}