@page "/components/kpi-card"

<PageTitle>KpiCard — Lumeo</PageTitle>

<PageHeader Title="KpiCard" Description="Dashboard KPI tile showing value, label, and trend." />

<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 single metric prominently in a dashboard overview row.</li>
        <li>Pair with a delta badge to show week-over-week or month-over-month change.</li>
        <li>Add an inline sparkline via <code class="text-xs bg-muted px-1 py-0.5 rounded">SparkContent</code> to give a quick trend visual.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <Grid Columns="3" Gap="4">
            <KpiCard Label="Total Revenue" Value="$48,295" />
            <KpiCard Label="Active Users" Value="12,843" />
            <KpiCard Label="Conversion Rate" Value="3.6%" />
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="With Delta" Code="@_deltaCode">
        <Grid Columns="3" Gap="4">
            <KpiCard Label="Monthly Revenue" Value="$18,450" Delta="8.3" />
            <KpiCard Label="Churn Rate" Value="2.1%" Delta="-0.4" DeltaPositive="KpiCard.KpiDeltaDirection.Bad" />
            <KpiCard Label="Support Tickets" Value="247" Delta="-12" DeltaFormat="KpiCard.KpiDeltaFormat.Absolute" DeltaPositive="KpiCard.KpiDeltaDirection.Bad" />
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="With Icon and Sparkline" Code="@_sparkCode">
        <Grid Columns="2" Gap="4">
            <KpiCard Label="Page Views" Value="94,210" Delta="5.7">
                <IconContent>
                    <DynamicIcon Name="TrendingUp" Class="h-4 w-4" />
                </IconContent>
                <SparkContent>
                    <Sparkline Data="@_viewData" Class="h-10 w-full" />
                </SparkContent>
            </KpiCard>
            <KpiCard Label="Signups" Value="1,380" Delta="22.1">
                <IconContent>
                    <DynamicIcon Name="Users" Class="h-4 w-4" />
                </IconContent>
                <SparkContent>
                    <Sparkline Data="@_signupData" Class="h-10 w-full" />
                </SparkContent>
            </KpiCard>
        </Grid>
    </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">KpiCard</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">The 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 displayed prominently.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Delta</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">null</td>
                            <td class="p-3 text-muted-foreground">Optional trend value. When set, renders a Delta badge in the card footer.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DeltaFormat</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">KpiDeltaFormat</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Percent</td>
                            <td class="p-3 text-muted-foreground">Delta display format: <code class="text-xs">Percent</code> or <code class="text-xs">Absolute</code>.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DeltaPositive</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">KpiDeltaDirection</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Good</td>
                            <td class="p-3 text-muted-foreground">Color semantics for the delta. Use <code class="text-xs">Bad</code> for metrics where up is negative (e.g. churn).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IconContent</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">Optional icon slot rendered next to the label.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SparkContent</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">Optional sparkline slot rendered in the card footer beside the delta.</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/spark-card" class="text-primary hover:underline">SparkCard</a> — Compact card variant focused on an inline sparkline chart.</li>
        <li><a href="/components/delta" class="text-primary hover:underline">Delta</a> — Standalone trend badge component used inside KpiCard.</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Big-number statistic display with label and unit.</li>
        <li><a href="/components/bento" class="text-primary hover:underline">Bento</a> — Masonry grid for composing dashboard tile layouts.</li>
    </ul>
</div>

@code {
    private IEnumerable<double> _viewData = new double[] { 30, 45, 28, 60, 55, 70, 80, 65, 90, 85, 94 };
    private IEnumerable<double> _signupData = new double[] { 50, 55, 60, 70, 65, 80, 90, 85, 100, 110, 138 };

    private string _basicCode = @"<Grid Columns=""3"" Gap=""4"">
    <KpiCard Label=""Total Revenue"" Value=""$48,295"" />
    <KpiCard Label=""Active Users"" Value=""12,843"" />
    <KpiCard Label=""Conversion Rate"" Value=""3.6%"" />
</Grid>";

    private string _deltaCode = @"<Grid Columns=""3"" Gap=""4"">
    <KpiCard Label=""Monthly Revenue"" Value=""$18,450"" Delta=""8.3"" />
    <KpiCard Label=""Churn Rate"" Value=""2.1%"" Delta=""-0.4"" DeltaPositive=""KpiCard.KpiDeltaDirection.Bad"" />
    <KpiCard Label=""Support Tickets"" Value=""247"" Delta=""-12""
             DeltaFormat=""KpiCard.KpiDeltaFormat.Absolute""
             DeltaPositive=""KpiCard.KpiDeltaDirection.Bad"" />
</Grid>";

    private string _sparkCode = @"<KpiCard Label=""Page Views"" Value=""94,210"" Delta=""5.7"">
    <IconContent>
        <Blazicon Svg=""Lucide.TrendingUp"" class=""h-4 w-4"" />
    </IconContent>
    <SparkContent>
        <Sparkline Data=""@_viewData"" Class=""h-10 w-full"" />
    </SparkContent>
</KpiCard>";
}
