@page "/components/spark-card"

<PageTitle>SparkCard — Lumeo</PageTitle>

<PageHeader Title="SparkCard" Description="Small dashboard card with an inline sparkline chart." />

<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>Display a metric with a compact inline trend chart in a dashboard strip.</li>
        <li>Use alongside <code class="text-xs bg-muted px-1 py-0.5 rounded">KpiCard</code> when you want the sparkline as the main visual focus rather than a delta badge.</li>
        <li>Grid 2–4 SparkCards together for a metrics overview row.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <Grid Columns="3" Gap="4">
            <SparkCard Label="Revenue" Value="$24,800" Data="@_revenueData" />
            <SparkCard Label="Sessions" Value="8,412" Data="@_sessionsData" />
            <SparkCard Label="Bounce Rate" Value="34.2%" Data="@_bounceData" />
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Custom Sparkline Slot" Code="@_customCode">
        <Grid Columns="2" Gap="4">
            <SparkCard Label="Page Views" Value="94,210">
                <Sparkline Data="@_revenueData" Class="h-10 w-full" Color="var(--color-primary)" />
            </SparkCard>
            <SparkCard Label="Errors" Value="12">
                <Sparkline Data="@_errorData" Class="h-10 w-full" Color="var(--color-destructive)" />
            </SparkCard>
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Without Data (Label + Value only)" Code="@_emptyCode">
        <Grid Columns="3" Gap="4">
            <SparkCard Label="Uptime" Value="99.98%" />
            <SparkCard Label="SLA" Value="100%" />
            <SparkCard Label="Incidents" Value="0" />
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch variant to compare Default, Bordered, and Filled styling.</Lumeo.Text>
            <Segmented @bind-Value="_scVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Bordered">Bordered</SegmentedItem>
                <SegmentedItem Value="Filled">Filled</SegmentedItem>
            </Segmented>
            <Grid Columns="3" Gap="4">
                <SparkCard Label="Revenue" Value="$24,800" Data="@_revenueData" Variant="@_scVariantEnum" />
                <SparkCard Label="Sessions" Value="8,412" Data="@_sessionsData" Variant="@_scVariantEnum" />
                <SparkCard Label="Bounce Rate" Value="34.2%" Data="@_bounceData" Variant="@_scVariantEnum" />
            </Grid>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size (interactive)" Code="@_sizeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch size to see how the card scales.</Lumeo.Text>
            <Segmented @bind-Value="_scSize">
                <SegmentedItem Value="Small">Small</SegmentedItem>
                <SegmentedItem Value="Medium">Medium</SegmentedItem>
                <SegmentedItem Value="Large">Large</SegmentedItem>
            </Segmented>
            <Grid Columns="2" Gap="4">
                <SparkCard Label="Revenue" Value="$24,800" Data="@_revenueData" Size="@_scSizeEnum" />
                <SparkCard Label="Sessions" Value="8,412" Data="@_sessionsData" Size="@_scSizeEnum" />
            </Grid>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">SparkCard</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">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">Metric label rendered above the value.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</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">The primary metric value rendered in large text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Data</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">IEnumerable&lt;double&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Numeric series rendered as an inline SVG polyline sparkline. Requires at least 2 points.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</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 chart slot. When provided, replaces the built-in SVG sparkline. Useful for rendering a <code class="text-xs">Sparkline</code> component with custom colors.</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">SparkCardSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Medium</td>
                            <td class="p-3 text-muted-foreground">Overall card size. Values: Small, Medium, Large.</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">SparkCardVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style. Default = standard card border, Bordered = thicker 2px border, Filled = muted background. Values: Default, Bordered, Filled.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">Additional CSS classes merged onto the card root.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </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/kpi-card" class="text-primary hover:underline">KpiCard</a> — Richer KPI tile with delta badge and icon slot.</li>
        <li><a href="/components/sparkline" class="text-primary hover:underline">Sparkline</a> — Standalone inline SVG trend chart primitive.</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Big-number statistic display with label and unit.</li>
    </ul>
</div>

@code {
    private string _scVariant = "Default";
    private SparkCard.SparkCardVariant _scVariantEnum =>
        Enum.TryParse<SparkCard.SparkCardVariant>(_scVariant, out var v) ? v : SparkCard.SparkCardVariant.Default;
    private string _scSize = "Medium";
    private SparkCard.SparkCardSize _scSizeEnum =>
        Enum.TryParse<SparkCard.SparkCardSize>(_scSize, out var v) ? v : SparkCard.SparkCardSize.Medium;

    private IEnumerable<double> _revenueData = new double[] { 12, 18, 14, 22, 19, 25, 21, 30, 28, 35, 31 };
    private IEnumerable<double> _sessionsData = new double[] { 400, 380, 420, 450, 410, 480, 500, 460, 520, 540, 510 };
    private IEnumerable<double> _bounceData = new double[] { 40, 38, 42, 36, 34, 37, 33, 35, 32, 34, 30 };
    private IEnumerable<double> _errorData = new double[] { 5, 3, 8, 2, 1, 4, 6, 2, 3, 1, 2 };

    private string _basicCode = @"<Grid Columns=""3"" Gap=""4"">
    <SparkCard Label=""Revenue"" Value=""$24,800"" Data=""@_revenueData"" />
    <SparkCard Label=""Sessions"" Value=""8,412"" Data=""@_sessionsData"" />
    <SparkCard Label=""Bounce Rate"" Value=""34.2%"" Data=""@_bounceData"" />
</Grid>

@code {
    private IEnumerable<double> _revenueData = new double[] { 12, 18, 14, 22, 19, 25, 21, 30, 28, 35, 31 };
}";

    private string _customCode = @"<SparkCard Label=""Page Views"" Value=""94,210"">
    <Sparkline Data=""@_data"" Class=""h-10 w-full"" Color=""var(--color-primary)"" />
</SparkCard>";

    private string _emptyCode = @"<SparkCard Label=""Uptime"" Value=""99.98%"" />
<SparkCard Label=""SLA"" Value=""100%"" />
<SparkCard Label=""Incidents"" Value=""0"" />";

    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""@SparkCard.SparkCardVariant.Default"">Default</SegmentedItem>
    <SegmentedItem Value=""@SparkCard.SparkCardVariant.Bordered"">Bordered</SegmentedItem>
    <SegmentedItem Value=""@SparkCard.SparkCardVariant.Filled"">Filled</SegmentedItem>
</Segmented>
<Grid Columns=""3"" Gap=""4"">
    <SparkCard Label=""Revenue"" Value=""$24,800"" Data=""@_data"" Variant=""@_variant"" />
    <SparkCard Label=""Sessions"" Value=""8,412"" Data=""@_data"" Variant=""@_variant"" />
    <SparkCard Label=""Bounce Rate"" Value=""34.2%"" Data=""@_data"" Variant=""@_variant"" />
</Grid>

@code { private SparkCard.SparkCardVariant _variant = SparkCard.SparkCardVariant.Default; }";

    private string _sizeInteractiveCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""@SparkCard.SparkCardSize.Small"">Small</SegmentedItem>
    <SegmentedItem Value=""@SparkCard.SparkCardSize.Medium"">Medium</SegmentedItem>
    <SegmentedItem Value=""@SparkCard.SparkCardSize.Large"">Large</SegmentedItem>
</Segmented>
<Grid Columns=""2"" Gap=""4"">
    <SparkCard Label=""Revenue"" Value=""$24,800"" Data=""@_data"" Size=""@_size"" />
    <SparkCard Label=""Sessions"" Value=""8,412"" Data=""@_data"" Size=""@_size"" />
</Grid>

@code { private SparkCard.SparkCardSize _size = SparkCard.SparkCardSize.Medium; }";
}
