@page "/components/statistic"

<PageTitle>Statistic — Lumeo</PageTitle>

<PageHeader Title="Statistic" Description="Displays a metric value with optional title, prefix, suffix, and trend indicator." />

<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>KPI dashboards displaying key business metrics at a glance</li>
        <li>Data summaries with numeric values and optional trend indicators</li>
        <li>Metric displays showing counts, percentages, or currency values</li>
        <li>Overview panels where numbers need prefix/suffix formatting</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Statistics" Code="@_codeBasic">
        <Grid Columns="4" Gap="6">
            <Statistic Title="Total Users" Value="12,847" />
            <Statistic Title="Revenue" Value="48250" Precision="2">
                <Prefix><Lumeo.Text As="span">$</Lumeo.Text></Prefix>
            </Statistic>
            <Statistic Title="Growth" Value="23.6" ShowTrend="true" TrendValue="12%" TrendDirection="Statistic.TrendType.Up">
                <Suffix><Lumeo.Text As="span">%</Lumeo.Text></Suffix>
            </Statistic>
            <Statistic Title="Bounce Rate" Value="4.2" ShowTrend="true" TrendValue="0.8%" TrendDirection="Statistic.TrendType.Down">
                <Suffix><Lumeo.Text As="span">%</Lumeo.Text></Suffix>
            </Statistic>
        </Grid>
    </ComponentDemo>

    <ComponentDemo Title="With Trend" Code="@_codeTrend">
        <Flex Gap="8">
            <Statistic Title="Sales" Value="1,234" ShowTrend="true" TrendValue="+12.5%" TrendDirection="Statistic.TrendType.Up" />
            <Statistic Title="Returns" Value="42" ShowTrend="true" TrendValue="-3.2%" TrendDirection="Statistic.TrendType.Down" />
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Size (interactive)" Code="@_codeSizeInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch size to see how the metric scales.</Lumeo.Text>
            <Segmented @bind-Value="_statSize">
                <SegmentedItem Value="Small">Small</SegmentedItem>
                <SegmentedItem Value="Medium">Medium</SegmentedItem>
                <SegmentedItem Value="Large">Large</SegmentedItem>
            </Segmented>
            <Statistic Title="Monthly Revenue" Value="48,290" Size="@_statSizeEnum" ShowTrend="true" TrendValue="+12%" TrendDirection="Statistic.TrendType.Up">
                <Prefix><Lumeo.Text As="span">$</Lumeo.Text></Prefix>
            </Statistic>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)" Code="@_codeVariantInteractive">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch variant to compare Default, Minimal, and Bordered styling.</Lumeo.Text>
            <Segmented @bind-Value="_statVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Minimal">Minimal</SegmentedItem>
                <SegmentedItem Value="Bordered">Bordered</SegmentedItem>
            </Segmented>
            <Grid Columns="3" Gap="4">
                <Statistic Title="Users" Value="12,847" Variant="@_statVariantEnum" />
                <Statistic Title="Revenue" Value="48,290" Variant="@_statVariantEnum" ShowTrend="true" TrendValue="+8%" TrendDirection="Statistic.TrendType.Up">
                    <Prefix><Lumeo.Text As="span">$</Lumeo.Text></Prefix>
                </Statistic>
                <Statistic Title="Churn" Value="2.1" Variant="@_statVariantEnum" ShowTrend="true" TrendValue="-0.3%" TrendDirection="Statistic.TrendType.Down">
                    <Suffix><Lumeo.Text As="span">%</Lumeo.Text></Suffix>
                </Statistic>
            </Grid>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</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">Title</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 displayed 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 displayed value.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Prefix</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">Content shown before the value (e.g., currency symbol).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Suffix</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">Content shown after the value (e.g., unit).</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">Precision</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">Decimal precision for numeric formatting.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">ShowTrend</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">Show the trend indicator.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">TrendValue</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">Text displayed next to the trend arrow.</td></tr>
                <tr><td class="p-3 font-mono text-xs text-primary">TrendDirection</td><td class="p-3 font-mono text-xs text-muted-foreground">TrendType</td><td class="p-3 font-mono text-xs text-muted-foreground">Up</td><td class="p-3 text-muted-foreground">Trend direction. Values: Up, Down.</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">StatisticSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Medium</td><td class="p-3 text-muted-foreground">Overall scale of the statistic. 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">StatisticVariant</td><td class="p-3 font-mono text-xs text-muted-foreground">Default</td><td class="p-3 text-muted-foreground">Visual style. Default = plain, Minimal = no background, Bordered = outlined card. Values: Default, Minimal, Bordered.</td></tr>
                <tr>
                    <td class="p-3 font-mono text-xs text-primary">Culture</td>
                    <td class="p-3 font-mono text-xs text-muted-foreground">CultureInfo?</td>
                    <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                    <td class="p-3 text-muted-foreground">Culture used to format the numeric value.</td>
                </tr>
</tbody>
        </table>
    </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/card" class="text-primary hover:underline">Card</a> — Wrap statistics in cards for dashboard layouts</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — Visualize a metric as a progress bar instead of a number</li>
        <li><a href="/components/badge" class="text-primary hover:underline">Badge</a> — Small inline indicators for counts or status</li>
    </ul>
</div>

@code {
    private string _statSize = "Medium";
    private Statistic.StatisticSize _statSizeEnum =>
        Enum.TryParse<Statistic.StatisticSize>(_statSize, out var v) ? v : Statistic.StatisticSize.Medium;
    private string _statVariant = "Default";
    private Statistic.StatisticVariant _statVariantEnum =>
        Enum.TryParse<Statistic.StatisticVariant>(_statVariant, out var v) ? v : Statistic.StatisticVariant.Default;

    private string _codeBasic = @"<Statistic Title=""Total Users"" Value=""12,847"" />
<Statistic Title=""Revenue"" Value=""48250"" Precision=""2"">
    <Prefix><Lumeo.Text As=""span"">$</Lumeo.Text></Prefix>
</Statistic>";

    private string _codeTrend = @"<Statistic Title=""Sales"" Value=""1,234"" ShowTrend=""true"" TrendValue=""+12.5%"" TrendDirection=""Statistic.TrendType.Up"" />
<Statistic Title=""Returns"" Value=""42"" ShowTrend=""true"" TrendValue=""-3.2%"" TrendDirection=""Statistic.TrendType.Down"" />";

    private string _codeSizeInteractive = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""@Statistic.StatisticSize.Small"">Small</SegmentedItem>
    <SegmentedItem Value=""@Statistic.StatisticSize.Medium"">Medium</SegmentedItem>
    <SegmentedItem Value=""@Statistic.StatisticSize.Large"">Large</SegmentedItem>
</Segmented>
<Statistic Title=""Monthly Revenue"" Value=""48,290"" Size=""@_size"" ShowTrend=""true"" TrendValue=""+12%"" TrendDirection=""Statistic.TrendType.Up"">
    <Prefix><Lumeo.Text As=""span"">$</Lumeo.Text></Prefix>
</Statistic>

@code { private Statistic.StatisticSize _size = Statistic.StatisticSize.Medium; }";

    private string _codeVariantInteractive = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""@Statistic.StatisticVariant.Default"">Default</SegmentedItem>
    <SegmentedItem Value=""@Statistic.StatisticVariant.Minimal"">Minimal</SegmentedItem>
    <SegmentedItem Value=""@Statistic.StatisticVariant.Bordered"">Bordered</SegmentedItem>
</Segmented>
<Grid Columns=""3"" Gap=""4"">
    <Statistic Title=""Users"" Value=""12,847"" Variant=""@_variant"" />
    <Statistic Title=""Revenue"" Value=""48,290"" Variant=""@_variant"" ShowTrend=""true"" TrendValue=""+8%"" TrendDirection=""Statistic.TrendType.Up"">
        <Prefix><Lumeo.Text As=""span"">$</Lumeo.Text></Prefix>
    </Statistic>
    <Statistic Title=""Churn"" Value=""2.1"" Variant=""@_variant"" ShowTrend=""true"" TrendValue=""-0.3%"" TrendDirection=""Statistic.TrendType.Down"">
        <Suffix><Lumeo.Text As=""span"">%</Lumeo.Text></Suffix>
    </Statistic>
</Grid>

@code { private Statistic.StatisticVariant _variant = Statistic.StatisticVariant.Default; }";
}
