@page "/components/ring-progress"

<PageTitle>RingProgress — Lumeo</PageTitle>

<PageHeader Title="RingProgress" Description="A circular progress ring for displaying determinate completion percentage." />

<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 a compact completion percentage inline — e.g. in cards, list rows, or stat tiles.</li>
        <li>Pair with a custom centre label to display a value other than the default percentage.</li>
        <li>Use instead of the full <code>Gauge</code> when you need a simpler ring with no variant complexity.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Flex Gap="4" Wrap="true">
            <RingProgress Value="25" ShowLabel="true" />
            <RingProgress Value="50" ShowLabel="true" />
            <RingProgress Value="75" ShowLabel="true" />
            <RingProgress Value="100" ShowLabel="true" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="4" Align="center" Wrap="true">
            <RingProgress Value="65" Size="40" ShowLabel="true" />
            <RingProgress Value="65" Size="64" ShowLabel="true" />
            <RingProgress Value="65" Size="96" ShowLabel="true" />
            <RingProgress Value="65" Size="128" ShowLabel="true" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Colors" Code="@_colorsCode">
        <Flex Gap="4" Wrap="true">
            <RingProgress Value="70" ShowLabel="true" Color="primary" />
            <RingProgress Value="70" ShowLabel="true" Color="success" />
            <RingProgress Value="70" ShowLabel="true" Color="warning" />
            <RingProgress Value="70" ShowLabel="true" Color="destructive" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Custom Label" Code="@_customLabelCode">
        <Flex Gap="4" Wrap="true">
            <RingProgress Value="82">
                <LabelContent>
                    <div class="text-center">
                        <div class="text-xs font-semibold text-foreground">82</div>
                        <div class="text-[9px] text-muted-foreground">score</div>
                    </div>
                </LabelContent>
            </RingProgress>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Interactive" Code="@_interactiveCode">
        <Flex Align="center" Gap="4">
            <RingProgress Value="@_value" ShowLabel="true" Size="80" />
            <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">@_value%</Lumeo.Text>
                <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" OnClick="Increase">+10</Button>
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Square Caps" Code="@_capsCode">
        <Flex Gap="4" Wrap="true">
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-2 block">Rounded (default)</Lumeo.Text>
                <RingProgress Value="60" ShowLabel="true" RoundedCaps="true" />
            </div>
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-2 block">Square</Lumeo.Text>
                <RingProgress Value="60" ShowLabel="true" RoundedCaps="false" />
            </div>
        </Flex>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack>
        <Heading Level="3" Class="mb-3">RingProgress</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">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Progress value (0–100).</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">64</td><td class="p-3 text-muted-foreground">Diameter of the ring in pixels.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Thickness</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">6</td><td class="p-3 text-muted-foreground">Ring stroke thickness in pixels.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Color</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">"primary"</td><td class="p-3 text-muted-foreground">Theme token for the value arc.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">TrackColor</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">"muted"</td><td class="p-3 text-muted-foreground">Theme token for the background track.</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">Show the percentage value in the centre.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">LabelContent</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 centre content. Overrides ShowLabel when set.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">RoundedCaps</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">Use round stroke-linecap on the value arc.</td></tr>
                </tbody>
            </table>
        </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/gauge" class="text-primary hover:underline">Gauge</a> — Full-featured gauge with Radial, Arc, and Linear variants plus threshold colouring.</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — Linear and circular progress bars with variants and indeterminate support.</li>
        <li><a href="/components/spinner" class="text-primary hover:underline">Spinner</a> — Indeterminate loading indicator.</li>
    </ul>
</div>

@code {
    private double _value = 60;

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

    private string _defaultCode = @"<RingProgress Value=""25"" ShowLabel=""true"" />
<RingProgress Value=""50"" ShowLabel=""true"" />
<RingProgress Value=""75"" ShowLabel=""true"" />";

    private string _sizesCode = @"<RingProgress Value=""65"" Size=""40"" ShowLabel=""true"" />
<RingProgress Value=""65"" Size=""64"" ShowLabel=""true"" />
<RingProgress Value=""65"" Size=""96"" ShowLabel=""true"" />";

    private string _colorsCode = @"<RingProgress Value=""70"" ShowLabel=""true"" Color=""primary"" />
<RingProgress Value=""70"" ShowLabel=""true"" Color=""success"" />
<RingProgress Value=""70"" ShowLabel=""true"" Color=""warning"" />
<RingProgress Value=""70"" ShowLabel=""true"" Color=""destructive"" />";

    private string _customLabelCode = @"<RingProgress Value=""82"">
    <LabelContent>
        <div class=""text-center"">
            <div class=""text-xs font-semibold text-foreground"">82</div>
            <div class=""text-[9px] text-muted-foreground"">score</div>
        </div>
    </LabelContent>
</RingProgress>";

    private string _interactiveCode = @"<RingProgress Value=""@_value"" ShowLabel=""true"" Size=""80"" />
<Button OnClick=""Decrease"">-10</Button>
<Button OnClick=""Increase"">+10</Button>

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

    private string _capsCode = @"<RingProgress Value=""60"" ShowLabel=""true"" RoundedCaps=""true"" />
<RingProgress Value=""60"" ShowLabel=""true"" RoundedCaps=""false"" />";
}
