@page "/components/highlighter"

<PageTitle>Highlighter — Lumeo</PageTitle>

<PageHeader Title="Highlighter" Description="Wraps occurrences of one or more search terms within text with a highlight mark." />

<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>Visually mark search matches within a block of text or list of results.</li>
        <li>Highlight keywords in a read-only preview or document viewer.</li>
        <li>Combine with a search input to give real-time match feedback.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Single Term" Code="@_singleCode">
        <Highlighter Text="The quick brown fox jumps over the lazy dog" Highlight="fox" />
    </ComponentDemo>

    <ComponentDemo Title="Multiple Terms" Code="@_multipleCode">
        <Highlighter Text="React, Angular, and Blazor are popular UI frameworks"
                     HighlightTerms="@(new[] { "React", "Angular", "Blazor" })" />
    </ComponentDemo>

    <ComponentDemo Title="Case Sensitive" Code="@_caseCode">
        <Stack Gap="2">
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-1 block">Case-insensitive (default): matches "blazor" → highlights "Blazor"</Lumeo.Text>
                <Highlighter Text="Blazor is awesome. blazor runs on .NET." Highlight="blazor" />
            </div>
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-1 block">Case-sensitive: only exact "Blazor" matched</Lumeo.Text>
                <Highlighter Text="Blazor is awesome. blazor runs on .NET." Highlight="Blazor" CaseSensitive="true" />
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Whole Word" Code="@_wholeWordCode">
        <Stack Gap="2">
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-1 block">Default: partial matches included</Lumeo.Text>
                <Highlighter Text="highlight highlighting highlighted" Highlight="highlight" />
            </div>
            <div>
                <Lumeo.Text Size="xs" Color="muted" Class="mb-1 block">Whole word: only standalone "highlight"</Lumeo.Text>
                <Highlighter Text="highlight highlighting highlighted" Highlight="highlight" WholeWord="true" />
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Interactive Search" Code="@_interactiveCode">
        <Stack Gap="3" Class="max-w-lg">
            <Input Placeholder="Type to search..." @bind-Value="_searchTerm" />
            <div class="p-4 rounded-lg border border-border/40 bg-card text-sm text-foreground leading-relaxed">
                <Highlighter Text="@_sampleText" Highlight="@_searchTerm" />
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Highlight Style" Code="@_customStyleCode">
        <Highlighter Text="The quick brown fox jumps over the lazy dog"
                     Highlight="fox"
                     HighlightClass="bg-primary/20 text-primary font-semibold" />
    </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 colspan="2"><Lumeo.Text Size="sm" Color="muted">Highlighter is a display-only component and has no keyboard interactions.</Lumeo.Text></TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack>
        <Heading Level="3" Class="mb-3">Highlighter</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">Text</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 source text to render and search within.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Highlight</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">A single term to highlight. Combined with HighlightTerms.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">HighlightTerms</td><td class="p-3 font-mono text-xs text-muted-foreground">IEnumerable&lt;string&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Multiple terms to highlight. Longest match wins when terms overlap.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">CaseSensitive</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">Perform case-sensitive matching.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">WholeWord</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">Only match whole words (adds word boundary anchors).</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">HighlightClass</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">Extra CSS classes applied to the &lt;mark&gt; element. Default style: bg-warning/30 text-foreground rounded-sm px-0.5.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Tag</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">"mark"</td><td class="p-3 text-muted-foreground">HTML element used to wrap matches. Defaults to &lt;mark&gt;.</td></tr>
                </tbody>
            </table>
        </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/command" class="text-primary hover:underline">Command</a> — Command palette with built-in search highlighting.</li>
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Use as the search input driving the highlight term.</li>
    </ul>
</div>

@code {
    private string _searchTerm = "";

    private string _sampleText =
        "Blazor is a free and open-source web framework that enables developers to create " +
        "web apps using C# and HTML. Blazor uses .NET for server-side code and WebAssembly " +
        "for client-side code, allowing C# code to run directly in the browser.";

    private string _singleCode = @"<Highlighter Text=""The quick brown fox jumps over the lazy dog"" Highlight=""fox"" />";

    private string _multipleCode = "<Highlighter Text=\"React, Angular, and Blazor are popular UI frameworks\"\n" +
                                   "             HighlightTerms=\"@(new[] { \\\"React\\\", \\\"Angular\\\", \\\"Blazor\\\" })\" />";

    private string _caseCode = @"<!-- Case insensitive (default) -->
<Highlighter Text=""Blazor is awesome. blazor runs on .NET."" Highlight=""blazor"" />

<!-- Case sensitive -->
<Highlighter Text=""Blazor is awesome. blazor runs on .NET."" Highlight=""Blazor"" CaseSensitive=""true"" />";

    private string _wholeWordCode = @"<!-- Partial matches -->
<Highlighter Text=""highlight highlighting highlighted"" Highlight=""highlight"" />

<!-- Whole word only -->
<Highlighter Text=""highlight highlighting highlighted"" Highlight=""highlight"" WholeWord=""true"" />";

    private string _interactiveCode = @"<Input Placeholder=""Type to search..."" @bind-Value=""_searchTerm"" />
<Highlighter Text=""@sampleText"" Highlight=""@_searchTerm"" />";

    private string _customStyleCode = @"<Highlighter Text=""The quick brown fox..."" Highlight=""fox""
             HighlightClass=""bg-primary/20 text-primary font-semibold"" />";
}
