@page "/components/steps"

<PageTitle>Steps — Lumeo</PageTitle>

<PageHeader Title="Steps" Description="A step tracker for multi-step workflows and wizards." />

<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>Multi-step processes such as forms, registrations, or checkout flows</li>
        <li>Setup wizards that guide users through sequential configuration</li>
        <li>Onboarding flows where users complete tasks in a defined order</li>
        <li>Checkout or payment workflows with clearly defined stages</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Steps" Code="@_codeBasic">
        <Steps CurrentStep="1" Class="w-full max-w-lg">
            <StepsItem Title="Account" Description="Create your account" />
            <StepsItem Title="Profile" Description="Set up your profile" />
            <StepsItem Title="Complete" Description="All done" />
        </Steps>
    </ComponentDemo>

    <ComponentDemo Title="Interactive Steps" Code="@_codeInteractive">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Steps @bind-CurrentStep="_currentStep" Clickable="true" Class="w-full">
                    <StepsItem Title="Details" />
                    <StepsItem Title="Payment" />
                    <StepsItem Title="Review" />
                    <StepsItem Title="Confirm" />
                </Steps>
                <Lumeo.Text Size="sm" Color="muted" Align="center">Current step: @_currentStep</Lumeo.Text>
                <Flex Justify="center" Gap="2">
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" OnClick="() => { if (_currentStep > 0) _currentStep--; }">Previous</Button>
                    <Button Size="Button.ButtonSize.Sm" OnClick="() => { if (_currentStep < 3) _currentStep++; }">Next</Button>
                </Flex>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Vertical Steps" Code="@_codeVertical">
        <Steps CurrentStep="2" Orientation="Steps.StepsOrientation.Vertical" Class="max-w-sm">
            <StepsItem Title="Sign Up" Description="Create an account" />
            <StepsItem Title="Verify Email" Description="Confirm your email address" />
            <StepsItem Title="Set Password" Description="Choose a secure password" />
            <StepsItem Title="Done" Description="Start using the app" />
        </Steps>
    </ComponentDemo>

    <ComponentDemo Title="Orientation (interactive)" Code="@_codeOrientationInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch orientation to compare horizontal and vertical layouts.</Lumeo.Text>
            <Segmented @bind-Value="_stepsOrientation">
                <SegmentedItem Value="Horizontal">Horizontal</SegmentedItem>
                <SegmentedItem Value="Vertical">Vertical</SegmentedItem>
            </Segmented>
            <Steps CurrentStep="1" Orientation="@_stepsOrientationEnum" Class="@(_stepsOrientation == "Vertical" ? "max-w-xs" : "w-full")">
                <StepsItem Title="Account" Description="Create your account" />
                <StepsItem Title="Profile" Description="Set up your profile" />
                <StepsItem Title="Payment" Description="Add billing info" />
                <StepsItem Title="Done" Description="All finished" />
            </Steps>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Animated Steps" Code="@_codeAnimated">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Steps @bind-CurrentStep="_animatedStep" Animated="true" Class="w-full">
                    <StepsItem Title="Account" Description="Create your account" />
                    <StepsItem Title="Profile" Description="Set up your profile" />
                    <StepsItem Title="Payment" Description="Add billing" />
                    <StepsItem Title="Complete" Description="All done" />
                </Steps>
                <Flex Justify="center" Gap="2">
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" OnClick="() => { if (_animatedStep > 0) _animatedStep--; }">Previous</Button>
                    <Button Size="Button.ButtonSize.Sm" OnClick="() => { if (_animatedStep < 3) _animatedStep++; }">Next</Button>
                </Flex>
                <Lumeo.Text Size="xs" Color="muted" Align="center">
                    Active dot pulses; the connector draws in on Next and retracts on Previous.
                </Lumeo.Text>
            </Stack>
        </Container>
    </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">Steps</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">CurrentStep</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">Zero-based index of the current step.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Clickable</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">Allow clicking on steps to navigate.</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">StepsOrientation</td><td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td><td class="p-3 text-muted-foreground">Layout direction. Values: Horizontal, Vertical.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Animated</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, the current step's indicator pulses and completed connectors draw themselves in.</td></tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">CurrentStepChanged</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">Two-way binding callback for the active step index.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">StepsItem</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">null</td><td class="p-3 text-muted-foreground">Step title text.</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 description below the title.</td></tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Status</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">StepsItemStatus</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Auto</td>
                            <td class="p-3 text-muted-foreground">Explicit status override. Values: Auto, Upcoming, Active, Complete, Error.</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 slot for this step.</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/progress" class="text-primary hover:underline">Progress</a> — Show completion percentage instead of discrete steps</li>
        <li><a href="/components/tabs" class="text-primary hover:underline">Tabs</a> — Switch between views without implying sequential order</li>
        <li><a href="/components/timeline" class="text-primary hover:underline">Timeline</a> — Display events chronologically rather than as actionable steps</li>
    </ul>
</div>

@code {
    private string _stepsOrientation = "Horizontal";
    private Steps.StepsOrientation _stepsOrientationEnum =>
        Enum.TryParse<Steps.StepsOrientation>(_stepsOrientation, out var v) ? v : Steps.StepsOrientation.Horizontal;
    private int _currentStep = 0;
    private int _animatedStep = 1;

    private string _codeBasic = @"<Steps CurrentStep=""1"">
    <StepsItem Title=""Account"" Description=""Create your account"" />
    <StepsItem Title=""Profile"" Description=""Set up your profile"" />
    <StepsItem Title=""Complete"" Description=""All done"" />
</Steps>";

    private string _codeInteractive = @"<Steps @bind-CurrentStep=""_step"" Clickable=""true"">
    <StepsItem Title=""Details"" />
    <StepsItem Title=""Payment"" />
    <StepsItem Title=""Review"" />
    <StepsItem Title=""Confirm"" />
</Steps>";

    private string _codeVertical = @"<Steps CurrentStep=""2"" Orientation=""Steps.StepsOrientation.Vertical"">
    <StepsItem Title=""Sign Up"" Description=""Create an account"" />
    <StepsItem Title=""Verify Email"" Description=""Confirm your email"" />
    <StepsItem Title=""Set Password"" Description=""Choose a password"" />
    <StepsItem Title=""Done"" Description=""Start using the app"" />
</Steps>";

    private string _codeOrientationInteractive = @"<Segmented @bind-Value=""_orientation"">
    <SegmentedItem Value=""@Steps.StepsOrientation.Horizontal"">Horizontal</SegmentedItem>
    <SegmentedItem Value=""@Steps.StepsOrientation.Vertical"">Vertical</SegmentedItem>
</Segmented>
<Steps CurrentStep=""1"" Orientation=""@_orientation"">
    <StepsItem Title=""Account"" Description=""Create your account"" />
    <StepsItem Title=""Profile"" Description=""Set up your profile"" />
    <StepsItem Title=""Payment"" Description=""Add billing info"" />
    <StepsItem Title=""Done"" Description=""All finished"" />
</Steps>

@code { private Steps.StepsOrientation _orientation = Steps.StepsOrientation.Horizontal; }";

    private string _codeAnimated = @"<Steps @bind-CurrentStep=""_step"" Animated=""true"">
    <StepsItem Title=""Account"" Description=""Create your account"" />
    <StepsItem Title=""Profile"" Description=""Set up your profile"" />
    <StepsItem Title=""Payment"" Description=""Add billing"" />
    <StepsItem Title=""Complete"" Description=""All done"" />
</Steps>
<Flex Justify=""center"" Gap=""2"">
    <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""() => { if (_step > 0) _step--; }"">Previous</Button>
    <Button OnClick=""() => { if (_step < 3) _step++; }"">Next</Button>
</Flex>";
}
