@page "/components/sortable"

<PageTitle>Sortable — Lumeo</PageTitle>

<PageHeader Title="Sortable"
            Description="Drag-to-reorder list with keyboard support and animation. Persistable via two-way bound Items." />

<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>Reorderable lists where users need to prioritize or rank items.</li>
        <li>Playlist or queue management with drag-and-drop ordering.</li>
        <li>Form field ordering in builder or configuration interfaces.</li>
        <li>Any list where the sequence matters and users should control the order.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Sortable List" Code="@_basicCode">
        <Stack Class="max-w-sm">
            <SortableList TItem="string" Items="@_tasks" ItemsChanged="@(v => _tasks = v)">
                <ItemTemplate Context="item">
                    <Lumeo.Text Class="text-sm">@item</Lumeo.Text>
                </ItemTemplate>
            </SortableList>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="No Handle (drag entire card)" Code="@_noHandleCode">
        <Stack Class="max-w-sm">
            <SortableList TItem="string" Items="@_items2" ItemsChanged="@(v => _items2 = v)" Handle="false">
                <ItemTemplate Context="item">
                    <Lumeo.Text Class="text-sm">@item</Lumeo.Text>
                </ItemTemplate>
            </SortableList>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Rich Item Template" Code="@_richCode">
        <Stack Class="max-w-sm">
            <SortableList TItem="TaskItem" Items="@_richTasks" ItemsChanged="@(v => _richTasks = v)">
                <ItemTemplate Context="task">
                    <Flex Class="items-center gap-3 w-full">
                        <Flex Class="h-8 w-8 items-center justify-center rounded-full bg-primary/10 shrink-0">
                            <DynamicIcon Name="@task.Icon" Class="h-4 w-4 text-primary" />
                        </Flex>
                        <Stack Gap="0" Class="flex-1 min-w-0">
                            <Lumeo.Text Class="text-sm font-medium">@task.Title</Lumeo.Text>
                            <Lumeo.Text Class="text-xs text-muted-foreground">@task.Assignee</Lumeo.Text>
                        </Stack>
                        <Badge Variant="Badge.BadgeVariant.Secondary">@task.Priority</Badge>
                    </Flex>
                </ItemTemplate>
            </SortableList>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Stack Class="max-w-sm">
            <SortableList TItem="string" Items="@_disabledItems" Disabled="true">
                <ItemTemplate Context="item">
                    <Lumeo.Text Class="text-sm">@item</Lumeo.Text>
                </ItemTemplate>
            </SortableList>
        </Stack>
    </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">SortableList&lt;TItem&gt;</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">Items</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;TItem&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">The list of items to display and reorder.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ItemsChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;List&lt;TItem&gt;&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Fired with the new order after a drop. Use with <code class="text-xs">@@bind-Items</code> for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ItemTemplate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment&lt;TItem&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Template for rendering each list item. Receives the item via the <code class="text-xs">Context</code> attribute.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Handle</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">true</td>
                            <td class="p-3 text-muted-foreground">Show a grip-vertical handle icon. When false, the whole card is the drag target.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</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">Disables all drag interactions and hides the handle icon.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Group</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">—</td>
                            <td class="p-3 text-muted-foreground">Group name — items can be dragged between multiple <code class="text-xs">SortableList</code> instances that share the same group.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">—</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes merged onto the root container.</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/kanban" class="text-primary hover:underline">Kanban</a> — Multi-column drag-and-drop board for workflow visualization.</li>
        <li><a href="/components/list" class="text-primary hover:underline">List</a> — Static ordered or unordered list display.</li>
        <li><a href="/components/tree-view" class="text-primary hover:underline">TreeView</a> — Hierarchical node tree with expand/collapse.</li>
    </ul>
</div>

@code {
    private List<string> _tasks = new() { "Design mockups", "Write tests", "Review PR", "Deploy to staging", "Update docs" };
    private List<string> _items2 = new() { "Item Alpha", "Item Beta", "Item Gamma", "Item Delta" };
    private List<string> _disabledItems = new() { "Cannot drag this", "Or this one", "Locked order" };

    private List<TaskItem> _richTasks = new()
    {
        new("Fix login bug", "Alice", "High", "Bug"),
        new("Build dashboard", "Bob", "Medium", "LayoutDashboard"),
        new("Write API docs", "Carol", "Low", "FileText"),
        new("Performance audit", "Dave", "High", "Zap"),
    };

    private record TaskItem(string Title, string Assignee, string Priority, string Icon);

    private string _basicCode = @"<SortableList TItem=""string"" Items=""@_tasks"" ItemsChanged=""@(v => _tasks = v)"">
    <ItemTemplate Context=""item"">
        <Lumeo.Text Class=""text-sm"">@item</Lumeo.Text>
    </ItemTemplate>
</SortableList>";

    private string _noHandleCode = @"<SortableList TItem=""string"" Items=""@_tasks"" ItemsChanged=""@(v => _tasks = v)"" Handle=""false"">
    <ItemTemplate Context=""item"">
        <Lumeo.Text Class=""text-sm"">@item</Lumeo.Text>
    </ItemTemplate>
</SortableList>";

    private string _richCode = @"<SortableList TItem=""TaskItem"" Items=""@_tasks"" ItemsChanged=""@(v => _tasks = v)"">
    <ItemTemplate Context=""task"">
        <Flex Class=""items-center gap-3 w-full"">
            <DynamicIcon Name=""@task.Icon"" Class=""h-4 w-4 text-primary"" />
            <Stack Gap=""0"" Class=""flex-1"">
                <Lumeo.Text Class=""text-sm font-medium"">@task.Title</Lumeo.Text>
                <Lumeo.Text Class=""text-xs text-muted-foreground"">@task.Assignee</Lumeo.Text>
            </Stack>
            <Badge Variant=""Badge.BadgeVariant.Secondary"">@task.Priority</Badge>
        </Flex>
    </ItemTemplate>
</SortableList>";

    private string _disabledCode = @"<SortableList TItem=""string"" Items=""@_tasks"" Disabled=""true"">
    <ItemTemplate Context=""item"">
        <Lumeo.Text Class=""text-sm"">@item</Lumeo.Text>
    </ItemTemplate>
</SortableList>";
}
