@page "/components/dashboard-tiles"

<PageTitle>Dashboard Tiles — Lumeo</PageTitle>

<PageHeader Title="Dashboard Tiles" Description="KpiCard, SparkCard, and Delta — compact building blocks for analytics dashboards." />

<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>Show single-metric KPIs with optional deltas and mini charts</li>
        <li>Combine with <a class="text-primary hover:underline" href="/components/bento">Bento</a> to build a full dashboard grid</li>
        <li>Use <code>Delta</code> inline anywhere you display a change number</li>
        <li>Use <code>SparkCard</code> for compact trend visibility without reaching for the full Chart component</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="KpiCard — positive delta" Code="@_kpiPositiveCode">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <KpiCard Label="Revenue" Value="$48,290" Delta="12.3" />
            <KpiCard Label="Signups" Value="1,204" Delta="8.1" DeltaFormat="KpiCard.KpiDeltaFormat.Percent" />
            <KpiCard Label="Net promoter" Value="62" Delta="3" DeltaFormat="KpiCard.KpiDeltaFormat.Absolute" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="KpiCard — negative delta" Code="@_kpiNegativeCode">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <KpiCard Label="Revenue" Value="$48,290" Delta="-4.2" />
            <KpiCard Label="Signups" Value="1,204" Delta="-12" DeltaFormat="KpiCard.KpiDeltaFormat.Absolute" />
            <KpiCard Label="Weekly sessions" Value="8,492" Delta="-0.8" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="KpiCard — bad direction (lower is better)" Code="@_kpiBadDirectionCode">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <KpiCard Label="Churn rate"
                     Value="2.4%"
                     Delta="-0.6"
                     DeltaPositive="KpiCard.KpiDeltaDirection.Bad" />
            <KpiCard Label="Error rate"
                     Value="0.12%"
                     Delta="0.04"
                     DeltaPositive="KpiCard.KpiDeltaDirection.Bad"
                     DeltaFormat="KpiCard.KpiDeltaFormat.Absolute" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="KpiCard with SparkContent" Code="@_kpiSparkCode">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <KpiCard Label="Page views" Value="184,290" Delta="6.7">
                <SparkContent>
                    <SparkCard Class="!p-0 !border-0 !bg-transparent" Data="@_sparkA" />
                </SparkContent>
            </KpiCard>
            <KpiCard Label="Signups" Value="1,482" Delta="-2.1">
                <SparkContent>
                    <SparkCard Class="!p-0 !border-0 !bg-transparent" Data="@_sparkB" />
                </SparkContent>
            </KpiCard>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="SparkCard" Code="@_sparkCode">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <SparkCard Label="Daily active" Value="12,402" Data="@_sparkA" />
            <SparkCard Label="Revenue" Value="$48,290" Data="@_sparkB" />
            <SparkCard Label="Avg. load time" Value="312ms" Data="@_sparkC" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Delta pill — standalone" Code="@_deltaInlineCode">
        <div class="flex flex-wrap items-center gap-3">
            <Delta Value="12.3" />
            <Delta Value="-4.5" />
            <Delta Value="0" />
            <Delta Value="-3.2" Positive="Delta.DeltaDirection.Bad" />
            <Delta Value="15" Format="Delta.DeltaFormat.Absolute" ShowArrow="false" />
        </div>
    </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">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Metric label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Pre-formatted value string.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Delta</td><td class="p-3 font-mono text-xs">double?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Optional delta value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">DeltaFormat</td><td class="p-3 font-mono text-xs">KpiDeltaFormat</td><td class="p-3 font-mono text-xs">Percent</td><td class="p-3 text-muted-foreground">Percent or Absolute.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">DeltaPositive</td><td class="p-3 font-mono text-xs">KpiDeltaDirection</td><td class="p-3 font-mono text-xs">Good</td><td class="p-3 text-muted-foreground">Whether "up" is good (green) or bad (red).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IconContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Icon slot before 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">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Optional compact chart slot aligned right.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <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">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Card label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Pre-formatted metric value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Data</td><td class="p-3 font-mono text-xs">IEnumerable&lt;double&gt;?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Sparkline data.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Fallback slot — drop in a full Chart instead of the built-in sparkline.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">Delta</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">double</td><td class="p-3 font-mono text-xs">0</td><td class="p-3 text-muted-foreground">Numeric delta. Sign drives arrow and color.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Format</td><td class="p-3 font-mono text-xs">DeltaFormat</td><td class="p-3 font-mono text-xs">Percent</td><td class="p-3 text-muted-foreground">Percent or Absolute.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Positive</td><td class="p-3 font-mono text-xs">DeltaDirection</td><td class="p-3 font-mono text-xs">Good</td><td class="p-3 text-muted-foreground">Good = +is-green; Bad = +is-red.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowArrow</td><td class="p-3 font-mono text-xs">bool</td><td class="p-3 font-mono text-xs">true</td><td class="p-3 text-muted-foreground">Toggles the directional chevron.</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/bento" class="text-primary hover:underline">Bento</a> — Dashboard grid layout that wraps these tiles</li>
        <li><a href="/components/statistic" class="text-primary hover:underline">Statistic</a> — Lower-level stat with prefix/suffix</li>
        <li><a href="/components/chart" class="text-primary hover:underline">Chart</a> — Full-featured charting for when a sparkline is not enough</li>
    </ul>
</div>

@code {
    private readonly double[] _sparkA = { 12, 18, 9, 22, 28, 19, 34, 30, 42, 38, 46, 52 };
    private readonly double[] _sparkB = { 4, 7, 5, 9, 12, 11, 16, 14, 13, 17, 19, 22 };
    private readonly double[] _sparkC = { 420, 398, 410, 380, 370, 360, 345, 332, 320, 315, 312, 309 };

    private string _kpiPositiveCode = @"<KpiCard Label=""Revenue"" Value=""$48,290"" Delta=""12.3"" />
<KpiCard Label=""Signups"" Value=""1,204"" Delta=""8.1"" />
<KpiCard Label=""Net promoter"" Value=""62"" Delta=""3""
         DeltaFormat=""KpiCard.KpiDeltaFormat.Absolute"" />";

    private string _kpiNegativeCode = @"<KpiCard Label=""Revenue"" Value=""$48,290"" Delta=""-4.2"" />
<KpiCard Label=""Signups"" Value=""1,204"" Delta=""-12""
         DeltaFormat=""KpiCard.KpiDeltaFormat.Absolute"" />
<KpiCard Label=""Weekly sessions"" Value=""8,492"" Delta=""-0.8"" />";

    private string _kpiBadDirectionCode = @"<KpiCard Label=""Churn rate"" Value=""2.4%"" Delta=""-0.6""
         DeltaPositive=""KpiCard.KpiDeltaDirection.Bad"" />
<KpiCard Label=""Error rate"" Value=""0.12%"" Delta=""0.04""
         DeltaPositive=""KpiCard.KpiDeltaDirection.Bad""
         DeltaFormat=""KpiCard.KpiDeltaFormat.Absolute"" />";

    private string _kpiSparkCode = @"<KpiCard Label=""Page views"" Value=""184,290"" Delta=""6.7"">
    <SparkContent>
        <SparkCard Class=""!p-0 !border-0 !bg-transparent"" Data=""@_sparkA"" />
    </SparkContent>
</KpiCard>";

    private string _sparkCode = @"<SparkCard Label=""Daily active"" Value=""12,402"" Data=""@sparkA"" />
<SparkCard Label=""Revenue"" Value=""$48,290"" Data=""@sparkB"" />
<SparkCard Label=""Avg. load time"" Value=""312ms"" Data=""@sparkC"" />";

    private string _deltaInlineCode = @"<Delta Value=""12.3"" />
<Delta Value=""-4.5"" />
<Delta Value=""0"" />
<Delta Value=""-3.2"" Positive=""Delta.DeltaDirection.Bad"" />
<Delta Value=""15"" Format=""Delta.DeltaFormat.Absolute"" ShowArrow=""false"" />";
}
