@page "/qrscanner"
@inject IJSRuntime JS

<PageTitle>QR-Scanner</PageTitle>

<div class="container py-4 text-center">
    <h4 class="mb-3">📷 QR-Code Scanner</h4>

    <div class="mb-3">
        <video id="video" autoplay playsinline class="border rounded shadow-sm" style="width:100%;max-width:400px;"></video>
    </div>

    @if (!string.IsNullOrEmpty(result))
    {
        <div class="alert alert-success mt-3">
            <strong>Erkannt:</strong> @result
        </div>
    }

    <div class="mt-4">
        <button class="btn btn-secondary me-2" @onclick="StartScan">Neu starten</button>
        <button class="btn btn-outline-danger" @onclick="StopScan">Stop</button>
    </div>
</div>

@code {
    private string? result;

    private async Task StartScan()
    {
        await JS.InvokeVoidAsync("QRScanner.start");
    }

    private async Task StopScan()
    {
        await JS.InvokeVoidAsync("QRScanner.stop");
    }

    [JSInvokable]
    public void OnQrDetected(string code)
    {
        result = code;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("QRScanner.init", DotNetObjectReference.Create(this));
        }
    }
}
