@page "/components/charts/mixed"

<PageTitle>Mixed Chart — Lumeo</PageTitle>

<PageHeader Title="Mixed Chart" Description="Combine multiple chart types (bar, line) in a single view. Useful for overlaying a trend line on top of bar data, such as actual vs. target comparisons." />

<Stack Gap="8">
    <ComponentDemo Title="Sales vs Target" Description="Monthly actual sales (bar) overlaid with a rolling sales target line. The cross-type tooltip makes it easy to read both values simultaneously." Code="@_basicCode">
        <Container>
            <MixedChart Categories="_categories" Series="_series" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Revenue &amp; Growth Rate" Description="Quarterly revenue bars with a year-over-year growth rate line. The line series communicates momentum without a secondary axis." Code="@_growthCode">
        <Container>
            <MixedChart Categories="_quarterCats" Series="_growthSeries" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Support Volume &amp; Resolution Rate" Description="Weekly ticket volume (bar) alongside resolution rate % (line). Data labels enabled on both series; DataZoom allows drilling into specific weeks." Code="@_supportCode">
        <Container>
            <MixedChart Categories="_weekCats" Series="_supportSeries"
                        ShowDataLabels="true" DataZoom="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Multi-Product Revenue with Trend" Description="Three product revenue streams as bars plus a total trend line. Custom palette and Toolbox for export." Code="@_multiCode">
        <Container>
            <MixedChart Categories="_categories" Series="_multiSeries" Toolbox="true" Colors="_multiColors" />
        </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>
                <MixedChart Categories="_categories" Series="_series" 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">MixedChart</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">Categories</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">[]</td>
                            <td class="p-3 text-muted-foreground">X-axis category labels.</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;MixedSeriesData&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">Data series with Name, Values, and Type ("bar" or "line").</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 chart legend.</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 zoom slider for large datasets.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelStrategy</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartLabelStrategy</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Smart</td>
                            <td class="p-3 text-muted-foreground">How category-axis labels are rendered. Smart auto-rotates at higher densities; ShowAll forces all horizontal; Auto thins overlapping labels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelRotate</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">Manual rotation override in degrees on top of LabelStrategy.</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">Override ECharts animation duration in milliseconds.</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 entry animation.</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 color palette applied when Colors is unset.</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">Custom color palette for bar and line series.</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">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 formatter string applied to 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 relative to each bar or point.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkArea</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkArea?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Shaded regions highlighting value ranges on the chart.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkLine</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkLine?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Reference lines (avg, max, custom) overlaid on the chart.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkPoint</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkPoint?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Marker points highlighting extrema or annotations.</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 cycles placeholder data faster.</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">Renders value labels on each bar and line point.</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">Enables the cross-type hover tooltip.</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 override; null follows global Lumeo theme.</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 save/restore/zoom toolbox in the corner.</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>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    // Demo 1 — monthly sales vs target
    private List<string> _categories = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
    private List<MixedChart.MixedSeriesData> _series = new()
    {
        new() { Name = "Actual Sales", Values = new() { 38200, 41500, 36800, 52100, 58400, 67300, 61700, 64800, 73100, 79400, 71200, 88600 }, Type = "bar"  },
        new() { Name = "Sales Target", Values = new() { 45000, 45000, 50000, 55000, 60000, 65000, 65000, 65000, 70000, 75000, 75000, 85000 }, Type = "line" }
    };

    // Demo 2 — quarterly revenue & growth rate
    private List<string> _quarterCats = new() { "Q1 '23", "Q2 '23", "Q3 '23", "Q4 '23", "Q1 '24", "Q2 '24", "Q3 '24", "Q4 '24" };
    private List<MixedChart.MixedSeriesData> _growthSeries = new()
    {
        new() { Name = "Revenue ($k)",    Values = new() { 1820, 2050, 2310, 2680, 2950, 3340, 3610, 4020 }, Type = "bar"  },
        new() { Name = "YoY Growth (%)",  Values = new() { 12, 18, 22, 28, 62, 63, 56, 50 },                 Type = "line" }
    };

    // Demo 3 — weekly support tickets & resolution rate
    private List<string> _weekCats = new() { "Wk 1", "Wk 2", "Wk 3", "Wk 4", "Wk 5", "Wk 6", "Wk 7", "Wk 8" };
    private List<MixedChart.MixedSeriesData> _supportSeries = new()
    {
        new() { Name = "Tickets",         Values = new() { 142, 168, 155, 190, 178, 162, 145, 138 }, Type = "bar"  },
        new() { Name = "Resolution Rate", Values = new() { 88, 84, 91, 79, 85, 90, 93, 95 },         Type = "line" }
    };

    // Demo 4 — multi-product with total trend line
    private List<MixedChart.MixedSeriesData> _multiSeries = new()
    {
        new() { Name = "Core",       Values = new() { 18200, 19500, 17800, 22100, 26400, 30300, 29700, 31800, 35100, 38400, 34200, 42600 }, Type = "bar"  },
        new() { Name = "Pro",        Values = new() { 8400,  9100,  8600,  11200, 13800, 16400, 15200, 17100, 19600, 22300, 20100, 25400 }, Type = "bar"  },
        new() { Name = "Enterprise", Values = new() { 4200,  4800,  4400,   6100,  7200,  8900,  8600,  9400, 10500, 12100, 11400, 14200 }, Type = "bar"  },
        new() { Name = "Total",      Values = new() { 30800, 33400, 30800, 39400, 47400, 55600, 53500, 58300, 65200, 72800, 65700, 82200 }, Type = "line" }
    };

    private List<string> _multiColors = new() { "#6366f1", "#10b981", "#f59e0b", "#64748b" };

    private string _basicCode    = @"<MixedChart Categories=""_categories"" Series=""_series"" />";
    private string _growthCode   = @"<MixedChart Categories=""_quarterCats"" Series=""_growthSeries"" />";
    private string _supportCode  = @"<MixedChart Categories=""_weekCats"" Series=""_supportSeries"" ShowDataLabels=""true"" DataZoom=""true"" />";
    private string _multiCode    = @"<MixedChart Categories=""_categories"" Series=""_multiSeries"" Toolbox=""true"" Colors=""_multiColors"" />";

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