@page "/components/number-input"

<PageTitle>NumberInput — Lumeo</PageTitle>

<PageHeader Title="NumberInput" Description="A numeric input with increment/decrement buttons." />

<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>Quantity selectors in shopping carts or inventory forms</li>
        <li>Numeric settings such as font size, zoom level, or timeout values</li>
        <li>Price inputs requiring precise decimal control</li>
        <li>Any field where users should increment or decrement a number in defined steps</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_codeBasic">
        <NumberInput @bind-Value="_val1" />
    </ComponentDemo>

    <ComponentDemo Title="Min / Max / Step" Code="@_codeMinMax">
        <Stack Gap="2">
            <NumberInput @bind-Value="_val2" Min="0" Max="100" Step="5" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_val2 (0-100, step 5)</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Precision" Code="@_codePrecision">
        <NumberInput @bind-Value="_val3" Step="0.01" Precision="2" Min="0" />
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_codeDisabled">
        <NumberInput Value="42" Disabled="true" />
    </ComponentDemo>

    <ComponentDemo Title="Step & Precision" Description="Adjust the step size and decimal precision interactively." Code="@_codeStepPrecision">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <Lumeo.Text Size="sm" Weight="medium">Step:</Lumeo.Text>
                <Segmented @bind-Value="_numStep">
                    <SegmentedItem Value="0.1">0.1</SegmentedItem>
                    <SegmentedItem Value="0.5">0.5</SegmentedItem>
                    <SegmentedItem Value="1">1</SegmentedItem>
                    <SegmentedItem Value="5">5</SegmentedItem>
                    <SegmentedItem Value="10">10</SegmentedItem>
                </Segmented>
            </Flex>
            <Flex Align="center" Gap="3" Wrap="true">
                <Lumeo.Text Size="sm" Weight="medium">Precision:</Lumeo.Text>
                <Segmented @bind-Value="_numPrecision">
                    <SegmentedItem Value="0">0</SegmentedItem>
                    <SegmentedItem Value="1">1</SegmentedItem>
                    <SegmentedItem Value="2">2</SegmentedItem>
                    <SegmentedItem Value="3">3</SegmentedItem>
                </Segmented>
            </Flex>
            <NumberInput @bind-Value="_numInteractiveVal"
                         Step="@(double.Parse(_numStep, System.Globalization.CultureInfo.InvariantCulture))"
                         Precision="@(int.Parse(_numPrecision))"
                         Class="max-w-xs" />
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">double?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Current numeric value.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Min</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">null</td><td class="p-3 text-muted-foreground">Minimum allowed value.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Max</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">null</td><td class="p-3 text-muted-foreground">Maximum allowed value.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Step</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">1</td><td class="p-3 text-muted-foreground">Increment/decrement step size.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Precision</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">null</td><td class="p-3 text-muted-foreground">Decimal places for display.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Disabled</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">false</td><td class="p-3 text-muted-foreground">Disable the input.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">ValueChanged</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;double?&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Two-way binding callback; fires when the value changes.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Prefix</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">null</td><td class="p-3 text-muted-foreground">Text rendered before the number (e.g., "$").</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Suffix</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">null</td><td class="p-3 text-muted-foreground">Text rendered after the number (e.g., "kg").</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Culture</td><td class="p-3 font-mono text-xs text-muted-foreground">CultureInfo?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Culture used for parsing and formatting the number. Defaults to the current culture.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">UseMouseWheel</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">false</td><td class="p-3 text-muted-foreground">When true, scrolling the mouse wheel over the input adjusts the value by Step.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Required</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">false</td><td class="p-3 text-muted-foreground">Marks the field as required. Syncs with a parent FormField.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Invalid</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">false</td><td class="p-3 text-muted-foreground">Applies error styling. Syncs with a parent FormField.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">ErrorText</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">null</td><td class="p-3 text-muted-foreground">Error message displayed below the field when Invalid is true.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">HelperText</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">null</td><td class="p-3 text-muted-foreground">Helper text shown below the field when not invalid.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Label</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">null</td><td class="p-3 text-muted-foreground">Label rendered above the field (standalone, without FormField).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Name</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">null</td><td class="p-3 text-muted-foreground">HTML name attribute for form submission.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">FormField</td><td class="p-3 font-mono text-xs text-muted-foreground">FormField.FormFieldContext?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; wires label, validation, and required state automatically.</td></tr>
            </tbody>
        </table>
    </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/input" class="text-primary hover:underline">Input</a> — General-purpose text input for free-form values</li>
        <li><a href="/components/slider" class="text-primary hover:underline">Slider</a> — Visual range selection when exact precision is less important</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wrap NumberInput with validation and labels in form layouts</li>
    </ul>
</div>

@code {
    private double? _val1 = 5;
    private double? _val2 = 50;
    private double? _val3 = 9.99;

    private string _numStep = "1";
    private string _numPrecision = "0";
    private double? _numInteractiveVal = 0;

    private string _codeStepPrecision = @"<Segmented @bind-Value=""_numStep"">
    <SegmentedItem Value=""0.1"">0.1</SegmentedItem>
    <SegmentedItem Value=""0.5"">0.5</SegmentedItem>
    <SegmentedItem Value=""1"">1</SegmentedItem>
    <SegmentedItem Value=""5"">5</SegmentedItem>
    <SegmentedItem Value=""10"">10</SegmentedItem>
</Segmented>

<Segmented @bind-Value=""_numPrecision"">
    <SegmentedItem Value=""0"">0</SegmentedItem>
    <SegmentedItem Value=""1"">1</SegmentedItem>
    <SegmentedItem Value=""2"">2</SegmentedItem>
    <SegmentedItem Value=""3"">3</SegmentedItem>
</Segmented>

<NumberInput @bind-Value=""_value""
             Step=""@(double.Parse(_numStep, CultureInfo.InvariantCulture))""
             Precision=""@(int.Parse(_numPrecision))"" />

@code {
    private string _numStep = ""1"";
    private string _numPrecision = ""0"";
    private double? _value = 0;
}";

    private string _codeBasic = @"<NumberInput @bind-Value=""_value"" />";
    private string _codeMinMax = @"<NumberInput @bind-Value=""_value"" Min=""0"" Max=""100"" Step=""5"" />";
    private string _codePrecision = @"<NumberInput @bind-Value=""_value"" Step=""0.01"" Precision=""2"" />";
    private string _codeDisabled = @"<NumberInput Value=""42"" Disabled=""true"" />";
}
