@page "/components/progress"

<PageTitle>Progress — Lumeo</PageTitle>

<PageHeader Title="Progress" Description="Displays a progress bar indicating completion status." />

<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>Show upload or download progress with a percentage bar</li>
        <li>Indicate loading states when the duration is known or estimable</li>
        <li>Visualize step completion in multi-step workflows or wizards</li>
        <li>Display capacity usage such as storage, quotas, or limits</li>
        <li>Use the indeterminate variant for operations with unknown duration</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Stack Gap="2">
                    <Flex Justify="between">
                        <Lumeo.Text As="span" Size="sm" Color="muted">25%</Lumeo.Text>
                    </Flex>
                    <Progress Value="25" />
                </Stack>
                <Stack Gap="2">
                    <Flex Justify="between">
                        <Lumeo.Text As="span" Size="sm" Color="muted">50%</Lumeo.Text>
                    </Flex>
                    <Progress Value="50" />
                </Stack>
                <Stack Gap="2">
                    <Flex Justify="between">
                        <Lumeo.Text As="span" Size="sm" Color="muted">75%</Lumeo.Text>
                    </Flex>
                    <Progress Value="75" />
                </Stack>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Variants" Code="@_variantCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Stack Gap="1">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Default</Lumeo.Text>
                    <Progress Value="60" />
                </Stack>
                <Stack Gap="1">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Success</Lumeo.Text>
                    <Progress Value="100" Variant="Progress.ProgressVariant.Success" />
                </Stack>
                <Stack Gap="1">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Warning</Lumeo.Text>
                    <Progress Value="45" Variant="Progress.ProgressVariant.Warning" />
                </Stack>
                <Stack Gap="1">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Destructive</Lumeo.Text>
                    <Progress Value="80" Variant="Progress.ProgressVariant.Destructive" />
                </Stack>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Interactive" Code="@_interactiveCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Progress Value="@_value" />
                <Flex Align="center" Gap="2">
                    <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" OnClick="Decrease">-10</Button>
                    <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground" Class="min-w-[3ch] text-center">@_value%</Lumeo.Text>
                    <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" OnClick="Increase">+10</Button>
                </Flex>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Indeterminate" Code="@_indeterminateCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Stack Gap="4">
                <Progress IsIndeterminate="true" />
                <Progress IsIndeterminate="true" Variant="Progress.ProgressVariant.Success" />
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Label" Code="@_labelCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Stack Gap="4">
                <Progress Value="65" ShowLabel="true" />
                <Progress Value="40" ShowLabel="true" Label="Uploading..." />
                <Progress Value="90" ShowLabel="true" Variant="Progress.ProgressVariant.Success" />
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Animated Stripes" Code="@_stripeCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Progress Value="60" Animation="Progress.ProgressAnimation.Stripe" />
                <Progress Value="75" Animation="Progress.ProgressAnimation.Stripe" Variant="Progress.ProgressVariant.Success" />
                <Progress Value="45" Animation="Progress.ProgressAnimation.Stripe" Variant="Progress.ProgressVariant.Warning" />
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Indeterminate Sweep" Code="@_indeterminateSweepCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Progress Animation="Progress.ProgressAnimation.Indeterminate" />
                <Progress Animation="Progress.ProgressAnimation.Indeterminate" Variant="Progress.ProgressVariant.Success" />
                <Lumeo.Text Size="xs" Color="muted">
                    Use when the operation's duration is unknown. A narrow bright segment slides continuously from left to right.
                </Lumeo.Text>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Glow Pulse" Code="@_glowCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Progress Value="70" Animation="Progress.ProgressAnimation.Glow" />
                <Progress Value="40" Animation="Progress.ProgressAnimation.Glow" Variant="Progress.ProgressVariant.Success" />
                <Lumeo.Text Size="xs" Color="muted">
                    The fill bar breathes — suggests "active / in progress" without overwhelming motion.
                </Lumeo.Text>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Lumeo.Text Size="sm" Color="muted">Pick a variant to see it applied live.</Lumeo.Text>
                <Flex Wrap="true" Gap="2">
                    @foreach (var v in new[] { Progress.ProgressVariant.Default, Progress.ProgressVariant.Success, Progress.ProgressVariant.Warning, Progress.ProgressVariant.Destructive })
                    {
                        var variant = v;
                        <Button Size="Button.ButtonSize.Sm"
                                Variant="@(_progressVariant == variant ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                                OnClick="@(() => _progressVariant = variant)">@variant</Button>
                    }
                </Flex>
                <Progress Value="65" Variant="@_progressVariant" ShowLabel="true" />
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Shape — interactive" Code="@_shapeInteractiveCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Lumeo.Text Size="sm" Color="muted">Pick a shape to see it applied live.</Lumeo.Text>
                <Flex Gap="2">
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_progressShape == Progress.ProgressShape.Linear ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _progressShape = Progress.ProgressShape.Linear)">Linear</Button>
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_progressShape == Progress.ProgressShape.Circular ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _progressShape = Progress.ProgressShape.Circular)">Circular</Button>
                </Flex>
                <Progress Value="72" Shape="@_progressShape" ShowLabel="true" />
            </Stack>
        </Container>
    </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 colspan="2"><Lumeo.Text Size="sm" Color="muted">Progress is a display-only component and has no keyboard interactions.</Lumeo.Text></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>
            <Heading Level="3" Class="mb-3">Progress</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">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">0</td>
                            <td class="p-3 text-muted-foreground">Current progress value. Rendered as a percentage relative to Max.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Max</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">100</td>
                            <td class="p-3 text-muted-foreground">Maximum value for the progress bar.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ProgressVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Color variant. Values: Default, Success, Warning, Destructive.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsIndeterminate</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 animated indeterminate state.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLabel</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, displays a percentage or custom label.</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">Custom label text when ShowLabel is true.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Animation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ProgressAnimation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Opt-in fill animation. Values: None (default), Stripe (diagonal stripes sweep), Indeterminate (narrow segment slides continuously — Value ignored), Glow (fill bar box-shadow pulses). Linear shape only.</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">true</td>
                            <td class="p-3 text-muted-foreground">Enables CSS transitions on value changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Shape</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ProgressShape</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Linear</td>
                            <td class="p-3 text-muted-foreground">Progress shape. Values: Linear, Circular.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Striped</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">Renders the fill with a diagonal striped pattern.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">StrokeWidth</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">8</td>
                            <td class="p-3 text-muted-foreground">Thickness of the progress bar fill, in pixels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowValue</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">Displays the numeric value inside the bar.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">GradientFrom</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 starting color for a gradient fill (CSS color).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">GradientTo</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 ending color for a gradient fill (CSS color).</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">ProgressSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Height of the bar. Values: Sm, Default, Lg.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">CircularProgress</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">int</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Current progress value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Max</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">100</td><td class="p-3 text-muted-foreground">Maximum value.</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">int</td><td class="p-3 font-mono text-xs text-muted-foreground">48</td><td class="p-3 text-muted-foreground">Diameter of the circle, in pixels.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">StrokeWidth</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">4</td><td class="p-3 text-muted-foreground">Stroke width of the circular arc, in pixels.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowValue</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">Renders the numeric value in the center of the circle.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Format</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">"{0}%"</td><td class="p-3 text-muted-foreground">Format string for the displayed value.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">StepsProgress</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">Steps</td><td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Labels for each step.</td></tr>
                        <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">Index of the active step.</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">string</td><td class="p-3 font-mono text-xs text-muted-foreground">"horizontal"</td><td class="p-3 text-muted-foreground">Layout orientation. Values: "horizontal", "vertical".</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/spinner" class="text-primary hover:underline">Spinner</a> — Use for indeterminate loading states where a circular indicator is more appropriate</li>
        <li><a href="/components/skeleton" class="text-primary hover:underline">Skeleton</a> — Use to show placeholder shapes while content is loading</li>
    </ul>
</div>

@code {
    private int _value = 50;
    private Progress.ProgressVariant _progressVariant = Progress.ProgressVariant.Default;
    private Progress.ProgressShape _progressShape = Progress.ProgressShape.Linear;

    private void Increase() => _value = Math.Min(100, _value + 10);
    private void Decrease() => _value = Math.Max(0, _value - 10);

    private string _variantInteractiveCode = @"<Progress Value=""65"" Variant=""Progress.ProgressVariant.Success"" ShowLabel=""true"" />";
    private string _shapeInteractiveCode = @"@* Linear (default) *@
<Progress Value=""72"" Shape=""Progress.ProgressShape.Linear"" ShowLabel=""true"" />

@* Circular *@
<Progress Value=""72"" Shape=""Progress.ProgressShape.Circular"" ShowLabel=""true"" />";

    private string _defaultCode = @"<Progress Value=""25"" />
<Progress Value=""50"" />
<Progress Value=""75"" />";

    private string _variantCode = @"<Progress Value=""60"" />
<Progress Value=""100"" Variant=""Progress.ProgressVariant.Success"" />
<Progress Value=""45"" Variant=""Progress.ProgressVariant.Warning"" />
<Progress Value=""80"" Variant=""Progress.ProgressVariant.Destructive"" />";

    private string _interactiveCode = @"<Progress Value=""@_value"" />
<Flex Align=""center"" Gap=""2"">
    <Button OnClick=""Decrease"">-10</Button>
    <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">@_value%</Lumeo.Text>
    <Button OnClick=""Increase"">+10</Button>
</Flex>

@code {
    private int _value = 50;
    private void Increase() => _value = Math.Min(100, _value + 10);
    private void Decrease() => _value = Math.Max(0, _value - 10);
}";

    private string _indeterminateCode = @"<Progress IsIndeterminate=""true"" />
<Progress IsIndeterminate=""true"" Variant=""Progress.ProgressVariant.Success"" />";

    private string _labelCode = @"<Progress Value=""65"" ShowLabel=""true"" />
<Progress Value=""40"" ShowLabel=""true"" Label=""Uploading..."" />
<Progress Value=""90"" ShowLabel=""true"" Variant=""Progress.ProgressVariant.Success"" />";

    private string _stripeCode = @"<Progress Value=""60"" Animation=""Progress.ProgressAnimation.Stripe"" />
<Progress Value=""75"" Animation=""Progress.ProgressAnimation.Stripe"" Variant=""Progress.ProgressVariant.Success"" />
<Progress Value=""45"" Animation=""Progress.ProgressAnimation.Stripe"" Variant=""Progress.ProgressVariant.Warning"" />";

    private string _indeterminateSweepCode = @"<Progress Animation=""Progress.ProgressAnimation.Indeterminate"" />
<Progress Animation=""Progress.ProgressAnimation.Indeterminate"" Variant=""Progress.ProgressVariant.Success"" />";

    private string _glowCode = @"<Progress Value=""70"" Animation=""Progress.ProgressAnimation.Glow"" />
<Progress Value=""40"" Animation=""Progress.ProgressAnimation.Glow"" Variant=""Progress.ProgressVariant.Success"" />";
}
