@page "/components/charts/gauge"

<PageTitle>Gauge Chart — Lumeo</PageTitle>

<PageHeader Title="Gauge Chart" Description="Display a speedometer-style gauge with a pointer. Supports custom ranges with color zones for thresholds like warning and danger levels." />

<Stack Gap="8">
    <ComponentDemo Title="Speed Gauge" Description="Simple single-value gauge showing vehicle speed against a 200 km/h maximum. No color ranges — a clean, minimal speedometer look." Code="@_basicCode">
        <Container>
            <GaugeChart Value="68" Title="Speed" Unit="km/h" Max="200" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Gauge with Color Ranges" Description="CPU utilisation gauge with green/amber/red threshold zones making it immediately clear when the system is under stress." Code="@_rangeCode">
        <Container>
            <GaugeChart Value="85" Title="CPU Usage" Unit="%" Ranges="_ranges" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Conversion Rate KPI" Description="Marketing conversion rate displayed as a percentage gauge. A compact widget suitable for a summary dashboard header." Code="@_conversionCode">
        <Container>
            <GaugeChart Value="34" Title="Conversion Rate" Unit="%" Min="0" Max="100"
                        Ranges="_conversionRanges" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="NPS Score Gauge" Description="Net Promoter Score ranging from -100 to +100 with four colour bands — Detractor, Passive, Good, and Excellent." Code="@_npsCode">
        <Container>
            <GaugeChart Value="62" Title="NPS" Min="-100" Max="100" Ranges="_npsRanges" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Server Disk Usage" Description="Disk usage gauge with no pointer — the arc colour alone signals capacity. Toolbox enabled for screenshot export." Code="@_diskCode">
        <Container>
            <GaugeChart Value="78" Title="Disk Used" Unit="%" ShowPointer="false"
                        Toolbox="true" Ranges="_diskRanges" />
        </Container>
    </ComponentDemo>
    <ComponentDemo Title="Loading state" Description="Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.">
        <Container>
            <Stack Gap="4">
                <Stack Direction="Stack.StackDirection.Horizontal" Gap="4" Align="center" Wrap="true">
                    <Button OnClick="SimulateLoadingAsync" Disabled="@_loading">Simulate loading</Button>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <Switch @bind-Value="_keepLoading" Id="keep-loading" />
                        <label for="keep-loading" class="text-sm text-muted-foreground cursor-pointer">Hold skeleton open</label>
                    </Stack>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <label class="text-sm text-muted-foreground">Duration: @(_simulateDurationMs / 1000.0)s</label>
                        <input type="range" min="500" max="10000" step="500" @bind-value="_simulateDurationMs" @bind-value:event="oninput" class="w-32 accent-primary" />
                    </Stack>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <label class="text-sm text-muted-foreground">Cycle: @_phantomCycleMs ms</label>
                        <input type="range" min="300" max="3000" step="100" @bind-value="_phantomCycleMs" @bind-value:event="oninput" class="w-32 accent-primary" />
                    </Stack>
                </Stack>
                <GaugeChart Value="68" Title="Speed" Unit="km/h" Max="200" PhantomCycleMs="@_phantomCycleMs" IsLoading="@LoadingComputed" Height="320px" />
            </Stack>
        </Container>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">GaugeChart</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">The current gauge value.</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 scale 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 scale value.</td>
                        </tr>
                        <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">Title text displayed on the gauge.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Unit</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">Unit suffix displayed after the value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowPointer</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">Shows the gauge pointer needle.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Ranges</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;GaugeRange&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Color zones with Threshold and Color values.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsLoading</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, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLoadingSkeleton</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">Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SkeletonKind</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartSkeletonKind</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">(chart default)</td>
                            <td class="p-3 text-muted-foreground">Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SkeletonStyle</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartSkeletonStyle</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Phantom</td>
                            <td class="p-3 text-muted-foreground">Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLoadingLabel</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">Shows a small "Loading&hellip;" pill in the top-right corner whenever <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">IsLoading</code> is true. Layered on top of any <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">SkeletonStyle</code>. Set to false for bare visuals. <strong>(rc.18)</strong></td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LoadingText</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">"Loading&hellip;"</td>
                            <td class="p-3 text-muted-foreground">Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. <strong>(rc.18)</strong></td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Width</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">"100%"</td>
                            <td class="p-3 text-muted-foreground">CSS width of the chart container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Height</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">"350px"</td>
                            <td class="p-3 text-muted-foreground">CSS height of the chart container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Theme</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 ECharts theme name override.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PhantomCycleMs</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">1400</td>
                            <td class="p-3 text-muted-foreground">Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowDataLabels</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 the numeric value label on the gauge.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelPosition</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">"top"</td>
                            <td class="p-3 text-muted-foreground">Position of the value label on the gauge.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelFormat</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 ECharts label formatter string for the value label.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DataZoom</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">Enables the interactive data-zoom slider beneath the chart.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Toolbox</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">Shows the ECharts toolbox with export and zoom controls.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ColorPalette</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">Alternate full color palette applied to the gauge.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AnimationDuration</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">null</td>
                            <td class="p-3 text-muted-foreground">Animation duration in milliseconds when the value changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AnimationEasing</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">ECharts easing function name for the pointer animation curve.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    // Demo 2 — CPU usage ranges
    private List<GaugeChart.GaugeRange> _ranges = new()
    {
        new() { Threshold = 60,  Color = "#10b981" },
        new() { Threshold = 80,  Color = "#f59e0b" },
        new() { Threshold = 100, Color = "#ef4444" }
    };

    // Demo 3 — conversion rate ranges
    private List<GaugeChart.GaugeRange> _conversionRanges = new()
    {
        new() { Threshold = 20,  Color = "#ef4444" },
        new() { Threshold = 40,  Color = "#f59e0b" },
        new() { Threshold = 100, Color = "#10b981" }
    };

    // Demo 4 — NPS ranges (-100 to 100)
    private List<GaugeChart.GaugeRange> _npsRanges = new()
    {
        new() { Threshold = -100, Color = "#ef4444" },
        new() { Threshold = 0,    Color = "#f59e0b" },
        new() { Threshold = 50,   Color = "#6366f1" },
        new() { Threshold = 100,  Color = "#10b981" }
    };

    // Demo 5 — disk usage ranges
    private List<GaugeChart.GaugeRange> _diskRanges = new()
    {
        new() { Threshold = 70,  Color = "#10b981" },
        new() { Threshold = 90,  Color = "#f59e0b" },
        new() { Threshold = 100, Color = "#ef4444" }
    };

    private string _basicCode      = @"<GaugeChart Value=""68"" Title=""Speed"" Unit=""km/h"" Max=""200"" />";
    private string _rangeCode      = @"<GaugeChart Value=""85"" Title=""CPU Usage"" Unit=""%"" Ranges=""_ranges"" />";
    private string _conversionCode = @"<GaugeChart Value=""34"" Title=""Conversion Rate"" Unit=""%"" Min=""0"" Max=""100"" Ranges=""_conversionRanges"" />";
    private string _npsCode        = @"<GaugeChart Value=""62"" Title=""NPS"" Min=""-100"" Max=""100"" Ranges=""_npsRanges"" />";
    private string _diskCode       = @"<GaugeChart Value=""78"" Title=""Disk Used"" Unit=""%"" ShowPointer=""false"" Toolbox=""true"" Ranges=""_diskRanges"" />";

    private bool _loading;
    private bool _keepLoading;
    private bool LoadingComputed => _loading || _keepLoading;
    private int _simulateDurationMs = 2000;
    private int _phantomCycleMs = 1400;

    private async Task SimulateLoadingAsync()
    {
        _loading = true;
        await Task.Delay(_simulateDurationMs);
        _loading = false;
    }
}
