@page "/components/qr-code"

<PageTitle>QR Code — Lumeo</PageTitle>

<PageHeader Title="QR Code" Description="Generate QR codes from any string value — URLs, contact info, authentication tokens, Wi-Fi credentials, and more. Rendered entirely in SVG with no external dependencies." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Sharing URLs or deep links that users can scan from a mobile device</li>
        <li>Payment codes for invoices, checkout pages, or donation links</li>
        <li>App download links pointing to an app store listing</li>
        <li>Contact information encoded as vCard for easy sharing</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic QR Code" Code="@_basicCode">
        <Stack Gap="4" Class="max-w-xs">
            <QRCode Value="https://lumeo.nativ.sh/" Size="200" />
            <Lumeo.Text Class="text-sm text-muted-foreground text-center">https://lumeo.nativ.sh/</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Dynamic Value" Code="@_dynamicCode">
        <Stack Gap="3" Class="max-w-xs">
            <Input Value="@_qrValue" OnInput="@((ChangeEventArgs e) => { _qrValue = e.Value?.ToString() ?? ""; StateHasChanged(); })" Placeholder="Enter URL or text..." />
            @if (!string.IsNullOrWhiteSpace(_qrValue))
            {
                <Flex Class="justify-center">
                    <QRCode Value="@_qrValue" Size="180" />
                </Flex>
            }
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Error Correction Levels" Code="@_errorCode">
        <Flex Class="flex-wrap gap-6 items-start">
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="120" ErrorCorrectionLevel="QRCode.QRErrorLevel.Low" />
                <Lumeo.Text Class="text-xs text-muted-foreground">Low (~7%)</Lumeo.Text>
            </Stack>
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="120" ErrorCorrectionLevel="QRCode.QRErrorLevel.Medium" />
                <Lumeo.Text Class="text-xs text-muted-foreground">Medium (~15%)</Lumeo.Text>
            </Stack>
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="120" ErrorCorrectionLevel="QRCode.QRErrorLevel.Quartile" />
                <Lumeo.Text Class="text-xs text-muted-foreground">Quartile (~25%)</Lumeo.Text>
            </Stack>
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="120" ErrorCorrectionLevel="QRCode.QRErrorLevel.High" />
                <Lumeo.Text Class="text-xs text-muted-foreground">High (~30%)</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Error Correction Level (interactive)" Code="@_ecInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Higher correction means a denser QR code but greater fault tolerance.</Lumeo.Text>
            <Segmented @bind-Value="_qrEcLevel">
                <SegmentedItem Value="Low">Low</SegmentedItem>
                <SegmentedItem Value="Medium">Medium</SegmentedItem>
                <SegmentedItem Value="Quartile">Quartile</SegmentedItem>
                <SegmentedItem Value="High">High</SegmentedItem>
            </Segmented>
            <Flex Align="center" Gap="6">
                <QRCode Value="https://lumeo.nativ.sh/" Size="160" ErrorCorrectionLevel="@_qrEcLevelEnum" />
                <Stack Gap="1">
                    <Lumeo.Text Size="sm" Weight="medium">@_qrEcLevel</Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted">
                        @(_qrEcLevel switch {
                            "Low" => "Recovers ~7% of data",
                            "Medium" => "Recovers ~15% of data",
                            "Quartile" => "Recovers ~25% of data",
                            "High" => "Recovers ~30% of data",
                            _ => ""
                        })
                    </Lumeo.Text>
                </Stack>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Colors" Code="@_colorsCode">
        <Flex Class="gap-6 flex-wrap items-start">
            <Stack Gap="2" Class="items-center">
                <Stack Class="rounded-lg bg-primary p-3">
                    <QRCode Value="https://lumeo.nativ.sh/" Size="140" ForegroundColor="white" BackgroundColor="transparent" />
                </Stack>
                <Lumeo.Text Class="text-xs text-muted-foreground">White on primary</Lumeo.Text>
            </Stack>
            <Stack Gap="2" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="140" />
                <Lumeo.Text Class="text-xs text-muted-foreground">Default (theme-aware)</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Different Sizes" Code="@_sizesCode">
        <Flex Class="items-end gap-4 flex-wrap">
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="80" />
                <Lumeo.Text Class="text-xs text-muted-foreground">80px</Lumeo.Text>
            </Stack>
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="120" />
                <Lumeo.Text Class="text-xs text-muted-foreground">120px</Lumeo.Text>
            </Stack>
            <Stack Gap="1" Class="items-center">
                <QRCode Value="https://lumeo.nativ.sh/" Size="180" />
                <Lumeo.Text Class="text-xs text-muted-foreground">180px</Lumeo.Text>
            </Stack>
        </Flex>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">QRCode</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">The text or URL to encode in the QR code.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">200</td>
                            <td class="p-3 text-muted-foreground">Width and height of the QR code in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ErrorCorrectionLevel</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">QRErrorLevel</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Medium</td>
                            <td class="p-3 text-muted-foreground">Error correction capability: Low (~7%), Medium (~15%), Quartile (~25%), High (~30%).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ForegroundColor</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">currentColor</td>
                            <td class="p-3 text-muted-foreground">Color of the QR modules (pixels).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">BackgroundColor</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">transparent</td>
                            <td class="p-3 text-muted-foreground">Background color of the QR code.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IncludeMargin</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Add quiet zone margin around the QR code.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ImageSrc</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">URL of a logo image to embed at the center of the QR code.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ImageSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">40</td>
                            <td class="p-3 text-muted-foreground">Size of the center image in pixels.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/image" class="text-primary hover:underline">Image</a> — Display raster images with preview and lazy loading</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Wrap a QR code with context in a card layout</li>
        <li><a href="/components/dialog" class="text-primary hover:underline">Dialog</a> — Show a QR code in a modal for focused scanning</li>
    </ul>
</div>

@code {
    private string _qrValue = "";
    private string _qrEcLevel = "Medium";
    private QRCode.QRErrorLevel _qrEcLevelEnum =>
        Enum.TryParse<QRCode.QRErrorLevel>(_qrEcLevel, out var v) ? v : QRCode.QRErrorLevel.Medium;

    private string _basicCode = @"<QRCode Value=""https://lumeo.nativ.sh/"" Size=""200"" />";
    private string _dynamicCode = @"<Input @bind-Value=""_url"" Placeholder=""Enter URL..."" />
<QRCode Value=""@_url"" Size=""180"" />";
    private string _errorCode = @"<QRCode Value=""..."" ErrorCorrectionLevel=""QRCode.QRErrorLevel.Low"" />
<QRCode Value=""..."" ErrorCorrectionLevel=""QRCode.QRErrorLevel.Medium"" />
<QRCode Value=""..."" ErrorCorrectionLevel=""QRCode.QRErrorLevel.Quartile"" />
<QRCode Value=""..."" ErrorCorrectionLevel=""QRCode.QRErrorLevel.High"" />";
    private string _colorsCode = @"<QRCode Value=""..."" ForegroundColor=""white"" BackgroundColor=""transparent"" />";
    private string _sizesCode = @"<QRCode Value=""..."" Size=""80"" />
<QRCode Value=""..."" Size=""120"" />
<QRCode Value=""..."" Size=""180"" />";

    private string _ecInteractiveCode = @"<Segmented @bind-Value=""_level"">
    <SegmentedItem Value=""@QRCode.QRErrorLevel.Low"">Low</SegmentedItem>
    <SegmentedItem Value=""@QRCode.QRErrorLevel.Medium"">Medium</SegmentedItem>
    <SegmentedItem Value=""@QRCode.QRErrorLevel.Quartile"">Quartile</SegmentedItem>
    <SegmentedItem Value=""@QRCode.QRErrorLevel.High"">High</SegmentedItem>
</Segmented>
<QRCode Value=""https://lumeo.nativ.sh/"" Size=""160"" ErrorCorrectionLevel=""@_level"" />

@code { private QRCode.QRErrorLevel _level = QRCode.QRErrorLevel.Medium; }";
}
