@page "/components/gauge"

<PageTitle>Gauge — Lumeo</PageTitle>

<PageHeader Title="Gauge" Description="Displays a single metric value within a defined range using radial, arc, or linear visual styles." />

<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>Visualize capacity, utilisation, or performance metrics at a glance.</li>
        <li>Show a single KPI (CPU usage, battery level, score) within a min/max range.</li>
        <li>Use Radial for dashboards, Arc for compact metric cards, Linear for inline progress.</li>
        <li>Apply thresholds to automatically shift colour from green → amber → red as values rise.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Radial (default)" Code="@_radialCode">
        <Flex Gap="6" Wrap="true">
            <Gauge Value="25" />
            <Gauge Value="60" />
            <Gauge Value="90" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Arc (semicircle)" Code="@_arcCode">
        <Flex Gap="6" Wrap="true">
            <Gauge Value="30" Variant="Gauge.GaugeVariant.Arc" />
            <Gauge Value="65" Variant="Gauge.GaugeVariant.Arc" />
            <Gauge Value="95" Variant="Gauge.GaugeVariant.Arc" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Linear" Code="@_linearCode">
        <Stack Gap="4" Class="max-w-sm">
            <Gauge Value="40" Variant="Gauge.GaugeVariant.Linear" Size="200" />
            <Gauge Value="70" Variant="Gauge.GaugeVariant.Linear" Size="200" Color="success" />
            <Gauge Value="90" Variant="Gauge.GaugeVariant.Linear" Size="200" Color="destructive" />
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Label" Code="@_labelCode">
        <Flex Gap="6" Wrap="true">
            <Gauge Value="72" Label="CPU" Size="120" />
            <Gauge Value="48" Label="RAM" Size="120" />
            <Gauge Value="33" Label="Disk" Size="120" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Thresholds" Code="@_thresholdCode">
        <Flex Gap="6" Wrap="true">
            <Gauge Value="@_gaugeValue"
                   Thresholds="@_thresholds"
                   Size="140" />
            <Flex Align="center" Gap="2">
                <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" OnClick="DecreaseGauge">-10</Button>
                <Lumeo.Text As="span" Size="sm" Weight="medium">@_gaugeValue</Lumeo.Text>
                <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" OnClick="IncreaseGauge">+10</Button>
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Gap="6" Align="end" Wrap="true">
            <Gauge Value="65" Size="80" />
            <Gauge Value="65" Size="120" />
            <Gauge Value="65" Size="160" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch variant to compare Radial, Arc, and Linear shapes.</Lumeo.Text>
            <Segmented @bind-Value="_gaugeVariant">
                <SegmentedItem Value="Radial">Radial</SegmentedItem>
                <SegmentedItem Value="Arc">Arc</SegmentedItem>
                <SegmentedItem Value="Linear">Linear</SegmentedItem>
            </Segmented>
            <Flex Gap="6" Wrap="true" Align="end">
                <Gauge Value="35" Variant="@_gaugeVariantEnum" Size="@(_gaugeVariant == "Linear" ? 200 : 120)" Label="Low" />
                <Gauge Value="68" Variant="@_gaugeVariantEnum" Size="@(_gaugeVariant == "Linear" ? 200 : 120)" Label="Med" Color="warning" />
                <Gauge Value="92" Variant="@_gaugeVariantEnum" Size="@(_gaugeVariant == "Linear" ? 200 : 120)" Label="High" Color="destructive" />
            </Flex>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack>
        <Heading Level="3" Class="mb-3">Gauge</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">Current value within the Min–Max range.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Min</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">Minimum 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">double</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">Variant</td><td class="p-3 font-mono text-xs text-muted-foreground">GaugeVariant</td><td class="p-3 font-mono text-xs text-muted-foreground">Radial</td><td class="p-3 text-muted-foreground">Visual shape. Values: Radial (270° arc), Arc (180° semicircle), Linear (horizontal bar).</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">120</td><td class="p-3 text-muted-foreground">Diameter (Radial/Arc) or width (Linear) 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">8</td><td class="p-3 text-muted-foreground">Thickness of the arc/bar in pixels.</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">Centre text. Defaults to the percentage when null.</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">true</td><td class="p-3 text-muted-foreground">Show the value/percentage label.</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/bar (e.g. "primary", "success", "destructive").</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">Thresholds</td><td class="p-3 font-mono text-xs text-muted-foreground">IReadOnlyList&lt;GaugeThreshold&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Colour bands. Each entry has a Value (threshold) and Color (CSS color). The highest matching threshold wins.</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/progress" class="text-primary hover:underline">Progress</a> — Linear and circular progress bars with indeterminate support.</li>
        <li><a href="/components/ring-progress" class="text-primary hover:underline">RingProgress</a> — A clean determinate progress ring optimised for inline use.</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Display a single numeric KPI with label and trend.</li>
    </ul>
</div>

@code {
    private string _gaugeVariant = "Radial";
    private Gauge.GaugeVariant _gaugeVariantEnum =>
        Enum.TryParse<Gauge.GaugeVariant>(_gaugeVariant, out var v) ? v : Gauge.GaugeVariant.Radial;
    private double _gaugeValue = 30;

    private void IncreaseGauge() => _gaugeValue = Math.Min(100, _gaugeValue + 10);
    private void DecreaseGauge() => _gaugeValue = Math.Max(0, _gaugeValue - 10);

    private IReadOnlyList<Gauge.GaugeThreshold> _thresholds = new List<Gauge.GaugeThreshold>
    {
        new(0,  "var(--color-success)"),
        new(60, "var(--color-warning)"),
        new(80, "var(--color-destructive)")
    };

    private string _radialCode = @"<Gauge Value=""25"" />
<Gauge Value=""60"" />
<Gauge Value=""90"" />";

    private string _arcCode = @"<Gauge Value=""30"" Variant=""Gauge.GaugeVariant.Arc"" />
<Gauge Value=""65"" Variant=""Gauge.GaugeVariant.Arc"" />
<Gauge Value=""95"" Variant=""Gauge.GaugeVariant.Arc"" />";

    private string _linearCode = @"<Gauge Value=""40"" Variant=""Gauge.GaugeVariant.Linear"" Size=""200"" />
<Gauge Value=""70"" Variant=""Gauge.GaugeVariant.Linear"" Size=""200"" Color=""success"" />
<Gauge Value=""90"" Variant=""Gauge.GaugeVariant.Linear"" Size=""200"" Color=""destructive"" />";

    private string _labelCode = @"<Gauge Value=""72"" Label=""CPU"" Size=""120"" />
<Gauge Value=""48"" Label=""RAM"" Size=""120"" />
<Gauge Value=""33"" Label=""Disk"" Size=""120"" />";

    private string _thresholdCode = @"var thresholds = new List<Gauge.GaugeThreshold>
{
    new(0,  ""var(--color-success)""),
    new(60, ""var(--color-warning)""),
    new(80, ""var(--color-destructive)"")
};

<Gauge Value=""@value"" Thresholds=""@thresholds"" Size=""140"" />";

    private string _sizesCode = @"<Gauge Value=""65"" Size=""80"" />
<Gauge Value=""65"" Size=""120"" />
<Gauge Value=""65"" Size=""160"" />";

    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""@Gauge.GaugeVariant.Radial"">Radial</SegmentedItem>
    <SegmentedItem Value=""@Gauge.GaugeVariant.Arc"">Arc</SegmentedItem>
    <SegmentedItem Value=""@Gauge.GaugeVariant.Linear"">Linear</SegmentedItem>
</Segmented>
<Gauge Value=""35"" Variant=""@_variant"" Label=""Low"" />
<Gauge Value=""68"" Variant=""@_variant"" Label=""Med"" Color=""warning"" />
<Gauge Value=""92"" Variant=""@_variant"" Label=""High"" Color=""destructive"" />

@code { private Gauge.GaugeVariant _variant = Gauge.GaugeVariant.Radial; }";
}
