@page "/components/password-input"

<PageTitle>Password Input — Lumeo</PageTitle>

<PageHeader Title="Password Input" Description="A password field with built-in visibility toggle and optional strength meter — provides clear feedback as users create secure passwords." />

<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>Login forms where users enter existing passwords</li>
        <li>Registration flows where you want to show password strength feedback</li>
        <li>Password change or reset screens</li>
        <li>Any secure input that benefits from a show/hide visibility toggle</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Password Input" Code="@_basicCode">
        <PasswordInput @bind-Value="_password" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="With Strength Meter" Code="@_strengthCode">
        <Stack Gap="2" Class="max-w-sm">
            <PasswordInput @bind-Value="_password2" ShowStrength="true" />
            <Lumeo.Text Class="text-xs text-muted-foreground">Try: "abc", "abc123", "Abc123!", "Abc123!@@#xyz"</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Without Toggle Button" Code="@_noToggleCode">
        <PasswordInput @bind-Value="_password3" ShowToggle="false" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="With Strength + Custom Placeholder" Code="@_customCode">
        <PasswordInput @bind-Value="_password4"
                       ShowStrength="true"
                       Placeholder="Create a strong password"
                       Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <PasswordInput Value="secretpassword" Disabled="true" Class="max-w-sm" />
    </ComponentDemo>

    <ComponentDemo Title="Interactive Options" Description="Toggle the strength meter and visibility button on and off." Code="@_interactiveCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="6" Wrap="true">
                <Flex Align="center" Gap="2">
                    <Lumeo.Text Size="sm" Weight="medium">Show Strength:</Lumeo.Text>
                    <Switch @bind-Checked="_pwShowStrength" />
                </Flex>
                <Flex Align="center" Gap="2">
                    <Lumeo.Text Size="sm" Weight="medium">Show Toggle:</Lumeo.Text>
                    <Switch @bind-Checked="_pwShowToggle" />
                </Flex>
            </Flex>
            <PasswordInput Value="@_pwLiveValue"
                           ValueChanged="@(v => _pwLiveValue = v)"
                           ShowStrength="@_pwShowStrength"
                           ShowToggle="@_pwShowToggle"
                           Class="max-w-sm" />
        </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">PasswordInput</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 current password value. Supports two-way binding.</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">"Enter password"</td>
                            <td class="p-3 text-muted-foreground">Input placeholder text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowToggle</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">Show the eye icon to toggle password visibility.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowStrength</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">Show a 4-bar strength indicator below the input.</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;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">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>
</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> — Standard text input for non-sensitive fields</li>
        <li><a href="/components/form" class="text-primary hover:underline">Form</a> — Wrap PasswordInput with validation and labels in form layouts</li>
        <li><a href="/components/otp-input" class="text-primary hover:underline">OtpInput</a> — Fixed-length code entry for 2FA and verification flows</li>
    </ul>
</div>

@code {
    private string? _password;
    private string? _password2;
    private string? _password3;
    private string? _password4;

    private string? _pwLiveValue;
    private bool _pwShowStrength = true;
    private bool _pwShowToggle = true;

    private string _interactiveCode = @"<Switch @bind-Checked=""_showStrength"" />
<Switch @bind-Checked=""_showToggle"" />

<PasswordInput Value=""@_password""
               ValueChanged=""@(v => _password = v)""
               ShowStrength=""@_showStrength""
               ShowToggle=""@_showToggle"" />

@code {
    private string? _password;
    private bool _showStrength = true;
    private bool _showToggle = true;
}";

    private string _basicCode = @"<PasswordInput @bind-Value=""_password"" />";
    private string _strengthCode = @"<PasswordInput @bind-Value=""_password"" ShowStrength=""true"" />";
    private string _noToggleCode = @"<PasswordInput @bind-Value=""_password"" ShowToggle=""false"" />";
    private string _customCode = @"<PasswordInput @bind-Value=""_password""
               ShowStrength=""true""
               Placeholder=""Create a strong password"" />";
    private string _disabledCode = @"<PasswordInput Value=""secretpassword"" Disabled=""true"" />";
}
