@page "/components/badge"

<PageTitle>Badge — Lumeo</PageTitle>

<PageHeader Title="Badge" Description="Displays a small status indicator or label." />

<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>Label items with a status such as active, pending, or error</li>
        <li>Show notification counts on icons or navigation items</li>
        <li>Categorize content with color-coded tags</li>
        <li>Highlight priority levels, versions, or feature flags</li>
        <li>Display removable filter chips in search or tag inputs</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Variants" Code="@_variantCode">
        <Flex Wrap="true" Align="center" Gap="2">
            <Badge>Default</Badge>
            <Badge Variant="Badge.BadgeVariant.Secondary">Secondary</Badge>
            <Badge Variant="Badge.BadgeVariant.Outline">Outline</Badge>
            <Badge Variant="Badge.BadgeVariant.Destructive">Destructive</Badge>
            <Badge Variant="Badge.BadgeVariant.Success">Success</Badge>
            <Badge Variant="Badge.BadgeVariant.Warning">Warning</Badge>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Variant (interactive)" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch variant to see the badge update live.</Lumeo.Text>
            <Segmented @bind-Value="_badgeVariant">
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Secondary">Secondary</SegmentedItem>
                <SegmentedItem Value="Outline">Outline</SegmentedItem>
                <SegmentedItem Value="Destructive">Destructive</SegmentedItem>
                <SegmentedItem Value="Success">Success</SegmentedItem>
                <SegmentedItem Value="Warning">Warning</SegmentedItem>
            </Segmented>
            <Flex Align="center" Gap="3">
                <Badge Variant="@_badgeVariantEnum">@_badgeVariant</Badge>
                <Badge Variant="@_badgeVariantEnum" IsDot="true" />
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Usage Examples" Code="@_usageCode">
        <Stack Gap="4">
            <Flex Align="center" Gap="2">
                <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground">Status</Lumeo.Text>
                <Badge Variant="Badge.BadgeVariant.Success">Active</Badge>
            </Flex>
            <Flex Align="center" Gap="2">
                <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground">Priority</Lumeo.Text>
                <Badge Variant="Badge.BadgeVariant.Destructive">High</Badge>
            </Flex>
            <Flex Align="center" Gap="2">
                <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground">Version</Lumeo.Text>
                <Badge Variant="Badge.BadgeVariant.Outline">v1.0.0</Badge>
            </Flex>
            <Flex Align="center" Gap="2">
                <Lumeo.Text As="span" Size="sm" Weight="medium" Color="foreground">Build</Lumeo.Text>
                <Badge Variant="Badge.BadgeVariant.Warning">Pending</Badge>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="In a Card" Code="@_cardCode">
        <Card Class="w-full max-w-sm">
            <CardHeader>
                <Flex Align="center" Justify="between">
                    <Heading Level="3" Size="lg" Class="leading-none tracking-tight">Notifications</Heading>
                    <Badge>3 new</Badge>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted">You have unread messages.</Lumeo.Text>
            </CardHeader>
        </Card>
    </ComponentDemo>

    <ComponentDemo Title="Dot Badge" Code="@_dotCode">
        <Flex Align="center" Gap="4">
            <Stack Class="relative">
                <DynamicIcon Name="Bell" Class="h-5 w-5" />
                <Badge IsDot="true" Class="absolute -top-1 -right-1" />
            </Stack>
            <Stack Class="relative">
                <DynamicIcon Name="Mail" Class="h-5 w-5" />
                <Badge IsDot="true" Variant="Badge.BadgeVariant.Destructive" Class="absolute -top-1 -right-1" />
            </Stack>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Removable Badge" Code="@_removableCode">
        <Flex Wrap="true" Gap="2">
            @foreach (var tag in _tags)
            {
                <Badge IsRemovable="true" OnRemove="@(() => RemoveTag(tag))">@tag</Badge>
            }
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Animated Entrance" Code="@_animatedCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Stack Gap="4">
                <Flex Wrap="true" Align="center" Gap="2">
                    @if (_badgeVisible)
                    {
                        <Badge Animated="true">New</Badge>
                        <Badge Animated="true" Variant="Badge.BadgeVariant.Success">Success</Badge>
                        <Badge Animated="true" Variant="Badge.BadgeVariant.Destructive">Error</Badge>
                    }
                </Flex>
                <Flex Align="center" Gap="2">
                    <Button Size="Button.ButtonSize.Sm" OnClick="() => _badgeVisible = !_badgeVisible">
                        @(_badgeVisible ? "Hide badges" : "Show badges")
                    </Button>
                    <Lumeo.Text Size="xs" Color="muted">Each toggle remounts the badges, replaying the pop-in.</Lumeo.Text>
                </Flex>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Counter with Animated Badge" Code="@_counterCode">
        <Container MaxWidth="md" Center="false" Padding="">
            <Flex Align="center" Gap="3">
                <Button Size="Button.ButtonSize.Sm" OnClick="() => _notificationCount++">
                    <Blazicon Svg="Lucide.Bell" class="h-3.5 w-3.5 mr-2" />
                    Add notification
                </Button>
                <Stack Class="relative">
                    <DynamicIcon Name="Bell" Class="h-5 w-5" />
                    @if (_notificationCount > 0)
                    {
                        <Badge @key="_notificationCount" Animated="true" Variant="Badge.BadgeVariant.Destructive" Class="absolute -top-2 -right-2 min-w-[1.25rem] justify-center px-1">
                            @_notificationCount
                        </Badge>
                    }
                </Stack>
                @if (_notificationCount > 0)
                {
                    <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Ghost" OnClick="() => _notificationCount = 0">Clear</Button>
                }
            </Flex>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move focus to the remove button when the badge is removable</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Activate the remove button to dismiss the badge</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Backspace</Kbd></TableCell><TableCell>Remove the badge when focused (removable badges)</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
    <Lumeo.Text Size="sm" Color="muted" Class="mt-2">Non-removable badges are display-only and have no keyboard interactions.</Lumeo.Text>
</div>

<!-- 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">Badge</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">Variant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">BadgeVariant</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Default</td>
                            <td class="p-3 text-muted-foreground">Visual style of the badge. Values: Default, Secondary, Destructive, Outline, Success, Warning.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsDot</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 as a small dot indicator without text content.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsRemovable</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, displays a remove button inside the badge.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnRemove</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the remove button is clicked.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Animated</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, the badge plays a one-shot pop-in (scale + opacity) entrance animation on mount.</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 slot rendered before the label (icon).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Pulse</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">Adds a subtle pulsing animation to draw attention.</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/alert" class="text-primary hover:underline">Alert</a> — Use for prominent inline messages instead of small status indicators</li>
        <li><a href="/components/toggle" class="text-primary hover:underline">Toggle</a> — Use when a badge-like element needs to be toggled on or off</li>
        <li><a href="/components/tooltip" class="text-primary hover:underline">Tooltip</a> — Use to provide additional context on hover for a badge</li>
    </ul>
</div>

@code {
    private string _badgeVariant = "Default";
    private Badge.BadgeVariant _badgeVariantEnum =>
        Enum.TryParse<Badge.BadgeVariant>(_badgeVariant, out var v) ? v : Badge.BadgeVariant.Default;

    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variant"">
    <SegmentedItem Value=""@Badge.BadgeVariant.Default"">Default</SegmentedItem>
    <SegmentedItem Value=""@Badge.BadgeVariant.Secondary"">Secondary</SegmentedItem>
    <SegmentedItem Value=""@Badge.BadgeVariant.Outline"">Outline</SegmentedItem>
    <SegmentedItem Value=""@Badge.BadgeVariant.Destructive"">Destructive</SegmentedItem>
    <SegmentedItem Value=""@Badge.BadgeVariant.Success"">Success</SegmentedItem>
    <SegmentedItem Value=""@Badge.BadgeVariant.Warning"">Warning</SegmentedItem>
</Segmented>
<Badge Variant=""@_variant"">@_variant.ToString()</Badge>

@code { private Badge.BadgeVariant _variant = Badge.BadgeVariant.Default; }";

    private string _variantCode = @"<Badge>Default</Badge>
<Badge Variant=""Badge.BadgeVariant.Secondary"">Secondary</Badge>
<Badge Variant=""Badge.BadgeVariant.Outline"">Outline</Badge>
<Badge Variant=""Badge.BadgeVariant.Destructive"">Destructive</Badge>
<Badge Variant=""Badge.BadgeVariant.Success"">Success</Badge>
<Badge Variant=""Badge.BadgeVariant.Warning"">Warning</Badge>";

    private string _usageCode = @"<Flex Align=""center"" Gap=""2"">
    <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">Status</Lumeo.Text>
    <Badge Variant=""Badge.BadgeVariant.Success"">Active</Badge>
</Flex>
<Flex Align=""center"" Gap=""2"">
    <Lumeo.Text As=""span"" Size=""sm"" Weight=""medium"">Priority</Lumeo.Text>
    <Badge Variant=""Badge.BadgeVariant.Destructive"">High</Badge>
</Flex>";

    private string _cardCode = @"<Card>
    <CardHeader>
        <Flex Align=""center"" Justify=""between"">
            <Heading Level=""3"" Size=""lg"">Notifications</Heading>
            <Badge>3 new</Badge>
        </Flex>
        <Lumeo.Text Size=""sm"" Color=""muted"">You have unread messages.</Lumeo.Text>
    </CardHeader>
</Card>";

    private List<string> _tags = new() { "Blazor", "C#", ".NET", "Tailwind" };
    private bool _badgeVisible = true;
    private int _notificationCount = 1;

    private void RemoveTag(string tag) => _tags.Remove(tag);

    private string _dotCode = @"<Stack Class=""relative"">
    <Blazicon Svg=""Lucide.Bell"" class=""h-5 w-5"" />
    <Badge IsDot=""true"" Class=""absolute -top-1 -right-1"" />
</Stack>
<Stack Class=""relative"">
    <Blazicon Svg=""Lucide.Mail"" class=""h-5 w-5"" />
    <Badge IsDot=""true"" Variant=""Badge.BadgeVariant.Destructive"" Class=""absolute -top-1 -right-1"" />
</Stack>";

    private string _animatedCode = @"@if (_badgeVisible)
{
    <Badge Animated=""true"">New</Badge>
    <Badge Animated=""true"" Variant=""Badge.BadgeVariant.Success"">Success</Badge>
    <Badge Animated=""true"" Variant=""Badge.BadgeVariant.Destructive"">Error</Badge>
}
<Button OnClick=""() => _badgeVisible = !_badgeVisible"">Toggle badges</Button>

@code { private bool _badgeVisible = true; }";

    private string _counterCode = @"<Stack Class=""relative"">
    <Blazicon Svg=""Lucide.Bell"" class=""h-5 w-5"" />
    @if (_notificationCount > 0)
    {
        <Badge @key=""_notificationCount"" Animated=""true""
               Variant=""Badge.BadgeVariant.Destructive""
               Class=""absolute -top-2 -right-2"">
            @_notificationCount
        </Badge>
    }
</Stack>
<Button OnClick=""() => _notificationCount++"">Add notification</Button>

@code { private int _notificationCount = 1; }";

    private string _removableCode = @"@foreach (var tag in _tags)
{
    <Badge IsRemovable=""true"" OnRemove=""@(() => RemoveTag(tag))"">@tag</Badge>
}

@code {
    private List<string> _tags = new() { ""Blazor"", ""C#"", "".NET"", ""Tailwind"" };
    private void RemoveTag(string tag) => _tags.Remove(tag);
}";
}
