@page "/components/barcode"

<PageTitle>Barcode — Lumeo</PageTitle>

<PageHeader Title="Barcode" Description="Renders a 1D Code 128B barcode as inline SVG. Suitable for product labels, order numbers, and any ASCII printable data." />

<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>Display a scannable 1D barcode for inventory, shipping, or order reference numbers.</li>
        <li>Embed barcodes in printable reports or labels without external dependencies.</li>
        <li>Use alongside <a href="/components/qr-code" class="text-primary hover:underline">QRCode</a> when 2D scanning is not available.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default (Code 128B)" Code="@_defaultCode">
        <Barcode Value="HELLO-WORLD" />
    </ComponentDemo>

    <ComponentDemo Title="Numeric Data" Code="@_numericCode">
        <Barcode Value="1234567890" />
    </ComponentDemo>

    <ComponentDemo Title="No Text" Code="@_noTextCode">
        <Barcode Value="ABC-123" ShowText="false" />
    </ComponentDemo>

    <ComponentDemo Title="Custom Height" Code="@_heightCode">
        <Flex Gap="6" Align="end" Wrap="true">
            <Barcode Value="SMALL" Height="40" />
            <Barcode Value="MEDIUM" Height="80" />
            <Barcode Value="TALL" Height="120" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Bar Width" Code="@_barWidthCode">
        <Flex Gap="6" Align="end" Wrap="true">
            <Barcode Value="SLIM" BarWidth="1" />
            <Barcode Value="NORMAL" BarWidth="2" />
            <Barcode Value="WIDE" BarWidth="3" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Interactive: Height & Bar Width" Description="Adjust height and bar width to preview the barcode at different sizes." Code="@_interactiveBarcodeCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <div class="flex flex-col gap-1 min-w-[220px]">
                    <Lumeo.Text Size="sm" Weight="medium">Height: @_barcodeHeight px</Lumeo.Text>
                    <Slider @bind-Value="_barcodeHeight" Min="40" Max="160" Step="5" />
                </div>
                <div class="flex flex-col gap-1 min-w-[220px]">
                    <Lumeo.Text Size="sm" Weight="medium">BarWidth: @_barcodeBarWidth</Lumeo.Text>
                    <Slider @bind-Value="_barcodeBarWidth" Min="1" Max="4" Step="1" />
                </div>
            </Flex>
            <div class="flex items-center justify-center p-6 bg-muted/30 rounded-xl border border-border/40">
                <Barcode Value="LUMEO-2026" Height="@((int)_barcodeHeight)" BarWidth="@_barcodeBarWidth" />
            </div>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-8 p-4 rounded-lg bg-muted/40 border border-border/40">
    <Heading Level="3" Class="mb-2 text-sm font-medium">Implementation Note</Heading>
    <Lumeo.Text Size="sm" Color="muted">
        This component implements a real <strong class="text-foreground">Code 128B</strong> encoder in C# (Code Set B, ASCII 32–126).
        Barcodes rendered by this component are scannable by standard 1D barcode readers.
        Only printable ASCII characters (space through tilde) are supported; characters outside this range will cause the barcode to render blank.
    </Lumeo.Text>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack>
        <Heading Level="3" Class="mb-3">Barcode</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">Data to encode. Supports ASCII 32–126 (printable characters).</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Format</td><td class="p-3 font-mono text-xs text-muted-foreground">BarcodeFormat</td><td class="p-3 font-mono text-xs text-muted-foreground">Code128</td><td class="p-3 text-muted-foreground">Barcode format. Currently Code128 (Code Set B) is fully encoded; Code39 and EAN13 are reserved for future use.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Height</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">80</td><td class="p-3 text-muted-foreground">Bar height in pixels.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">BarWidth</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">2</td><td class="p-3 text-muted-foreground">Width per narrow module in pixels. Increase for larger barcodes.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">ShowText</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">Render the value as text below the bars.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Color</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">"foreground"</td><td class="p-3 text-muted-foreground">Theme token for the bar color.</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">"background"</td><td class="p-3 text-muted-foreground">Theme token for the background fill.</td></tr>
                </tbody>
            </table>
        </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/qr-code" class="text-primary hover:underline">QRCode</a> — 2D QR barcode with error correction and optional centre image.</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<Barcode Value=""HELLO-WORLD"" />";

    private string _numericCode = @"<Barcode Value=""1234567890"" />";

    private string _noTextCode = @"<Barcode Value=""ABC-123"" ShowText=""false"" />";

    private string _heightCode = @"<Barcode Value=""SMALL"" Height=""40"" />
<Barcode Value=""MEDIUM"" Height=""80"" />
<Barcode Value=""TALL"" Height=""120"" />";

    private string _barWidthCode = @"<Barcode Value=""SLIM"" BarWidth=""1"" />
<Barcode Value=""NORMAL"" BarWidth=""2"" />
<Barcode Value=""WIDE"" BarWidth=""3"" />";

    private double _barcodeHeight = 80;
    private double _barcodeBarWidth = 2;

    private string _interactiveBarcodeCode = @"<Barcode Value=""LUMEO-2026"" Height=""80"" BarWidth=""2"" />";
}
