@page "/components/stepper"

<PageTitle>Stepper — Lumeo</PageTitle>

<PageHeader Title="Stepper" Description="A stateful multi-step wizard with navigation, per-step validation gating, and accessible step indicators." />

<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>Guide users through multi-step forms or onboarding flows.</li>
        <li>Break a complex task into sequential, digestible steps.</li>
        <li>Enforce step-by-step completion with validation gating before advancing.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Stepper" Code="@_basicCode">
        <Container MaxWidth="lg" Center="false">
            <Stepper @bind-ActiveStep="_step1" OnFinish="@(() => _step1Finished = true)">
                <StepperStep Title="Account Info" Description="Set up your account">
                    <Stack Gap="3">
                        <Lumeo.Text Size="sm" Color="muted">Enter your basic account information.</Lumeo.Text>
                        <Input Placeholder="Email address" />
                    </Stack>
                </StepperStep>
                <StepperStep Title="Profile" Description="Personalize your profile">
                    <Stack Gap="3">
                        <Lumeo.Text Size="sm" Color="muted">Add details to your profile.</Lumeo.Text>
                        <Input Placeholder="Display name" />
                    </Stack>
                </StepperStep>
                <StepperStep Title="Review" Description="Confirm your details">
                    <Lumeo.Text Size="sm" Color="muted">Review your information before finishing.</Lumeo.Text>
                </StepperStep>
            </Stepper>
            @if (_step1Finished)
            {
                <div class="mt-4 p-3 rounded-lg bg-primary/10 text-primary text-sm font-medium">
                    Stepper completed!
                </div>
            }
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Optional Step" Code="@_optionalCode">
        <Container MaxWidth="lg" Center="false">
            <Stepper @bind-ActiveStep="_step2">
                <StepperStep Title="Basics" Description="Required info">
                    <Input Placeholder="Your name" />
                </StepperStep>
                <StepperStep Title="Extras" Description="Additional setup" Optional="true">
                    <Lumeo.Text Size="sm" Color="muted">This step is optional. You can skip it.</Lumeo.Text>
                </StepperStep>
                <StepperStep Title="Finish">
                    <Lumeo.Text Size="sm" Color="muted">All done. Hit Finish to complete.</Lumeo.Text>
                </StepperStep>
            </Stepper>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Vertical Orientation" Code="@_verticalCode">
        <Container MaxWidth="md" Center="false">
            <Stepper @bind-ActiveStep="_step3" Orientation="Stepper.StepperOrientation.Vertical">
                <StepperStep Title="Choose plan" Description="Pick a subscription">
                    <Lumeo.Text Size="sm" Color="muted">Select the plan that fits your needs.</Lumeo.Text>
                </StepperStep>
                <StepperStep Title="Payment" Description="Enter billing details">
                    <Input Placeholder="Card number" />
                </StepperStep>
                <StepperStep Title="Confirm">
                    <Lumeo.Text Size="sm" Color="muted">Confirm and activate your subscription.</Lumeo.Text>
                </StepperStep>
            </Stepper>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_stepperOrientationSel" Options="_stepperOrientationOptions" />
            <Container MaxWidth="lg" Center="false">
                <Stepper @bind-ActiveStep="_stepperInteractiveStep" Orientation="@_activeStepperOrientation">
                    <StepperStep Title="Account Info" Description="Set up your account">
                        <Input Placeholder="Email address" />
                    </StepperStep>
                    <StepperStep Title="Profile" Description="Personalize your profile">
                        <Input Placeholder="Display name" />
                    </StepperStep>
                    <StepperStep Title="Review" Description="Confirm your details">
                        <Lumeo.Text Size="sm" Color="muted">Review your information before finishing.</Lumeo.Text>
                    </StepperStep>
                </Stepper>
            </Container>
        </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">Stepper</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">ActiveStep</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">0</td><td class="p-3 text-muted-foreground">The zero-based index of the active step. Use with @@bind-ActiveStep for two-way binding.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ActiveStepChanged</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;int&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Callback invoked when the active step index changes.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Orientation</td><td class="p-3 font-mono text-xs text-muted-foreground">StepperOrientation</td><td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td><td class="p-3 text-muted-foreground">Layout direction. Values: Stepper.StepperOrientation.Horizontal, Vertical.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Linear</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">When true, users cannot skip ahead past an incomplete step.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">AllowStepClick</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, clicking a header step indicator navigates to that step (respects Linear).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OnFinish</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 user clicks Finish on the last step.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">NextLabel</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">"Next"</td><td class="p-3 text-muted-foreground">Label for the Next button.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">BackLabel</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">"Back"</td><td class="p-3 text-muted-foreground">Label for the Back button.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FinishLabel</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">"Finish"</td><td class="p-3 text-muted-foreground">Label for the Finish button (shown on the last step).</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">StepperStep</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">Title</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 step's title shown in the header indicator.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Description</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">Optional subtitle shown beneath the title.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Optional</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, shows an "Optional" label below the description.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IsValid</td><td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;bool&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">When set, the Next button is disabled if this returns false (Linear mode gating).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IconContent</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">null</td><td class="p-3 text-muted-foreground">Custom icon for the step indicator (overrides number/check).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</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">null</td><td class="p-3 text-muted-foreground">Body content for this step, displayed when the step is active.</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/steps" class="text-primary hover:underline">Steps</a> — Display-only step indicator for showing progress in a flow.</li>
        <li><a href="/components/tabs" class="text-primary hover:underline">Tabs</a> — Use when sections are independent and can be accessed in any order.</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — A linear bar for showing overall completion percentage.</li>
    </ul>
</div>

@code {
    private int _step1;
    private bool _step1Finished;
    private int _step2;
    private int _step3;
    private int _stepperInteractiveStep;

    // Interactive: Orientation
    private string _stepperOrientationSel = "Horizontal";
    private Stepper.StepperOrientation _activeStepperOrientation => Enum.Parse<Stepper.StepperOrientation>(_stepperOrientationSel);
    private List<Segmented.SegmentedOption> _stepperOrientationOptions = new()
    {
        new() { Label = "Horizontal", Value = "Horizontal" },
        new() { Label = "Vertical", Value = "Vertical" },
    };
    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientationSel"" Options=""_orientationOptions"" />
<Stepper @bind-ActiveStep=""_step"" Orientation=""@_activeStepperOrientation"">
    <StepperStep Title=""Account Info"" Description=""Set up your account"">
        <Input Placeholder=""Email address"" />
    </StepperStep>
    <StepperStep Title=""Profile"" Description=""Personalize your profile"">
        <Input Placeholder=""Display name"" />
    </StepperStep>
    <StepperStep Title=""Review"" Description=""Confirm your details"">
        <Lumeo.Text Size=""sm"" Color=""muted"">Review your information.</Lumeo.Text>
    </StepperStep>
</Stepper>

@code {
    private string _orientationSel = ""Horizontal"";
    private Stepper.StepperOrientation _activeStepperOrientation =>
        Enum.Parse<Stepper.StepperOrientation>(_orientationSel);
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = ""Horizontal"", Value = ""Horizontal"" },
        new() { Label = ""Vertical"", Value = ""Vertical"" },
    };
}";

    private string _basicCode = @"<Stepper @bind-ActiveStep=""_step"" OnFinish=""HandleFinish"">
    <StepperStep Title=""Account Info"" Description=""Set up your account"">
        <Input Placeholder=""Email address"" />
    </StepperStep>
    <StepperStep Title=""Profile"" Description=""Personalize your profile"">
        <Input Placeholder=""Display name"" />
    </StepperStep>
    <StepperStep Title=""Review"">
        <Lumeo.Text Size=""sm"" Color=""muted"">Review your information.</Lumeo.Text>
    </StepperStep>
</Stepper>

@code {
    private int _step;
    private void HandleFinish() { /* complete */ }
}";

    private string _optionalCode = @"<Stepper @bind-ActiveStep=""_step"">
    <StepperStep Title=""Basics"">
        <Input Placeholder=""Your name"" />
    </StepperStep>
    <StepperStep Title=""Extras"" Optional=""true"">
        <Lumeo.Text Size=""sm"" Color=""muted"">This step is optional.</Lumeo.Text>
    </StepperStep>
    <StepperStep Title=""Finish"">
        <Lumeo.Text Size=""sm"" Color=""muted"">All done.</Lumeo.Text>
    </StepperStep>
</Stepper>";

    private string _verticalCode = @"<Stepper @bind-ActiveStep=""_step"" Orientation=""Stepper.StepperOrientation.Vertical"">
    <StepperStep Title=""Choose plan"" Description=""Pick a subscription"">
        <Lumeo.Text Size=""sm"" Color=""muted"">Select the plan that fits your needs.</Lumeo.Text>
    </StepperStep>
    <StepperStep Title=""Payment"" Description=""Enter billing details"">
        <Input Placeholder=""Card number"" />
    </StepperStep>
    <StepperStep Title=""Confirm"">
        <Lumeo.Text Size=""sm"" Color=""muted"">Confirm and activate.</Lumeo.Text>
    </StepperStep>
</Stepper>";
}
