@page "/components/command"

<PageTitle>Command — Lumeo</PageTitle>

<PageHeader Title="Command" Description="A command palette for searching and executing actions." />

<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>Command palettes for power users to quickly find and execute actions</li>
        <li>Search interfaces with categorized, filterable results</li>
        <li>Keyboard-driven navigation for switching between pages or features</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="md" Class="rounded-lg border border-border/40 shadow-md">
            <Command>
                <CommandInput Placeholder="Type a command or search..." />
                <CommandList>
                    <CommandEmpty />
                    <CommandGroup Heading="Suggestions">
                        <CommandItem FilterValue="Calendar">
                            <DynamicIcon Name="Calendar" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Calendar</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Search">
                            <DynamicIcon Name="Search" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Search</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Settings">
                            <DynamicIcon Name="Settings" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Settings</Lumeo.Text>
                        </CommandItem>
                    </CommandGroup>
                    <CommandSeparator />
                    <CommandGroup Heading="Actions">
                        <CommandItem FilterValue="Profile">
                            <DynamicIcon Name="User" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Profile</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Mail">
                            <DynamicIcon Name="Mail" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Mail</Lumeo.Text>
                        </CommandItem>
                    </CommandGroup>
                </CommandList>
            </Command>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Compact" Code="@_compactCode">
        <Container MaxWidth="sm" Class="rounded-lg border border-border/40 shadow-md">
            <Command>
                <CommandInput Placeholder="Search..." />
                <CommandList>
                    <CommandEmpty />
                    <CommandGroup>
                        <CommandItem FilterValue="New File">New File</CommandItem>
                        <CommandItem FilterValue="Open File">Open File</CommandItem>
                        <CommandItem FilterValue="Save">Save</CommandItem>
                    </CommandGroup>
                </CommandList>
            </Command>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Navigation" Code="@_navCode">
        <Container MaxWidth="sm" Class="rounded-lg border border-border/40 shadow-md">
            <Command>
                <CommandInput Placeholder="Go to..." />
                <CommandList>
                    <CommandEmpty />
                    <CommandGroup Heading="Pages">
                        <CommandItem FilterValue="Dashboard">
                            <DynamicIcon Name="House" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Dashboard</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Profile">
                            <DynamicIcon Name="User" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Profile</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Settings">
                            <DynamicIcon Name="Settings" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Settings</Lumeo.Text>
                        </CommandItem>
                    </CommandGroup>
                    <CommandSeparator />
                    <CommandGroup Heading="Recent">
                        <CommandItem FilterValue="Notifications">
                            <DynamicIcon Name="Bell" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Notifications</Lumeo.Text>
                        </CommandItem>
                        <CommandItem FilterValue="Messages">
                            <DynamicIcon Name="Mail" Class="mr-2 h-4 w-4" />
                            <Lumeo.Text As="span">Messages</Lumeo.Text>
                        </CommandItem>
                    </CommandGroup>
                </CommandList>
            </Command>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Shortcuts" Code="@_shortcutCode">
        <Command Class="rounded-lg border border-border/40 shadow-md w-full max-w-md">
            <CommandInput Placeholder="Type a command..." />
            <CommandList>
                <CommandEmpty />
                <CommandGroup Heading="Actions">
                    <CommandItem Shortcut="Ctrl+N" FilterValue="New File">New File</CommandItem>
                    <CommandItem Shortcut="Ctrl+S" FilterValue="Save">Save</CommandItem>
                    <CommandItem Shortcut="Ctrl+Shift+P" FilterValue="Command Palette">Command Palette</CommandItem>
                </CommandGroup>
                <CommandGroup Heading="Navigation">
                    <CommandItem Shortcut="Ctrl+1" FilterValue="Go to Dashboard">Go to Dashboard</CommandItem>
                    <CommandItem Shortcut="Ctrl+2" FilterValue="Go to Settings">Go to Settings</CommandItem>
                </CommandGroup>
            </CommandList>
        </Command>
    </ComponentDemo>
</Stack>

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

    <Heading Id="command" Level="3" Class="mt-8 scroll-mt-20">Command</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>Command palette content (input, list, groups).</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="commandinput" Level="3" Class="mt-8 scroll-mt-20">CommandInput</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">Placeholder</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">"Type a command or search..."</TableCell><TableCell>Placeholder text for the search input.</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="commandlist" Level="3" Class="mt-8 scroll-mt-20">CommandList</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>Scrollable list of command groups and items.</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="commandgroup" Level="3" Class="mt-8 scroll-mt-20">CommandGroup</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>Group items.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Heading</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Optional heading label displayed above the group items.</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="commanditem" Level="3" Class="mt-8 scroll-mt-20">CommandItem</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>Item content (icon and label).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OnSelect</TableCell><TableCell Class="font-mono text-xs">EventCallback</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the item is selected.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the item.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Shortcut</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Keyboard shortcut displayed as Kbd badges on the right.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">FilterValue</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Text used for filtering. Items without a FilterValue are always visible.</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="commandempty" Level="3" Class="mt-8 scroll-mt-20">CommandEmpty</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>Custom empty state content. Defaults to "No results found."</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="commandseparator" Level="3" Class="mt-8 scroll-mt-20">CommandSeparator</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">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>
</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/select" class="text-primary hover:underline">Select</a> — For choosing a single value from a predefined list</li>
        <li><a href="/components/combobox" class="text-primary hover:underline">Combobox</a> — For searchable dropdown selection with autocomplete</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — For contextual action menus triggered by a button</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<Command>
    <CommandInput Placeholder=""Type a command or search..."" />
    <CommandList>
        <CommandGroup Heading=""Suggestions"">
            <CommandItem>
                <Blazicon Svg=""Lucide.Calendar"" class=""mr-2 h-4 w-4"" />
                <span>Calendar</span>
            </CommandItem>
            <CommandItem>
                <Blazicon Svg=""Lucide.Settings"" class=""mr-2 h-4 w-4"" />
                <span>Settings</span>
            </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup Heading=""Actions"">
            <CommandItem>
                <Blazicon Svg=""Lucide.User"" class=""mr-2 h-4 w-4"" />
                <span>Profile</span>
            </CommandItem>
        </CommandGroup>
    </CommandList>
</Command>";

    private string _compactCode = @"<Command>
    <CommandInput Placeholder=""Search..."" />
    <CommandList>
        <CommandGroup>
            <CommandItem>New File</CommandItem>
            <CommandItem>Open File</CommandItem>
            <CommandItem>Save</CommandItem>
        </CommandGroup>
    </CommandList>
</Command>";

    private string _navCode = @"<Command>
    <CommandInput Placeholder=""Go to..."" />
    <CommandList>
        <CommandGroup Heading=""Pages"">
            <CommandItem>
                <Blazicon Svg=""Lucide.House"" class=""mr-2 h-4 w-4"" />
                <span>Dashboard</span>
            </CommandItem>
            <CommandItem>
                <Blazicon Svg=""Lucide.User"" class=""mr-2 h-4 w-4"" />
                <span>Profile</span>
            </CommandItem>
            <CommandItem>
                <Blazicon Svg=""Lucide.Settings"" class=""mr-2 h-4 w-4"" />
                <span>Settings</span>
            </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup Heading=""Recent"">
            <CommandItem>
                <Blazicon Svg=""Lucide.Bell"" class=""mr-2 h-4 w-4"" />
                <span>Notifications</span>
            </CommandItem>
            <CommandItem>
                <Blazicon Svg=""Lucide.Mail"" class=""mr-2 h-4 w-4"" />
                <span>Messages</span>
            </CommandItem>
        </CommandGroup>
    </CommandList>
</Command>";

    private string _shortcutCode = @"<Command Class=""rounded-lg border shadow-md w-full max-w-md"">
    <CommandInput Placeholder=""Type a command..."" />
    <CommandList>
        <CommandGroup Heading=""Actions"">
            <CommandItem Shortcut=""Ctrl+N"">New File</CommandItem>
            <CommandItem Shortcut=""Ctrl+S"">Save</CommandItem>
            <CommandItem Shortcut=""Ctrl+Shift+P"">Command Palette</CommandItem>
        </CommandGroup>
        <CommandGroup Heading=""Navigation"">
            <CommandItem Shortcut=""Ctrl+1"">Go to Dashboard</CommandItem>
            <CommandItem Shortcut=""Ctrl+2"">Go to Settings</CommandItem>
        </CommandGroup>
    </CommandList>
</Command>";
}
