@page "/components/input-mask"

<PageTitle>Input Mask — Lumeo</PageTitle>

<PageHeader Title="Input Mask" Description="A masked input that enforces a specific format pattern — ideal for phone numbers, dates, credit cards, and other structured data entry." />

<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>Phone number inputs with automatic formatting</li>
        <li>Credit card number fields with digit grouping</li>
        <li>Date entry enforcing MM/DD/YYYY or similar patterns</li>
        <li>Any structured input where a fixed format reduces user errors</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Phone Number" Code="@_phoneCode">
        <Stack Gap="3" Class="max-w-xs">
            <InputMask @bind-Value="_phone" Mask="(###) ###-####" />
            <Lumeo.Text Class="text-sm text-muted-foreground">Value: @_phone</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Date Mask" Code="@_dateCode">
        <Stack Gap="3" Class="max-w-xs">
            <InputMask @bind-Value="_date" Mask="##/##/####" Placeholder="MM/DD/YYYY" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Credit Card" Code="@_cardCode">
        <Stack Gap="3" Class="max-w-xs">
            <InputMask @bind-Value="_card" Mask="#### #### #### ####" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="IP Address" Code="@_ipCode">
        <Stack Gap="3" Class="max-w-xs">
            <InputMask @bind-Value="_ip" Mask="###.###.###.###" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Prompt Character" Code="@_promptCode">
        <Stack Gap="3" Class="max-w-xs">
            <InputMask @bind-Value="_serial" Mask="AA-####-AA" PromptChar="@('?')" />
            <Lumeo.Text Class="text-xs text-muted-foreground">'?' prompt char instead of default '_'</Lumeo.Text>
        </Stack>
    </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">InputMask</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 raw (unmasked) value. Supports two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Mask</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"># = digit, A = letter, * = any character. Other chars are treated as literal separators.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PromptChar</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">char</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">'_'</td>
                            <td class="p-3 text-muted-foreground">Character shown as placeholder for unfilled positions.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placeholder</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">Override the auto-generated mask placeholder.</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">Disables 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;string?&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 masked value changes.</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>
        <Stack>
            <Heading Level="3" Class="mb-3">Mask Characters</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">Character</th>
                            <th class="text-left p-3 font-medium text-foreground">Matches</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">#</td>
                            <td class="p-3 text-muted-foreground">Any digit (0–9)</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">A</td>
                            <td class="p-3 text-muted-foreground">Any letter (a–z, A–Z)</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">*</td>
                            <td class="p-3 text-muted-foreground">Any character</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/input" class="text-primary hover:underline">Input</a> — Free-form text input without format constraints</li>
        <li><a href="/components/number-input" class="text-primary hover:underline">NumberInput</a> — Numeric input with increment/decrement for pure number values</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wrap InputMask with validation and labels in form layouts</li>
    </ul>
</div>

@code {
    private string? _phone;
    private string? _date;
    private string? _card;
    private string? _ip;
    private string? _serial;

    private string _phoneCode = @"<InputMask @bind-Value=""_phone"" Mask=""(###) ###-####"" />";
    private string _dateCode = @"<InputMask @bind-Value=""_date"" Mask=""##/##/####"" Placeholder=""MM/DD/YYYY"" />";
    private string _cardCode = @"<InputMask @bind-Value=""_card"" Mask=""#### #### #### ####"" />";
    private string _ipCode = @"<InputMask @bind-Value=""_ip"" Mask=""###.###.###.###"" />";
    private string _promptCode = @"<InputMask @bind-Value=""_serial"" Mask=""AA-####-AA"" PromptChar=""?"" />";
}
