@page "/components/charts/radar"

<PageTitle>Radar Chart — Lumeo</PageTitle>

<PageHeader Title="Radar Chart" Description="Compare multiple variables on a common scale. Useful for performance profiles, skill assessments, or comparing entities across dimensions." />

<Stack Gap="8">
    <ComponentDemo Title="Filled Radar" Description="Team performance compared across six AARRR growth metrics. FillArea renders a semi-transparent polygon so both series are visible at once." Code="@_basicCode">
        <Container>
            <RadarChart Indicators="_indicators" Series="_series" FillArea="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Circle Shape" Description="Same data rendered on a circular grid. Useful when you want to emphasise the relative distances between points rather than the polygon shape." Code="@_circleCode">
        <Container>
            <RadarChart Indicators="_indicators" Series="_series" FillArea="false" Shape="circle" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Team Skill Comparison" Description="Engineering team A vs team B across five core competencies. A custom indigo/amber color palette makes the two teams immediately distinguishable." Code="@_skillCode">
        <Container>
            <RadarChart Indicators="_skillIndicators" Series="_skillSeries" FillArea="true"
                        Colors="_skillColors" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Toolbox &amp; Data Labels" Description="Product quality scorecard for three product lines with data labels and a save-as-image toolbox button enabled." Code="@_toolboxCode">
        <Container>
            <RadarChart Indicators="_productIndicators" Series="_productSeries" FillArea="true"
                        ShowDataLabels="true" Toolbox="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Single-Series NPS Dimensions" Description="Net Promoter breakdown across five customer-experience dimensions. A single filled series on a polygon grid works well as a compact KPI widget." Code="@_npsCode">
        <Container>
            <RadarChart Indicators="_npsIndicators" Series="_npsSeries" FillArea="true" Height="280px" />
        </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>
                <RadarChart Indicators="_indicators" Series="_series" FillArea="true" 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">RadarChart</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">Indicators</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;RadarIndicator&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">Axis definitions with Name and Max value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Series</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;RadarSeriesData&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">Data series, one value per indicator.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">FillArea</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">Fills polygon area with semi-transparent color.</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">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"polygon"</td>
                            <td class="p-3 text-muted-foreground">Radar shape: "polygon" or "circle".</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">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">Entry animation duration in milliseconds for the radar.</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 used during radar animations.</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">Color palette applied to the radar series.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Colors</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">Explicit per-series colors overriding the palette.</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 a zoom slider on the radar chart.</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 radar chart container.</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">ECharts label format template for radar data labels.</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 data labels around each radar vertex.</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 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">Displays per-vertex data labels on the radar.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLegend</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 or hides the radar chart legend.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowTooltip</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 hover tooltip with series values.</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">ECharts theme name applied to the radar 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 save-as-image controls.</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 radar chart container.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    // Demo 1 & 2 — AARRR growth metrics
    private List<RadarChart.RadarIndicator> _indicators = new()
    {
        new() { Name = "Acquisition",  Max = 100 },
        new() { Name = "Activation",   Max = 100 },
        new() { Name = "Retention",    Max = 100 },
        new() { Name = "Referral",     Max = 100 },
        new() { Name = "Revenue",      Max = 100 },
        new() { Name = "Engagement",   Max = 100 }
    };
    private List<RadarChart.RadarSeriesData> _series = new()
    {
        new() { Name = "Q4 Actual", Values = new() { 78, 65, 82, 54, 88, 71 } },
        new() { Name = "Q4 Target", Values = new() { 85, 80, 75, 70, 90, 80 } }
    };

    // Demo 3 — team skill comparison
    private List<RadarChart.RadarIndicator> _skillIndicators = new()
    {
        new() { Name = "Speed",    Max = 10 },
        new() { Name = "Quality",  Max = 10 },
        new() { Name = "UX",       Max = 10 },
        new() { Name = "Perf",     Max = 10 },
        new() { Name = "Support",  Max = 10 }
    };
    private List<RadarChart.RadarSeriesData> _skillSeries = new()
    {
        new() { Name = "Team A", Values = new() { 8.2, 7.5, 9.1, 6.8, 7.0 } },
        new() { Name = "Team B", Values = new() { 7.0, 9.2, 7.4, 8.5, 8.8 } }
    };
    private List<string> _skillColors = new() { "#6366f1", "#f59e0b" };

    // Demo 4 — product quality scorecard
    private List<RadarChart.RadarIndicator> _productIndicators = new()
    {
        new() { Name = "Reliability", Max = 100 },
        new() { Name = "Usability",   Max = 100 },
        new() { Name = "Security",    Max = 100 },
        new() { Name = "Performance", Max = 100 },
        new() { Name = "Scalability", Max = 100 }
    };
    private List<RadarChart.RadarSeriesData> _productSeries = new()
    {
        new() { Name = "Core",       Values = new() { 92, 85, 88, 90, 78 } },
        new() { Name = "Pro",        Values = new() { 88, 92, 91, 94, 88 } },
        new() { Name = "Enterprise", Values = new() { 96, 89, 97, 96, 99 } }
    };

    // Demo 5 — NPS dimensions widget
    private List<RadarChart.RadarIndicator> _npsIndicators = new()
    {
        new() { Name = "Ease of Use",  Max = 10 },
        new() { Name = "Value",        Max = 10 },
        new() { Name = "Support",      Max = 10 },
        new() { Name = "Features",     Max = 10 },
        new() { Name = "Reliability",  Max = 10 }
    };
    private List<RadarChart.RadarSeriesData> _npsSeries = new()
    {
        new() { Name = "NPS Score", Values = new() { 8.4, 7.9, 8.7, 7.2, 9.1 } }
    };

    private string _basicCode   = @"<RadarChart Indicators=""_indicators"" Series=""_series"" FillArea=""true"" />";
    private string _circleCode  = @"<RadarChart Indicators=""_indicators"" Series=""_series"" FillArea=""false"" Shape=""circle"" />";
    private string _skillCode   = @"<RadarChart Indicators=""_skillIndicators"" Series=""_skillSeries"" FillArea=""true"" Colors=""_skillColors"" />";
    private string _toolboxCode = @"<RadarChart Indicators=""_productIndicators"" Series=""_productSeries"" FillArea=""true"" ShowDataLabels=""true"" Toolbox=""true"" />";
    private string _npsCode     = @"<RadarChart Indicators=""_npsIndicators"" Series=""_npsSeries"" FillArea=""true"" Height=""280px"" />";

    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;
    }
}
