@page "/components/kbd"

<PageTitle>Kbd — Lumeo</PageTitle>

<PageHeader Title="Kbd" Description="Display keyboard shortcuts and register global hotkeys." />

<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>Displaying keyboard shortcuts in menus, tooltips, or documentation</li>
        <li>Documenting keybindings in help pages or onboarding guides</li>
        <li>Registering global hotkeys for power-user workflows</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Flex Align="center" Gap="4">
            <Flex Align="center" Gap="1">
                <Kbd>Ctrl</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd>K</Kbd>
            </Flex>
            <Flex Align="center" Gap="1">
                <Kbd>Ctrl</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd>Shift</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd>P</Kbd>
            </Flex>
            <Kbd>Esc</Kbd>
            <Kbd>Enter</Kbd>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Sizes" Code="@_sizesCode">
        <Flex Align="center" Gap="6">
            <Flex Align="center" Gap="1">
                <Lumeo.Text As="span" Size="sm" Color="muted" Class="mr-1">Small:</Lumeo.Text>
                <Kbd Size="Kbd.KbdSize.Sm">Ctrl</Kbd>
                <Lumeo.Text As="span" Size="xs" Color="muted">+</Lumeo.Text>
                <Kbd Size="Kbd.KbdSize.Sm">S</Kbd>
            </Flex>
            <Flex Align="center" Gap="1">
                <Lumeo.Text As="span" Size="sm" Color="muted" Class="mr-1">Default:</Lumeo.Text>
                <Kbd>Ctrl</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd>S</Kbd>
            </Flex>
            <Flex Align="center" Gap="1">
                <Lumeo.Text As="span" Size="sm" Color="muted" Class="mr-1">Large:</Lumeo.Text>
                <Kbd Size="Kbd.KbdSize.Lg">Ctrl</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd Size="Kbd.KbdSize.Lg">S</Kbd>
            </Flex>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="In Context" Code="@_contextCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Flex Align="center" Justify="between" Class="rounded-md border border-border/40 px-3 py-2">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Open command palette</Lumeo.Text>
                    <Flex Align="center" Gap="1">
                        <Kbd>Ctrl</Kbd>
                        <Lumeo.Text As="span" Size="xs" Color="muted">+</Lumeo.Text>
                        <Kbd>K</Kbd>
                    </Flex>
                </Flex>
                <Flex Align="center" Justify="between" Class="rounded-md border border-border/40 px-3 py-2">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Search</Lumeo.Text>
                    <Flex Align="center" Gap="1">
                        <Kbd>Ctrl</Kbd>
                        <Lumeo.Text As="span" Size="xs" Color="muted">+</Lumeo.Text>
                        <Kbd>F</Kbd>
                    </Flex>
                </Flex>
                <Flex Align="center" Justify="between" Class="rounded-md border border-border/40 px-3 py-2">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Save</Lumeo.Text>
                    <Flex Align="center" Gap="1">
                        <Kbd>Ctrl</Kbd>
                        <Lumeo.Text As="span" Size="xs" Color="muted">+</Lumeo.Text>
                        <Kbd>S</Kbd>
                    </Flex>
                </Flex>
                <Flex Align="center" Justify="between" Class="rounded-md border border-border/40 px-3 py-2">
                    <Lumeo.Text As="span" Size="sm" Color="muted">Close</Lumeo.Text>
                    <Kbd>Esc</Kbd>
                </Flex>
            </Stack>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Size — interactive" Code="@_sizeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see it applied live.</Lumeo.Text>
            <Flex Gap="2">
                @foreach (var s in new[] { Kbd.KbdSize.Sm, Kbd.KbdSize.Default, Kbd.KbdSize.Lg })
                {
                    var size = s;
                    <Button Size="Button.ButtonSize.Sm"
                            Variant="@(_kbdSize == size ? Button.ButtonVariant.Default : Button.ButtonVariant.Outline)"
                            OnClick="@(() => _kbdSize = size)">@size</Button>
                }
            </Flex>
            <Flex Align="center" Gap="1">
                <Kbd Size="@_kbdSize">Ctrl</Kbd>
                <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                <Kbd Size="@_kbdSize">K</Kbd>
            </Flex>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Keyboard Shortcut Service" Code="@_serviceCode">
        <Container MaxWidth="lg" Center="false" Padding="">
            <Stack Gap="4">
                <Alert ShowIcon="false">
                    <Flex Gap="3">
                        <DynamicIcon Name="Info" Class="h-4 w-4 mt-0.5" />
                        <Stack Gap="1">
                            <Heading Level="5" Class="leading-none tracking-tight">Try it!</Heading>
                            <Lumeo.Text Size="sm">Press <Kbd Size="Kbd.KbdSize.Sm">Ctrl</Kbd> + <Kbd Size="Kbd.KbdSize.Sm">K</Kbd> to trigger the shortcut counter.</Lumeo.Text>
                        </Stack>
                    </Flex>
                </Alert>
                <Flex Align="center" Gap="4">
                    <Flex Align="center" Gap="1">
                        <Kbd>Ctrl</Kbd>
                        <Lumeo.Text As="span" Size="sm" Color="muted">+</Lumeo.Text>
                        <Kbd>K</Kbd>
                    </Flex>
                    <Lumeo.Text As="span" Size="sm" Color="muted">triggered @_count time(s)</Lumeo.Text>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" OnClick="@(() => _count = 0)">Reset</Button>
                </Flex>
            </Stack>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="kbd" Level="3" Class="mt-8 scroll-mt-20">Kbd</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Key label text (e.g. "Ctrl", "K").</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Size</TableCell><TableCell Class="font-mono text-xs">KbdSize</TableCell><TableCell Class="font-mono text-xs">Default</TableCell><TableCell>Size of the keyboard key. Values: Sm, Default, Lg.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="keyboardshortcutservice" Level="3" Class="mt-8 scroll-mt-20">KeyboardShortcutService</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Method</TableHead>
                    <TableHead Class="w-[280px]">Signature</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">RegisterAsync</TableCell><TableCell Class="font-mono text-xs">RegisterAsync(keys, callback)</TableCell><TableCell>Registers a keyboard shortcut. Returns IAsyncDisposable to unregister.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/badge" class="text-primary hover:underline">Badge</a> — For labeling and categorizing items with small inline indicators</li>
        <li><a href="/components/tooltip" class="text-primary hover:underline">Tooltip</a> — For showing shortcut hints alongside action descriptions on hover</li>
    </ul>
</div>

@inject Lumeo.Services.KeyboardShortcutService Shortcuts
@implements IAsyncDisposable

@code {
    private Kbd.KbdSize _kbdSize = Kbd.KbdSize.Default;

    private string _sizeInteractiveCode = @"<Kbd Size=""Kbd.KbdSize.Sm"">Ctrl</Kbd>
<Kbd>Ctrl</Kbd>          @* Default *@
<Kbd Size=""Kbd.KbdSize.Lg"">Ctrl</Kbd>";

    private int _count;
    private IAsyncDisposable? _shortcut;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _shortcut = await Shortcuts.RegisterAsync("ctrl+k", () =>
            {
                _count++;
                InvokeAsync(StateHasChanged);
                return Task.CompletedTask;
            });
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_shortcut is not null) await _shortcut.DisposeAsync();
    }

    private string _defaultCode = @"<Flex Align=""center"" Gap=""1"">
    <Kbd>Ctrl</Kbd>
    <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">+</Lumeo.Text>
    <Kbd>K</Kbd>
</Flex>";

    private string _sizesCode = @"<Kbd Size=""Kbd.KbdSize.Sm"">Ctrl</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd Size=""Kbd.KbdSize.Lg"">Ctrl</Kbd>";

    private string _contextCode = @"<Flex Align=""center"" Justify=""between"" Class=""rounded-md border px-3 py-2"">
    <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">Open command palette</Lumeo.Text>
    <Flex Align=""center"" Gap=""1"">
        <Kbd>Ctrl</Kbd>
        <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">+</Lumeo.Text>
        <Kbd>K</Kbd>
    </Flex>
</Flex>";

    private string _serviceCode = @"@inject KeyboardShortcutService Shortcuts
@implements IAsyncDisposable

@code {
    private IAsyncDisposable? _shortcut;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _shortcut = await Shortcuts.RegisterAsync(""ctrl+k"", () =>
            {
                // Handle shortcut
                return Task.CompletedTask;
            });
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_shortcut is not null) await _shortcut.DisposeAsync();
    }
}";
}
