@page "/components/mention"

<PageTitle>Mention — Lumeo</PageTitle>

<PageHeader Title="Mention" Description="A textarea with mention support that shows a dropdown when a trigger character is typed." />

<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>@@user mentions in comments, messages, or chat interfaces</li>
        <li>Tagging team members in collaborative editing tools</li>
        <li>Referencing channels, issues, or documents with custom trigger characters</li>
        <li>Social features that require inline user or entity tagging</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Mention" Code="@_basicCode">
        <Mention @bind-Value="_text1" Options="@_people" Placeholder="Type to mention someone..." Class="max-w-md" />
    </ComponentDemo>

    <ComponentDemo Title="Custom Trigger" Code="@_triggerCode">
        <Mention @bind-Value="_text2" Options="@_channels" Trigger="@('#')" Placeholder="Type # to reference a channel..." Class="max-w-md" />
    </ComponentDemo>

    <ComponentDemo Title="Trigger Character" Description="Switch the trigger character to see different completion lists." Code="@_triggerSwitchCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <Lumeo.Text Size="sm" Weight="medium">Trigger:</Lumeo.Text>
                <Segmented @bind-Value="_mentionTriggerStr">
                    <SegmentedItem Value="@_atTrigger">@_atTrigger</SegmentedItem>
                    <SegmentedItem Value="#">#</SegmentedItem>
                    <SegmentedItem Value="/">/</SegmentedItem>
                </Segmented>
            </Flex>
            <Mention @bind-Value="_text3"
                     Options="@GetOptionsForTrigger(_mentionTriggerStr)"
                     Trigger="@(_mentionTriggerStr[0])"
                     Placeholder="@($"Type {_mentionTriggerStr} to trigger suggestions...")"
                     Class="max-w-md" />
        </Stack>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Mention</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">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">—</td>
                            <td class="p-3 text-muted-foreground">The textarea content.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Trigger</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">char</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">@@</td>
                            <td class="p-3 text-muted-foreground">Character that triggers the dropdown.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Options</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;MentionOption&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">Available mention options with label, value, optional avatar and description.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnSearch</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback when user types after trigger.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Rows</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">3</td>
                            <td class="p-3 text-muted-foreground">Number of textarea rows.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Two-way binding callback; fires when the text changes.</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 user interaction.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Placeholder</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">Placeholder text when the field is empty.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Required</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">Marks the field as required. Syncs with a parent FormField.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Invalid</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">Applies error styling. Syncs with a parent FormField.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ErrorText</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">Error message displayed below the field when Invalid is true.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">HelperText</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">Helper text shown below the field when not invalid.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Label</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">Label rendered above the field (standalone, without FormField).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Name</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">HTML name attribute for form submission.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">FormField</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">FormField.FormFieldContext?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; wires label, validation, and required state automatically.</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/textarea" class="text-primary hover:underline">Textarea</a> — Basic multi-line text input without mention support</li>
        <li><a href="/components/combobox" class="text-primary hover:underline">Combobox</a> — Searchable dropdown for standalone entity selection</li>
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Single-line text input for simpler text fields</li>
    </ul>
</div>

@code {
    private string? _text1;
    private string? _text2;

    private List<Mention.MentionOption> _people = new()
    {
        new("Alice Johnson", "alice", Description: "Engineering"),
        new("Bob Smith", "bob", Description: "Marketing"),
        new("Carol White", "carol", Description: "Design"),
        new("David Brown", "david", Description: "Sales"),
    };

    private List<Mention.MentionOption> _channels = new()
    {
        new("general", "general"),
        new("engineering", "engineering"),
        new("design", "design"),
        new("random", "random"),
    };

    private string? _text3;
    private string _mentionTriggerStr = "@";
    private const string _atTrigger = "@";

    private List<Mention.MentionOption> _commands = new()
    {
        new("help", "help", Description: "Show help"),
        new("search", "search", Description: "Search content"),
        new("settings", "settings", Description: "Open settings"),
        new("logout", "logout", Description: "Sign out"),
    };

    private List<Mention.MentionOption> GetOptionsForTrigger(string trigger) => trigger switch
    {
        "#" => _channels,
        "/" => _commands,
        _ => _people,
    };

    private string _triggerSwitchCode = @"<Segmented @bind-Value=""_mentionTriggerStr"">
    <SegmentedItem Value=""@"">@@</SegmentedItem>
    <SegmentedItem Value=""#"">#</SegmentedItem>
    <SegmentedItem Value=""/""> /</SegmentedItem>
</Segmented>

<Mention @bind-Value=""_text""
         Options=""@GetOptionsForTrigger(_mentionTriggerStr)""
         Trigger=""@(_mentionTriggerStr[0])""
         Placeholder=""@($\""Type {_mentionTriggerStr} to trigger suggestions...\"")"" />

@code {
    private string _mentionTriggerStr = ""@"";
    private string? _text;
}";

    private string _basicCode = @"<Mention @bind-Value=""_text"" Options=""@_people"" Placeholder=""Type @@ to mention..."" />";
    private string _triggerCode = @"<Mention @bind-Value=""_text"" Options=""@_channels"" Trigger='#' />";
}
