@page "/components/input"

<PageTitle>Input — Lumeo</PageTitle>

<PageHeader Title="Input" Description="Displays a form input field." />

<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>Collect single-line text input such as names, emails, or search queries.</li>
        <li>Build form fields for login, registration, or profile editing flows.</li>
        <li>Pair with prefix/suffix slots for currency inputs, search bars, or URL fields.</li>
    </ul>
</div>

<div class="mt-6">
    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true">
        <ChildContent>
            For validation, label, and helper text, wrap this input in <code class="font-mono text-xs">&lt;FormField&gt;</code>.
            See <a href="/components/form#validation-pattern" class="underline font-medium">Form &rsaquo; Validation Pattern</a>.
        </ChildContent>
    </Alert>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Input placeholder="Email" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Binding" Code="@_bindingCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Input Value="@_name" OnInput="@(e => _name = e.Value?.ToString() ?? "")" placeholder="Enter your name" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_name</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="File Input" Code="@_fileCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Input type="file" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Input placeholder="Disabled input" disabled />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <FormField Label="Email">
                <Input type="email" placeholder="name@example.com" />
            </FormField>
            <FormField Label="Password">
                <Input type="password" placeholder="Enter password" />
            </FormField>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Label and Help Text" Code="@_helpTextCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <FormField Label="Username" HelpText="This will be your public display name.">
                <Input placeholder="johndoe" />
            </FormField>
            <FormField Label="Promo Code" HelpText="Enter a valid promo code to receive a discount.">
                <Input placeholder="SAVE20" Class="uppercase" />
            </FormField>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Input with Icon" Code="@_iconInputCode">
        <Stack Gap="3" Class="w-full max-w-sm">
            <Stack Class="relative">
                <DynamicIcon Name="Search" Class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                <Input Class="pl-9" placeholder="Search..." />
            </Stack>
            <Stack Class="relative">
                <DynamicIcon Name="Mail" Class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                <Input type="email" Class="pl-9" placeholder="name@example.com" />
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Input with Button" Code="@_inputButtonCode">
        <Stack Gap="3" Class="w-full max-w-sm">
            <Flex Gap="2">
                <Input placeholder="Subscribe to newsletter..." Class="flex-1" />
                <Button>Subscribe</Button>
            </Flex>
            <Flex Gap="2">
                <Input placeholder="Invite by email..." Class="flex-1" />
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="Plus" Class="h-4 w-4" />
                    Invite
                </Button>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Prefix &amp; Suffix" Code="@_prefixSuffixCode">
        <Stack Gap="3" Class="w-full max-w-sm">
            <Lumeo.Input Placeholder="Search...">
                <Prefix><DynamicIcon Name="Search" Class="h-4 w-4 text-muted-foreground" /></Prefix>
            </Lumeo.Input>
            <Lumeo.Input Placeholder="Enter amount">
                <Prefix><Lumeo.Text As="span" Size="sm" Color="muted">$</Lumeo.Text></Prefix>
                <Suffix><Lumeo.Text As="span" Size="sm" Color="muted">USD</Lumeo.Text></Suffix>
            </Lumeo.Input>
            <Lumeo.Input type="email" Placeholder="Email">
                <Prefix><DynamicIcon Name="Mail" Class="h-4 w-4 text-muted-foreground" /></Prefix>
                <Suffix><DynamicIcon Name="Check" Class="h-4 w-4 text-green-500" /></Suffix>
            </Lumeo.Input>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive preview" Code="@_interactiveSizeCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see the height change live.</Lumeo.Text>
            <Segmented @bind-Value="_previewSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <Input Size="_inputSizeEnum" Placeholder="@($"Size = {_previewSize}")" />
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Moves focus into or out of the input field.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Clears the input value when a clearable behavior is implemented.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Submits the parent form when the input is inside a form element.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Input</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">null</td>
                            <td class="p-3 text-muted-foreground">The current value of the input field.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnInput</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;ChangeEventArgs&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked on every keystroke as 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">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Content rendered before the input.</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">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Content rendered after 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 value changes.</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">InputSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Default</td><td class="p-3 text-muted-foreground">Control height. Values: Sm, Default, Lg.</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 user interaction and applies disabled styling.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Clearable</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">Shows an inline clear button when the value is non-empty.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OnClear</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Invoked when the clear button is clicked.</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; forwarded to FormField when nested.</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 a destructive ring to indicate a validation error.</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 shown below the field when Invalid is true (standalone, not inside FormField).</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">Help text shown below the field when there is no error (standalone, not inside FormField).</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">Inline label rendered above the input (standalone, not inside 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 identification and EditForm binding.</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">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. Drives Invalid, Required, and error display automatically.</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/textarea" class="text-primary hover:underline">Textarea</a> — Use for multi-line text input like comments or descriptions.</li>
        <li><a href="/components/otp-input" class="text-primary hover:underline">OtpInput</a> — Specialized input for one-time password or verification codes.</li>
        <li><a href="/components/select" class="text-primary hover:underline">Select</a> — Use when the input value must come from a predefined list.</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wraps inputs with validation, labels, and error messages.</li>
    </ul>
</div>

@code {
    private string _name = "";
    private string _previewSize = "Default";
    private Input.InputSize _inputSizeEnum =>
        Enum.TryParse<Input.InputSize>(_previewSize, out var s) ? s : Input.InputSize.Default;

    private string _interactiveSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
</Segmented>
<Input Size=""@Enum.Parse<Input.InputSize>(_size)"" Placeholder=""@($""Size = {_size}"")"" />

@code {
    private string _size = ""Default"";
}";

    private string _defaultCode = @"<Input placeholder=""Email"" />";

    private string _bindingCode = @"<Input Value=""@_name"" OnInput=""@(e => _name = e.Value?.ToString() ?? """")"" placeholder=""Enter your name"" />
<Lumeo.Text Size=""sm"" Color=""muted"">Value: @_name</Lumeo.Text>

@code {
    private string _name = """";
}";

    private string _fileCode = @"<Input type=""file"" />";

    private string _disabledCode = @"<Input placeholder=""Disabled input"" disabled />";

    private string _labelCode = @"<FormField Label=""Email"">
    <Input type=""email"" placeholder=""name@example.com"" />
</FormField>
<FormField Label=""Password"">
    <Input type=""password"" placeholder=""Enter password"" />
</FormField>";

    private string _helpTextCode = @"<FormField Label=""Username"" HelpText=""This will be your public display name."">
    <Input placeholder=""johndoe"" />
</FormField>";

    private string _iconInputCode = @"<Lumeo.Input Placeholder=""Search..."">
    <Prefix><Blazicon Svg=""Lucide.Search"" class=""h-4 w-4 text-muted-foreground"" /></Prefix>
</Lumeo.Input>
<Lumeo.Input type=""email"" Placeholder=""name@example.com"">
    <Prefix><Blazicon Svg=""Lucide.Mail"" class=""h-4 w-4 text-muted-foreground"" /></Prefix>
</Lumeo.Input>";

    private string _inputButtonCode = @"<Flex Gap=""2"">
    <Input placeholder=""Subscribe to newsletter..."" Class=""flex-1"" />
    <Button>Subscribe</Button>
</Flex>
<Flex Gap=""2"">
    <Input placeholder=""Invite by email..."" Class=""flex-1"" />
    <Button Variant=""Button.ButtonVariant.Outline"">
        <Blazicon Svg=""Lucide.Plus"" class=""h-4 w-4"" /> Invite
    </Button>
</Flex>";

    private string _prefixSuffixCode = @"<Input Placeholder=""Search..."">
    <Prefix><Blazicon Svg=""Lucide.Search"" class=""h-4 w-4 text-muted-foreground"" /></Prefix>
</Input>
<Input Placeholder=""Enter amount"">
    <Prefix><Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">$</Lumeo.Text></Prefix>
    <Suffix><Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">USD</Lumeo.Text></Suffix>
</Input>
<Input type=""email"" Placeholder=""Email"">
    <Prefix><Blazicon Svg=""Lucide.Mail"" class=""h-4 w-4 text-muted-foreground"" /></Prefix>
    <Suffix><Blazicon Svg=""Lucide.Check"" class=""h-4 w-4 text-green-500"" /></Suffix>
</Input>";
}
