@page "/blocks/reset-password"
@namespace Lumeo.Docs.Pages.Blocks

<PageTitle>Reset Password — Lumeo Blocks</PageTitle>

<PageHeader Title="Reset Password"
            Description="Two-step password reset flow: request a reset email, then show a confirmation screen with a resend link." />

<ComponentDemo Title="Reset Password Block" Code="@_code">
    <div class="flex items-center justify-center w-full bg-muted/30 rounded-[var(--radius-lg)] border border-border/40 p-8">
        <Card Class="w-full max-w-md border-border/60 shadow-lg">
            <CardContent Class="px-8 pt-10 pb-8">
                @if (!_sent)
                {
                    <Stack Gap="6">
                        <Stack Gap="4" Class="items-center text-center">
                            <Flex Class="h-12 w-12 items-center justify-center rounded-[var(--radius-lg)] bg-primary/10">
                                <Icon Name="Lock" Class="h-6 w-6 text-primary" />
                            </Flex>
                            <Stack Gap="1.5">
                                <Heading Level="1" Class="text-2xl font-bold tracking-tight">Forgot your password?</Heading>
                                <Lumeo.Text Color="muted" Size="sm" Class="max-w-xs">
                                    Enter the email associated with your account and we'll send you a reset link.
                                </Lumeo.Text>
                            </Stack>
                        </Stack>

                        <Stack Gap="4">
                            <Stack Gap="2">
                                <Label for="rp-email">Email address</Label>
                                <Lumeo.Input id="rp-email" type="email" placeholder="you@example.com"
                                             Value="@_email" OnInput="@(e => _email = e.Value?.ToString() ?? string.Empty)">
                                    <Prefix><Icon Name="Mail" Class="h-4 w-4 text-muted-foreground" /></Prefix>
                                </Lumeo.Input>
                            </Stack>

                            <Button Class="w-full" Disabled="@(string.IsNullOrWhiteSpace(_email))" OnClick="SendReset">
                                <Icon Name="Send" Class="h-4 w-4" />
                                Send reset link
                            </Button>
                        </Stack>

                        <Flex Align="center" Justify="center" Gap="2">
                            <Icon Name="ChevronLeft" Class="h-3.5 w-3.5 text-muted-foreground" />
                            <Lumeo.Link Href="/blocks/sign-in" Class="text-sm text-muted-foreground hover:text-foreground no-underline">
                                Back to sign in
                            </Lumeo.Link>
                        </Flex>
                    </Stack>
                }
                else
                {
                    <Stack Gap="6">
                        <Stack Gap="4" Class="items-center text-center">
                            <Flex Class="h-12 w-12 items-center justify-center rounded-[var(--radius-lg)] bg-emerald-500/15">
                                <Icon Name="Mail" Class="h-6 w-6 text-emerald-600" />
                            </Flex>
                            <Stack Gap="1.5">
                                <Heading Level="1" Class="text-2xl font-bold tracking-tight">Check your inbox</Heading>
                                <Lumeo.Text Color="muted" Size="sm" Class="max-w-xs">
                                    We sent a password reset link to
                                    <Lumeo.Text As="span" Weight="medium" Color="foreground">@(string.IsNullOrWhiteSpace(_email) ? "your email" : _email)</Lumeo.Text>.
                                    The link expires in 30 minutes.
                                </Lumeo.Text>
                            </Stack>
                        </Stack>

                        <Flex Class="rounded-[var(--radius-lg)] bg-muted/50 border border-border/40 px-4 py-3 gap-3" Align="start">
                            <Icon Name="Info" Class="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
                            <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                                Can't find the email? Check your spam folder or try a different address.
                            </Lumeo.Text>
                        </Flex>

                        <Stack Gap="3">
                            <Button Variant="Button.ButtonVariant.Outline" Class="w-full" OnClick="Resend">
                                <Icon Name="RefreshCw" Class="h-4 w-4" />
                                Resend email
                            </Button>
                            <Button Variant="Button.ButtonVariant.Ghost" Class="w-full" OnClick="StartOver">
                                Try a different email
                            </Button>
                        </Stack>

                        <Flex Align="center" Justify="center" Gap="2">
                            <Icon Name="ChevronLeft" Class="h-3.5 w-3.5 text-muted-foreground" />
                            <Lumeo.Link Href="/blocks/sign-in" Class="text-sm text-muted-foreground hover:text-foreground no-underline">
                                Back to sign in
                            </Lumeo.Link>
                        </Flex>
                    </Stack>
                }
            </CardContent>
        </Card>
    </div>
</ComponentDemo>

@code {
    private string _email = string.Empty;
    private bool _sent;

    private void SendReset() => _sent = true;
    private void Resend() { /* pretend resend */ }
    private void StartOver() { _sent = false; _email = string.Empty; }

    private readonly string _code = @"@if (!_sent)
{
    <Card Class=""w-full max-w-md"">
        <CardContent Class=""p-8"">
            <Stack Gap=""6"">
                <Heading Level=""1"">Forgot your password?</Heading>
                <Lumeo.Input type=""email"" placeholder=""you@example.com"" @bind-Value=""_email"">
                    <Prefix><Icon Name=""Mail"" Class=""h-4 w-4 text-muted-foreground"" /></Prefix>
                </Lumeo.Input>
                <Button Class=""w-full"" OnClick=""SendReset"">
                    <Icon Name=""Send"" Class=""h-4 w-4"" /> Send reset link
                </Button>
            </Stack>
        </CardContent>
    </Card>
}
else
{
    <Card Class=""w-full max-w-md"">
        <CardContent Class=""p-8"">
            <Stack Gap=""6"">
                <Heading Level=""1"">Check your inbox</Heading>
                <Lumeo.Text Color=""muted"">We sent a reset link to @_email.</Lumeo.Text>
                <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""Resend"">
                    <Icon Name=""RefreshCw"" Class=""h-4 w-4"" /> Resend email
                </Button>
            </Stack>
        </CardContent>
    </Card>
}

@code {
    private string _email = string.Empty;
    private bool _sent;
    private void SendReset() => _sent = true;
    private void Resend() { /* resend */ }
}";
}
